teleren/devto huggingface dataset:
Weekly Challenge 120
Tags: perl, theweeklychallenge
Published: 2021-07-05 13:30:28

[Challenge](https://theweeklychallenge.org/blog/perl-weekly-challenge-120/), [My solutions](https://github.com/manwar/perlweeklychallenge-club/tree/master/challenge-120/sgreen)

## TASK #1 › Swap Odd/Even bits

### Task

You are given a positive integer `$N` less than or equal to 255.

Write a script to swap the odd positioned bit with even positioned bit and print the decimal equivalent of the new binary representation.

## My solution

Like last weeks task, there are two ways of tackling this challenge. The first is to convert the number to the binary form, use some regular expression to swap the digits (for the record it would be `s/(.)(.)/$2$1/g`), and then convert it back a decimal number. And there is nothing wrong with that approach.

My approach was to use the 'bitwise and' `&` and shift bit operators `<<` and `>>` to calculate the value. We take the even values (170 = 2 + 8 + 32 + 128) and shift those one place to the right (the same as dividing by two), and the odd vales ( 85 = 1 + 4 + 16 + 64) and shift them to the left (same as multiplying by 2).

Given that the maximum value is 255, neither are really going to be more efficient than the other in the grand scheme of things.

### Examples

```
$ ./ch-1.pl 101
154

$ ./ch-1.pl 18
33
```

## TASK #2 › Clock Angle

### Task

You are given time `$T` in the format `hh:mm`.

Write a script to find the smaller angle formed by the hands of an analogue clock at a given time.

HINT: A analogue clock is divided up into 12 sectors. One sector represents 30 degree (360 ÷ 12 = 30).

### My solution

I follow these steps:

* Check the hour is between 1 and 12 and the minute value is between 0 and 59.
* If the hour value is 12, change it to zero.
* Calculate the angle (from the top) of the minute hand `360 * $minute / 60`.
* Calculate the angle of the hour hand `360 * ( $hour / 12 + $minute / 720 )`
* Find the absolute difference between these values
* If the difference is > 180°, calculate 360 minus the difference. This ensures we have the smallest angle.

### Examples

```
$ ./ch-2.pl 03:10
35°

$ ./ch-2.pl 04:00
120°
```
Angular Universal SSR NOT rendered in https but got rendered in http 
Published: 2021-07-05 13:01:34

I was working on Angular Universal SSR Project for https://vizzainsurance.com/. The Server Side Rendering (SSR) is NOT working/getting rendered in https but is working/rendered fine with http.

The Content is NOT getting rendered for the first time for which you can find the link at https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5a06p9sh0h87z3h65yju.png but when refreshed (ctrl + F5), the content gets rendered at https://vizzainsurance.com/.Please find the attached image for the link after getting refreshed at https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ko5mwci01ubawghawk53.png

Can anyone please me with the issues.

Your inputs would be very much apprecisted.

Thanks in advance!!
Converting .py to .exe
Tags: beginners, python, learning
Published: 2021-07-05 12:30:52

To share your Python projects with the world it needs to be converted from .py to .exe file, exe file is an executable file format. It contains a program and has the ability to run as a program in computer. It does not require any import statements to execute. 
### _Let's get started_
#### Step 1: 
Install the library pyinstaller. You can do so by typing the following code into your command prompt. 
```
pip install pyinstaller
```
#### Step 2:
Go to the folder where .py file is located. You’ll see few folder created newly. Now Press the shift button and simultaneously right-click to open PowerShell window. 
#### Step 3:
Type the following command:
```
pyinstaller --onefile 'filename.py' 
```
It will take some time to finish the process depending on the size of your project. You will get a "Building EXE completed successfully" message. 
#### Step 4:
Open your dist folder, here you will find your .exe file and you are good to go!!!

![Done phewww](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eb8jc0amfhdj47usrsns.gif)
web push notification service
Tags: webpushnotifications, safaripushnotifications, bloggerpushnotifications
Published: 2021-07-05 12:02:21

Truepush, a push notifications service for web and mobile, was launched in 2019 with a motto to provide a free customer engagement platform like push notifications. With a short span of 18 months, the brand is successfully serving over 25,000+ marketers/ developers and is growing big and strong in the SaaS marketplace. 

This Push Notifications tool has received enormous applause in the SaaS space, along with the excellent feedback from its customers. Truepush provides rich features like RSS-to-Push, Audience Segmentation, Triggers, Batches, etc. for free, which are generally paid on the other push platforms. 

Along with receiving good feedbacks and global acceptance, Truepush has also won many awards that include 'High Performers Summer-2020' and 'High Performers Spring-2020' by G2, 'Fastest Growing and Most Searched Software' under the Push Notifications category by SaaSworthy, 'Rising Star Award - 2019' and 'Premium Usability Award - 2019' by FinancesOnline. As per BuiltWith, it is the '7th Most Popular Push Notifications Service in India'.
Understanding Network things: part 4 – Unicast, Broadcast, Multicast & Anycast
Tags: network, http, beginners, cloud
Published: 2021-07-05 12:01:42

---
title: Understanding Network things: part 4 – Unicast, Broadcast, Multicast & Anycast
published: true
description: Serie of sketchnotes about Network concepts. Explaining in a visual way network principles.
tags: Network, HTTP, beginners, Cloud
series: Understanding network things in sketchnotes
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ancok0udj5kpj5l9v9ss.jpg
---

Hi,
I've got a secret for you, since several years. I'm a developer and I'm a mess in undestanding network things! :'(

It's hard to not understanding things that anyone seems to understand and understanding network concepts can be difficult or time-consuming, specially for developers. That the reason I started to create sketchnotes about Network concepts. I think it could be a good way, more visual, to explain it.

In this article let's dig into the difference between Unicast, Broadcast, Multicast and Anycast. What is it? For which uses cases?

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ancok0udj5kpj5l9v9ss.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qb0nd714amdgk4q1sklf.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rq8ynwgitct1hou5t2w9.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/akb8x2nprenw7hctp7e9.jpg)

As usual, if you like theses sketchnotes, you can follow me, and tell me what do you think. I will publish others sketchs shortly :-).

If you are interested, I already published sketchnotes about [Kubernetes, Docker and Istio](https://gumroad.com/aurelievache).
How to create a linkedin clone from start to finish 
Published: 2021-07-05 12:01:29

Hello Nerds ☺️

I made a video on youtube on how to create a #linkedin home page using #React.js, Please check it out, and please don't forget to like and subscribe

Source Code available on #Github.

Youtube video link https://youtu.be/ReBA_dSPHAg

#linkedinskillassessment #linkedinlearning #linkdin #frontenddevelopment #javascript #css #webdevelopment #programming
슬라이드 라이브러리 추천 5개 +
Tags: javascript, webdev
Published: 2021-07-05 11:50:27

캐러셀<sup>carousel</sup>인지 슬라이더<sup>slider</sup>인지 통일된 이름은 없지만 특히 쇼핑몰의 메인에 꼭 필요한 라이브러리다.

당시 다니던 회사에서 bxSlider를 개조해 별 문제 없이 사용하고 있었지만 제이쿼리<sup>jQuery</sup> 의존성이 보기 싫었고 추가 기능이 필요했는데 소스를 어디서부터 건드려야할지 감이 오지 않았다. 

그래서 업데이트가 잘되고 가벼운 라이브러리를 찾아나섰고 십 수개의 라이브러리를 찾고 실험해보며 그 중 가장 괜찮았던 슬라이더를 소개한다.
<br/>
<br/>
## Swiper
업데이트가 가장 활발하고 사용자 층도 두터워 보인다. 애니메이션이나 터치 작동도 자연스럽고 옵션도 다양하다.
{% github nolimits4web/swiper no-readme %}
초기엔 제이쿼리도 지원했지만 지금은 직접 개발한 dom7이라는 제이쿼리같은 라이브러리를 기본으로 사용한다. 차라리 많은 사이트에서 사용중인 제이쿼리로 만들었다면⋯ 하는 아쉬움이 남는다.
<br/>
<br/>
## Embla Carousel
상대적으로 최근에 생겼으며, 모던 자바스크립트에 소스 구조도 깔끔하다. 5.9kb의 적은 용량에 안정적이며 빠릿하다. 
​{% github davidcetinkaya/embla-carousel no-readme %}
당시엔 리액트(React)도 지원한 유일한 라이브러리였다. 의존성(dependencies)이 없는 것도 특징이다. 
<br/>
<br/>
## Flicking
네이버에서 만들고 사용중인 라이브러리.
{% github naver/egjs-flicking no-readme %}
<br/>
<br/>
## Slick
그냥 유명해서 넣었다. 제이쿼리 시절 유명했던 것 같다.
{% github kenwheeler/slick no-readme %}
유지보수는 이미 2년전부터 종료된 것 같지만 여전히 인기가 많아 놀랍다.
<br/>
<br/>
## Flickity
정말 심플하다. 상업적인 용도는 라이센스를 구입해야한다.
{% github metafizzy/flickity no-readme %}
<br/>
![캐러셀 라이브러리 인기 순위](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2bv76i961rn17qo51v9x.png)
npm 대신 CDN으로 긁어오거나 스태틱하게 제공하는 경우가 더 많을 것 같아 통계가 신뢰있다고 말하긴 어렵지만 이거 밖에 없다.
<br/>
<br/>
## 그 외
###splide
{% github Splidejs/splide no-readme %}
<br/>
###glidejs
{% github glidejs/glide no-readme %}
<br/>
### tiny-slide
{% github ganlanyuan/tiny-slider no-readme %}
<br/>
### bx-slider
{% github stevenwanderski/bxslider-4 no-readme %}
<br/>
### siema
{% github pawelgrzybek/siema no-readme %}
Daily Developer Jokes - Monday, Jul 5, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-07-05 12:00:25

---
title: "Daily Developer Jokes - Monday, Jul 5, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Monday%2C%20Jul%205%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1259924ce05.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q___: What did the command line die of?

___A___: A Terminal illness.
 -->
React Virtual DOM Explained in Plain English
Tags: webdev, react, javascript, dom
Published: 2021-07-05 11:35:18

We still don't catch how Virtual DOM works. Actually, what is DOM? They say Document Object Model. Well, but what is it exactly? The DOM in simple words represents the UI of your application. 
### Let's dive in. 

When a browser downloads the HTML document it creates the tree-like representation of that document, the so-called Object Model where every HTML tag has its corresponding node. 

In that way, Javascript gets access to the HTML tags and can change them: add styles, modify or even delete them. 

Making these changes is not slow. What makes the process slow and costly is how the browser organizes those changes. In every update, HTML parser reads the HTML document then DOM is being created, at the same time CSS parser parses the stylesheets and applies style rules. As a result of the process, Attachment is being created. Afterward, Layout process gives the exact co-ordinates to each node of the render tree, i.e. each element's exact coordinates on the screen.

So the Render tree is ready, then go Painting and Display.
 
## What makes DOM manipulation slow?
Updating DOM is a slow and expensive process
You have to traverse DOM to find a node and update it.
Updating DOM has cascading effects - things need to be recalculated.

## Virtual DOM
the concept of virtual DOM comes in and performs significantly better than the real DOM. The virtual DOM is only a virtual representation of the DOM. Everytime the state of our application changes, the virtual DOM gets updated instead of the real DOM.

> Well, you may ask ” Isn’t the virtual DOM doing the same thing as the real DOM, this sounds like double work? How can this be faster than just updating the real DOM?”

## How is Virtual DOM faster?
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/02llb1lq9vc25v7l8dfb.PNG)
There are always two versions of VDOM. One is before the changes and the other is after the changes. So when changes occur React compares two VDOMs and detects the changes.
This process is called ''diffing''.


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

The changed objects only get updated on the real Dom. Changes in the real DOM cause the screen to change. This is called ''reconciliation''. 

VDOM is like a blueprint and making changes in it is more efficient.
Instead of rendering all changes to the real DOM, we apply them first to the Virtual DOM, which is doesn't get rendered. So the changes to it are very cheap.

Thanks for reading!
Using Husky git hooks with GitKraken
Tags: git, gitkraken, husky, hooks
Published: 2021-07-05 11:23:59

_Edit 2021-10-14: A fix for this in GitKraken has been released in version 7.7.2, https://support.gitkraken.com/release-notes/7x/#version-772_

Utilising git hooks can be a great way of automating tasks in different parts of the git workflow. This article won’t go into detail about how git hooks work, but if you want a good starting point to learn more you can check out [githooks.com](https://githooks.com/), which links a lot of good resources.

A git hook is a file placed in the `.git/hooks` folder, and named after when in the git lifecycle it should be executed. A common way of simplifying using hooks is to install Husky, which makes the process easier and is often paired with `lint-staged`.

Since version 5, Husky uses a new git functionality called `core.hookspath`, which specifies where git should look for hooks. This gives Husky the possibility to create its hooks in a separate directory, which can be checked in and visible. However, this solution can cause problems in git clients that don’t support this feature, for example GitKraken.

To sidestep this problem we can make sure to copy the hooks to the default folder as soon as Husky is set up to make sure that clients that disregard the `hookspath` still can find the hooks.

By default, Husky adds a `prepare` script in `package.json` when it’s set up:

```JSON
{
  ...
  "scripts": {
    ...
    "prepare": "husky install"
  }
}
```

This is a standard npm script that runs automatically when running `npm install`. If we just add a bash command to copy the installed hooks and husky file over to the standard hook folder, we fix our problem with GitKraken.

```JSON
{
  ...
  "scripts": {
    ...
    "prepare": "husky install && cp -a .husky/. .git/hooks/"
  }
}
```

Since running `npm install` is an operation that all developers will start with when cloning the repository, we can make sure that we cover our bases and allow whatever git client the developer wants to use.
🐍 How to Handle with JWTs in Python
Tags: python, jwt, programming
Published: 2021-07-05 11:20:16

#### Hey Pythonistas! Learn how to create, parse and verify your #JWTs in #Python using #PyJWT.

### <br>
JSON Web Tokens, or JWTs for short, are all over the web. They can be used to track bits of information about a user in a very compact way and can be used in APIs for authorization purposes. This post will cover what JSON Web Tokens are and how to create JWTs in Python using the most popular JWT library: [PyJWT](http://pyjwt.readthedocs.io/). We are also going to see how you can sign and verify JWTs in Python using asymmetric algorithms.
 
Before we get started, there's a collection of scripts with all the code I'm going to cover in this blog post [available in this GitHub repository](https://github.com/auth0-blog/jwts-in-python).


## Introduction to JWTs
 
JSON Web Tokens are a very compact way to carry information. They are defined as a 3 part structure consisting of a header, a payload, and a signature.
The header and payload both have what we call claims, they are _statements_ about an entity and all additional data that needs to be passed in the request:

- In the header, we find claims about the token itself, like what algorithm was used for signing that token;
- While the payload (or the body) carries information about a given asset. In a login scenario, this would be information about the user.

The final part is the signature, and it helps you ensure that a given token wasn't tampered with because signing JWTs requires either a secret or a public/private key pair agreed on previously. The signature itself is based on the header and payload, in combination with a secret, or private/public key pair, depending on the algorithm.

Claims follow the standard key-value pairing that you see in dictionaries and JSON objects, and most of the claims commonly used in JWTs have a standardized naming defined in [the JWT specification (RFC7519)](https://datatracker.ietf.org/doc/html/rfc7519). In the RFC7519, you'll also [find the description of what each claim means](https://datatracker.ietf.org/doc/html/rfc7519#section-4.1.4).

If you want to know more about JWTs, you should [check this page that talks about JSON web tokens](https://auth0.com/learn/json-web-tokens/) in a very practical way, or if you want a more in-depth resource, I recommend the **"JWT Handbook"** available for _free_ in the link below.

<include src="ebook-ads/JwtHandbook" />

While it's nice to read definitions and explanations, it's sometimes more beneficial to actually see how something works. In the rest of this article, you'll learn the ins and outs of JSON Web Tokens by creating, signing, verifying, and decoding your very own JWT.

## Requirements

[Read more](https://auth0.com/blog/how-to-handle-jwt-in-python/?utm_source=content_synd&utm_medium=sc&utm_campaign=python)
Storybook - Organizando seus widgets
Tags: flutter, webdev, mobile
Published: 2021-07-05 11:16:47

Qualquer desenvolvedor independente da fase de sua carreira já teve algum tipo de dificuldade para entender o código, as funcionalidade e algum componente.
Fez e refez a lógica do fluxo para entender o que cada item do código fazia, esse onboarding do projeto acaba possuindo uma curva de aprendizagem. Bom seria se possuíssemos algum tipo de organizador dos componentes ... pois isso já é possível.:open_mouth:  

Já conhecido no React o Storybook é um organizador open source, podendo ser usado no terminal, ou seja nossos componentes podem ficar dentro da ferramenta para facilitar e auxiliar a organização. 

O Storybook mesmo sendo popular em projetos React, também pode, ser usado em projetos Flutter para organização de nossos widgets. 

Para começar a usar:

**1. Instale**

Na raiz do seu projeto digite no terminal:

 `$ flutter pub add storybook_flutter`

**2. Usando o Storybook** 

Crie o arquivo `main_storybook.dart` 


Exemplo de código:

```
void main() {
  runApp(StorybookApp());
}

class StorybookApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Storybook(
    children: [
      Story.simple(
        name: 'Your Widget Name One',
        child: const TextField(
          decoration: InputDecoration(
          border: OutlineInputBorder(),
          labelText: 'Input field',
          ),
        ),
      ),
      Story.simple(
        name: 'Your Widget Name Two',
        child: const Text('Text Widget'),
      ),
       Story.simple(
        name: 'Your Widget Name Three',
        child:const Icon(
           Icons.person
        ),
      ),
    ],
  );
}
```

#### Atributos

	name: o Nome do seu Widget
	child: seu Widget

Importante que o atributo name possa ajudar a identificar seus widgets. 

### Compilando seu código

`flutter run -d chrome -t caminhoAte/main_storybook.dart`

**3. Widgets**

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

Os Widgets serão exibidos individualmente, para melhor visualização e controle do código.

##### Primeiro Widget
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c0obipi05izlf9y8v66v.png)

##### Segundo Widget
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p0r2yvp94sesgoau47k6.png)

##### Terceiro Widget
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lcnmlhw2n0gbd70z2jp3.png)

**4. Outros Recursos**

Além da organização do código o Flutter Storybook possui algumas outras funcionalidades que nos auxiliam no desenvolvimento:

- Permite a visualização dos seus widgets em diversos dispositivos 
- Alterar o tema para Dark 
- Argumentos dinâmicos em seus widgets

Com o Flutter Storybook além de facilitar a manutenção do código ajudará seu time no onborading de novos dev's. Para maiores informações consulte a documentação [Flutter Storybook](https://pub.dev/packages/storybook_flutter)

Aproveita e deixa ai nos comentários se você já conhecia o Flutter Storybook e a experiência de desenvolver com ele. 

Valeu :v:
how to find your bubble
Tags: devjournal
Published: 2021-07-05 11:00:52

a thing I have learned about bubbles (written by a developer who revels in the solace of being inside one)

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

/ˈbəb(ə)l/ (n.) A thin sphere of liquid enclosing air or another gas. Often figuratively represents a good or fortunate situation.

What bridges the — seemingly distant from reality — gap between you and that new feature or between you and a bug resolution? Perhaps, a bubble.

In long-drawn-out seasons, it is solitude that keeps every bubble (from dying a sudden demise).

Though it’s unlikely to last, ’tis better to have had one and lost than never to have had one at all.

Huh?

---

Further Reading: centimentalcomics.com
Empleos en Data y Analytics LATAM — Junio 2021 (25/06)
Published: 2021-07-05 10:48:25

Te compartimos las ofertas laborales del mes para áreas de Data, Analytics y Cloud 👨‍💻👩‍💻

✅ [Big Data Engineer Senior/Lead - Canvia (Perú)](https://canvia.hiringroom.com/jobs/get_vacancy/60a6f986a9faad6e397a5b66)
✅ [Big Data Engineer - Canvia (Perú)](https://canvia.hiringroom.com/jobs/get_vacancy/60ac2cbd4db41a51d8602c1c)
✅ [Data Engineer - Globant (Chile)](https://www.linkedin.com/jobs/view/2597328202/?alternateChannel=search&refId=S4Aca3lWJCOIssp%2FSV5SOA%3D%3D&trackingId=Shs9Tq9Wtt6pwXLRPcRDfw%3D%3D&trk=d_flagship3_search_srp_jobs)
✅ [Data Analyst - VMware (Colombia)](https://www.linkedin.com/jobs/view/2591598953/?alternateChannel=search&refId=S4Aca3lWJCOIssp%2FSV5SOA%3D%3D&trackingId=AMhqBACRjT7n41YENUp%2FAg%3D%3D&trk=d_flagship3_search_srp_jobs)

Aprende, aplica y crece en proyectos de Data y Analytics en Cloud.

Únete al #DataHackChallenge:
👉🌐 https://go.datahacks.ai/challenge
🔥🔥you have never seen this music app before
Tags: html, css, uiweekly, webdev
Published: 2021-07-05 10:42:22

Hello, I am kunaal, glad you are here. Today we'll learn to create an awesome fully functional music player with javascript. We'll not use any library. Our music player has three sections - Home, Music Player and Playlist section. In Home section we have one smooth transitioning carousel and we have some playlists card with horizontal scroll.

After that Our music player section has all three buttons to play/pause music forward/backward music. We also have a seek bar for our music player which updates and we can jump into any time on the song with that seek bar. Our player has playing song name, artist name, current time and song duration. We have a lot of things more. You can see the demo in the video or you can watch the coding tutorial of it.

# Video Tutorial

{% youtube 4UZXco8rZSE %}

Thank you for reading if you have any doubts feel free to ask me in comments.

Have a nice day.

[Source Code](https://www.patreon.com/modernweb), [Follow me on Instagram](https://www.instagram.com/modern_web_channel/), [Subscribe my youtube channel](https://www.youtube.com/c/modern_web?sub_confirmation=1)