teleren/devto huggingface dataset:
🚀10 Trending projects on GitHub for web developers - 24th July 2020
Tags: react, javascript, css, webdev
Published: 2020-07-23 20:49:42

Trending Projects is available as a weekly newsletter please sign up at [www.iainfreestone.com](https://www.iainfreestone.com) to ensure you never miss an issue.

### 1. Adobe - React Spectrum

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.

{% github adobe/react-spectrum %}

---

### 2. Web Developer Roadmap 2020

Roadmap to becoming a web developer in 2020

{% github kamranahmedse/developer-roadmap %}

---

### 3. Foam

Foam is a personal knowledge management and sharing system inspired by Roam Research, built on Visual Studio Code and GitHub.

{% github foambubble/foam %}

---

### 4. ReDoc

OpenAPI/Swagger-generated API Reference Documentation

{% github Redocly/redoc %}

---

### 5. x-spreadsheet

A web-based JavaScript spreadsheet

{% github myliang/x-spreadsheet %}

---

### 6. Wiki.js

A modern, lightweight and powerful wiki app built on NodeJS

{% github Requarks/wiki %}

---

### 7. Rocket

Rocket is an async web framework for Rust with a focus on usability, security, extensibility, and speed.

{% github SergioBenitez/Rocket %}

---

### 8. Fastify 

Fastify is a web framework highly focused on providing the best developer experience with the least overhead and a powerful plugin architecture. It is inspired by Hapi and Express and as far as we know, it is one of the fastest web frameworks in town.

{% github fastify/fastify %}

---

### 9. Handsontable

Handsontable is a JavaScript/HTML5 data grid component with spreadsheet look & feel.
It provides easy data binding, data validation, filtering, sorting and CRUD operations.

{% github handsontable/handsontable %}

---

### 10. Animate.css

Just-add-water CSS animation

{% github animate-css/animate.css %}

---

Trending Projects is available as a weekly newsletter please sign up at [www.iainfreestone.com](https://www.iainfreestone.com) to ensure you never miss an issue.

If you enjoyed this article you can [follow me](https://twitter.com/iain_freestone) on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.
Deno vs Node | Is Node.js Dead? Future of Deno 2021?
Tags: deno, node, javascript
Published: 2020-07-23 20:34:43

Deno is developed to overcome the Node.js Design Issues and provides a new modern development environment using ES6 etc.

Deno vs Node is a very hot topic for the discussion in developer and programmers community since Deno version 1.0 got released.

Node.js and Deno both are very similar. But the question is if we already have Node.js then what is the need for Deno. So Answers of this question is Since JavaScript has changed a lot since 2009 (when node.js was created). Now we have support for Promises, Async/Await, ES modules, Typed Arrays, and TypeScript, etc. Deno has built-in support of these new JavaScript features.


Let's understand both using the following key points.
1. ES6 Support:
Deno uses ES Modules as the default module system, whereas Node.js uses CommonJS.

2. TypeScript Support:
Deno supports TypeScript out of the box, which means that we don’t need to manually install and configure tools to write TypeScript code.

3. Package Manager (NPM):
In Deno, External dependencies are loaded using URLs, similar to browsers. There is also no package manager and a centralized registry like NPM - node_modules.

In short - Deno doesn't use NPM like Node.js. Deno uses modules referenced as URLs.

Deno does not use package.json.

4. Security:
In Node.js application by default has permission to system calls, environment variables, accessing files, sockets, network, etc.

In Deno application you have to provide permissions to the code for system calls, environment variables, accessing files, sockets, network, etc.

5. Built-in Tools:
Deno also provides a set of built-in tools, like a test runner, code formatter and bundler, etc.

Is NodeJS Dead?
Ans:- No

>>> Please share your views in the comment box, Happy Coding!
Hidden Instagram Hacks and Features
Tags: ios, phones, fonts, instagram
Published: 2020-07-23 20:22:59

**Get notifications when your favorite people post.**

Never want to miss an Instagram post from your favorite influencers again? You can choose to get a notification every time a specific user posts a new photo. All you have to do is turn on notifications for each user individually.

To turn on these notifications, visit a user's profile, click the three dots in the upper right-hand corner of the post, and choose "Turn on Post Notifications" from the menu that appears.

**Clear your search history**

Make sure no one ever finds out that you’ve been hunting for photos of “Mr Clean shirt off” by wiping your Instagram search history squeaky clean.

How to do it:

1. Go to your profile
2. Open the hamburger menu in the top right corner
3. Tap Settings
4. Tap Security
5. Scroll to the bottom, then tap Clear Search History or Search 6. History

**To Add a Special Font to Your Bio via Mobile**

Add a new font to your Instagram bio via your mobile device using a website like https://exoticfonts.com/. Open the site on your phone, type your desired bio text in the lefthand text box, and you'll see the same bio text in different typefaces appear on the right.
Real-Time Chat Application with React, Nodejs, & Socket.io
Tags: react, todayilearned, javascript
Published: 2020-07-23 20:07:06

My new chat application is now live! I have been very excited to learn how you can make a messaging app similar to Discord or FaceBook Messenger. 

{% github mrshawnhum/chat-app %}

## Front-End

I used React to complete the front-end of my chat application. I have also added on React-emoji to allow emojis on the messages. In a later update, I will be adding on an emoji-picker to confidently add emojis. If you fork my project, you will need Yarn Start to load the front-end.

## Back-end

For my back-end, I used Nodejs with its framework Express. Socket.io has also been used as it is a fantastic engine that enables realtime, bi-directional communication between the client and server. The entire server file has been published to Heroku. If you would like to fork the project, you will need to run NPM Start to run the server along with the front-end.

## Future Enhancements

I will be releasing new updates overtime on this project. My next update will be to incorporate MongoDB to store users' information as well as created rooms. I would also like to add in the ability switch between different rooms(similar to Discord). Ultimately, I want to do a complete design and UI/UX overhaul in the next coming updates.  

## Thank You

Thank you for checking out my project! I have been very excited to work on creating my chat application. Leave a comment below if you would like me to create a short tutorial on this project. Please let me know if you have any questions!
Magento 2 with Varnish Cache and SSL
Tags: magento, varnish, nginx, linux
Published: 2020-07-23 20:05:53

At [PronkoConsulting](https://www.pronkoconsulting.com/) we work every day with highload Magento 2 websites.

As you probably know, Magento 2 supports varnish by default for full page cache. And it is amazing, because we can increase the speed up to x2 - x3 times.

But here is a problem because Varnish cache doesn’t support HTTPS traffic, it is working only with http.

Of course, that assumes that your Magento 2 store isn't working fast.

Well i wrote the manual where you can find all answers to your questions and set up your own server with Magento + Varnish + SSL using nginx web server. 

Read please my tutorial [how to configure varnish with magento and ssl](https://magemastery.net/blog/how-to-configure-varnish-6-and-nginx-with-ssl-for-magento-2) and share your thoughts about that.
💻 Software Versioning: What Numbers Say
Tags: discuss, opensource, security, devops
Published: 2020-07-23 19:32:53

>Have you ever wondered how to choose a version number for your software?

For example, the latest macOS release Big Sur has version 11.0. macOS 10.0 (known as Mac OS X Public Beta) was released in 2000, so for the last 20 years, Apple has been incrementing macOS version from 10.0 to 10.15.4.

It is a common practice to track changes by their significance or getting closer to a maximum viable product. Though, surprise surprise, some projects skip numbers. Like, Microsoft Office moved from 12 to 14, Maximo Series 3 → Series 5, SUSE Linux started at 4.2, etc.

In semantic versioning, you can meet major.minor.patch approach, which lets notify on the release functionality and value of the changes (increasing major means breaking changes, while increasing minor and patch mean a medium and low level of changes, accordingly). 

>major.minor.patch (like 1.0.4)

It speaks about the developers’ attention to detail or marketing reasons as well. You can jump from, let’s say, App 3 to App 7 or move slowly from App 3 to App 3.86. Many open-source projects start versioning with numbers less than 1 to indicate that the product is not perfect yet.

With [Themis 0.13.0] (https://github.com/cossacklabs/themis) open-source high-level cryptographic library update, we have realised what a long way we came through and how high is the star we are hitching our wagon. Themis was released 5 years ago with 0.9 version. And now, when Themis is used by many developers and protects data in numerous systems, we still see a room for improvements. 

With every release we're introducing changes that help developers to protect users data while spending less time on configuring cryptography and preventing nasty errors.

**And what about you? What software versioning says for you? Which approach do you prefer?**
I built a logo maker!
Tags: startup, design, showdev
Published: 2020-07-23 19:28:41

As a developer, we all know that DESIGN IS HARD!

I've been building apps and websites for the last 10yrs+ and every time I was struggling with the branding parts. I can handle the UX, but, damn, the UI is always painful!

I met Lucie & Dagobert a year ago and we created Logology. It's a logo maker. The main difference between all the others is that every design has been made by Lucie. No random generation based on free icons libs. She designs everything before-hand!

In a few minutes you have a whole branding package to put on your projects. You just have to answer the branding survey, customize our logos proposals and you can go with CSS!

I'm pretty excited to show it to you guys! Let me know your feedback!

https://logology.co
Developer Love #1: Unintentional Gatekeeping with Brian Douglas of GitHub
Tags: devrel, podcast
Published: 2020-07-23 19:20:32

---
title: Developer Love #1: Unintentional Gatekeeping with Brian Douglas of GitHub
published: true
description: Patrick and Brian discuss gatekeeping in open source (and what to do about it), tips for delivering great talks, and more.
tags: devrel, podcast
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/jalacbreimphvrllio14.png
---

In this inaugural episode of Developer Love, host [Patrick Woods](https://twitter.com/patrickjwoods) speaks with [Brian Douglas](https://twitter.com/bdougieyo) of GitHub. 

They discuss the developer advocate role, leveraging open source knowledge, and improving inclusivity within communities.

### 🎧 Listen now
{% soundcloud https://soundcloud.com/heavybit/developer-love-ep-1-unintentional-gatekeeping-with-brian-douglas-of-github %}

* [Check out the show notes and transcript](https://www.heavybit.com/library/podcasts/developer-love/)
* [Subscribe in Apple Podcasts](https://podcasts.apple.com/us/podcast/developer-love/id1524102185)

### In this episode 
{% user bdougieyo %}
Laminas: O novo Zend Framework
Tags: php, zend, laminas, braziliandevs
Published: 2020-07-23 19:17:48

O Zend Framework foi um dos mais conhecidos e usados frameworks para PHP. Mas, como no mundo da tecnologia as coisas mudam muito, chegou uma mudança muito importante para o projeto. O assunto do artigo não é novidade, mas trago um breve resumo.

O Zend Framework, ou ZF para os íntimos, é um framework(conjunto de ferramentas) para PHP, muito robusto e ajuda muito na organização do projeto, além, é claro, de fornecer muitas ferramentas para o desenvolvimento de sistemas em PHP, como abstração de SQL, formulários, MVC, API, rotas, validadores, filtros e mais um monte de coisas.

##O Laminas Project
A [Rogue Wave Software](https://www.roguewave.com/), empresa que mantinha o desenvolvimento do Zend Framework ativo, foi comprada pela [Perforce Software](https://www.perforce.com/), em janeiro de 2019, que logo decidiu rever seu portfólio e resolveu não mais manter o desenvolvimento da ferramenta. Foi aí então que nasceu o Laminas Project. A Linux Fundation assumiu o projeto, que continua sendo software-livre, só que mantido por uma empresa focada e especializada no assunto. Foram necessárias algumas mudanças, entre elas o nome do projeto e seus subprojetos, já que eram marcas registradas. Receberam os nomes de Laminas: sendo o pacote principal; Mezzio: Antigo Zend Expressive para sistemas middleware; API Tools: o antigo Apigility para criação de APIs.
O fato de uma instituição de credibilidade como a Linux Fundation estar agora cuidando do projeto trás uma tranquilidade, principalmente para quem já conhece como os projetos são conduzidos por ela.

##Como ficou
![Pacotes com Namespace atualizados](https://dev-to-uploads.s3.amazonaws.com/i/ajoebs01zjf74hyiduyz.png)
_Pacotes com Namespace atualizados_

Além da mudança dos nomes, também foi necessário, é claro, mudar também muito material, como a documentação que já foi toda(ou quase) atualizada e já está disponível no site oficial(https://getlaminas.org/). Também, os pacotes já foram atualizados com o novo nome assumindo agora o namespace “Laminas”. Ainda não tivemos atualizações de funcionalidades significativas, mas o projeto está andando em um ritmo muito bom e já tivemos atualizações de muitos pacotes. Caso queira acompanhar, sugiro que siga o Twitter do Laminas: https://twitter.com/getlaminas

##O Futuro
Acredito que, na Linux Fundation, o futuro do Laminas Project seja promissor e garantido por uns bons anos, estando mais próximo da comunidade PHP e dos desenvolvedores que apostam na ferramenta. É provável que, ao menos por enquanto, o desenvolvimento e evolução do Laminas não seja tão rápida como era com o Zend Framework, mas certamente teremos um projeto firme e consistente para termos confiança.

##Referências
Laminas Officially Joins the Linux Foundation
https://getlaminas.org/blog/2020-04-22-linux-foundation-launch.html

The Evolution of Zend Framework to the Laminas Project
https://www.zend.com/blog/evolution-zend-framework-laminas-project
AzureFunBytes Episode 7 - @Azure Linux Storage with @otterbook
Tags: azure, beginners, linux
Published: 2020-07-23 19:10:31

Welcome back to another episode of AzureFunBytes. Every week we dive into different Azure Fundamentals in an easy to understand Twitch show.

Check out this week's stream, [David Blank-Edleman](https://twitter.com/otterbook) helps me solve three problems with on Azure with Linux Storage!

- How can I move a disk from one VM to another? 
- How can I extend a disk size on a Linux Server?
- What's a good strategy for storing massive amounts of unstructured data? David and I will discuss his tenure in technology with me and even answer some questions.

{% youtube CQwLxUuR-WU %}

David and I discuss his tenure in technology with me and even answer some questions. 

AzureFunBytes! - Byte-sized content with a live Twitch show!  Learn about Azure fundamentals with me! Live stream is available on Twitch at 2 pm EDT Thursday. You can also find the recordings there as well.

https://twitch.tv/azurefunbytes 
https://twitter.com/azurefunbytes 

Join me, ask questions and learn about Azure!

Useful Docs: 
[Expand Disks](https://cda.ms/1td) 
[Use Azure Files With Linux](https://cda.ms/1tf ) 
[Create a snapshot](https://cda.ms/1tg) 
[How to query logs from Azure Montor for VMs](https://cda.ms/1th) 
Microsoft Learn: [Azure Fundamentals](https://cda.ms/1jV )
Microsoft Azure: [$200 Free Credit](https://cda.ms/1tj)
Day 0: Hello, World - 30 days of code Hackerrank
Published: 2020-07-23 19:00:00

We are going to solve HackerRank “30 Days of Code” programing problem day 0 hello world HackerRank solution in C++, Python and JavaScript language with complete code.

### Task

To complete this challenge, you must save a line of input from stdin to a variable, print Hello, World. on a single line, and finally print the value of your variable on a second line.

![30 days of Code aayushi-droid](https://dev-to-uploads.s3.amazonaws.com/i/7zxgstwcj6712oiz74vi.jpg)

### Explanation

On the first line, we print the string literal Hello, World.. On the second line, we print the contents of the  variable which, for this sample case, happens to be Welcome to 30 Days of Code!. If you do not print the variable's contents to stdout, you will not pass the hidden test case.

### Hello World HackerRank Solution in Python

```python
# Read a full line of input from stdin and save it to our dynamically typed variable, input_string.
input_string = input()

# Print a string literal saying "Hello, World." to stdout.
print('Hello, World.')
# TODO: Write a line of code here that prints the contents of input_string to stdout.
print(input_string)
```

### Hello World HackerRank Solution in C++

```Cpp
#include <cmath>
#include <cstdio>
#include <vector>
#include <iostream>
#include <algorithm>
using namespace std;
int main() {
    // Declare a variable named 'input_string' to hold our input.
    string input_string; 
    
    // Read a full line of input from stdin (cin) and save it to our variable, input_string.
    getline(cin, input_string); 
    
    // Print a string literal saying "Hello, World." to stdout using cout.
    cout << "Hello, World." << endl;

    // TODO: Write a line of code here that prints the contents of input_string to stdout.
    cout << input_string;
    
    return 0;
}
```

### Hello World HackerRank Solution in JavaScript

```javascript
function processData(inputString) {
    // This line of code prints the first line of output
    console.log("Hello, World.");
    // Write the second line of output that prints the contents of 'inputString' here.
    console.log(inputString);
}


process.stdin.resume();
process.stdin.setEncoding("ascii");
_input = "";
process.stdin.on("data", function (input) {
    _input += input;
});

process.stdin.on("end", function () {
   processData(_input);
});
```

{% post aayushidroid/30-days-of-code-using-python-cpp-and-javascript-2l2a %}

**Check out [30 Days of Code| CodePerfectplus](https://codeperfectplus.com/category/hackerank-30daysofcode) for All solutions from this series.**
From Normal Menu to Hamburger Menu
Published: 2020-07-23 18:46:35


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

The position of the hamburger menu-btn, absolute.
.menu-btn {
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 30px;
    z-index: 2;
    display: none;
}

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

Media query:
@media(max-width:700px) {
    .menu-btn {
        display: block;
    }

/* move the search & cart icons */
   .main-nav ul.nav-right {
        margin-right: 50px;
    } 

/* move the horizontal nav menu to left side, with slide in effect animation */
   .main-nav ul.nav-menu {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        background:#f2f2f2;
        width: 50%;
        height: 100%;
        border-right: #ccc 1px solid;
        opacity: 0.9;
        padding: 30px;
        transform: translateX(-500px);
        transition: transform 0.5s ease-in-out;   
    }

    .main-nav ul.nav-menu.show {
        transform: translateX(-20px);  
    }

/* CSS of the left menu */
   .main-nav ul.nav-menu li {
        padding: 10px;
        border-bottom: #ccc solid 1px;
        font-size: 14px;
    }

    .main-nav ul.nav-menu li:last-child {
        border-bottom: none;
    }
}
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xwty07mxd9fe7mel8kxv.png)



/* Add JS to the btn click function -- toggle class .show*/
<script>
    document.querySelector('.menu-btn').addEventListener('click', ()=> document.querySelector('.nav-menu').classList.toggle('show'));
</script>
rsync - 10 examples in 11 days (Day 08)
Tags: linux, bash, rsync, tutorial
Published: 2020-07-23 18:40:17

# Day 08

> 10 examples in 11 days

## Sync Remote to Local over SSH

Yesterday on [Day 07](https://dev.to/jmr_code_social/rsync-10-examples-in-11-days-day-07-1g2m) I showed how we can sync files from our local machine to our remote machine using **ssh**. Today is the other way around. I will request a file from remote to local.

The syntax it's almost the same one from yesterday, the difference between yesterday's and the the one I am using today is that with the one below, I will not remove my remote file and the yesterday's source will be our destination and our destination will be yesterday's source. Let's remember the syntax and let me describe it to you so you can see by your self what I am talking about:

> Note: As yesterday I will not show the local nor remote machines IP. Instead I will always display 111.111.111.111 IP as remote and 222.222.222.222 as local

```
iamgroot@laptop:~$ rsync (1)--progress (2)-vhre (3)ssh (4)iamgroot@111.111.111.111:(5)[remote folder]/(6)[remote file] (7)[local folder to download]
```

Let's see what the above syntax does:

1. **--progress**: shows progress while synching
2. I used **-vhre** options

   - **-v**: verbose
   - **-h**: human readable
   - **-r**: recursive
   - **-e**: allows us to use ssh as remote shell and execute its commands

3. **ssh**: invoking the _ssh_ service to be used as remote shell.
4. ssh connection parameters
5. remote folder with full path
6. remote file to download
7. local folder where the remote file will be downloaded

> Note: If the local folder doesn't exist it will be created

I created a folder called _download-folder_ in my remote instance and inside of it I created a file called _file_download.txt_. I will download this file into my ~/Sync folder that we have been using.

```
iamgroot@remote-instance:~$ mkdir download-folder && touch download-folder/file_download.txt && echo "Hello World I will be downloaded" >> download-folder/file_download.txt
```

Now let's sync from remote to local

```
iamgroot@laptop:~$ rsync --progress -vhre ssh iamgroot@111.111.111.111:download-folder/file_download.txt ~/Sync
receiving incremental file list
file_download.txt
             12 100%   11.72kB/s    0:00:00 (xfr#1, to-chk=0/1)

sent 43 bytes  received 113 bytes  34.67 bytes/sec
total size is 12  speedup is 0.08
```

Let's check if it got downloaded

```
iamgroot@laptop:~$ ls Sync/
file1.txt  file2.txt  file3.txt  file_download.txt
```

Nice right?

As you can see so far, **rsync** is a great tool to keep your files sync locally and remotely.

We are almost ending this series, hope you all readers are enjoying it, let me know if you have any doubt and I will be more than happy to help.

---

Thanks for reading, keep it safe!!

Follow, ❤ or 🦄