teleren/devto huggingface dataset:
ansible Lazy Evaluation
Tags: ansible
Published: 2020-06-17 04:00:21

```
frp_version: "{% if frpc_version is defined %}{{ frpc_version.replace('v', '') }}{% elif frps_version is defined %}{{ frps_version.replace('v', '') }}{% endif %}"

frp_release_name: frp_{{frp_version}}_{{frp_os}}_{{frp_arch}}
frp_release_ext: "{{ 'tar.gz' if frp_os == 'linux' else 'zip' }}"
frp_release_url: https://github.com/fatedier/frp/releases/download/v{{frp_version}}/{{frp_release_name}}.{{frp_release_ext}}
```
In same case, the value of frp_version may be empty string, so the value of frp_release_url will not be right,

the playbook later changed the value of frp_version if it is empty, before execute the following code where `frp_release_url` is expected to have the right value

```
- name: Download frp
  unarchive:
    remote_src: yes
    src: "{{ frp_release_url }}"
    dest: "{{ frp_tmp_dir }}"
  environment:
    https_proxy: '{{ frpc_http_proxy|default("") }}'
  when: frpc_outdated or frps_outdated
```
this is called lazy evaluation
jinja2 filter: trim
Tags: ansible, jinja
Published: 2020-06-17 03:41:20


trim(value, chars=None)

    Strip leading and trailing characters, by default whitespace.

```
- name: Check frp outdated
  set_fact:
    frpc_outdated: '{{ frpc_install and (frpc.stdout is not defined or frpc.stdout|trim != frp_version) }}'
    frps_outdated: '{{ frps_install and (frps.stdout is not defined or frps.stdout|trim != frp_version) }}'

```
11 Open Source JavaScript Libraries for Web Developers
Published: 2020-06-18 08:32:23

---
title: 11 Open Source JavaScript Libraries for Web Developers
published: true
date: 2020-06-17 03:24:26 UTC
tags: 
canonical_url: https://www.ma-no.org/en/programming/javascript/11-dynamic-open-source-javascript-libraries-for-web-developers
---

Undoubtedly, JavaScript is one of the most used programming languages nowadays. Thanks to it, we have access to different features offered in the websites we visit regularly and which make our browsing experience much more pleasant, simple and entertaining.The browsers we use have their own JavaScript engines integrated, in order to take full advantage of their benefits and try to offer the user, a higher performance in web applications that implement it in a comprehensive way.User interfaces, dynamic web pages, animations, frameworks for application development that require updating information in real time and many more things are possible with this… !
[Read all](https://www.ma-no.org/en/programming/javascript/11-dynamic-open-source-javascript-libraries-for-web-developers)
CommitSweeper: Pure CSS Game
Tags: showdev, css, webdev
Published: 2020-06-17 03:22:49

A Github graph inspired 💣 Minesweeper-type game.

Click on the squares if you dare - or hover & "paint" the graph of your dreams.

Featuring:
- Pug to generate all those checkboxes
- CSS Grid
- Basic keyframe animation (changes color of the squares)
- An experimental use of [`:focus-within`](https://caniuse.com/#feat=css-focus-within) + the general sibling combination (`~`) to accomplish clearing all squares that follow a discovered 💣 mine
- Sass to randomly select the mine squares which refreshes each page load thanks to the nature of CodePen

> Desktop-only due to lack of hover or a comparable `:touch` selector on mobile, which means adequate touch events would require JS. _If you have a hack around this I'd love to hear it!_

[**Play the fullscreen experience >**](https://codepen.io/5t3ph/full/ExPVEZP)
using python method in ansible Jinja2 context
Tags: ansible
Published: 2020-06-17 03:20:33

```
frpc_install: "{{ role_name.endswith('frpc') }}"
```

frpc_install is a bool, so you can use it in a when conditional statement like this
```
- name: Output frpc version
  debug:
    msg: '{{ frpc.stdout|trim if frpc.stdout is defined else "Not Installed" }}'
  when:
  - frpc_install
```
React Tutorials - Create Youtube Player - 3
Tags: react, javascript, webdev, showdev
Published: 2020-06-17 03:17:34

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zkk3cf68xu46fyjzzj5z.jpeg)

I had recently started my YouTube channel — The Web Dev. I had decided to start putting all my blogs into the YouTube channel.
So, this is from my third blog. And here is my YouTube video.

[![alt text](https://res.cloudinary.com/dxkxvfo2o/image/upload/v1592290455/youtube-player-2_i8k4q0.png)](https://youtu.be/KzculjlVR5s "Create Youtube Player - 3")


Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.

You can also read the complete blog here -

https://thewebdev.tech/create-youtube-player-in-reactjs-part-3
Which video tutorial you recommend to learn HTML, CSS and JavaScript from scratch?
Tags: html, css, beginners, javascript
Published: 2020-06-17 03:09:00

Hi. Hope you are doing well. I tried (unsuccessfully) using books for JavaScript but I realised that perhaps watching someone else code and following along like in a video tutorial may be more helpful while learning JavaScript. Any free video tutorials/courses such as YouTube you know of that teach JavaScript from scratch well (I only know HTML and CSS)? Thanks.
Also I might need to relearn HTML and CSS from scratch, which YouTube tutorials could you point me towards?
Chapter13
Tags: functional, kotlin
Published: 2020-06-17 03:03:08

The "Great FP Terminology Barrier"

"Things that can be mapped over shall be called...Functor"

Combinator: "A style of organizing libraries centered around the idea of combininig things".Like Unix command pipeline ps aux | grep root | wc -l

High-Order-Function: A function that takes other functions as parameters or whose result is a function.

lambda: Annonymous function.

from >>'Functional Programming simplified'.
ansible relative path search order
Tags: ansible
Published: 2020-06-17 02:58:38

[ansible relative path search order](https://github.com/ansible/ansible/issues/14341#issuecomment-234559431)

- relative paths get attempted first with a 'files|templates|vars' in path (if not already present) depending on action being taken, 'files' is the default. (i.e include_vars will use vars/).
- paths will be searched from most specific to most general (i.e role before play).
- dependent roles WILL be traversed (i.e task is in role2, role2 is a dependency of role1, role2 will be looked at first, then role1, then play).
- role search path is rolename/{files|vars|templates}/, rolename/tasks/.
- play search path is playdir/{files|vars|templates}/, playdir/.
- the current working directory (cwd) is not searched. If you see it, it just happens to coincide with one of the paths above.
- include of a task file from a role will NOT trigger role behavior, this only happens when running as a role.
- new ansible_search_path var will have the search path used, in order.
- 5 vs (-vvvvv) should show the detail of the search as it happens.
- this does NOT affect absolute paths
- __includes__ try the path of the included file first and fall back to the play/role that includes them.
How to rename your main Git branch to main
Tags: git, github
Published: 2020-06-17 02:38:17

I've been seeing a lot of talk lately about renaming the default GitHub branch to `main`. I think this is a really good idea! Something simple that promotes inclusion is *always* something that I will support. Thankfully, Git branches are built to make changes like this *extremely easy*. In this (very short) post, I'll show you how to rename your main Git branch to `main`, and how to update the default branch on GitHub. Overall, this should take you about five minutes total. Just five minutes!

# The commands

First, here's the commands to change your default branch name to `main`:

```shell
git branch -m old_branch_name main
git push --set-upstream origin main
```

The first command renames `old_branch_name` (your default branch name here, whatever that may be) to `main`. The next branch pushes that new main branch to the remote. Replace `origin` with whatever remote you use for your main repo host. Once you run these commands, you'll have your brand new `main` branch. Isn't that cool!

# Updating GitHub

If you're using GitHub like I am, then updating your default branch is a little bit more involved. First, navigate to **Your Repo** → **Settings** → **Branches**. There, you should be able to change the default branch to `main`.

If you don't want to keep the old branch name around, you can easily delete it (after all, it was easy enough to create!). Navigate to the root of your repo and click on the branches icon (the one with the number of branches your repo has). You should then be able to delete your old branch name.

Congrats, you've now renamed your default branch to `main`!
How to pre-dimension a 2D array in JavaScript
Tags: javascript, todayilearned
Published: 2020-06-17 02:10:14

I learned how to pre-fill/pre-dimension a 2D array! It was part of an [Exercism](https://exercism.io/my/tracks) challenge. 

I had tried things like 
```javascript
var a = Array(3).fill(Array(2).fill(0))
```
but when you do something like
```javascript
a[0][1] = "dog";
```
you get an array that looks like
```javascript
[[0,"dog"], [0,"dog"], [0,"dog"]]
```
So what one has to do is to `Array(3).fill(0)` and then `.map` the array to another `Array(2).fill(0)` as per the following fragment from my Exercism solution:
```javascript
rotate(array) {
    const [rowMax, colMax] = [array.length, array[0].length];
    const result = Array(colMax)
      .fill(0)
      .map(() => Array(rowMax).fill(0));
    for (let col = 0; col < rowMax; col++) {
      for (let row = 0; row < colMax; row++) {
        result[row][col] = array[col][row];
      }
    }
    return result;
  }
```
specifically the
```javascript
Array(colMax)
      .fill(0)
      .map(() => Array(rowMax).fill(0));
```
part
Usar blender sin la rueda del mouse
Published: 2020-06-17 01:46:32


Muchas veces no contamos con un mouse o trabajamos en un portátil ,pero esto no debe ser un inconveniente para usar Blender , sigue estos pasos :

1. En el menú superior en la categoría **Edit** selecciona **Preferences.**

![](https://cdn-images-1.medium.com/max/2000/1*kE6uEkWsL3PcHQxYtuv7zg.png)

2. Se abrirá una ventana presiona Input en el menú vertical y en la sección Mouse deberás activar la opción de Emulate 3 button mouse ,Esta opción te permitirá emular la rueda del mouse con el teclado y el touch pad.

![](https://cdn-images-1.medium.com/max/2000/1*eLlIoNCMhS2gcNx6ZG8eag.png)

La rueda del mouse permite rotar, desplazar y hacer zoom , para realizar estas acciones sin ella puedes hacerlo de la siguiente manera :

**Rotar :**Presiona la tecla *alt* y presiona el botón izquierdo del touch pad al mismo tiempo.

![](https://cdn-images-1.medium.com/max/2000/1*fEQuzjPfb5vI5kn7cUA-zQ.gif)

**Desplazamiento :**Presiona la tecla *alt , la tecla Shift *y presiona el botón izquierdo del touch pad al mismo tiempo y arrastra.

![](https://cdn-images-1.medium.com/max/2000/1*p3z7LwVw_mY2zNR5DqNB8A.gif)

**Zoom: **Presiona la tecla *alt , la tecla Ctrl *y presiona el botón izquierdo del touch pad y arrastra.

![](https://cdn-images-1.medium.com/max/2000/1*C3U4xzxYlo4aOAtC4VyCRw.gif)
About Double Diamond
Tags: ux, design, webdev, startup
Published: 2020-06-17 01:38:04

**Discover...Define...Develop...Delivery.**
Design thinking is about how to make our daily life better.
When I say: **Discovery**!
I'm teling you: ** Understand research standarts ** is important!
In fact, It helps to understand the problem.
Remember: In the begining of the project **We never know anything**
Choose the better keywords with good meaning to the project (one of many steps).
Expressions, phrases, and  words. (all these things first)
But you still don't really know anything, right?
**Definition** is understand research development.
Ask the questions: What they need?
What we need?
**Take every little insight relevant in the last step.**
Which problem we're solving?
**Develop**: almost everything is possible! Yes!
Now, It's time to put your life experiences aside and think with still more empathy.
Solve problems have to be the most empathic experience of our lifes. You have to take off the *pain* of the problem,
Search a solution that "takes off the pain" in first place.
So..take the insights and get down to business!
**Delivery** your product!
And don't forget... The most important It's not what you delivery by itself, but how and many social impact you're creating. :)
**Thanks for reading!**
Creating Drush commands inside a theme
Tags: drupal, drush, drupaldevelopment
Published: 2020-06-17 01:13:03

One of the greatest things of Drupal is Drush, the command line tool that was created to administer (and develop) Drupal. Out of the box Drush allows you to run a big number of commands to administer your site, from rebuilding caches to generating one time login link and a lot of other stuff.

Something great about Drush is that you can easily provide commands in your module and it even has a generator to scaffold the code you’ll need for your command. You can find more information on how to write a Drush command inside a module in the official documentation. In summary, for Drush >= 9, you need to do:

- Add a couple of lines to composer.json
- Add a drush.services.yml file to provide the services that will bring your commands to life
- Create the commands file

If you do that as expected, your command will be auto-discovered (if the module is enabled) and you’ll be able to use it once you rebuild caches.

However, the above method doesn’t work for disabled modules or for themes (no matter whether they’re enabled or not) because Drush only do auto-discover of commands inside enabled modules. So, if you need to add a command to a theme, you need to do things a little bit different. The following is a list of the key differences.

## Dependency injection is not available

You can’t rely on Drupal to inject the dependencies you declare in the drush.services.yml file so, you can’t receive them in the constructor of your class. Instead of that, you need to rely on `\Drupal::service()` function and be sure that you specify `@bootstrap full` if you need to use dependencies from the services container.

## Autoload should be declared in composer.json

You need to explicitly declare autoload configuration in the composer.json file so that Drush knows how to discover your classes. Add the following snippet to your composer.json (and update as needed):

```
"autoload": {
    "psr-4": {        
        "Drush\\Commands\\my_theme\\": "Commands/my_theme/"        
    }
},
```

## Adapt the path and namespace of your commands file

Following the above example (and assuming your theme is named my_theme), you need to place your command file inside `Commands\my_theme folder` (do not use src folder). Also, the namespace for your class should be `Drush\Commands\my_theme` so that Drush can discover it.

## Invoke the command using the theme path

Final difference is that you need to invoke your command using the path to the theme so that Drush knows where to find the command (remember that it’s not auto-discovered). So, following the above example, you need to run your command like this: `drush — include=docroot/themes/custom/my_theme mycommand`

Creating commands inside Drupal themes is not so frequent in comparison to create them inside Drupal modules, but sometimes you may need to do it (e.g. to publish a contrib theme) so it’s useful to know the key differences to do it properly so that Drush can invoke your command.

I hope this has been useful for you :)
Configuring Jekyll To Create Page Links Without Dates
Tags: jekyll
Published: 2020-06-17 01:04:44

---
title: "Configuring Jekyll To Create Page Links Without Dates"
published: true
description: "Showing how to configure Jekyll to format paths in a cleaner way"
tags: jekyll
canonical_url: "https://thomasstep.com/blog/configuring-jekyll-to-create-page-links-without-dates"
---

I just got done with a refresh to my personal website and blog in an attempt to lighten up the UI. My website is built using Jekyll and GitHub Pages, so changing up the format and configuration is pretty straightforward with all the themes out there. The new theme that I am using is called [Minimal](https://github.com/pages-themes/minimal). I liked the last theme but there was a lot going on that took away from the main information of the site in my opinion. Not to mention all of the images that I used were large, high definition, and slowed the initial load time. I have been wanting to switch to a simpler theme and finally took the time to switch over, which was not near as much of a time commitment as I thought it would be. At the same time, there was something else that was bothering me with my site that I decided to look into and fix; the blog post links. Jekyll works really well out of the box, and I honestly do not have many complaints against it. That being said, some of the paths that Jekyll creates for files that come out of the `_posts/` folder are heavy. For example, one of my old links used to look like this:

```
https://thomasstep.dev/dev/javascript/2019/10/28/splitting-javascript-classes-into-different-files.html
```

Like I said, heavy. Since the theme of the day was lightening everything up, I found a way to reconfigure Jekyll to spit out a link that looks like this:

```
https://thomasstep.dev/blog/splitting-javascript-classes-into-different-files
```

The configuration change was simple as can be. All I did was go into the `_config.yml` file in the root of my Jekyll project and add this chunk

```yml
collections:
  posts:
    output: true
    permalink: /blog/:title
```

After I rebuilt (or pushed to GitHub if you are using GitHub Pages), the static site's file structure updated. This small change makes a huge difference, and I wish I would have looked into figuring it out sooner.
Road to Genius: smart #18
Tags: javascript, beginners, computerscience
Published: 2020-06-17 00:02:09

Each day I solve several coding challenges and puzzles from Codr's ranked mode. The goal is to reach genius rank, along the way I explain how I solve them. You do not need any programming background to get started, and you will learn a ton of new and interesting things as you go.

![coding challenge](https://dev-to-uploads.s3.amazonaws.com/i/jt8kufaeqnxfn6mmdfq6.png)

In this challenge we need to fix three bugs 🐼, 💧 and 💰. The first one 🐼 appears on the first line, it must be a numeric value of the array `arr`. We can't figure out its value without analyzing the code first, so let's proceed.

We notice that the code has a while-loop that iterates as long as the array is not empty (and uses pop to extract values). The if-condition reveals that variable `R` is used to keep track of the largest value, as a result 💧 is most likely `R`. Upon closer inspection, variable `prev` serves no purpose, it's pretty much dead code. Bug 💰 has to be `=`, because the line `prev = x` tracks the "previous" value.

With all of this information we can easily find 🐼: the challenge code is all about finding the largest value in the array. And the challenge states that `R = 9`, since 9 is already in the array, 🐼 can be any numeric value (including 9).

![coding challenge answer](https://dev-to-uploads.s3.amazonaws.com/i/8c8k9dmkwrjqk1udembr.png)

---

Join me on the Road to Genius and upgrade your programming skills, at https://nevolin.be/codr/
How to remove properties or methods from an object in JavaScript?
Tags: javascript
Published: 2020-06-17 00:00:00

---
  title: How to remove properties or methods from an object in JavaScript?
  published: true
  tags: JavaScript
  date: Wed Jun 17 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/delete-properties-methods-objects-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-d968679491e47c4b0b837f7a0d64c615.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/delete-properties-methods-objects-javascript)
  
Properties and methods from an object can be deleted using the `delete` operator

---

We know that we can add properties and methods to an object using the `.` or the `[]` notation.

To delete, there are not any methods in the `Object()` constructor function.

We have to use the `delete` operator.

```javascript
const John = {
  name: "John Doe",
  age: 23,
  bio: "I'm a human",
};
```

Let's now remove the `bio` property from `John` object.

```javascript
const John = {
  name: "John Doe",
  age: 23,
  bio: "I'm a human",
};

// delete bio property
delete John.bio;

/*

Result:
--------

{
    name: "John Doe", 
    age: 23, 
}

*/
```

You have to write the `delete` keyword followed by the property you want to remove.

This applies to remove methods from an object.

```javascript
const John = {
  name: "John Doe",
  age: 23,
  bio: "I'm a human",
  sayHello: () => {
    console.log("Hello!");
  },
};

// delete sayHello function
delete John.sayHello;

/*

Result:
--------

{
    name: "John Doe", 
    age: 23, 
    bio: "I'm a human"
}


*/
```

### Feel free to share if you found this useful 😃.

---
Why do we have leap years?
Published: 2020-06-17 09:11:55

---
title: Why do we have leap years?
date: 2020-06-17 00:00:00 UTC
published: true
tags: 
canonical_url: 
---

## How to check if a year is a leap year?

`(year % 400 === 0 || (year % 4 === 0 && year % 100 !== 0));`

## What it means?

Every 4th year is a leap year, except it’s not every 100th year, except it is every 400th year.

## But, why?

Leap years exist because the Earth rotates about 365.242375 times a year. We have 365 days in a normal year and this leads to 0.242375 days extra. 29th Februrary exists to make up for this fraction.

- So, every 4th year we add an extra day, which makes 366 days that year and 365.25 days on average. Now, we went over the actual figure by 0.007625 days, which is almost a day every 131 years.

- So, every 100 years we need to skip the leap day and that means we have `(366 * 24) + (365 * 76)` per 100 years or 365.24 days per year. We are still lacking 0.002375 days per year. The error is small, almost a day every 421 years. This is still not small enough.

- So, every 400 years we add a leap day, which takes us to `(366 * 97) + (365 * 303)` per 400 years or 365.2425 days per year.

Now the difference is too low and it will take 8000 years when the total difference leads to an error of single day.

## Why not go further?

Due to several reasons like the tidal acceleration of sun and moon which slows the rotation of the earth. The actual rotation time of 365.242375 days will have changed by an amount which can not be accurately predicted. And this is accurate enough for most practical purposes.
Help with Component setup!
Tags: react
Published: 2020-06-16 23:56:08

Hello ! So I have a React question and am trying to figure out the concept of components.

I am working on a project right now. My goal is to have a user enter data on the left side and have it display as a graph on the right side. Right now the entry form is in a div on the left side and the graph display is in a div on the right side. They are both wrapped in a MainContainer component.

My question is this: Should I have each div in a separate component WITHIN the MainContainer component? I’m trying to think ahead about state and props and passing data. Any help would be greatly appreciated because this is my first true solo React project!