teleren/devto huggingface dataset:
Add a class in Nunjucks using a conditional statement
Tags: nunjucks
Published: 2021-02-02 07:58:14

In _Nunjucks_ we can use a conditional statement in two ways:

1. **explicit** using the `{% if %}` keyword,
2. or **implicit** using the `{{ }}` expression.

Note: I did not find any reference about these names – implicit/explicit – in the Nunjucks [official documentation 📚](https://mozilla.github.io/nunjucks/templating.html#if
), I just named to easily distinguish the two syntax in this tutorial 😇.

## Syntax n.1: explicit

Using an explicit `{% if %}` keyword, Nunjucks checks if the condition is met


```html
{% set arr = ['🐱', '🐶', '🐺'] %}

<p>{% if '🐶' in arr %}{% endif %}</p>
```


_HTML output_

```html
<p>true</p>
```

Using this method, we can add an HTML class when a specific condition is met


  ```twig
  {% set arr = ['🐱', '🐶', '🐺'] %}

  <div class="c-animals {% if '🐶' in arr %}has-dog{% endif %}">...</div>
  ```


_HTML output_

```html
<div class="c-animals has-dog">...</div>
```

## Syntax n.2: implicit

Using double curly braces, Nunjucks evalued its content:


```html
{% set arr = ['🐱', '🐶', '🐺'] %}

<p>{{ if '🐶' in arr }}</p>
```


_HTML output_

```html
<p>true</p>
```

Using this method, we can add an HTML class when a specific condition is met


  ```twig
  {% set arr = ['🐱', '🐶', '🐺'] %}

  <div class="c-animals {{ 'has-dog' if '🐶' in arr }}">...</div>
  ```


_HTML output_

```html
<div class="c-animals has-dog">...</div>
```

Note that the HTML output is exactly the same! 🚀

### To sum up


```twig
{% set arr = ['🐱', '🐶', '🐺'] %}

{# 1. explicit #}
<div class="c-animals {% if '🐶' in arr %}has-dog{% endif %}">...</div>

{# 2. implicit #}
<div class="c-animals {{ 'has-dog' if '🐶' in arr }}">...</div>
```


Personally, I use both syntaxes in my Nunjucks files, and to choose which one to use I go with this logic:

- if there is just one condition to met and it is quite simple, I use the _implicit_ syntax
- else I use the _explicit_ one 🤓
A list of videos and posts from the land of Deno (01/01 - 01/31)
Tags: deno
Published: 2021-02-02 07:49:37

🔸▶️ [Deno, a Secure Runtime for JavaScript and TypeScript](https://www.youtube.com/watch?v=428ejtNbd5A) - by Ryan Dahl, creator of Node.js and Deno;

🔸▶️ [Deno in Production, by Brian Leroux](https://www.youtube.com/watch?v=Gk1I3tfNy-A) - the author shares his production experience with Deno;

🔸 [vno: a vue / deno love story](https://itnext.io/vno-a-vue-deno-love-story-a9dd4d130ac7) - the first native build tool for compiling and bundling Vue single-file components;

🔸▶️ [How to Deploy Your Deno Applications to Heroku](https://www.youtube.com/watch?v=htYWd8HVOSY) - a tutorial about how to deploy a Deno app to Heroku;

🔸▶️ [Develop a Discord bot](https://youtu.be/1i3U-6gjGxw) | Let's Code;

🔸 [Deno in 2020](https://deno.land/posts/deno-in-2020) - Deno's review of the year;

🔸 [Deno 1.7 Release Notes](https://deno.land/posts/v1.7) -  new features and changes;

🔸▶️ [Deno: Develop REST API + mongoDB + Linux](https://youtu.be/Gmb0yJKkBWM) | Let's Code;

🔸 [Introduction to Aleph - The React Framework in Deno](https://blog.bitsrc.io/introduction-to-aleph-the-react-framework-in-deno-322ec26d0fa9) - Aleph allows you to build React app that uses server-side rendering;

🔸 [Using Data URLs to Load Dependencies in Deno](https://levelup.gitconnected.com/using-data-urls-to-load-dependencies-in-deno-18461713ec1e) - a way to dynamically create and load modules;

🔸 [Deno Now Compiles to Self-Contained, Standalone Binaries](https://www.infoq.com/news/2021/02/deno-compiles-native-binaries/) - an example of bundling and compiling Deno applications;

💬 Your feedback, suggestions, and links for the next digest are always welcome.
Tech Exceptions Show: Accelerating Data Engineering with Azure
Tags: dataengineering, cloudskills, techtalks, startup
Published: 2021-02-02 07:49:13

Data Engineers is the new hotness, many developers have been already working with distributed data technologies, such as [Apache Kafka](https://docs.microsoft.com/en-us/azure/hdinsight/kafka/apache-kafka-introduction?WT.mc_id=techexceptions-10917-adpolak), [Apache Spark](https://docs.microsoft.com/en-us/azure/hdinsight/spark/apache-spark-overview?WT.mc_id=techexceptions-10917-adpolak), [Apache Cassandra](https://docs.microsoft.com/en-us/azure/cosmos-db/cassandra-introduction?WT.mc_id=techexceptions-10917-adpolak) as backend developers, building infrastructure for analytics and enabling a healthy flow of data in the organization. 

The reason we see more media coverage for that topic is the maturity of Data Science and Machine Learning. ML used to be most hyped. Following the hype, companies realized that they need to enable smarter products, So what did they do? they started hiring Data Scientists, although, they didn't have the infra to support them.

Due to that, many companies are now focused on building in-house ML platforms to enable their Data Scientists to get more value out of the data.
Yes, you read correctly, more value out of the data.
Let's take a look at the Data Science needs pyramid: 

Data science layers towards AI by Monica Rogati: 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9znpas8a0kplmw58pvp5.png)

You can see the clear need for Data Infrastructure Engineers and Data Engineers, they are at the base of the pyramid. This means, without them, data scientists won't be able to do their job efficiently. Think about it as similar to Maslow's Human needs pyramid. At the base, there are the physical needs, without them, we won't exist.

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


you are probably curious, why do I share this with you, well I had a wonderful conversation with Sheel Choksi, Solution Architect at [Ascend](ascend.io) and we talked exactly about that. How we can help Data Engineers do more and accelerate development and ML in organizations. [Watch Now](https://aka.ms/AAb08x8) 📺! 


[<img src="https://dev-to-uploads.s3.amazonaws.com/i/8arn7bljqccx7q5wjs7p.png">](https://aka.ms/AAb08x8)
Island Day | Part 4 | Wild Off-Road Adventure in Eleuthera to the Edge of the World (and Delirium!)
Published: 2021-02-02 07:43:45

Our Bahamian adventure nears an end as we explore Eleuthera. We took a boat from Harbour Island to Eleuthera, rented a Jeep, then drove over 100-miles to Lighthouse Beach. We heard this remote stretch of paradise is a must-see when on the island, so we packed up for the adventure. 

After a few hours of driving, we became hungry monsters and the only food store open was a small convenient shack just before hitting the "jungle". We got a good laugh at Ryan who has a laundry list of self-inflicted food restrictions and could only eat a jar of peanut butter. 

After a crazy off roading adventure through narrow dirt roads and thick tropical landscape, we finally made it to Lighthouse Beach. Lots of sandfights, swimming, and fun as we dove head first into this amazing Bahamian oasis that truly felt like being on the edge of the world.

Since most restaurants we closed due to COVID, we finally found one called Sammy's. Judging from the outside, we were hesitant BUT... it was some of the best food we had on our trip. And even Ryan scarfed down fried food, which he says was worth the gluten-free, dairy-free aftermath! 💩

Connor and Olivia fell in love with the island, and more so with the adventure of getting there. They laughed the whole time and talked about it for days after. It's a reminder that sometimes the journey can be better than the destination.

These two dads are ready for a nap!

Be sure to subscribe to THIS DAD LIFE! 
https://youtu.be/pxiTP-6Kv_8
Release 1.50 of perl-workflow
Tags: perl, release, opensource
Published: 2021-01-30 12:23:52

---
title: Release 1.50 of perl-workflow
published: true
description: yet another release announcement
tags: perl, release, opensource
---
[perl-workflow](https://github.com/jonasbn/perl-workflow) is picking up _so much speed_  I did not have the time to write up a proper announcement of the 1.50 release.

This relases is continuing the cleaning and bug fixing.

Discussions have started on the general direction of perl-workflow and we are getting en route to flesh out a road map for a major release.

My hope it that the major release, is going to set a new direction for the perl-workflow framework and it might be cutting ties with some of the old ways of doings things, but we want to do this in good order and without breaking backwards compability without a proper deprecation cycle.

The plan is to have some of the upcoming releases, to be announcements of deprection notices, where the deprectation will be scheduled for exection down the line.

[perl-workflow](https://github.com/jonasbn/perl-workflow) has expended it number of project members with two. This gives us the ability to handle some of all the work more effectively and all changes can be reviewed, which is a major step up from one maintainer.

## Change log for perl-workflow release 1.50

- Removal of unused dependency: Log::Dispatch, PR [#64](https://github.com/jonasbn/perl-workflow/pull/64)

- Perl::Critic annotations addressed, enabled a few Perl::Critic tests, PR [#58](https://github.com/jonasbn/perl-workflow/pull/58) and [#59](https://github.com/jonasbn/perl-workflow/pull/59)

- Cleared out VSCode configuration file from distribution

- Removed obsolete notes directory containing older coverage reports, now covered by Coveralls.io, PR [#63](https://github.com/jonasbn/perl-workflow/pull/63)

- Removed obsolete prototypes directory containing minor examples for code constructs, PR [#62](https://github.com/jonasbn/perl-workflow/pull/62)

- Addressed reports of failling tests from CPAN-testers for release 1.49, test suite now supports being run without `PERL_USE_UNSAFE_INC`, PR [#53](https://github.com/jonasbn/perl-workflow/pull/53)

- Implementation of workaround for issue #10 with the failing observers, this is expected to be readdressed, as the observer implementation will be revisited, PR [#60](https://github.com/jonasbn/perl-workflow/pull/60)

- Stop requiring a DSN to be configured when the DBI handle is sourced from elsewhere; instead, require a `driver` attribute to be specified, PR [#51](https://github.com/jonasbn/perl-workflow/pull/51)
Configuring Wifi Firmware at Installation for OpenBSD
Tags: networking, openbsd, systemadministration
Published: 2021-02-02 07:32:45

---
title: Configuring Wifi Firmware at Installation for OpenBSD
published: true
description: 
tags: networking, openbsd, systemadministration
cover_image: http://talkroute.com/wp-content/uploads/2016/03/phone-lines-e1457623871732.jpg
---

If you are installing OpenBSD on a laptop, and when you find (or are aware already) that your Wifi network card does not have the required firmware available, it's a very quick fix to get the required package.

First, you'll need to drop into a shell, which you can do by hitting `CTRL+C` from the Installer at this point (or if you're booting for the first time, hit `(S)` at the prompt when beginning the installer). 

If you have a wired connection available, you can plug in, and proceed to the `#` prompt, and run:

```bash
pkg_add -i http://firmware.openbsd.org/firmware/${VERSION}/${DRIVER}-firmware-${DRIVER_VERSION}.tgz
```
So, in my case, the `iwn-6000` firmware was unavailable, so I used the url: `http://firmware.openbsd.org/firmware/6.8/iwn-firmware-5.11p1.tgz`

You can, then, proceed, to configure the WiFi connection:

```bash
ifconfig iwn0 nwid ID wpakey PASSPHRASE
```
If, like me, you did not have a wired connection available, I downloaded the above archive, and placed it on a USB drive. Once the USB drive is in the OpenBSD machine, you can get the device name:

```bash
sysctl hw.disknames
```
and you'll see an output like:

```
hw.disknames=wd0:3af96a8b7d621ab2,cd0:,sd0: 
```
and you can confirm the model/ID of your USB drive before proceeding like:

```bash
disklabel sd0 
```
and get the partition ID containign the archive (i.e. `/dev/sd0j`) and then mount it:

```bash
mkdir -p /mnt/usb; mount /dev/rsd0j /mnt/usb
```
If you receive an error that a block device is required, replace the USB path with `/dev/sd0j`. 

Then, enter `/mnt/usb`, and you can install the archive:

```bash
pkg_add -i iwn-firmware-5.11p1.tgz
```
and configure the connection:

```bash
ifconfig iwn0 nwid ID wpakey PASSPHRASE
```
Once you confirm you can reach the network, you can resume the installation by running `install`.
GitHub Actions: Attivare la modalità CRON
Tags: github, githubactions, yml, cron
Published: 2021-02-02 07:25:15

🔥 GitHub Actions: Attivare la modalità CRON

❓ Quante volte ti sei stufato di lanciare Actions manualmente ed attendere?

Ogni volta che bisogna lanciare una pipeline di build e' sempre una bella menata, vero?

1️⃣  Bisogna collegarsi alla piattaforma 

2️⃣  Cercare la pipeline ed avviarla

3️⃣  Attendere e poi attendere ancora

❓ E se tutto questo potesse diventare trasparente ed essere eseguito in automatico non saresti felice?

Scopri come modificare il tuo file yml per esegire le tue pipeline in maniera automatica!

❓ Ditemi una cosa, voi le utilizzate? Oppure preferite il lancio manuale?

🔗 [Articolo Completo](https://blog.devandreacarratta.it/github-actions-on-schedule-cron/?utm_source=devto&utm_medium=coding-tips&utm_campaign=github&utm_content=github-actions-on-schedule-cron)
Lino - A command line text editor with notepad like key bindings
Tags: showdev, rust, text, editor
Published: 2021-02-02 07:19:35

**Hey Everyone**, I hope you are all doing great.

I am quite a noob in Rust programming language. So, in order to play with it and make something serious, I have recently made a command-line text editor with Notepad like key bindings.

**Features:**
- Notepad like keybindings.
- Multi-line indentation.
- Auto-indented new lines.
- Line numbers.
- Syntax highlighting.
- Copy, Paste.
- Undo, Redo.
- Find, Replace.

Your love and feedback will be greatly appreciated. (Link Below)

**Link: https://github.com/ahmednooor/lino**

Thank You && Take Care 😊
Mobile Wallet for Fuel Retail
Tags: mobilewallet
Published: 2021-02-02 07:19:13

Mobile Wallet for Fuel Retail
Mobile Wallet for Fuel Retailer is a White label wallet App designed for the clients of petrol station to pay for a fuel without leaving the car. Use digital Fuel Card, collect loyalty points, make pre-orders and transfers on the go, store digital passes, exchange gifts and more.<a href="https://walletfactory.com/en-ae/industries/fuel-retail">Mobile Wallet </a>
Don't learn coding in 2021!
Tags: programming, beginners, javascript
Published: 2021-02-02 07:14:54

---
title: Don't learn coding in 2021!
published: true
description: If you're looking to become a coder in 2021. Stop and watch this before you start.
tags: programming, beginner, javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/bcadd44hi2wyl0l0tbec.png
---

Yup, I said it. If you're looking to be a programmer, you most likely shouldn't...iiiiiifff you've got certain characteristics and expectations set in mind.

I've covered those key points in this video.

{% youtube zXO0TH0GlnI %}

After hating coding 10 years ago to now having our products be used by millions of users, generate multiple millions in monthly revenue across our clients - I've learnt a thing or two about those who should learn to code and those who shouldn't

I've also gone fairly in-depth into why you need to learn how to code and where exactly you can begin!

I won't spoil the video as I'm sure you'll enjoy it!

PS feel free to follow on me on [twitter.com/veebuv](https://twitter.com/veebuv) if you like what you watched
How to Install NodeJS on AlmaLinux 8.3
Tags: almalinux, node, javascript, linux
Published: 2021-02-02 07:11:33

In this article, we’ll explain how to install NodeJS on AlmaLinux 8.3.

Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that executes JavaScript code outside a web browser.

<strong>Prerequisites</strong>
A AlmaLinux installed dedicated server or KVM VPS.
A root user access or normal user with administrative privileges.

<a href="https://www.hostnextra.com/kb/how-to-install-nodejs-on-almalinux-8-3/">Install NodeJS on AlmaLinux 8.3</a>

<strong>Step 1 - Keep the server up to date</strong>
 
 # dnf update -y

<strong>Step 2 - List available NodeJS streams</strong>

Stream corresponds to the major version of Node.js. To see a list of available streams, use following command:

 # dnf module list nodejs

<strong>Output:</strong>

AlmaLinux 8.3 - AppStream
Name Stream Profiles Summary
nodejs 10 [d] common [d], development, minimal, s2i Javascript runtime
nodejs 12 common [d], development, minimal, s2i Javascript runtime
nodejs 14 [e] common [d] [i], development, minimal, s2i Javascript runtime

Hint: [d]efault, [e]nabled, [x]disabled, [i]nstalled

<strong>Step 3 - Install NodeJS on AlmaLinux</strong>

For this demonstration purpose, we’re installing Node.JS 14 using following command:

 # dnf module install nodejs:14

<strong>Step 4 - Verify the installation</strong>
 
 # node -v && npm -v

Output:

v14.15.0
6.14.8

That’s it. The installation has been completed successfully.

In this article, we have seen how to install NodeJS on AlmaLinux 8.3.
Two Gradle questions I have.
Tags: help, gradle, beginners, java
Published: 2021-02-02 07:06:16

Being new to Gradle (and build tools in general), I have a few specific questions centered around my first experience, and how to navigate this world.
<br/>
<br/>
<b><h1><b>What is the minimum required Groovy is required to make a test `build.gradle`?</b></h1></b>
What is the minimum amount needed in a `build.gradle` to run a test? I have:
```java
import java.lang.*;

public final class Test {
    public static void main(String[] args) {
        System.out.println("Test!");
    }
}
```
but what do I actually do to build this?
<br/>
<b><h1><b>What are some guides that break things down piece by piece (1\:1)?</b></h1></b>
I like how sites like MDN break things down in HTML and JS, and (basically) have tutorials for each method/keyword/language concept, and would like to know, is there any site/guide/tutorial that does this for Gradle?

<div alt="Thanks! Cheers!">
##<b><center><b>Thanks!<br/>Cheers!</b></center></b>
</div>
Backyard Planet
Tags: firstpost
Published: 2021-02-02 06:52:25

We are a Online retailer providing competitive prices on outdoor furniture, pergolas, gazebos, saunas, fire pits, fireplaces, greenhouses, hot tubs, fountains, and stargazing gear at the best price. Our goal is to provide a memorable experience when you shop on our online store by offering quality products with top-rated customer service. We help turn your backyard into a place of your dreams!
Bare minimum Infinite Scroll UI
Tags: javascript, webdev, uiweekly, codepen
Published: 2021-02-02 06:52:23

Infinite scrolling ui is implemented in many web apps today. So in an attempt to explore the same, I made a bare minimum codepen to achieve the same with two different implementations :-

📌 Using Scroll Position - Making use of [scrollTop](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop), [offsetHeight](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight) and [scrollHeight](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight) to know when to load the next items.

📌 Using [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) - Having a placeholder at bottom of the list and observing when it intersects with our list in view so that we can load the next items. 

{% codepen https://codepen.io/lapstjup/pen/YzpXzMp %}
You HAVE to know the new question mark syntax in ES 2020
Tags: javascript, programming
Published: 2021-02-02 06:30:36

I just discovered the Javascript feature that I have been waiting for in a video by [FireShip](https://www.youtube.com/channel/UCsBjURrPoezykLs9EqgamOA).
You know how dangerous it is to not prevent an error to something like this,
~~~js
function getDataFromClient(data){
  console.log(data.items.name);
}
~~~
If the above were a node.js application, the client sent a response as an empty array, the server would simply cause an error and stop. Dangerous!
You could solve the problem like this
~~~js
data.items && data.items.name
~~~
but if you forget to do that it is super dangerous.

Now, in ES2020, there is a new feature that allows you to easily prevent this. It looks like this
~~~js
data.items?.name
~~~
Watch [this video](https://www.youtube.com/watch?v=O0gmXbN7lVE) to know more about it.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h8tlvp2g0ynm7z5e2e83.png)
Preventing adsense from injecting min-height and height inline style
Tags: mutationobserver, react, adsense
Published: 2021-02-02 06:25:36

On [https://www.edityouraudio.com](https://www.edityouraudio.com), we use Adsense to monetize our audience in order to keep our service free for all non-intensive users.
This had been a very long time since my layout was sometimes broken, with the footer not being stuck on the bottom of the page, leading to a very ugly layout like this one (with the white bar at the bottom).

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

This is because adsense is injecting 
```
style="height: auto!important;min-height: 0px!important" 
```
into your main div 😱

## Solving the problem with MutationObserver

Mutation observer to the rescue !

```
constructor(props) {
  super(props);
  this.mainRef = React.createRef();
  this.adSenseInjectorObserver = null;
}

componentDidMount() {
  if (!this.adSenseInjectorObserver && this.mainRef) {
    this.adSenseInjectorObserver = new MutationObserver((mutations, observer) => {
      this.mainRef.current.style.removeProperty('min-height');
      this.mainRef.current.style.removeProperty('height');
    });
    this.adSenseInjectorObserver.observe(this.mainRef.current, {
      attributes: true,
      attributeFilter: ['style'],
    });
  }
}
```
and
```
render() {
  return (
    <main ref={this.mainRef}>
      {this.props.children}
    </Main>
  );
}
```

This will, on component mount, define an observer that will reset the `height` and `min-height` everytime it is set directly by Adsense.

Don't forget to disconnect the observer on unmount also.

```
  componentWillUnmount() {
    if (this.adSenseInjectorObserver) {
      this.adSenseInjectorObserver.disconnect();
      this.adSenseInjectorObserver. = null;
    }
  }
```

## Hire me remotely!

My name is **Martin Ratinaud** and I’m a **senior software engineer** and remote enthusiast, **contagiously happy** and **curious**.
I create websites, like this one for **[staking your crypto](https://www.stakingcrypto.io)**
I create bots to aggregate data and build **[Remote Family](https://www.remote-family.com)** with them.
I create **Backoffices** and **internal tools** for marketers and growth specialists.
I also create **[chrome extensions](http://bit.ly/short-song-streaming)** and **[electron apps](https://www.indiehackers.com/product/sort-your-paper)** to sort your paper with AI.
All this in NodeJs and React which I love very much.

Check my [LinkedIn](https://fr.linkedin.com/in/martinratinaud) and get in touch!