teleren/devto huggingface dataset:
Tip of the day: how to edit Ansible Jinja2 templates in JetBrains IDEs
Tags: jinja, ansible, twig, jetbrains
Published: 2021-12-27 13:25:50

---
title: Tip of the day: how to edit Ansible Jinja2 templates in JetBrains IDEs
published: true
date: 2021-12-26 13:36:29 UTC
tags: ['jinja', 'ansible', 'twig', 'jetbrains']
canonical_url: https://blog.riff.org/2021_12_26_tip_of_the_day_how_to_edit_ansible_jinja2_templates_in_jetbrains_ides
---

[Computing](https://blog.riff.org/topic/computing) | [Ansible](https://blog.riff.org/taxonomy/term/246) | [Jinja2](https://blog.riff.org/taxonomy/term/247) | [Twig](https://blog.riff.org/taxonomy/term/248) | [Goland](https://blog.riff.org/taxonomy/term/242) | [phpstorm](https://blog.riff.org/tags/phpstorm)

One annoying missing feature in most JetBrains IDEs is the lack of builtin support for Jinja2 templates, used notably as the Ansible template engine.

One _paid_ solution exists, the [OrchidE](https://plugins.jetbrains.com/plugin/12626-orchide--ansible-language-support) plugin, but there is a free workaround. Can you guess which one ?

One template engine which originally got a lot of inspiration from [Jinja](https://jinja.palletsprojects.com/en/3.0.x/) is the PHP [Twig](https://twig.symfony.com/) engine made popular by Symfony.

Even today, in spite of the divergent evolutions of Jinja 3 and Twig 3, it is close enough in basic syntax for the Twig plugin to be used to edit Ansible Jinja templates. And the JetBrains [Twig plugin](https://plugins.jetbrains.com/plugin/7303-twig) has a very useful feature in the form of "sub-templates". That is, providing syntax support for both the template engine itself (the braces content) and the template destination (YAML, INI, Apache Config, etc).

This relies on having template files named `(file).(target type).twig` : on such files the Twig plugin applies Twig (Jinja) syntax to the braces content and target type syntax to the rest of the file. For example, we could create a `myvhost.apacheconf.twig` file and have it be edited as a "Jinja" template targeting an Apache config file, with the following steps:

1. Go to Preferences / Editor / File Types, add `*.apacheconf` to the _Apache config_ type; validate.
2. Create your Apache vhost template as `my_vhost.j2`.
3. Symlink it to `my_vhost.apacheconf.twig`.
4. Enjoy !

If you don't mind going for a more unusual, but even simpler approach, you can even forego the `*.j2` extension altogether, and name your templates that way, also when referencing them as `template.src` arguments: no symlinks, no problems.

Just don't forget to document why your templates are named that way in your project README file: other devs could be surprised to see that unusual extension.

<section>
  
  

  
</section>
How to spend your first freelance income
Tags: freelancing, career, webdev, beginners
Published: 2021-12-26 13:25:57

This is a very easy question to answer, not all of you will agree with it, as it can vary. But if you have a growth mindset you will at least consider my opinion. One thing I want to clear is that this is my opinion.

Let us get started.

> You should invest your first (maybe second, third, or a portion from all your incomes) in yourself.

What does it mean?

It means that if you are a developer buy some great courses, if you are into physical objects, buy good tools, buy books or whatever that will increase your knowledge and add value to you. Just empower yourself and more money will come to you just because you deserve it. Remember, knowledge gives you the power and as I increased my knowledge I started charging more and more to my clients. Thus resulting in even more money. I started from $5 just like you are starting now. No difference. This is my personal experience and I think it will add value to you. 

Be happy!
See you soon


[![DigitalOcean Referral Badge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/00rcc3tqicv68383vo0r.png)](https://www.digitalocean.com/?refcode=9d6f3f71c1b4&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge)
Affiliate Link☝


**Follow me:**
Hire me: https://www.fiverr.com/saifullah02 (For web development Purposes)
My New Blog: saifullahusmani.blogspot.com I will post the majority of articles on this blog so make sure to follow.

Follow me here: https://dev.to/saifullahusmani
YouTube: http://bit.ly/saifullahusmani (Programming Tutorials Coming Soon).
Frontend Mentor challenge 
Tags: webdev, beginners, css, html
Published: 2021-12-26 13:25:38

I've just completed a front-end coding challenge from @frontendmentor! 🎉

You can see my solution here: https://www.frontendmentor.io/solutions/simple-css-PhmnWtpIV

Any suggestions on how I can improve are welcome!

#FrontendMentor #CodeChallenge
TypeRacer Hack Code
Tags: javascript, programming, html
Published: 2021-12-26 13:07:24

```
var counter = -1;
var firstWord = document.getElementsByClassName("inputPanel")[0].querySelectorAll("span")[0].innerHTML + document.getElementsByClassName("inputPanel")[0].querySelectorAll("span")[1].innerHTML,
restOfText = document.getElementsByClassName("inputPanel")[0].querySelectorAll("span")[2].innerHTML;
var fullText = firstWord.concat(restOfText);
var inputBox = document.getElementsByClassName('txtInput');
(function getString() {
    setTimeout(function() {
        counter++;
        inputBox[0].value += fullText[counter];
        if(counter != fullText.length) {
            getString();
        }
        //adjust the 100 milliseconds for a faster wpm & be undetected by their new system.
    }, 100);
})()
```

Copy the code above ^^ then go to TypeRacer Enter a Race, on your keyboard press ctrl + shift + i to open the console When the game starts(It says GO!), paste the cheat code you just copied in the console and hit enter
- [TypeRacer](https://play.typeracer.com/?universe=lang_id)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yjq627wxm5y506pahr8f.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/04taxm58n1naadkb4h1a.PNG)
Some Concepts of Backend
Published: 2021-12-26 13:01:10

**CRUD Operations:**

CRUD is an acronym that stands for Create, Read, Update and Delete. It refers to the operations implemented by databases. The NoSQL database MongoDB has these operations to create, read, update and delete documents. 
Create Operations: This operation is used to add a new document to a collection. The document can be newly created or inserted into an existing one. If there is no existing collection, then the insert operation creates a new collection. Insert operation basically targets a single collection. The method of inserting document into a collection in MongoDB is - 
	db.collection.insertOne()
	db.collection.insertMany()

Read Operations: This operation is used to retrieve a document from a collection. We can set query filters to identify a specific document. The method of retrieving documents from a collection in MongoDB is - 
	       db.collection.find()

Update Operations: This operation is used to modify an existing document in a collection. Update operation basically targets a single collection. We can specify criteria or filters to identify the specific document to update. The method of updating documents from a collection in MongoDB is - 
	       db.collection.updateOne()
	       db.collection.updateMany()
	       db.collection.replaceOne()

Delete Operations: This operation deletes or removes a document from a collection. Delete operation basically targets a single collection. We can specify criteria or filters to identify the specific document to delete. The method of deleting documents from a collection in MongoDB is - 
	       db.collection.deleteOne()
	       db.collection.deleteMany()


**Mongoose: **

Mongoose is an object data modeling(ODM) library for MongoDB and Nodejs. It is used to manage relationships between data and translate between objects in code and the representation of the objects in MongoDB. It provides schema validation as MongoDB is a schema-less NoSQL database. Everything starts with a schema in Mongoose and each schema maps to a MongoDB collection and the shape of the document is defined within that collection. Example of defining schema in Mongoose:


**Express:**
Express is a Node js web application framework that is equally flexible and minimal. It provides robust set of features for web and mobile applications. It provides a thin layer of features that is based on web application, without obscuring Nodejs features.
Explore react some topics in react:
Published: 2021-12-26 12:53:15


PropTypes:  propTypes means in the component we can write what type of props is this. As a data type is a string, number, boolean, or anything we can pass these props types.

What is the difference between State-props: 
		Props only send the value. It is read-only. can not change the value by props. And we can send anything like hardcoded value, dynamic value, object, function.

State
Props
State can get initial value from parent component
Props also can get initial values from the parent component.
State can not change by parent component 
Props can be changed by parent component
State can set default value in the component.
Props also can set default values in components.
State cab change inside the component 
Props can not be changed inside component.
State can not be changed in child component 
Props can be changed in the child component.



Explain the Component Lifecycle.

=>  Lifecycle method happened three ways
Mounting: In mounting, we maintain some order. These are 
contractor() 
Static getDerivedStateFromPorps()
render()
componentDivMount()

Updating: In updating also maintain some orders. there are 
Static getDerivedStateFromPorps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDivUpdate()

Unmounting: when the component deletes from the DOM. Then it is called 
componentWllUnmount()
4. What is hooks in react?
	Hooks is create a connection with our application to react.
	We use some hooks:
useState: this hook is used to update any value. if anything changes or needs to update 
In the application useState hooks can update this.
useEffect: by this hook, we can load data or fetch data in UI. it’s also like an impure function.if 	
	Loaded data is not loaded from the server it can not be rendered.
	
There are more hooks like this that are building a connection with code and rendering in UI.


5. Virtual DOM and diffing- algorithm?
	Virtual DOM: virtual DOM is most like real DOM.in real DOM we trigger any element by methods like getElementById or getElementByClassName and then change the code. Sometimes if needed to change somewhere then all structures should be changed this was very time-consuming and most difficult. But now VIrtual DOM is made our life easier.
	In virtual DOM initially set a DOM. when we change code then automatically create a new DOM and compare the previous DOM and then update the DOM.this this is created a Tree which is rendered from the root and his parent is app.js. All component is stored in app.js and finally rendered in UI by root. This tree most looks like real DOM. All processes are happened by diff algorithms. It means when anything changes in code then it is compared with virtual DOM and then they create a Diff algorithm. and then reference change or update in UI.
Responsive navbar using React
Tags: react, navbar, bootstrap, reactrouter
Published: 2021-12-26 12:45:55

To create responsive nabar using React, I have used react app created using 
```
npx create-react-app app-name 
```

i have used react bootstrap and react router dom for routing.

For complete tutorial please watch this video :

{% youtube t4Zax3c2TuI %}
How to create DNS Client at  Pure Dart
Tags: dart, dartlang, dns
Published: 2021-12-26 12:39:06

In this series, I'll show you how to create a DNS client from scratch in Dart language.

(1) Dart's Network Byte Order (ASIS OK)
(2) Generate DNS Query (ASIS OK)
(3) PARSE RESPONSE MESSAGE (TODO)
(4) ... 

As a side effect.
Maybe you will be able to read and implement the RFC.


## DNS RFC

https://datatracker.ietf.org/doc/html/rfc1034
https://datatracker.ietf.org/doc/html/rfc1035
https://datatracker.ietf.org/doc/html/rfc3901
https://datatracker.ietf.org/doc/html/rfc8484


## COMPLETE CODE

https://github.com/kyorohiro/dart2.dns
JWT
Published: 2021-12-26 11:59:54

JWT
JWT, or JSON Web Token, is an open standard used to share security information between two parties — a client and a server. JSON items, containing a set of claims, are encoded in each JWT. JWTs are signed with a cryptographic algorithm to ensure that the claims can't be changed after they've been distributed.
How JWT works:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cg51pxm33yksutxouxlt.JPG)
gradient
Tags: codepen
Published: 2021-12-26 11:50:44

but best website for build css gradient : 
`cssgradient.io`

{% codepen https://codepen.io/moonlxght10/pen/BawmMNV %}

to right:
{% codepen https://codepen.io/moonlxght10/pen/dyVZaYv %}

to bottom right:
{% codepen https://codepen.io/moonlxght10/pen/eYGexJO %}

{% codepen https://codepen.io/moonlxght10/pen/rNGYPea %}

3 or more color in gradient :

{% codepen https://codepen.io/moonlxght10/pen/PoJOVNe %}

{% codepen https://codepen.io/moonlxght10/pen/GRMOzqQ %}
What is the Difference between Hashing and Encryption?
Published: 2021-12-26 10:28:49

Hashing, [encryption](https://comparecheapssl.com/basics-of-encryption-types-of-encryption-encryption-algorithm/) these words seem more complex and challenging to understand even when we heard them, right?
 
But don’t worry; there is nothing complicated or complex about them. Hashing and encryption are simply techniques to hide the data from a third party when we are sending it over the network.
 
So you must be a thing if both perform the same function why we need them both? But here comes a tricky part even both techniques do the same function more or less, the usage for each technique is different.
 
Let’s first look at the hashing and what it does?
The hashing technique has three parts the data or we can say input, hash function, or an algorithm for data conversion and output or the data we get after processing with the algorithm.
 
So what hashing does is, it converts large data files into a small one. So again, the question comes it similar to compression of data? The answer is no. Compression is reversible; hashing is not.
Once the data is converted it is very difficult to reverse the process.
 
Let’s take an example.
You are the General in Military and you get the information through your spy network that your enemy is coming back to your base in a few hours so you must relocate your position with all the important data.
 
Now, what will you do? How can you transfer such sensitive data you have collected and stored so far with an open network with just a few hours left? And that’s where hashing comes to play.
 
In this situation, you put your data into a hashing algorithm and send it to the command base so even if the enemy somehow gets hold of your data all they can see is just numbers and letters. And your data transformation also becomes very fast and also required less space to store the data in the command base.
 
So the advantages of hashing are transferring data becomes fast and required less space as the data is now converted into numbers.
[https://comparecheapssl.com/what-is-the-difference-between-hashing-and-encryption/](https://comparecheapssl.com/what-is-the-difference-between-hashing-and-encryption/)
JavaScript  Basics
Published: 2021-12-26 10:12:16

**Truthy and Falsy values in javascript :** 

In javascript falsy values are defined as : 

1. when the condition is  false
2.when value = 0
3. empty string is also a falsy value
4. Null is a falsy value
5. Undefined is also falsy
6. NaN is also falsy


In javascript truthy values are defined as:

1. When the condition is  true
2. Any numbers (negative or positive)
3. Any string including single white space
4.[] an empty array
5. {} an empty object
6. anything that is not falsy will be truthy

                      **Null vs undefined** 

## undefined 
: 
It means a variable is declared, but no value has been assigned a value.
For example,
var demo;
alert(demo); //shows undefined
alert(typeof demo); //shows undefined

## null :
 
Whereas, null in JavaScript is an assignment value. You can assign it to a variable.
For example,
var demo = null;
alert(demo); //shows null
alert(typeof demo); //shows object


## double equal (==) vs triple equal (===) in javascript

== in JavaScript is used for comparing two variables, but it ignores the datatype of the variable. === is used for comparing two variables, but this operator also checks datatype and compares two values.
Visit Now
Published: 2021-12-26 10:00:15

<a href="https://earnlearnduniya.com/how-to-online-earn-money-in-hindi/">How to online earn money in hindi</a>

<a href="https://indianwebsitedeveloper.com/">website developer near me</a> <a href="https://indianwebsitedeveloper.com/">Indian website developers</a> <a href="https://www.freemp4downloader.com/">Free Mp4 Downloader</a> <a href="https://www.freemp4downloader.com/">free video downloader</a> <a href="https://bigseotool.com/">big seo tool adda</a> <a href="https://biolink.bigseotool.com/">Instagram biolink Instagram</a> <a href="https://rankgrowup.com/">Wordpress Themes & Plugins</a> <a href="https://jobfriendy.com/post-new-job/">Job Posting site</a>
Anagram Substrings
Tags: java, algorithms, programming, 100daysofcode
Published: 2021-12-26 09:45:01

# [Description](https://binarysearch.com/problems/Anagram-Substrings)

Given two strings `s0` and `s1`, return the number of substrings where `s1` contains any anagram of `s0`.

**Constraints:** 

- `n ≤ 100,000` where `n` is the length of `s0`
- `m ≤ 100,000` where `m` is the length of `s1`

## Example 1

### Input

```
s0 = "abc"
s1 = "bcabxabc"
```

### Output

```
3
```

### **Explanation**

```
The substrings "bca", "cab" and "abc" of s0 are permutations of "abc".
```

---

---

# Intuition

## **Time Window**

1. the length of window is same as s0
2. so we can init two arrays, one for s0, another for s1
3. and then move s1's window step by step and compare it with s0's window

# Implementation

```java
import java.util.*;

class Solution {
    public int solve(String s0, String s1) {
        int m = s0.length(), n = s1.length();
        if (m > n) {
            return 0;
        }
        int[] freq0 = new int[26], freq1 = new int[26];
        for (int i = 0; i < m; i++) {
            freq0[s0.charAt(i) - 'a']++;
            freq1[s1.charAt(i) - 'a']++;
        }

        int ans = 0;
        if (Arrays.equals(freq0, freq1)) {
            ans++;
        }

        for (int i = m; i < n; i++) {
            freq1[s1.charAt(i) - 'a']++;
            freq1[s1.charAt(i - m) - 'a']--;
            if (Arrays.equals(freq0, freq1)) {
                ans++;
            }
        }

        return ans;
    }
}
```

## Time Complexity

- Time: O(M*N)
- Space: O(1)
Online Travel Technology
Solution for Global Travel Companies
Published: 2021-12-26 09:41:41

[eTraviax](https://www.etraviax.com/) is an innovative company that provides travel technology solutions to the global business. We will help you instrument your ideas and vision with our software, which includes API/XML integration for GDS like Amadeus, Travelport Sabre offers customers real-time availability of fares from many different products at once – it’s never been easier. eTraviax provides highly effective opportunities through its suite of products, including itinerary building & management services as well as automatic notifications when rates change, which helps travelers plan more financially sound trips throughout their lifetime
Create Custom Artisan Command - Laravel
Tags: php, laravel, beginners, programming
Published: 2021-12-26 09:37:01

you will learn how to create a custom artisan command in the Laravel 8 application and use the custom laravel artisan command to generate the test data or user records and insert them into the database
To create a new command, you may use the make:command Artisan command. This command will generate a new command class inside the `app/Console/Commands folder`
```php
php artisan make:command generateUserData
```
you have to go to the `app/Console/Commands/generateUserData.php`
The handle() function holds the logic to run the factory tinker command, manifesting the records in the database
```php
<?php

namespace App\Console\Commands;

use Illuminate\Console\Command;
use App\Models\User;


class generateUserData extends Command
{
    /**
     * The name and signature of the console command.
     *
     * @var string
     */
    protected $signature = 'create:generate-users {count}';

    /**
     * The console command description.
     *
     * @var string
     */
    protected $description = 'Creates test user data and insert into the database.';

    /**
     * Create a new command instance.
     *
     * @return void
     */
    public function __construct()
    {
        parent::__construct();
    }

    /**
     * Execute the console command.
     *
     * @return int
     */
    public function handle()
    {
        $usersData = $this->argument('count');

        for ($i = 0; $i < $usersData; $i++) { 
            User::factory()->create();
        }          
    }
}
```
Run Custom Artisan Command
```php
php artisan create:generate-users 250
```
Finally I invite you to try the next Artisan in the next link in the handle() function and enjoy the results
https://laravel.com/docs/8.x/artisan#writing-output
https://laravel.com/docs/8.x/artisan#tables
https://laravel.com/docs/8.x/artisan#progress-bars

I hope you enjoyed the code.
Software Dependency Management: From Dependabot to Renovate
Tags: javascript, productivity, automation
Published: 2021-12-26 09:29:30

Hey Readers,

Merry Christmas and Happy Holidays 🎉🎄

As software engineering its very important to keep your code up to date with latest updates, fixes, patches and security updates.

Managing dependency updates on many projects / repositories it could be overwhelmingly time-consuming and hard, So I have used dependabot until I have switched recently renovate and couldn’t be happier

## Dependabot
I started using dependabot few years ago and i was very happy using it until 1000000 PRs was open and it becomes very hard to keep track and merge one by one, many folks asked in github about PR grouping feature but it doesn’t seems to be happening soon.
![Dependabot one PR for each updates](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9rh0xhpcjn4cp1r3vb36.png)

## Switch to Renovate
I have switched to renovate recently and never been happier using it, 3 main things i love about it:
- Dependency Dashboard
- One PR to rule them ALL
- Versatile and flexible configuration

![One PR to Manage Minor & Major Dependancy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rq9ve44oebecsbvgklhw.jpg)

Renovate made my update management easy and saved me tons of time going through individual merges!

![Configuration Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mvit6ok0fjnjqp6u97p5.png)

[Check this configuration example to group PRs in renovate
](https://github.com/devmehq/email-validator-js/blob/master/.github/renovate.json)

> Save time, automate everything and Happy coding!

If you like to receive more developer and tech articles update CONNECT with me on: [Twitter](https://twitter.com/meabed) / [Github](https://github.com/meabed/) / [LinkedIn](https://www.linkedin.com/in/mmeabed/)