teleren/devto huggingface dataset:
Tips I discovered this week (for web developers)
Tags: resources, useful, javascript, frontend
Published: 2020-02-06 11:35:48

---
title: Tips I discovered this week (for web developers)
published: true
description: The list of useful resources
tags: resources, useful, javascript, frontend
---

### Lazy image loading
In case you need to postpone image loading. For example, you have a page that has a list of 10+ images, let's say you describe the details of your recent travel in a blog. When your reader wants to read the article, 10+ images definitely will affect a page loading time.
You can write a logic by yourself, using [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API), as well as using ready-made [solutions](https://github.com/aFarkas/lazysizes).
But Chrome 75+ has native support for `loading` attribute:
```javascript
<img src="travel.jpg" loading="lazy" alt="Paris castle" />
```
That means, `loading="lazy"` will defer image loading until it become visible on the screen.
[Blog post from Lighthouse team](https://web.dev/native-lazy-loading/)

### Performance audit in the CI process
The Lighthouse team has introduced a [tool](https://github.com/GoogleChrome/lighthouse-ci) that can audit every commit for performance, accessibility issues. Try their online [auditing tool](https://web.dev/measure/) if you haven't yet.

### [Puppeteer](https://github.com/puppeteer/puppeteer)
A tool can automate many things you do manually, for example:
- generate screenshots of websites, saving a page as PDF;
- automate UI testing by providing API to make mouse clicks, form submissions, dealing with inputs, etc.;
- crawl SPAs;
- test Chrome extensions;

### Pre-loading links
[Quicklink](https://github.com/GoogleChromeLabs/quicklink) pre-loads links in a browser idle time when a link becomes reachable for the user. The tool also verifies whether a user has a slow connection, if so - it will not pre-load a link.


## Packages
#### city-roads
It visualizes all city roads in a particular city, uses OpenStreetMap, renders hand-written like city paths. [Source](https://github.com/anvaka/city-roads)

#### OpenLayers
One more package to render maps, easy to customize. [Source](https://openlayers.org/)
4 lesser known free comment hosting services better than Disqus
Tags: comment, opensource, free, commenthosting
Published: 2020-02-06 11:28:27

A few days ago I was developing a page for a client and one of the requirements was having a comment section in the blog posts, which made me wonder, how should I go about implementing a comment hosting service.

I did brainstorm for a while about implementing it on my own but then I had that feeling it would take some time because a lot of things would have to be taken into consideration like anonymous comments, nested comments etc.

As I am, I ended up looking for open source comment hosting services. First I wondered around the likes of Disqus and spot.im and then I started looking for open source alternatives. I was surprised by the amount of open source software available just for that.

Sergey Lisakov eventually has a whole page for just that. I have to say this page has it all, each and every open source comment hosting service and we can sort them by a lot of different categories. It's exaggerating in a way, like, which one should I use.

After a whole lot of Let me try this and I swear this would be the last one, I finally zeroed down on 4 of them which I think are the best ones.

## Read the whole post [here](https://deepjyoti30.github.io/blog/4-lesser-known-free-comment-hosting-services-better-than-Disqus)
My Journey towards MWS certification
Tags: pwa, javascript, webdev
Published: 2020-02-06 10:37:17

*Disclaimer: As of this article, I am not yet certified. I am only recounting my journey towards this goal. It is my hope to come back and write about my success in this perspective.* 

In almost mid-2019, Google together with Andela and the online learning platform Pluralsight launched Africa's Developers scholarship program's 4th Edition. This is part of Google's goal to swell up the number of developers in Africa, whether *Android, Mobile Web or Cloud-based*. Their main goal together with Andela is to create the right set of teams, equipped with the best skills and more effectively, growing a healthy community.

Within the periods of June moving forward, I had no idea that my journey within this program will be leading me to be amongst the top 1000 devs, especially when I had considered the mammoth population size of 30,000 devs selected at the beginning of the program all across Africa. 

### Just a little bit about my program of choice
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qh1zy4h9quxxx89yumpi.png)
If you are the **self-taught** type of dev like me, you must know what it feels like to be less confident about yourself and in your abilities. This is what we sometimes cleverly call the impostor syndrome.

Interestingly, failure can prepare you even better for greater achievements when you receive it with the right mindset. Not being able to go through this same program in 2018 when Google partnered with **Udacity** made me learn a million things along the way.

As a matter of fact, that was only the beginning. I firmly promised myself to go through the program if given another chance and fortunately 2019 brought it right to my doorsteps. Who on earth will let go on a second chance? I enrolled in the **Mobile Web Specialist Track** just as I did the last time. Here are some reasons why:
1. I am very passionate about building websites and applications that run on the web.
2. Familiarity with content can give you an upper hand. So I decided to explore more and grow my skills as a Javascript developer.
3. Last year's program introduced me to a very new concept called **Progressive Web Apps**. I had never heard this before. This made me even more curious to get to the bottom of this, plus, I thought it was way cooler for me to build a site that worked like a mobile app. In that way, I would not have to kill myself of ever wanting to learn about app development at least.
4. Android development is very resource-intensive especially when it comes to installing *Android Studio* and again, I didn't just want to hold on to Java(no hard feelings here). My hardware wouldn't be sufficient enough to sustain me as compared to Javascript where all I needed was just a simple text editor and a web browser.

There are obviously more reasons but I would say it was worth it. I hope to bring you into my world of trial and error, successes and failure, challenges and breakthroughs within the subsequent posts.
In the meantime, my goal is to prepare hard and succeed in this exam scheduled for March 2020. It will definitely be a dream come true.
Fetch returns an array, but javascript doesn't recognise fields.
Tags: help
Published: 2020-02-06 10:28:22

# Background
I'm creating a website for my school using react and node.js. Now when I fetch all the articles the fetch actually sends all the articles, but javascript doesn't the whole data.

This is what the network receives:

![Network page](https://i.imgur.com/o2dDthQ.jpg)
![Console.log](https://i.imgur.com/jsI97KJ.jpg)

## The code
```
fetch(`/api/article/fetchlatest?offset=${offset}`)
      .then(res => res.json())
      .then(res => {
        console.log(res); // this is the console.log stated before
        setList(res);
        setFetched(true);
        setOffset(offset + 10);
      });
```
logs in python
Tags: python, beginners
Published: 2020-02-06 10:26:00

You can log in <a href="https://python.org">Python</a> with the logger module. A log file can display or store messages while the program is running.

Logging is very different than just relying on Python errors or <a href="https://pythonbasics.org/try-except/">try-except</a> cases. It is much more broad way to find the bugs in your program.

This is especially useful when your program crashes: it gives you another point of entry to finding the bug. With a large program, you save a lot of time on finding a bug / <a href="https://pythonspot.com/python-debugging/">debugging</a>. 

## Logs

The example below sends a log message to the console.

```python
import logging
logging.warning('this is a warning message')
```

If you run the program it shows:

```bash
➜ python3 example.py 
WARNING:root:this is a warning message
➜   
```

For a slightly larger program:

```python
import logging

x = 2
logging.warning('x associated with value')

y = 3
logging.warning('y associated with value')

z = x / y
logging.warning('calculation complete')
```

Upon running you'll see:

```
➜  python3 example.py 
WARNING:root:x associated with value
WARNING:root:y associated with value
WARNING:root:calculation complete
```

If you set y to zero, you'll see where it stops executing the program:

```bash
WARNING:root:x associated with value
WARNING:root:y associated with value
Traceback (most recent call last):
  File "example.py", line 9, in <module>
    z = x / y
ZeroDivisionError: integer division or modulo by zero
```

Once your program is finished, you can hide logging messages but turn them on when needed by changing the severity level. There are different ways to <a href="https://pythonspot.com/logging/">log messages</a>, like saving the output into a file or adding a timestamp.

**Related links:**
* <a href="https://docs.python.org/3.8/library/logging.html">Documentation on logging</a>
* <a href="https://pythonbasics.org/">Learn Python</a>
Javascript iterators and generator functions are slow!
Tags: programming, javascript
Published: 2020-02-06 12:20:18

---
title: Javascript iterators and generator functions are slow!
published: true
date: 2020-02-06 10:20:41 UTC
tags: programming,javascript
canonical_url: https://siderite.dev/blog/javascript-iterators-and-generator-functions-slow/
---

Original post: https://siderite.dev/blog/javascript-iterators-and-generator-functions-slow

So I was trying to optimize a sorting algorithm, only the metrics did not make any sense. On the test page I had amazing performance, on the other it was slow as hell. What could possibly be the problem?

The difference between the two tests was that one was sorting inline (normal array reading and writing) and the other was using a more complex function and iterated a data source. So I went to test the performance of iterating itself.

The code tests the speed of adding all the items of a large array in three cases:

- a classic for...in loop that increments an index and reads the array at that index
- a for...of loop that iterates the items of the array directly
- a for...of loop that iterates over a generator function that yields the values of the array

```
time(()=>{ let sum=0; for (let i=0; i<arr.length; i++) sum+=arr[i]; },'for in');
time(()=>{ let sum=0; for (const v of arr) sum+=v; },'iterator for of');
time(()=>{ let sum=0; for (const v of (function*(){ for (let i=0; i<arr.length; i++) yield arr[i]; })()) sum+=v; },'generator for of');
```

time is a function I used to compute the speed of the execution. The array is 100 million integers. And here are the results:

`for in: 155.12999997008592`  
`for of: 1105.7250000303611`  
`for of: 2309.88499999512`

I haven't yet processed what it means, but I really thought using an iterator was going to be at least as fast as a for loop that uses index accessing to read values. Instead there is a whooping 7 to 14 times decrease in speed.

So from now on I will avoid for...of in high performance scenarios.
Absinthe Journey with Wolfiton or How to Bring the Absinthe Tutorial UP to Date- Part 1 Introduction
Tags: elixir, absinthe, graphql, beginners
Published: 2020-02-06 10:11:45

Hello everyone,

**Series navigation**
[PART 1 Introduction](https://dev.to/wolfiton/absinthe-journey-with-wolfiton-or-how-to-bring-the-absinthe-tutorial-up-to-date-part-1-introduction-5fgg)
[PART 2 Foundation](https://dev.to/wolfiton/absinthe-journey-with-wolfiton-or-how-to-bring-the-absinthe-tutorial-up-to-date-part-2-foundation-3jnh)
[PART 3 The Walls](https://dev.to/wolfiton/absinthe-journey-with-wolfiton-or-how-to-bring-the-absinthe-tutorial-up-to-date-part-3-the-walls-n86/)
[PART 4 The Door](https://dev.to/wolfiton/absinthe-journey-with-wolfiton-or-how-to-bring-the-absinthe-tutorial-up-to-date-part-4-the-door-10m0)
[PART 5 Testing](https://dev.to/wolfiton/testing-1ohn)
[PART 6 Can you fly?](https://dev.to/wolfiton/absinthe-journey-with-wolfiton-or-how-to-bring-the-absinthe-tutorial-up-to-date-part-6-can-you-fly-3al5)
[PART 7 The User](https://dev.to/wolfiton/absinthe-journey-with-wolfiton-or-how-to-bring-the-absinthe-tutorial-up-to-date-part-7-the-user-58)

Today I am starting a new series **Absinthe journey with Wolfiton** and decided to contribute to opensource.

Wait a moment what is absinthe?

The official definition from the docs:

> Absinthe is the GraphQL toolkit for Elixir, an implementation of the GraphQL  > specification built to suit the language’s capabilities and idiomatic style 

My personal and simpler definition:

> Absinthe is the package you can use to create Phoenix and Graphql Api's in Elixir. 

So I am rewriting the Official Absinthe Tutorial using the latest version of Phoenix 1.4 and Absinthe dependencies.

The versions for the packages, I am aiming for are:

- Phoenix 1.4
- Absinthe 1.4
- Absinthe Plug 1.4
- Absinthe Phoenix 1.4

Now let's talk about the structure of the Absinthe tutorial and how will the code get organized.

The code will use the best practices(I will try to use them), if anyone spots a mistake or a better way to implement a feature let me know.

At this point you may be wandering **Dear Reader**, how can we keep track of everything and don't get lost?

You just read my mind, so the answer is a **MAP**

So onward we go to the planing of our **TODO List**.

Our list will have the following:

**Phoenix 1.4 side:**

- contexts
- schemas
- migrations
- ecto


**Absinthe(Graphql) side**

- schema
- resolvers
- types
- context plug
- and many more ...(we will update the list as we are progressing)

I hope that you find this series exciting **Dear Reader**, as I do.

See you in the next part where we will really dive in and start our application.

**Credits:**
Absinthe docs https://hexdocs.pm/absinthe/overview.html
Thanks @TheEndIsNear for correcting my grammar mistake from ` So on wards we go` to `So onward we go`.

Wait a moment, what is the credits section?

This is the section of the article where everyone that contributes will get mentioned.
Easiest way for Gutenberg Blocks with Timber and ACF Blocks
Tags: timber, wordpress, gutenberg
Published: 2020-02-06 09:59:23

Some time ago I wrote the official [Timber Documentation on ACF Blocks](https://timber.github.io/docs/guides/gutenberg/). Now I’ll show you how to do it in a much easier manner.

## Preparations

Before we start we need to do three things:

- Install Advanced Custom Fields PRO
- Install [Timber ACF WP Blocks](https://github.com/palmiak/timber-acf-wp-blocks) library
- Create a **views/blocks** folder in your theme

The best way to install the mentioned library is of course via Composer.

In case you don’t like the **views/blocks** folder you can change it by using `timber/acf-gutenberg-blocks-templates` filter.

## Time to create a block

In our `views/blocks` folder we create a twig file (in this example — `owl-link.twig`) and on top of it, we add some additional comments. This Comment block is very important because thanks to it the block is registered and the values go to `acf_register_block_type`.

```twig
{#
  Title: Owl link
  Description: Link block
  Category: formatting
  Icon: admin-comments
  Keywords: link links
  Mode: edit
  Align: left
  PostTypes: page post
  SupportsAlign: left right
  SupportsMode: false
  SupportsMultiple: true
#}

<section class="gutenberg-wordpressowka-block">
    <div class="gutenberg-url-block">
        {{ fields.opis }}
        <a href="{{ fields.link.url }}" target="_blank">{{ fields.link.title }}</a>
    </div>
</section>
```

Of course, we can use all the parameters specified in the official [ACF Documentation](https://www.advancedcustomfields.com/resources/acf_register_block_type/).

The only thing that missing is setting one thing in ACF itself:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9ty5o8hn4adfqhjpaa6h.png)

## Let’s use it

After registering and connecting our block there is one thing left — let’s write something:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xohz1o7xq8okkowi93zl.png)

## Let’s sum up everything

As you see this is a very short article. Using [Timber ACF WP Blocks](https://github.com/palmiak/timber-acf-wp-blocks) lets you focus on blocks itself instead of creating boring code :)

If you would like to use this solution for Blade and Sage 9 use this [plugin](https://github.com/MWDelaney/sage-acf-wp-blocks).
Kubernetes Pod Affinity rules in a nutshell
Tags: kubernetes, devops
Published: 2020-02-06 09:53:40

---
title: Kubernetes Pod Affinity rules in a nutshell
published: true
description: How to use Pod affinity in the real world
tags: kubernetes,devops
---

# Pod Affinity

If you have the time, you must read about [Pod Affinity](https://kubernetes.io/docs/concepts/configuration/assign-pod-node/#affinity-and-anti-affinity).

## Problem

I do not want to run a specific workload (*sensitive-workload*) along with some disruptive workloads (*mysql* and *prometheus*) **within the same node**. I know that these disruptive workloads have the following pod labels:

- app=mysql (default namespace)
- app=prometheus (monitoring namespace)


```bash
kubectl get pods -l app=mysql -n default
kubectl get pods -l app=prometheus -n monitoring
```

Solution:

```yaml
apiVersion: apps/v1beta1
kind: Deployment
metadata:
  name: sensitive-workload
  namespace: default
spec:
  template:
    metadata:
      labels:
        app: sensitive-workload
    spec:
      affinity:
        podAntiAffinity:
          requiredDuringSchedulingIgnoredDuringExecution:
          - labelSelector:
              matchExpressions:
              - key: app
                operator: In
                values:
                - mysql
            topologyKey: "kubernetes.io/hostname"
          - labelSelector:
              matchExpressions:
                - key: app
                  operator: In
                  values:
                  - prometheus
            topologyKey: "kubernetes.io/hostname"
            namespaces:
              - monitoring
```

By default **labelSelector** will search within the same namespace of the workload. You can use the **namespaces** field to add more namespaces to look for.
Utilize the open-sourced REST Client!
Tags: restapi, developexperience, opensource, json
Published: 2020-02-06 09:26:10

Everyone developer comes across a situation where he or she has to deal with REST Apis, they usually test the APIs using Postman which gives a handful of features like creating a Collections and sharing the collections across the teams. But some of the features are underpaid versions of Postman.


*If you are a big fan of open-source REST clients and are looking for an alternative of POSTMAN then this is for you.*

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


If you can do everything through the [VS Code](https://code.visualstudio.com/) itself. You just have to install [Huachao Restclient](https://github.com/Huachao/vscode-restclient) through the extensions tab and start using it.


Quite simple isn't it!

**1. Create a file with .http extension**

**2. Add a "GET" Rest API endpoint**
   
   <code>
     ## Fetch all the users
     *Send Request*
     GET https://api.github.com/users
   </code>

**3. Click on "Send Request" and boom you get the response view opened at the right side of the same REST API endpoint.**


I became a big fan of this [VS Code extension](https://marketplace.visualstudio.com/items?itemName=humao.rest-client) and loving it. You should also give it a try!

*Happy learning!!*
My personal business card - What's next?
Tags: npm, package, npx, businesscard
Published: 2020-02-06 09:24:29

---
title: My personal business card - What's next?
published: true
description: 
tags: npm, package, npx, businesscard
---

# What's next?

Now that the package is up and running, I'd like to change it a bit. I'd like to change the name, for example. Something like `npx rossanodan` would be far better!

I also noted the `README` is wrong!!!

## How to rename a published npm package

Honestly, I don't have a clue about how to rename a npm package so I searched on Google and I found this https://stackoverflow.com/questions/28371669/renaming-a-published-npm-module

> In simple words no you can't. But npm provides you a different solution called `npm deprecate`.
What it does is it marks a particular version or version ranges of that package as deprecated. So next if someone tries to install this package they get a warning package deprecated along with your custom message, in which you can easily specify your new package name.
Usage
`npm deprecate my-package-name@"< latest-version" "your message"`
Your message can be any thing like:
`WARNING: This project has been renamed to your-new-package-name. Install using new-package-name instead.`

So I run

`npm deprecate rossanodan-card@"< 1.1.0" "This project has been renamed to rossanodan. Install using npx rossanodan instead."`

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

I want to check the deprecation, so I run

```
npm uninstall rossanodan-card
npx rossanodan-card
```

Nothing changed, it works like before.

## Unpublish

Things get interesting. Since no one should depends on my package, I dediced to unpublish it.

I export the `NPM_TOKEN` once again (I didn't save it into my `bash_profile`)

```
export NPM_TOKEN=XXXXXXXXXXXXXXXXXX // use your token here
```

I had an authentication issue.. I need to login again! I run `npm adduser` and this prompts

```
Username: YOUR NPM USERNAME
Password: YOUR NPM PASSWORD
Email: (this IS public) YOUR NPM EMAIL

// If everything is correct

Logged in as YOUR USERNAME on https://registry.npmjs.org/.
```

It's time to unpublish

```
npm unpublish rossanodan-card --force
```

The packages section is now empty, hurray!!! Now i can create a new npm package with the new name.

I will reuse the same repository, I don't need creating a new one. It's enough reworking the `package.json` and editing the information I want to change.

# All done

The new package is available at https://www.npmjs.com/package/rossanodan

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/t7vh7erc038q3uxi3nc9.png)
WebAssembly with Rust
Tags: rust, webassembly, webdev, javascript
Published: 2020-02-06 08:45:52

WebAssembly fulfills the long-awaited promise of web technologies: fast code, type-safe at compile time, execution in the browser, on embedded devices, or anywhere else. Rust delivers the power of C in a language that strictly enforces type safety. Combine both languages and you can write for the web like never before!

In this demo-heavy talk Kevin will take us on a journey from the basics of WebAssembly to using WebAssembly to integrate with JavaScript, build complete websites, and even host and interpret in Rust apps.

He'll even show hot-swapping WebAssembly modules to control LEDs on a Raspberry Pi.

{% youtube t2FWA-uEKEM %}
Introduction to Vue.js
Tags: vue, ubuntu, javascript
Published: 2020-02-06 08:39:07

What’s Vue.js? 
Vue.js is open source and lightweight javascript library for building interactive single page application and user-friendly web applications. When integrated with other libraries it also becomes a “framework”. The word “Vue” is pronounced as “View”. Vue was created by Evan You.

Why use Vue.js? Read more: https://tudip.com/blog-post/introduction-to-vue-js/