teleren/devto huggingface dataset:
Top Tech Articles on Soshace Blog
Tags: webdev, beginners, java, javascript
Published: 2020-01-30 15:48:37

1. [TOP Most In-Demand IT Certifications 2020](https://blog.soshace.com/top-most-in-demand-it-certifications/) 37478 views
2. [Implementing Role-Based Access Control in a Node.js application](https://blog.soshace.com/implementing-role-based-access-control-in-a-node-js-application/) 18754 views
3. [Building a Telegram Bot with Node.js](https://blog.soshace.com/building-a-telegram-bot-with-node-js/) 14074 views
4. [List of Coding Games to Practice & Improve Your Programming Skills](https://blog.soshace.com/list-of-coding-games-to-practice-improve-your-programming-skills/)  10664 views
5. [The Ultimate Introduction to Kafka with JavaScript](https://blog.soshace.com/the-ultimate-introduction-to-kafka-with-javascript/) 10439 views
6. [Advanced Node.Js: A Hands on Guide to Event Loop, Child Process and Worker Threads in Node.Js](https://blog.soshace.com/advanced-node-js-a-hands-on-guide-to-event-loop-child-process-and-worker-threads-in-node-js/) 9836 views
7. [15 Common JavaScript Questions](https://blog.soshace.com/15-common-javascript-questions/) 9469 views
8. [Understanding Flutter Bloc Pattern](https://blog.soshace.com/understanding-flutter-bloc-pattern/) 9151 views
9. [Ultimate List of JavaScript Interview Questions](https://blog.soshace.com/ultimate-list-of-javascript-interview-questions/) 8619 views
10. [The Ultimate Guide to Drag and Drop Image Uploading with Pure JavaScript](https://blog.soshace.com/the-ultimate-guide-to-drag-and-drop-image-uploading-with-pure-javascript/) 8432 views
11. [Building React Components Using Children Props and Context API](https://blog.soshace.com/building-react-components-using-children-props-and-context-api/) 8112 views
12. [How to Architect a Node.Js Project from Ground Up?](https://blog.soshace.com/how-to-architect-a-node-js-project-from-ground-up/) 7832 views
13. [Memory Leaks in Java: A Cautionary Tale and Gentle Introduction to Preventing Memory Errors](https://blog.soshace.com/memory-leaks-in-java-a-cautionary-tale-and-gentle-introduction-to-preventing-memory-errors/) 7784 views
14. [JavaScript Design Patterns in Action](https://blog.soshace.com/javascript-design-patterns-in-action/) 7222 views
Let's talk about ecology in the tech industry
Tags: discuss, healthydebate, ecology
Published: 2020-01-30 15:35:15

I have just read this post :

{% link https://dev.to/andreirusu_/digital-ecology-l6a %}

And it explains clearly my own observations too. 
As someone who is really concerned by the state of the planet (since longer than I am coding), I want to think and debate on what could be done to improve the tech industry on those matters.

Do you know some interesting project to change some really energy consuming part of the job ?

For example, what about hosting data ? wouldn't it be interesting to be able to host our data close to us, in smaller datacenters powered by renewable energy ?
If you were a website used everywhere in the world, maybe you would need to use differents servers in differents countries, which would mean being able to power the server only at day, using solar energy ?

Or about the coding methods ? The way I see it, writting efficient code is even more important to use the less energy for the more actions. 

I think that the subject is not only very important, but will become in the future more urgent. And by that time, we must have already changed our way of thinking and doing things.
Basic Programming Concepts In Desi Way (Urdu/Hindi) — Part 1
Tags: codenewbie, beginners
Published: 2020-01-30 15:35:03

Programming ke kuch basic concepts hain jo almost sab programming languages mein same hain. Inko samajh ke properly istamal karna hi programming hai. Ap keh sakte hain ke yeh programming ki ABC hai.

* Basic Syntax
* Variables
* Data Types
* Keywords
* Basic Operators
* Decision Making
* Loops
* Functions

Please yeh list dekh kar ghabrana nahi, main iss list ko halwa bana kar khilaon ga takay programming seekh jayein aur maza bhi aaye.
Review of youtube series -Build a Project with GraphQL, Node.js, MongoDB and React.js by Academind -Part 2
Tags: graphql, node, mongodb, react
Published: 2020-01-30 15:33:17

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

Welcome to part-2 of the series. You can find part-1 [here](https://dev.to/nabendu82/review-of-youtube-series-build-a-project-with-graphql-node-js-mongodb-and-react-js-by-academind-part-1-18gl) , in which i completed first 10 videos of udemy top instructor **Maximilian Schwarzmüller** free [youtube course](https://www.youtube.com/watch?v=7giZGFDGnkc&list=PL55RiY5tL51rG1x02Yyj93iypUuHYXcB_).

In the second part which starts with video-11, he starts with installing React and other dependencies. We then create the Authentication page, which have both login and **Switch to Signup** link.

![login page](https://cdn-images-1.medium.com/max/2880/1*kwk3IuB0XPyMEGfsa9COcA.png)*login page*

The signup page is quite similar to the login page.

![signup page](https://cdn-images-1.medium.com/max/2880/1*2D1VEZHdcs3nNVQ_aTJx7w.png)*signup page*

Then we create the event page, in which we can create a event. If you are owner of the event, you are show a different message.

![Event page](https://cdn-images-1.medium.com/max/2880/1*kpugV7tmmESl5RBVOQLE_A.png)*Event page*

When you click on **Create Event** button, a modal is open which contains a form. We code this in the series.

![Add Event](https://cdn-images-1.medium.com/max/2880/1*YqE0NzuBNAtkXW0nrJKg0A.png)*Add Event*

We can do the booking by clicking on the **View Details** button. Once we click on Book, the event is booked for the logged in user.

![Book](https://cdn-images-1.medium.com/max/2880/1*yhSbXMthvCeNHuoYiHUhtA.png)*Book*

In the Booking page, we can see all the booked events of the user. We can also cancel from this page.

![Cancel](https://cdn-images-1.medium.com/max/2880/1*kL-9cIKLHLy54oBHI1BFaA.png)*Cancel*

We are also using a very good CSS spinner whenever our query is done to the GraphQL endpoint.

Now, we use a npm module **dataloader** in video-20 and it is used to improve the performance but is a bit complicated and adds complexities to the code. You can use the project very well without this also.

Also, in video-21 we use a reach charting library to show chart. We can avoid this also as it doesn’t make any sense in this project.

![Chart](https://cdn-images-1.medium.com/max/2880/1*PZYexgrLIvNWc2nwxc5EUQ.png)*Chart*

Now, the biggest plus of the whole series is that it does use any external tool like apollo server or apollo client, like in any other tutorial.

This series is like learning vanilla Javascript instead of a framework(React) and i really enjoyed it. I will create something new following this series soon.

The complete project can be found in my github repo [here](https://github.com/nabendu82/GraphQLeventBooking).
Modern Full-Stack Development with Nest.js, React, TypeScript, and MongoDB: Part 2
Tags: react, nestjs, javascript
Published: 2020-01-30 15:19:36

---
title: Modern Full-Stack Development with Nest.js, React, TypeScript, and MongoDB: Part 2
published: true
description: Learn how to build modern and secure Full-Stack applications with React, TypeScript, and Nest.js.
tags: #reactjs #nestjs #javascript 
canonical_url: https://auth0.com/blog/modern-full-stack-development-with-nestjs-react-typescript-and-mongodb-part-2/
---
TL;DR: This is the second part of a series on how to build a secure, modern full-stack application with Nest.js, React, TypeScript, and MongoDB. In the first section, you were able to build the backend API with Nest.js, secured your API by leveraging the Auth0 infrastructure, and then finally persisted data into your MongoDB database. Here, you will take the application further by building the frontend with React and TypeScript. The complete source code developed throughout this series can be found in this GitHub repository if you will prefer to head straight into the code.

[Read on 📖](https://auth0.com/blog/modern-full-stack-development-with-nestjs-react-typescript-and-mongodb-part-2/?utm_source=twitter&utm_medium=sc&utm_campaign=fullstack_pt2)
Pakistani Tech Women in 2019
Tags: womenintech, webdev
Published: 2020-01-30 15:07:06

These inspiring women in tech are making Pakistan proud.

**Ayman Sarosh**
Ayman Sarosh, a freelancer based in Pakistan. She has been awarded best Freelancere of the Year award by Payoneer.

**Asma Zaheer**
Asma Zaheer is a Pakistani computer scientist. She has been honored with IBM’s highest esteemed award “Best of IBM 2019”. It makes her the first Pakistani Computer Scientist to receive this achievement.

**Naureen Hayat**
Naureen Hayat is the Co-Founder of Tez Financial Services. A smartphone application that provides instant loans. Recently, she has won the $100K first prize at Visa Everywhere Initiative: Women’s Global Edition.

**Shanza Faiq**
Shanza Faiq is a BA-LL.B graduate of 2016. She has topped the Central Superior Services (CSS) exam and has been inducted into the Foreign Services of Pakistan Group.

**Dr. Sara Saeed**
Dr. Sara Saeed CEO and Co-Founder of a Tele-Medicine delivery system. She has been awarded Rolex Awards for Enterprise as Associate LAUREATE for her project called “Sehat Kahani”. Dr. Sara Saeed has now become the first Pakistani woman in the list of 150 Laureates.

Source: TechJuice
HTML5 Grid and IE 10, 11
Tags: html, css
Published: 2020-01-30 15:02:16

As of 1/30/2020 the Grid is [not fully functional in IE10 or IE11.](https://caniuse.com/#search=grid)

Reading up on this, it looks like one must provide fallback function with FlexBox for these two browsers.

Any tips?


02/04/2020

[Check out this new post from eblairmckee!] (https://dev.to/eblairmckee/css-grid-in-ie11-it-s-possible-and-not-as-hard-as-you-think-okp)
[PT-BR] Unidades Relativas: rem e em
Tags: css, webdev, beginners, design
Published: 2020-01-30 14:56:25

##Introdução

As unidades relativas de unidade (*%*, *vh*, *vh*, *ch*, *rem*, *em* e etc) são essenciais para quem quer criar um design responsivo para seu site. Neste artigo, irei focar apenas nas unidades *rem* e *em*.

##O Básico

Qual a diferença dessas unidades para a mais famosa, o *px*?

As medidas flexíveis (ou relativas) se adaptam automaticamente com o layout, se diferenciando das medidas padrões (como o *px*), que são absolutas.

```css
.primeiro-exemplo{
   width: 30px;
   height: 30px;
}

.segundo-exemplo{
   width: 3rem;
   height: 3rem;
}

.terceiro-exemplo{
   width: 3em;
   height: 3em;
}
```
**OBS**: As classes são *div’s* que se encontram dentro do elemento *body*.

##Unidade *rem*

O que o *rem* faz de tão especial?

Ele pega o valor que você quer transformar (neste caso, 30px) e divide pelo valor da propriedade *font-size* do root (que é o seletor *html* no *css*). 

```css
html{
  font-size: 20px;
}

.segundo-exemplo{
  width: 1.5rem /*30px % 20px = 1.5*/
  height: 1.5rem
}
```

##Unidade *em*

O *em* possui o mesmo cálculo, mas, diferentemente do *rem*, ele sempre pegará o valor do seu pai.

```css
html{
  font-size: 20px;
}

body{
  font-size: 16px
}

.terceiro-exemplo{
  width: 1.8em /*30px % 16px = 1.8*/
  height: 1.8em
}

```

##Conclusão 

Com isso, a unidade *rem* é muito mais fácil de se lidar. De tal forma, muitos desenvolvedores preferem usar ela para tudo (inclusive eu), como: definir o tamanho do *margin*, do *padding* e entre outras coisas. Portanto, se você mudar o valor do *font-size* do root através de *Media Queries*, todo o seu layout irá se adaptar e se tornará, assim, um site responsivo.

##Fontes

* https://tableless.com.br/unidade-pixels-em-rem/
* https://www.anicasagrande.com.br/o-que-sao-unidades-em-e-rem-em-css/
* https://imasters.com.br/css/unidades-css-relativas-rem-em-ch-ex-css3
* https://medium.com/code-better/css-units-for-font-size-px-em-rem-79f7e592bb97
How to use your private Go lib in Github Actions
Tags: go, github, devops, tutorial
Published: 2020-01-30 14:43:02


In this tutorial I'll use the fictional private repository called `github.com/alexrios/superlib` at the version `v1.1.0`

### Backing story

During the Continuous integration pipeline executing `go mod tidy` I was getting this error:
```
go: github.com/alexrios/superlib@v1.1.0: reading github.com/alexrios/superlib/go.mod at revision v1.1.0: unknown revision v1.1.0
```

### Why?
In order to understand how Go uses a VCS to handle dependencies I recommend this Go team blog post: https://blog.golang.org/publishing-go-modules


### Solution
Generate a token with read permission on org or user repositories and setup a substitution in git global configurations.

That way the authenticated form will always be used.

I highly recommend you to use the repository secrets to avoid exposing sensible data, in this case, the token.


```yaml
- name: Granting private modules access
        run: |
          git config --global url."https://${{ secrets.GO_MODULES_TOKEN }}:x-oauth-basic@github.com/alexrios".insteadOf "https://github.com/alexrios"     
```

more on declaring and using secrets: https://help.github.com/pt/actions/automating-your-workflow-with-github-actions/creating-and-using-encrypted-secrets
Stupid Project Idea - Text mode Tinder
Tags: projects
Published: 2020-01-30 14:38:25

---
title: Stupid Project Idea - Text mode Tinder
published: true
description: Stupid project to code on my free time
tags: projects
---

Do you know the moment when you say some stupid idea for a joke and then it sticks with you?

A text only, terminal, tinder client with ASCII rendered pictures and keyboard controls.

It's stupid and I MUST WRITE IT!


If you want in on the fun, let me know.
Quick Tip:   NiFi JSON Cleanup
Tags: 2020, apachenifi110, apachenifi111, apachenifi19
Published: 2020-02-04 00:41:59

---
title: Quick Tip:   NiFi JSON Cleanup
published: true
date: 2020-01-30 14:38:00 UTC
tags: 2020,apache-nifi-1.10,apache-nifi-1.11,apache-nifi-1.9
canonical_url: 
---

#### **From Vasilis Vagias:**
  
**evaluateJsonPath** immediately after the **InvokeHTTP** and replace the flowfile content with the **$.response** then NiFi unescapes and removes the additional quotes auto magically.  
  
This is helpful for occasions when CDSW returns JSON or other REST APIs which may double encode JSON files.
Angular 9|8|7 ActivatedRoute Route Tutorial with Example
Tags: angular987, angular, activatedroute, angular987activatedrouteroute
Published: 2020-01-30 14:33:40

---
title: Angular 9|8|7 ActivatedRoute Route Tutorial with Example
published: true
description: Angular offers ActivatedRoute interface class, it carries the information about a route linked to a component loaded into the Angular app template.
tags: Angular 9|8|7, Angular, ActivatedRoute, Angular 9|8|7 ActivatedRoute Route
---

The post (https://www.positronx.io//understand-angular-7-activatedroute-route-and-its-usage/) appeared first on [positronX.io](https://www.positronx.io).

Understand Angular 7|8|9 ActivatedRoute Interface Class
Angular offers ActivatedRoute interface class, it carries the information about a route linked to a component loaded into the Angular app template. An ActivatedRoute contains the router state tree within the angular app’s memory.

Understand ActivatedRoute Interface Class Properties

Snapshot – This is the current snapshot of this route.
URL – It is an observable of the URL segments and it matched by this route

Params – Observable of the matrix parameters scoped to this route

QueryParams – Observable of the query parameters shared by all the routes

Fragment – Observable of the URL fragment shared by all the routes


[Click here to read more](https://www.positronx.io//understand-angular-7-activatedroute-route-and-its-usage/)
Extracting PKGs on macOS
Tags: mac, macos, apple
Published: 2022-05-22 09:27:22

---
title: Extracting PKGs on macOS
date: 2020-01-30 14:31:01 UTC
tags: mac,macos,apple
canonical_url: https://hkamran.com/article/expanding-pkgs-on-macos
published: true
cover_image: https://i.imgur.com/RsrznUe.jpg
description: Ever needed to expand a PKG without using Installer? Here's a guide.
---

*Photo by: [seth schwiet](https://unsplash.com/@schwiet?utm_source=hkamran&amp;utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=hkamran&amp;utm_medium=referral)*

Let's say you're on a computer where you don’t have administrative access, but you really need to use this one piece of software. In my case, this was Apple’s SF Symbols app. There’s a pretty simple way to extract the payload from the package (.PKG).

To get started, you first need two things. A macOS-equipped computer and a DMG with a PKG inside, or just a PKG. This tutorial will detail both.

## Extracting the Package Contents
**If your PKG is inside of a DMG, start here**

To extract the payload from a PKG inside of a DMG, we need to mount the DMG. There are two ways to do this. You can either use the Finder (double-click the DMG to mount it) or use the terminal with the following command: `hdiutil attach [path to your DMG]`. For example, `hdiutil attach ~/Downloads/SF\ Symbols.dmg`.

**PKG Extraction**

Now is where we have to use the terminal. In your terminal, navigate to the folder just above where you want your PKG to be extracted. An example command is as follows: `cd ~/Documents`.

You can then proceed to extract the PKG with: `pkgutil --expand-full [package to PKG] [folder to extract to]`. For example, `pkgutil --expand-full /Volumes/SFSymbols/SF\ Symbols.pkg extracted_package`.

The contents of the PKG are now available in the `extracted_package` folder. With the `SF Symbols.pkg` extracted, it has three directories: `Distribution` and `Resources`, `SFSymbols.pkg`.

The content of the PKG is stored in the (in my case) `SFSymbols.pkg` folder.

The folder hierarchy of the Payload folder (`extracted_package/[package name]/Payload`) is very simple. The directories are the places to put the files. For example, the directory `Applications` has `SF Symbols.app`, because that needs to be put in the Applications folder on your computer.

Once you have extracted the Payload, you can eject the volume (if you are using a DMG) or delete the PKG, as you no longer need it.
Chromium Developer Tools can do that?
Tags: webdev, css, productivity, frontend
Published: 2020-01-30 14:22:13

Here are some useful features of the Chromium Developer Tools, you may have missed so far. Those should work in every Chromium based browser (Brave, Vivaldi, Opera, the new Microsoft Edge, Google Chrome, etc).

## 1. Dark mode

You can activate different themes in the developer tools settings.

![Dark mode in dev tools](https://dev-to-uploads.s3.amazonaws.com/i/1ln9rqwzy62lbsbobw5s.gif)

## 2. Shadow Editor

There is a handy editor to manipulate the `box-shadow` property.

![Box Shadow in dev tools](https://dev-to-uploads.s3.amazonaws.com/i/rudjtxf2ahh9tcu1vvq9.gif)

## 3. Color Picker

Also every color property can be adjusted with a color picker.

![Color Picker in dev tools](https://dev-to-uploads.s3.amazonaws.com/i/j11umw3eshgp51duk331.gif)

## 4. Device Toolbar

No need to resize your browser window - just use the device toolbar to test responsiveness.

![Device toolbar in dev tools](https://dev-to-uploads.s3.amazonaws.com/i/nwasjvwkvt7a22t1hvks.gif)

## 5. Layer Inspector

A great way to inspect nested elements is the layer inspector.

![Layer inspector in dev tools](https://dev-to-uploads.s3.amazonaws.com/i/buyuk5677rszxl5qnx37.gif)

## 6. Force Element State

To inspect elements in a special state (e.g. when active or hovered), you can force this state with `:hov`.

![Force element state in dev tools](https://dev-to-uploads.s3.amazonaws.com/i/w7nijg84b5yqrmjqtb91.gif)

## Wrap it up

These are just a few useful things the Chromium Developer Tools can do - I'm sure there are a lot more!

---

*Published: 30th January 2020*
Personal URL shortener with Netlify Redirects
Tags: webdev, tutorial, jamstack, serverless
Published: 2020-01-30 14:17:33


---
title: Personal URL shortener with Netlify Redirects
published: true
date: 2020-01-30 15:00:00 UTC
tags: webdev, tutorial, jamstack, serverless
canonical_url: https://waylonwalker.com/blog/personal-url-shortener-with-netlify-redirects/
---

<!-- 
![Header Image](https://dev-to-uploads.s3.amazonaws.com/i/9qliafcgfitead6yzu5t.png)
 -->

Photo by [Ozark Drones](https://unsplash.com/@ozarkdrones?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/uturn?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)


I love using URL shorteners to easily share links without hitting character limits, but they loose their meaning.  Services like bit.ly will save my links for me so that I can find them, but I would rather them to be easy to remember. https://bit.ly/2ruLwQz does not roll of the tongue so well.

# 301 🤸‍♀️

I recently discovered a really cool feature of netlify that I have always looked past, `_redirects`.  It is so simple cool and powerful, every netlify site should do this!


# But how 🤷‍♀️

simply add a `_redirects` file to the root of your your published site with the following format.  The trick I found with my gatsby site was that it needed to be in my static directory `/static/_redirects`, not root.  Next you just put space separated links on separate lines.  #'s can be used for comments.


```
# netlify redirects
# from_url to_url

# Short-Blog

/blog/scli         /blog/simple-click/
/blog/cmdt         /blog/cmd-exe-tips/
.
.
.


# splats

/b*             /blog/:splat
/n*             /notes/:splat


# External

/twitter        https://twitter.com/_WaylonWalker
/github         https://github.com/WaylonWalker
/devto          https://dev.to/waylonwalker/

```

# 🙌 Share those short links

Now with shorter links we have more space for our content without needing to use a service like bit.ly that makes our links unreadable.


This page was originally posted on my personal blog [https://waylonwalker.com/b/purl/](https://waylonwalker.com/b/purl/)
I built a tool that lets you see which servers you communicate with every time you open a webpage.
Tags: privacy, showdev, web
Published: 2020-01-30 14:04:17

---
title: I built a tool that lets you see which servers you communicate with every time you open a webpage.
published: true
description: I build a tool that lets you easily see which servers you communicate with every time you open a webpage.
tags: privacy, showdev, web
cover_image: https://www.dropbox.com/s/lmr2yhmzk04d9y2/website-roots-dev.to.png?dl=1
---

#Website Roots

Every time you open a website, you communicate with at least one server to load the site. Which servers you interact with depends on the webpage you load. While some of the servers are used to load the content, some are used to keep track of you through the web. Furthermore, it is not at all or difficult to find out which information are shared with the respective servers. Shouldn't a website tell you which information it shares with what companies in a transparent and understandable way? I built a tool that lets you easily see which servers you communicate with every time you open a webpage.

Check it out. → [https://milanwittpohl.com/projects/website-roots/](https://milanwittpohl.com/projects/website-roots/)

![](https://www.dropbox.com/s/q3bh28eb6wit998/website-roots.png?dl=1)