teleren/devto huggingface dataset:
5 Articles every WebDev should read this week (#45)
Tags: webdev, tutorial, javascript, programming
Published: 2021-11-12 16:10:33


## Towards an animation smoothness metric
> Learn about measuring animations, how to think about animation frames, and overall page smoothness.
https://web.dev/smoothness/

---

## Developer Tools secrets that shouldn’t be secrets
> Christian Heilmann: This is a talk that I’ve given at CityJS this September. I am a principal product manager for developer tools in Microsoft Edge and these are things I encountered during working on the tools, documenting them and going through user feedback.
https://christianheilmann.com/2021/11/01/developer-tools-secrets-that-shouldnt-be-secrets/?ref=sidebar&fbclid=IwAR3nUhkdzWDm6gdbtf0nWDdgImcyxpj22WRqSK2J4X5RmYI_vHv_stgZSDM
 
---

## A Guide to Load Testing Node.js APIs
> Artillery is an open-source command-line tool purpose-built for load testing and smoke testing web applications. It is written in JavaScript and it supports testing HTTP, Socket.io, and WebSockets APIs.
https://blog.appsignal.com/2021/11/10/a-guide-to-load-testing-nodejs-apis-with-artillery.html

---

## Announcing TypeScript 4.5 RC
> Today we’re excited to announce our Release Candidate (RC) of TypeScript 4.5! Between now and the stable release of TypeScript 4.5, we expect no further changes apart from critical bug fixes.
https://devblogs.microsoft.com/typescript/announcing-typescript-4-5-rc/

---

## Angular v13 is now Available
> We’re back with the brand new release of Angular v13 to share with all of you! This latest release brings all sorts of updates and features to help your teams build great apps.
https://blog.angular.io/angular-v13-is-now-available-cce66f7bc296

---

## PLUS one video: What the heck is the event loop anyway? | Philip Roberts | JSConf EU
> A good explanations of how JavaScript actually works with some handy visualisations, and fun hacks for an intuitive understanding of what happens when JavaScript runs.
https://www.youtube.com/watch?v=8aGhZQkoFbQ

---

[![MODERN FULL STACK DEVELOPMENT by Martin Krause - ISBN-13: 
9781718503281](https://www.usemodernfullstack.dev/assets/marketing-banner_583-110-dev-to.png)](https://nostarch.com/modern-full-stack)

---

Read ["MODERN FULL STACK DEVELOPMENT"](https://nostarch.com/modern-full-stack) to kickstart your career as a full-stack developer. 

It's a hands-on introduction to creating web applications with today's full-stack developers' most popular tools, libraries, and frameworks. It covers Modern JavaScript, TypeScript, React.js, Next.js, MongoDB, Mongoose, REST APIs, GraphQL, OAuth, Docker and JEST.

---

Follow me on [Twitter: @martinkr](http://twitter.com/_martinkr).

Photo by [Alex Kulikov](https://unsplash.com/@burntime) on [Unsplash](https://unsplash.com)
 
---
Vite, the hassle-free alternative to Webpack
Tags: javascript, webdev
Published: 2021-11-12 15:57:10

Webpack is the most popular module bundler to build complex JavaScript applications. It has more than 74 million downloads each month. However, **Webpack is slow and configuring it is a monumental pain.**

Thankfully, alternatives to Webpack have appeared, and one of them is [Vite](https://vitejs.dev/), from Evan You, the creator of the [Vue.js](https://vuejs.org/) front-end framework.

My favourite aspect of Vite is that **it's fast with a capital F and supports JSX, Vue single-file components and TypeScript out of the box, with zero configuration.** Just create your TypeScript/JSX file and Vite will parse it with zero hassle, in milliseconds.

Vite doesn't create itself the bundles. Under the hood, it uses two tools: [Esbuild](https://esbuild.github.io/) while you're developing, and [Rollup.js](https://rollupjs.org/) to create the production bundle.

The recommended way to create a project using Vite is by running the command `npm init vite` in the command line.

You'll be asked to write the project name and which framework you want to use (if you want to use one). Once the project is created, you run `npm install` to install dependencies and then you can start creating and editing JS and HTML files. 

Like Webpack, it has a built-in development server, that you can start with the command `npx vite`. When you need to create the production build, run `npx vite build` and everything will be built in the **/dist/** folder.

**The big drawback is that it doesn't have any tool for Server-Side Rendering (SSR) yet.** They are working on it, but it's still experimental and not recommended for production.

Also, even though Vite can parse TypeScript, it doesn't do the type checking, it just converts it into JavaScript code. You should rely on your IDE/editor to spot type errors.

**If your project already uses Webpack and you're satisfied with it, there's no reason to migrate to Vite. But if you're creating a new project, I highly recommend giving Vite a try.**

---

Become a Better JavaScript Developer! My newsletter has easy, actionable steps to level up your JavaScript skills, right to your inbox. [Click here to subscribe](https://nicozerpa.com/newsletter)
Enable CGI in Apache2
Tags: devops, webdev, python, apache
Published: 2021-11-12 15:53:07

By default when you install `apache2`, and navigate to /var/www directory you won't find the `cgi-bin` folder. To enable CGI in `apache2` follow this steps -

##Install apache2

```
$ sudo apt install apache2 -y
```

##Enable CGI module

We can find the available `modules` in `/etc/apache2/mods-available`. Here you will see the `cgi.load` module which you need to load.

Enable by-

```
$ sudo ln -s /etc/apache2/mods-available/cgi.load
```

Now as Apache configuration has changed, reload the apache service by -

```
$ sudo service apache2 reload
```

##Create CGI-script

Apache2 recognizes cgi-scripts in the directory `/usr/lib/cgi-bin`, so we need to place the script in this folder.

Lets create a cgi script in python that returns the output of `free -m` command.

```py
#!/usr/bin/python3

from subprocess import getstatusoutput as gso
import cgi

print("content-type:text/plain")
print()

print(gso("free -m")[1])
```

Make this script executable by -

```
$ sudo chmod +x c.py
```

Now just `curl` to get response

![Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vlm4mor16ie5wh5c3ayd.png)

Connect with me -

[Linkedin](https://www.linkedin.com/in/yash-indane-aa6534179/)

[GitHub Profile](https://github.com/YashIndane)
Django introduction
Published: 2021-11-12 15:52:09

This article will give you a taste of Django.


`Contents:`

1. How to choose a language for the backend?
2. Why Django is preferable?
3. Pain points solved by Django.


`How to choose a language for the backend?`

- Choosing a language and framework because you used it on your last project  or because you are more familiar with it  is not the way to go.

- Before starting a software project, you want to explore which language and framework is the best fit for your project to get desired outcomes. What matters most to you? Security, rapid development, scalability, versatility, support?

- So as a developer we have to keep in mind all the aspects, easy to code and so many other using it, is not enough to build robust software.


`Why Django is preferable?`

We have other frameworks for backend other than Django, but why do we have to choose Django, there will be something special in this right.. can't wait to know let's dive into details. 

- As we read above security, rapid development, scalability, versatility, support is very much important for any software.
Django offers a complete suite of these features which no other web framework offer.

- Django is a high-level Python framework, it has some key benefits which are included from python.
   
- We can write DB queries in a pythonic way, no need to bother more about SQL syntax. As a developer, I felt the simplicity of this while using it in projects.

- Django is following the MVC pattern, I am assuming you guys know very much about the advantage of MVC.

There are many more advantages with Django, I am not listing all those here. You can refer to this article: https://www.kelltontech.com/kellton-tech-blog/why-django-web-development-with-python-for-backend-web-development

`Pain points solved by Django.`

- It allows developers to instead of implementing the same solutions over and over again, focus on the parts of your application that are new and unique to their project. It avoids a lot of problems in web development.

I think you experienced some taste of Django right....

THANK YOU..
Windows 11 in React Js 💻🌈 Update (Unofficial)
Tags: react, css, javascript, design
Published: 2021-11-12 15:49:36

Hello devs,

So this is a follow up of my [previous post](https://dev.to/blueedgetechno/windows-11-in-react-js-hd3) about the remaking of windows 11 in ReactJs.

Visit: [win11.blueedge.me](http://win11.blueedge.me)
Github: [blueedgetechno/win11React](https://github.com/blueedgetechno/win11React)
Discord: [discord.gg/NcjaNdwtnR](https://discord.gg/NcjaNdwtnR)

After a few months of regular updates and huge support from the community, we have been able to add dozens of features and lots of enhancements.

This version presents you:

1. Dark mode and ton of CSS optimizations.

2. A fully featured and community-backed store system to download external applications.

3. New apps like Spotify, Discord, Camera, Store (updated), and a lot more.

4. Native features like Context menu, Action center, Lockscreen, Boot Screen.

5. A lot more responsive for mobile and tablets.

And a lot more on my bucket list ...


### Preview
![winvslight](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lj0nd5np1l4wypdqarfn.png)

![store&spotify](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lidaz7e00jf96o03xcrr.png)

![contextmenu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/con4vecc2hzpaxssy3hn.png)

![widget](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v5b9ghwwgoxr6ujpys9u.png)

Of course, There were a lot of hiccups during the development of this project. We even faced a backlash from Microsoft for trademark violation but we managed our way through.

Special thanks to @andrewstech for being so helpful during the entire process.

Visit: [win11.blueedge.me](http://win11.blueedge.me)
Github: [blueedgetechno/win11React](https://github.com/blueedgetechno/win11React)
Discord: [discord.gg/NcjaNdwtnR](https://discord.gg/NcjaNdwtnR)
How to make a TailwindCSS SaaS Landing Page in record time
Tags: webdev, beginners, tutorial, tailwindcss
Published: 2021-11-12 15:38:11

Hi everyone,
My name is Haris and today I’ll be showing you how to make a SaaS Landing Page with TailwindCSS within 5 minutes, and the best part is that it’ll be totally free! So, let’s jump right in!

To make this Landing Page, we’ll be using the blox extension for VS Code. You can grab it for free [here](https://bit.ly/30mBC4U) on VS Code Marketplace.

![blox VS code Marketplace](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ewcnfm70vt4oo8gormd.png)

Let's start things off with a hero section. I'll be using `Center Aligned with Image` for this.

![Hero Section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sa6bunkbuvgvi7z4xhtj.png)

Next up we’ll add a Feature section. Here you can highlight the main features of your product. For that purpose `Feature 7` will work just fine.

![Feature Section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o0x4kf4kyjuesaf08b5x.png)

After the feature section, we can add a Pricing section to showcase the offerings of the product. We’ll go with `3 Cards with Yellow Hover`

![Pricing Section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c835amv64wjaf7brufuy.png)

We’ll close things off with a CTA and I think `Right Aligned Avatars with Gradient` will look perfect for this.

![CTA Section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qkwfp8smrv0awm9zhu25.png)

And just like that, we’re done with the first draft of the SaaS Landing Page. Here’s how the end product looks.

![Final Preview GIF](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ghls655z95zhezz62ov4.gif)

Since blox offers support for other frameworks like React, Angular and Vue, the same page can be developed for those projects as well. So with just a couple of clicks, we can set up the structure for our TailwindCSS landing page and make modifications according to the project from that point onwards. Hope this helps you save your precious developer hours.

You can access the page that I made here at: https://github.com/vs-blox/examples

Happy Developing!
AWS Redshift (Part 1)
Tags: aws, redshift, database
Published: 2021-11-12 15:03:25

As an AWS solutions architect, you must set up a solution that helps the data analysts in your company to process large historical data for some released products. The data scientists and the developers suggest collecting all the results of the queries for additional analytics with Amazon EMR, Athena and SageMaker. What AWS solution can you use in this context?

To answer this question, you need first to know what type of database you are dealing with.

Generally, we can classify databases into two groups, according to the approach that they use, which affects the type of data we want to extract eventually:

####1.      On-Line Transactional Processing databases(OLTP) :

Like RDS, it has a high transaction volume of simple and short queries. OLTP databases rely on four main operations: Create, Read, Update and Delete.

For example, with RDS you can CREATE a table containing products and their corresponding prices, you can READ the content of the table, UPDATE the names or the prices of the products and DELETE a product that you will no longer sell for the customers.

####2.     On-Line Analytical Processing Databases(OLAP):

It has a relatively low transaction volume of sophisticated and long queries that urge aggregations. OLAP DBs are used mainly for analytics.  

Through the previous definitions, it became obvious that an OLAP is required in our context. An example of an OLAP database on AWS is Redshift.

Redshift is fully managed by AWS. It is a petabyte-scale data warehouse service.

Unlike RDS and many other OLTP databases which use rows, Redshift uses columns to store data. It also uses advanced compression and Massive parallel processing of data . This makes it ten times faster than SQL databases.

 Redshift helps to report visualize and analyze collected data. You can save the results of your queries to an S3 data lake so you can do additional analytics with services provided by AWS like Athena and SageMaker.

Although Redshift is fully managed by AWS, it is set up ONLY in ONE availability zone and can’t take large data ingestion in real-time.
The ephemeral miniconf - Connection infos! 
Tags: perl, raku, conf
Published: 2021-11-12 15:36:28

### The Ephemeral Miniconf is planned on thursday 18th of november 2021!

![Flyer the ephemeral miniconf](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p3k2iwdnf5z1jp0l10al.png)

Have you heard about <strong>The Ephemeral Miniconf</strong> ?

It's a Perl/Raku free and online miniconf that will take place on [Zoom](https://explore.zoom.us/en/products/meetings/)! 

Think "TPRCiC" but way smaller/shorter and with only one track :) 

Single day, single track, Perl, Raku and fun.

I'm honored to have some experienced speakers about Perl, GitHub, Devops, LDAP etc... You will enjoy I promise!

More informations on [the website](https://thibaultduponchelle.github.io/the-ephemeral-miniconf/).

I can give you already the [Zoom](https://explore.zoom.us/en/products/meetings/) connections informations:

<strong>Meeting ID: 818 6906 5466
Pass: 42</strong>

Or use the [invitation link](https://us02web.zoom.us/j/81869065466?pwd=bzVFTVg1TWxBN0VOTFUwRmdPaTFuZz09) :grinning:

It's planned at 3pm UTC+1 (Paris time) so check [the timezone planner](https://everytimezone.com/s/ec3d1b5c) to know when it is for you.

It's in the morning if you're in US, in the afternoon if you're in Europe and very late if you're in Asia or Australia (sorry).

The planning will be something like this:
![Planning](http://blogs.perl.org/users/tiib/planningsmall.png/planningsmall.png)

(it could last longer or change a bit inside the range, like shifting talks, but at the moment here it is)

I'm also possibly preparing some surprises that I don't want to reveal for now.

So my message is basically, it's coming, book your calendar and I'm looking forward to see you at **The Ephemeral Miniconf**!
How to Bring Your Software Product Development Idea to Life
Published: 2021-11-12 15:25:45


From lightning bolts in the middle of the night to a brainstorm in the shower … humans are full of great ideas. Let’s face it, innovation has driven the hearts and minds of Americans since this country was founded. This spirit is still alive and thriving today. But having a great idea isn’t always enough, especially when it comes to software. 

Software product development necessitates more than just the code needed to make it work, it must take into account your overall business. A successful software product requires a holistic approach to the overall process and the pain point you are trying to solve. 

Which begs the question, where to begin? The first six steps to bring your software product development idea to life, as outlined in this blog, will get you beyond the brainstorm and ready to go to market.

Many a great idea has failed not because the core hypothesis was inaccurate but because it was poorly executed.” – Anonymous
Beyond the Brainstorm & Into the Market
Have you ever had a really fantastic software product or app idea … something truly extraordinary that could change the way we do things? Sometimes these ideas shape the world around us, like Uber, Airbnb, and Instacart. Other times, an idea can make the world of difference to an industry or even a group of individuals. 

As technology evolves, bringing a software product to life no longer requires a big tech company behind it.  More and more entrepreneurs are able to enter the market with fewer barriers. There are many small software businesses that are shaping the future of product development every day. 

So, how do you take your exceptional idea and turn it into a functional software product or application? You need to start with a well-planned, creative process, communication, and a solid go-to-market strategy. 

Sounds easy, right? It may start out that way, but once you get started brainstorming and moving through the software development process, you may find that you are faced with many questions, such as, how do I …

get started?
make all the pieces fit together?
turn my idea into a usable product?
find a development partner who knows how to make things happen?
decide how to monetize my product?
take my product to market?
Since innovative ideas are shaping how the world works, it’s important to take your dream beyond the brainstorm and into the market. The good news is that you don’t have to do it alone, and by addressing the questions above, we will provide you with six logical steps to help facilitate your software development or application process. 

Find more info here: https://www.swipsystems.com/2021/04/26/how-to-bring-your-software-product-development-idea-to-life-part-1/
Password Encryption Using Python
Tags: python, programming, beginners, database
Published: 2021-11-12 15:25:45

Privacy? A significant term widely used in today's world. There has been an exponential increase in internet platforms, applications, and their popularity. 

With this, lots of developers are building new projects and platforms. Since all of these require an authentication system, there is a strict requirement to have good password protection in place. 

After all, you cannot just store the password provided by the user in raw form in the database. There has to be some sort of encryption before you store the password in the DB.

Does this sound complicated? 

Don't worry. To simplify this process, I'll help you with a simple method to encrypt a password using Python. 

Firstly let's start with the project setup: 

1. Install Python and pip in your system. 
2. Create a project directory. 
3. Create a file name "app.py" inside the directory.
4. Open terminal at the directory and run-``` pip install bcrypt```
5. Import bcrypt in the "app.py" file.
Bcrypt is the python package that will help us achieve encryption. You can read more about bcrypt at [Bcrypt](https://pypi.org/project/bcrypt/)

Ok, so with the project setup done, let's start encrypting a password.

1. Take a string that is a password of your choice. Ex - 
``` password = "youareSmart123" ```

2. Next, we need to generate a string called "Salt." Salt is a fixed-length cryptographically-strong random value that is added to the input of hash functions to create unique hashes for every information. Salt is added to make a password hash output unique even for users adopting common passwords. An example of salt: ``` b'$2b$12$Kh7S5S9FHT.WhzBa8tLZvO' ```

3. We will be using the "bcrypt" package to generate salt. Use the below code to do it: ``` salt = bcrypt.gensalt()```  

4. Now, the final step is actually encrypting the password. To encrypt : ``` passwordhashed=bcrypt.hashpw(password, salt) ```

5. That's it. If we print "password hashed," we will get the encrypted output. 

So, this was it for this blog. Hope you got to learn something reading this. Try out implementing the above method, comment down if you have any questions, and give feedback to the blog. 

Lastly, Your support keeps me going, and I give my 100 percent to these blogs! If you've found value, consider fueling the blog with a coffee ☕️ donation at the below link. 

[**Buy me a COFFEE!**](https://www.buymeacoffee.com/ayushdev)

Thank you! 🙏
Elasticsearch Bottoms Up
Tags: elasticsearch, cloud, tutorial, webhooks
Published: 2021-11-12 15:22:57

You have started using Elasticsearch. Being a distributed system, it is complex to manage as well as use it. Let's learn few advance concepts from our experience of using Elastic eco-system across various use-cases.

Topics Covered:
1. What is Elasticsearch and its various use cases
2. Origins of Elasticsearch - Lucene
3. What are the internals of Elasticsearch
4. How data persistence work in Elasticsearch
5. Overview of typical production-ready Elasticsearch cluster
6. Demo

{% youtube LMEnrxLKx_8 %}

If you enjoyed this talk, join our cloud collective group here ► https://www.meetup.com/cloud-collective/ and participate in our next meetup!
React: Add Inline Styles in React
Tags: javascript, react, webdev, beginners
Published: 2021-11-12 15:20:29

* I the last post we set the size of the font with fontSize instead of font-size. Hyphenated words like font-size are invalid syntax for JavaScript object properties, so React uses camel case. 
* All property value length units (like `height`, `width`, and `fontSize`) are assumed to be in px unless otherwise specified. If you want to use em, for example, you wrap the value and the units in quotes, like {fontSize: "4em"}.
* Here's an example:
```React
const styles = {
  color: "blue",
  fontSize: 50,
  border: "3px solid black"
}

class Colorful extends React.Component {
  render() {
    return (
      <div style={styles}>Style Me!</div>
    );
  }
};
```

* We declared the styles constant as a global variable at the top of the file. Initialized `styles` constant and assigned an `object` with three style properties and their values to it. I gave the `div` a color of `blue`, a font-size of `50`, and a border of `3px solid black`. Then we set the `style` attribute equal to the `styles` constant.