teleren/devto huggingface dataset:
🚀10 Trending projects on GitHub for web developers - 15th January 2021
Tags: react, javascript, typescript, webdev
Published: 2021-01-15 15:02:16

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. React Boilerplate meets CRA

The official Create React App template of React Boilerplate.Setup Create React App with React Boilerplate. Highly scalable & Best DX & Performance Focused & Best practices

{% github react-boilerplate/react-boilerplate-cra-template %}

---

### 2. Unform

Unform is a performance focused library that helps you creating beautiful forms in ReactJS & React Native with the power of uncontrolled components performance and React Hooks.

{% github unform/unform %}

---

### 3. Metrics

Generate your metrics that you can embed everywhere, including your GitHub profile readme! An image generator with 20+ metrics about your GitHub account such as activity, community, repositories, coding habits, website performances, music played, starred topics, etc. that you can put on your profile or elsewhere!

{% github lowlighter/metrics %}

---

### 4. React Developer Roadmap

Roadmap to becoming a React developer. This chart acts as a "What should I learn next as a React developer?"

{% github adam-golab/react-developer-roadmap %}

---

### 5. JavaScript Questions

A long list of (advanced) JavaScript questions, and their explanations.

{% github lydiahallie/javascript-questions %}

---

### 6. Node-RED

Low-code programming for event-driven applications. Node-RED is a programming tool for wiring together hardware devices, APIs and online services in new and interesting ways

{% github node-red/node-red %}

---

### 7. es6-cheatsheet

A cheatsheet containing ES2015 [ES6] tips, tricks, best practices and code snippet examples for your day to day workflow.

{% github DrkSephy/es6-cheatsheet %}

---

### 8. builder

Drag and drop page building using your code components. Bring your design systems to life!

{% github BuilderIO/builder %}

---

### 9. React Diagrams

A super simple, no-nonsense diagramming library written in react that just works

{% github projectstorm/react-diagrams %}

---

### 10. Material Dashboard

Material Dashboard - Open Source Bootstrap 4 Material Design Admin

{% github creativetimofficial/material-dashboard %}

---

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.
Blog Golf: Smallest Post Wins
Tags: culture, bloggolf, contributorswanted, series
Published: 2021-01-15 15:01:24

At Focused Labs we have been really trying to emphasize blogging. So, our Editorial Board sat down and brainstormed. The goal of the Editorial Board was to make blogging fun, show that it doesn't take tons of time to write good posts, and get people to post! 

They came up with an awesome idea, like [code golf](https://codegolf.stackexchange.com/), why don't we try Blog Golf!


Here are the rules:
* Write a blog post in 15 minutes or less
* Smallest blog post wins
* Code samples are judged on size of code not words

The winner will win a _life changing prize_!

Watch out for a series of posts each in Blog Golf and try yourself by tagging `#bloggolf` to guarantee some 🦄🦄🦄

![Golf](https://media.giphy.com/media/bC54CmvT2XC9i/giphy.gif)
Relational Query using Parse
Tags: reactnative, react, javascript
Published: 2021-01-15 14:50:06

Do you want to make a relational Query on Parse? Take a look at the example below.


Dog(...)-(1)Owner


```javascript
async =>(){
        const Dog = Parse.Object.extend("Dog");
        const query = new Parse.Query(Dog);
        query.include("owner")
        const results = await query.find();
}  
```
My first hacking experience
Tags: localhackday, mlh, majorleaguehacking
Published: 2021-01-15 14:42:25

I participated in MLH local hack day hackathon which was a week long hackathon and had various daily and weekly challenges. I tried out these challenges and explored a new language rust and also got familiarised to node.js. This was my first hackathon and this has marked the begining of my hacking journey. I would like to thank MLH for organizing this hackathon :)
January 15th, 2021: What did you learn this week?
Tags: weeklylearn, discuss, weeklyretro
Published: 2021-01-15 14:33:51

It's that time of the week again. So wonderful devs, what did you learn this week? It could be programming tips, career advice etc.

<center>

![A picture it a dog waving their paw with the caption “Learning, cool at school or at home”](https://media.giphy.com/media/1xpm1nTQiRL96Di3Q6/giphy.gif)
</center>

Feel free to comment with what you learnt and/or reference your TIL post to give it some more exposure.

{%tag todayilearned %}

And remember, if something you learnt was a big win for you, then you know where to drop it as well.👇👇🏻👇🏼👇🏽👇🏾👇🏿

{% https://dev.to/devteam/what-was-your-win-this-week-29fl %}

<center>

![Drama from Entourage screaming “Victory!”](https://media.giphy.com/media/lnlAifQdenMxW/giphy.gif)
</center>
Holy moly if I had to say one thing that has helped me the most so far is....
Tags: javascript, regex, learn, linkedin
Published: 2021-01-15 14:33:04

Holy moly if I had to say one thing that has helped me the most so far is....LEARN "regex". I'm almost done with all the lessons and I feel like I have a very powerful tool in my back pocket NOW. Four min videos, it's free you, can't go wrong, DO IT!



#helpful  #mindfulness #success #softwareengineer #regex 



https://lnkd.in/g8y7nkq
Utiliser l’API de stockage IndexedDB en JavaScript
Tags: javascript, api
Published: 2021-01-15 14:09:00

En plus de Web Storage, il existe une autre API qui va nous permettre de stocker des données côté client : l’API IndexedDB.

L’API IndexedDB est une API de stockage de données côté client qui va être utilisée pour stocker des quantités importantes de données structurées.

La quantité de données qui va pouvoir être stocké est beaucoup plus grande que ce qu’on pourrait stocker avec Web Storage et cela rend donc IndexedDB plus puissante que Web Storage.

IndexedDB est un système de gestion de bases de données transactionnel. On peut le comparer à d’autres systèmes de gestion de base de données basés que le SQL mais, à la différence de ces derniers, IndexedDB est orienté objet.

On va donc pouvoir stocker des objets sous la forme clef/valeur tout comme on peut le faire avec Web Storage mais, à la différence des données stockées avec Web Storage, on va ici pouvoir stocker plus ou moins n’importe quel type de valeur et définir également différents types de clefs.

Notez par ailleurs que les opérations effectuées par IndexedDB sont réalisées de manière asynchrone, et ceci afin de ne pas bloquer le reste de la page.

Notez également qu’IndexedDB respecte la politique de même origine, ce qui signifie qu’on pourra accéder aux données stockées pour le domaine courant uniquement.

En pratique, pour utiliser IndexedDB, on suivra le schéma suivant :

-On ouvre une connexion à la base de données
-On crée un objet de stockage ;
-On initie une transaction ;
-On effectue des requêtes ;
-On crée des gestionnaires d’évènements liés au résultat de nos requêtes.

On va apprendre à faire tout ça dans la suite de cet article..erci de partager..
Day 22 of 100DaysOfCode : Simple Program To Find Grade Of Students
Tags: 100daysofcode, codenewbie, beginners, python
Published: 2021-01-15 14:01:02

Today is my 22th day of #100DaysOfCode and #python. Today I did not learned new thing more. I revised  course which is already completed by me from programming for everybody on [coursera.](https://www.coursera.org/learn/python/lecture/M01HR/4-1-using-functions)
 
I tried to write some python code in mathematical problem. Did some  part of my simple project on basic CSS. And I tried to write simple python program to find out the grade of students from their marks.

# Simple Grade Finder Program
My program is given below. In the program we give marks of each subject either integer or float type. After all marks were given we calculate total of marks and find out percentage . After that we can use if else statement to find grade. My program is given below.
```python
English = float(input('Please enter the english marks:'))
Nepali = float(input('Please enter the nepali marks:'))
Social = float(input('Please enter the social marks:'))
Computer = float(input('Please enter the computer marks:'))
Mathematics = float(input('Please enter the mathematics marks:'))
Population = float(input('Please enter the population marks:'))
Moral = float(input('Please enter the moral marks:'))
Optmath = float(input('Please enter the optmath marks:'))
Total = English + Nepali + Social + Computer + Mathematics + Population + Moral + Optmath 
Percentage = (Total /800)* 100
print('Total Marks = %.2f' %Total)
print('Marks percentage = %.2f' %Percentage)
if(Percentage >= 90):
    print('A Grade')
elif(Percentage >= 80):
    print('B Grade')
elif(Percentage >= 70):
    print('C Grade')
elif(Percentage>= 60):
    print('D Grade')
elif(Percentage >= 40):
    print('E Grade')
else:
    print('fail')


```
After running this program we can get following output.

```python
Please enter the english marks:90
Please enter the nepali marks:80
Please enter the social marks:77
Please enter the computer marks:98
Please enter the mathematics marks:78
Please enter the population marks:78
Please enter the moral marks:88
Please enter the optmath marks:89
Total Marks = 678.00
Marks percentage = 84.75
B Grade
```
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Day 22 of <a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a> and <a href="https://twitter.com/hashtag/Python3?src=hash&amp;ref_src=twsrc%5Etfw">#Python3</a> <br>* More about python function, list, loop, variable<br>* Revised programming for everybody from [Coursera](<a href="https://t.co/wGKlbeTnDy">https://t.co/wGKlbeTnDy</a>)<br>* Simple program to find the grade sheet of students <a href="https://t.co/19Ks64U0pA">pic.twitter.com/19Ks64U0pA</a></p>&mdash; Durga Pokharel (@mathdurga) <a href="https://twitter.com/mathdurga/status/1350076555096018949?ref_src=twsrc%5Etfw">January 15, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
TypeScript interfaces
Tags: javascript, typescript, webdev
Published: 2021-01-15 13:58:10

Interfaces in typescript are a way to define the data types (`string`, `number`, `boolean`, etc.) of the properties in an object, arguments of functions or classes, or values of arrays or tuples.

## An object with an interface

To initialize an object that has its properties controlled by exclusively by the data types we need, we can create an interface and set the initialized object type `let person: PersonConfig = ...` to the interface.

```typescript
interface UserConfig{
    name: string;
    age: number;
    programmer: boolean;
}

let user: UserConfig = {
    name: "Santiago",
    age: 30,
    programmer: true
}
```

Changing `age: 30` to `age: '30'` will throw the error: `'string' is not assignable to a 'number'`. 

## A function with an interface

We can create an interface that controls the arguments of the function and the return value. 

```typescript

interface UserConfig{
    name: string;
    age: number;
    programmer: boolean;
}

interface NewUserConfig{
 (name: string; age: number; programmer: boolean;) : UserConfig
} 
const createUser : NewUserConfig = (n: string; a: number; p: boolean;) : UserConfig => {
 const user: UserConfig = {name: n, age: a, programmer: p} 
 return user
} 

```

We make sure to return an object `user` that has the type `UserConfig` we defined in the previous code snippet. But also we restrict the data types of the arguments passed into the functions. The type of the function is `NewUserConfig`, while its return type is `UserConfig` and its argument types are: `name: string; age: number; programmer: boolean;`.

Feel more than welcome to reach out with comments/ideas on [LinkedIn](https://www.linkedin.com/in/santiago-salazar-pavajeau/) or [Twitter](https://twitter.com/santispavajeau)

Resources: [TypeScript Handbook: Interfaces](https://www.typescriptlang.org/docs/handbook/interfaces.html)
What is the best programming language for building an online services marketplace?
Published: 2021-01-15 13:46:54

The appropriate programming language differs from developer to developer. 

The main reasons to use Node.js and Angular to create a [marketplace](https://leonacreo.com) marketplace are the followings:

1. JavaScript can be used for both backend and frontend development.

2. It comes with a wide choice of libraries and modules for every feature, so we just choose the best one.

3. A lot of high-level professionals code on JavaScript so good community support and reduces vendor lock.

4. JavaScript websites launch extremely fast, so users have a better experience.

5. The main Angular developer is Google.



Using JavaScript is definitely more work but the payoff is in a better product and today users are sophisticated and demand a good experience or you lose them—fast.

You can build something like this using Wordpress, you’ll be limited to several things and you won’t have the freedom to change a lot.

Your other choice is to build a store from scratch, there are several options, you can have a look at Python’s Django, or PHP’s Laravel, or Ruby on Rails

I personally recommend Django, it’s powerful, easy, so simple, you won’t have to deal with databases, you code using Python “which is a pretty easy language”. 

It will get what you want to be done in no time.

Django is easy to learn, the documentation is perfect, you can google for tutorials and books, there is a fairly big community on Facebook and StackOverFlow! 

So good luck!
proof
Published: 2021-01-15 13:46:30

This is an OpenPGP proof that connects [my OpenPGP key](https://keyoxide.org/E4FACA455E2AA6646B13F53DE62923D4748526EC) to [this dev.to account](https://dev.to/haxnet). For details check out https://keyoxide.org/guides/openpgp-proofs

[Verifying my OpenPGP key: openpgp4fpr:E4FACA455E2AA6646B13F53DE62923D4748526EC]
Thymeleaf form-handling is underrated.
Published: 2021-01-15 13:46:10

Single-page applications may have sleek forms and, AJAX calls to supply details to the server. But it cannot beat the simplicity of form-submissions. With templating libraries like thymeleaf and its support towards Spring-MVC makes form handling hassle-free.

A typical way to handle form parameters is through `@RequestParam` annotation. For example, the following snippet is to take three form parameters to a POST endpoint.

~~~java
@RequestMapping(value = "/", method = RequestMethod.POST)
public String handleForm(@RequestParam("firstName") String firstName,
    @RequestParam("lastName") String lastName, @RequestParam("role")
    Role role) {
  logger.info("first Name : {}", firstName);
  logger.info("Last Name : {}", lastName);
  logger.info("Role: {}", role);
  return "users";
}
~~~

But this would be cumbersome when the form has too many parameters. For this reason, Spring MVC lets you wrap the parameters into a Form-Backed bean. 

To do this, you need to define a class that would represent the FORM elements as POJO. Then use this class as a `@ModelAttribute`.

~~~java
@RequestMapping(value = "/", method = RequestMethod.POST)
public String createUser(@ModelAttribute UserInfo userInfo) {
  logger.info("first Name : {}", firstName);
  logger.info("Last Name : {}", lastName);
  logger.info("Role: {}", role);
  return "users";
}
~~~

Here is a simple tutorial and demo on [**Thymeleaf Form Handling in Spring Boot**](https://springhow.com/thymeleaf-form-handling/). This post explains how to keep model along with forms.
2020, favorite repositories
Published: 2021-01-15 13:37:18

Freedom of source, Freedom of usage, Freedom of enhancement.
Let's thank back those that provide these helpful tools.

![Love back](https://media.giphy.com/media/HJmz8M2YsimLm/giphy.gif)


---

# web-tools :: [excalidraw](https://github.com/excalidraw/excalidraw)

> Virtual whiteboard for sketching hand-drawn like diagrams 

one of my most used tools this year. love how simple it is to use for sketching, being able to export, embed, and be able to link it back to its source
https://excalidraw.com

---

# cli :: [onedrive](https://github.com/abraunegg/onedrive)

> A free Microsoft OneDrive Client which supports OneDrive Personal, OneDrive for Business, OneDrive for Office365 and SharePoint.

awesome work; still getting used to it, due to its tricky  file handling when dealing with real-time synchronizations between multiple devices, but been trying both the fork and the original project and gets the job done.

---

# tools :: [symless; synergy-core](https://github.com/symless/synergy-core)

> Open source core of Synergy, the keyboard and mouse sharing tool 

just started using this awesome  at the beginning of 2021, as a software [KVM](https://www.wikiwand.com/en/KVM_switch), but already want to thank them for this awesome productivity tool. will make a more extensive post through this new year.

---

# web-tools :: [web scrobbler](https://github.com/web-scrobbler/web-scrobbler)

> Scrobble music all around the web! 

took back my [last.fm](https://www.last.fm/user/Wideawakening) account and due to the lack of having a main music listening platform I took advantage of this awesome firefox plugin to help bump up my tracks :)

---

# tools :: [anki](https://github.com/ankitects/anki)

> Anki for desktop computers 

huge fan of anki platform since I started studying English long time ago. I still use it and being able to synchronize both desktop and mobile applications is really nice :) thanks for making learning easier!
Understanding Rendering in Web Apps: SPA vs MPA
Published: 2021-01-15 05:32:04

# Introduction

Single Page Applications (SPAs) and Multi-Page Applications (MPAs) are architectural patterns for building web applications.

SPAs are reactive web applications that give a native look and feel without page loads. SPAs owe this to AJAX/Client-Side Rendering typically provided by a client-side framework such as react/vue/angular.

Many in the industry refer to more traditional web applications as Multi-Page Applications (MPAs). Such applications are comprised of multiple webpages that the user navigates between. 

# Architecture and Rendering
While many have equated CSR with SPAs and SSR with MPAs, they are treaded as patterns which can be applied in either rendering method.

## SSR MPAs
Server-Side Rendered Multi-Page Applications are full-stack applications built with server-side frameworks and template engines. These applications are comprised of multiple pages which are rendered on the fly by the server. Content Management systems also fall into this category.

Examples
* [Django](https://www.djangoproject.com/) (Python)
* [Express](https://expressjs.com/) (Nodejs)
* [Laravel](https://laravel.com/) (PHP)
* [ASP.NET](https://dotnet.microsoft.com/) (C#)
* [Wordpress](https://wordpress.org/) (PHP)
* [Drupal](https://www.drupal.org/) (PHP)
* [Grav](https://getgrav.org/)

## SSR SPAs
Server-Side Rendered Single-Page Applications are our Isomorphic javascript frameworks. These technologies deliver the first render of a SPA from the server instead of the browser.

## CSR SPA
Client-Side Rendered Single-Page Applications are any app that is built with a client-side framework with a router. A client-side router is a library which allows users to navigate to different parts of the application without needing to load a new page.

## CSR MPA
Client-Side Rendered Multi-Page Applications are your regular static sites. These websites are comprised of webpages built with just HTML/CSS/JS and can even be deployed without a web server (think [JAMStack](https://www.educative.io/edpresso/what-is-jamstack?aid=5082902844932096&utm_source=google&utm_medium=cpc&utm_campaign=edpresso-dynamic&gclid=Cj0KCQiA9P__BRC0ARIsAEZ6irhSZtcmhnTvfNMMuf0G2D6NSG378LrSV4-XwfVTphMmFytAJ1GJHCsaAp2xEALw_wcB)). These sites may have some dynamic content brought via javascript and an API, widget or iframe but do not utilize a client-side router. Static Site Generators are tools which help in building out static sites.

Some examples:
* [Gatsby](https://www.gatsbyjs.com/)
* [eleventy](https://www.11ty.dev/)
* [jekyll](https://jekyllrb.com/)
* NextJS (SSG Feature)
* NuxtJS (SSG Feature)

# More on web app arhictectures:
* [MPAs vs SPAs](https://chunkbytes.com/single-page-applications-vs-multi-page-applications/)
* [App Shell UX](https://web.dev/app-shell-ux-with-service-workers/)
* [MPA, SPA or Hybrid?](https://medium.com/swlh/spa-mpa-or-a-hybrid-42fdf6b3415c)
 
Now that we understand the basics of rendering and app architectures, we shall finally look at comparing the approaches in the next and final post of this series.
Backup MySQL Database That Running on Docker Container
Tags: mysql, database, docker
Published: 2021-01-15 13:36:14

In this article, i want to share some information how to backup MySQL database that running on Docker Container.

The environment that i use is Ubuntu Linux running Docker container. MySQL is running on top of Docker container and mysql backup is using mysqldump.

Here are few steps, how to backup MySQL that running on Docker container:

1. Check your MySQL container name

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

2. Backup your database using this command:

     `docker exec [mysql_container_name] /usr/bin/mysqldump -u [mysql_username] --password=[mysql_password] [database_name] > [destination_path]`

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

3. Verify your backup destination path. Make sure backup sql file has been added to destination

     ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qllfoltxqxyso2u8g8pq.jpg)
20 Best Premium TYPO3 Templates
Tags: typo3, typo3template, typo3theme
Published: 2021-01-15 13:32:02

One of the first things you need to think about when you start your online TYPO3 business website is how your site is going to look. It’s crucial to offer a high-quality website look, feel, and performance that engages the audience. For that, you will definitely need a premium TYPO3 theme.

With over very limited and finite premium TYPO3 Templates available, it’s quite difficult for TYPO3 audiences to find the best TYPO3 Template to build their TYPO3 website. 

Check out all the TYPO3 premium template at- https://t3terminal.com/blog/premium-typo3-templates/