teleren/devto huggingface dataset:
12 newsletters for frontend developers
Tags: education, frontend
Published: 2021-02-18 19:43:20

Frontend development is a field that changes daily, and to stay up-to-date, I need a steady source of new information. One way I do this is through newsletters.

Here's a list of some of the newsletters I subscribe to for all the latest frontend news:

- [React Status](https://react.statuscode.com) - For, you know, React stuff.
- [CSS Layout News](https://csslayout.news) - [Rachel Andrew](https://rachelandrew.co.uk) maintains this newsletter about CSS layout.
- [Smashing Magazine](https://www.smashingmagazine.com/the-smashing-newsletter/) - From the brilliant people at [Smashing Magazine](https://www.smashingmagazine.com), of course.
- [Design Systems News](http://news.design.systems) - Great information on creating and maintaining successful design systems.
- [CSS-Tricks Newsletter](https://css-tricks.com/newsletter/238-responsible-web-applications/) - Weekly newsletter from the [CSS-Tricks](https://css-tricks.com) team.
- [JavaScript Weekly](https://javascriptweekly.com) - All the JavaScript you can handle.
- [Node Weekly](https://nodeweekly.com) - Even more JavaScript, this time focusing on Node.js.
- [Screenlane](https://screenlane.com/subscribe/) - Interesting UI animation examples and tutorials.
- [RWD Weekly](https://responsivedesign.is/newsletter/) - I know it says Responsive Web Design, but it's a good source for general frontend dev information.
- [Frontend Focus](https://frontendfoc.us) - Focuses on frontend, oddly enough.
- [JAMstacked](https://jamstack.email) - You know I gotta have that JAMstack info.
- [WebAIM Newsletter](https://webaim.org/newsletter/) - Get the latest information regarding [WebAIM](https://webaim.org) and accessibility on the web.

Do you have a favorite newsletter? I would be forever grateful if you [tell me all about it](https://twitter.com/therealboone). And if you liked this list, check out this [list of books for developers](https://www.falldowngoboone.com/blog/10-interesting-books-for-developers/) I just wrote about.
CD Projekt Red Hack, a Florida Water Supply Hack, & more on DevNews!
Tags: news, podcast
Published: 2021-02-18 19:35:32

---
title: CD Projekt Red Hack, a Florida Water Supply Hack, & more on DevNews!
published: true
description: Listen to S3E6 of the DevNews pod!
tags: news, podcast
series: DevNews Season 3
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/zoxvbu0494gq3sxtjp4v.png
---

### Another week another blast of developer news from the DevNewsroom...

{% podcast https://dev.to/devnews/s3-e6-cd-projekt-red-hack-a-florida-water-supply-hack-and-a-major-dependency-confusion-hack %}

### **This week, @saronyitbarek and I dove into the following stories:**
- Engineers unionizing with other workers at Medium
- Epic’s Metahuman Creator, a hacker who broke into a water system in Florida
- A security researcher who breached over 35 big tech companies leveraging something called dependency confusion.



### **Saron and I were also joined by a guest who spoke on a topic I think you'll find newsworthy...** 

- **Pierre Leclerc**, co-founder of [6 Eyes Studio](https://twitter.com/6EyesStudioLLC) and game developer of the tactical RPG, Fell Seal who spoke on the recent hack of the game studio CD Projekt Red, and what one can realistically do with stolen video game source code 😱 


_You can [follow DevNews](dev.to/devnews) to get episode notifications and listen right in your feed_ — or subscribe on your platform of choice! Plus, if you leave us a review, we'll send you a free pack of thank-you stickers. Details [here](https://airtable.com/shr8oKAIMZgdYnBxx). 

## **Quick Listening Links**
- [Apple Podcasts](https://podcasts.apple.com/us/podcast/s3-e6-cd-projekt-red-hack-florida-water-supply-hack/id1525581923?i=1000509669360)
- [Spotify](https://open.spotify.com/episode/4ngBVVHbgexffFlpBVIJZt)
- [Google](https://podcasts.google.com/feed/aHR0cDovL2ZlZWRzLmNvZGVuZXdiaWUub3JnL2Rldm5ld3NfcG9kY2FzdC54bWw/episode/aHR0cHM6Ly9kZXZwb2RzLmRldi9wb2RjYXN0cy9kZXZuZXdzLzIy?sa=X&ved=0CAQQkfYCahcKEwiohu3MlvTuAhUAAAAAHQAAAAAQAw)
- [Stitcher](https://www.stitcher.com/show/devnews)
- [Listen Notes](https://www.listennotes.com/podcasts/devnews-dev-fH8hvsClkWp/)
- [TuneIn](https://tunein.com/podcasts/Technology-Podcasts/DevNews-p1352512/?topicId=160932127)
- [RSS Feed](http://feeds.codenewbie.org/devnews_podcast.xml)
- [PocketCasts](https://pca.st/i0u7iyvy)
- [Transcript](https://devpods.herokuapp.com/podcasts/devnews/episodes/116)

---
_Acknowledgements_ 
- _@levisharpe for producing & mixing the show_
- Our season three sponsors, [SendBird](https://sendbird.com/) and [Rudderstack](https://rudderstack.com/) ❤️ 

![News](https://media.giphy.com/media/l3q2RzqMvCiSYOpYA/giphy.gif)
HOW I DEAL WITH IMPOSTER SYNDROMES
Tags: webdev, beginners, career, codenewbie
Published: 2021-02-18 19:32:21

I always have this shit in my head where I sat down in front of my computer feeling like " hey , are you really a Developer,  what do you know and what if you are called for interview, you that you only know how to use stackoverflow, YouTube and google to get things done" .
I feel really sad sometimes

But you what?
Anytime I browse through a new website or play around upwork and seeing clients asking " hey can you replicate this website " and I saw that website , analyse it and feel like I can do it well.

I smiled...am actually a Developer
Am not an imposter.🥰
CSS Animation: translate3d, backdrop-filter and custom tags

Tags: css, webdev, html
Published: 2021-02-18 19:31:09

Hello everyone, 

On this tutorial we are going to learn on how to create a smooth animation using CSS transform translate3d prop, why to use cubic-bezier transition timing function and its benefits. 

How and why to use custom tags. And if you watch the video by the end I also did a bonus tip using backdrop-filter to have some frost/blur style on background. 

Topics:
1. Why and how to use the translate3d 
2. Why and how to use cubic-bezier 
3. Using custom tags 
4. Apply color by using currentColor
5. Using backdrop-filter

Don't forget to subscribe ✌️

{% youtube RTLM2SyEL6o %}

Source:  
https://github.com/astrit/youtube​

Demos:
Blackhole: https://codepen.io/astrit/pen/KKMjZEz

Links:
https://github.com/astrit​
https://twitter.com/astritmalsija​
https://codepen.io/astrit
UDP Chat App
Published: 2021-02-18 19:26:09

Here everyone,

In today's blog, we will create a Chat Server, establish a network to transfer data using Socket Programing by creating both Server and Client machines as Sender and Receiver both and I have created this program using UDP protocol.

Here we will be using Windows OS and Linux OS for the demonstration purpose.

Before we get started we should know about what is **UDP Protocol** and **Socket Programming**

## UDP Protocol:

User Datagram Protocol (UDP) is one of the core members of the Internet protocol suite. With UDP, computer applications can send messages, in this case, referred to as datagrams, to other hosts on an (IP) network. UDP uses a simple connectionless communication model with a minimum of protocol mechanisms. UDP provides checksums for data integrity, and port numbers for addressing different functions at the source and destination of the datagram.

## Socket programming:

Socket programming is a way of connecting two nodes on a network to communicate with each other. One socket(node) listens on a particular port at an IP, while the other socket reaches out to the other to form a connection.

And to create a chat app we will be using the concept of multi-threading so that we can send and receive the messages at the same time. So **what is multi-threading?**

## Multi-threading:

In computer architecture, multithreading is the ability of a (CPU) to provide multiple threads of execution concurrently, supported by the operating system.

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

Now we know everything that is required to understand this demonstration so let's get started:

> First let's create a Socket Program for the Windows

Write this code in the window OS and provide the window system IP in the System IP mentioned as a comment.

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

> Now create a Socket programming for the Linux

Write this code on the Linux OS and provide the Linux system Ip in the System Ip that is mentioned as a comment.

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

> Run the Widows system code

when you will run the windows system code it will ask for a receiver IP and in our case receiver is a Linux system so we need to provide the Linux system IP to it.

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

The same goes for the windows system.

And now start chatting, so that's how we can create a chat app using the UDP Protocol.

Thank you!!
Vlad Tenev doing a decent Sundar Pichai impersonation
Published: 2021-02-18 19:25:08

The new trend in congressional hearing attire and setting for video testimony.  Look like a Tech CEO.

![Vlad Tenev doing a decent Sundar Pichai impersonation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l8nwojknhdvb887dieve.jpg)
Dimensionality Reduction: Generalized Discriminant Analysis
Tags: machinelearning, ai
Published: 2021-02-18 19:04:17

Hey people,

Welcome to yet another exciting series of blogs. In this series, we are going to talk about dimensionality reduction techniques. Our thinking throughout this series should be oriented towards optimization. Every technique discussed here shall be keeping that in mind. However, this section will also involve some bit of math, but just to be inclusive, we shall keep it simple and straight, discussing only the concepts and how to perceive them.

In the [last article](https://dev.to/aashish/dimensionality-reduction-linear-discriminant-analysis-1ca4) we talked about the Linear Discriminant Analysis model and saw how it makes a projection of the data from the high dimensionality to a low dimensionality space. We saw it in working and also saw the use of LDA as a classifier. In this article, we are going to talk about Generalized Discriminant Analysis. Let's get it going then...

____

### What is Generalized Discriminant Analysis?

GDA deals with nonlinear discriminant analysis using kernel function operator. The underlying theory is close to the support vector machines (SVM) insofar as the GDA method provides a mapping of the input vectors into high-dimensional feature space. Similar to LDA, the objective of GDA is to find a projection for the features into a lower-dimensional space by maximizing the ratio of between-class scatters to within-class scatter. The main idea is to map the input space into a convenient feature space in which variables are nonlinearly related to the input space. 

____

I hope this was helpful and was able to put things down in a simple way. Please feel free to reach to me on Twitter [@AashishLChaubey](https://twitter.com/AashishLChaubey) in case you need more clarity or have any suggestions.

Until next time...
How to create your first application using node.js?
Tags: node
Published: 2021-02-18 19:03:29

> What is node.js?

Over the years, the modern web application has really come a long way with the implementation of many common frameworks like bootstrap, Angular JavaScript, etc. All these frameworks are based on popular application JavaScript. Yet there was a kind of void when it came to creating server-based applications, and this is where Node.js comes into the scenario. Node.js is also based on the JavaScript framework.

Node.js is an open-source server-side runtime environment based on the JavaScript V8 engine from Chrome. This offers an event-driven asynchronous I / O and cross-platform runtime environment for the use of JavaScript to create highly scalable server-side applications.

> How to install node.js to your machine?

Installation of node.js framework is the first step to start building the Node.js applications. The node.js framework is designed for a range of operating systems, from Windows to Ubuntu to OS X. You can start building your first node.js applications once the node.js framework is installed.

Go to the [Link] https:/nodejs.org/en/download/ website and download the required binary files.

> What is NPM (Node Package Manager)?

Node.js is installed to npm. The name NPM(Node Package Manager) derives from the time NPM was first created as Node.js package manager. All the NPM packages are defined in package.json files. The contents of package.json must be written in JSON.

You can check the installed NPM version by using **npm -v** command in command prompt.

> Run your first application ‘Hello World’ in Node.js

After downloading and installing Node.js on your computer, let’s try displaying “Hello World” in a web browser. Let’s create a Node.js file with file name firstprogram.js in notepad.

![pic 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0x9bqxkl5sroz0jfpfbn.png)

You can save your code in your preferred location and I’ll save it in: ‘D:\nodeJS’

Navigate to the folder where the file is stored in the command prompt. Type ‘node firstprogram.js’ command in command prompt.

![pic 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/44neg6yxvvyjp1yxbtxh.png)

Now your computer is functioning as a server! If anyone on port 8080 tries to access your device, they will get the message “Hello World!” in return! Launch your browser, and enter the following address: http:/localhost:8080

![pic 5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vnt1717hyuia2tvfmxoq.png)

Node.js can be installed through a package manager, too. The windows package manager is called Chocolatey. The Chocolatey package manager automatically downloads the appropriate files and then installs them on the client computer by executing a few simple commands in the command prompt.

A basic program called Node.js consists of building a server that listens to a specific port. The server will immediately send a ‘Hello World’ message to the client when a request hits the server.
system administration
Published: 2021-02-18 18:59:43

Do you know if you'd like to be a windows sysadmin, a linux sysadmin, or even a network administrator? There are many different types of systems administrator. 
 
Linux has many free distros and Windows server allows you to run a trial for 180 days. You can virtualize networking equipment with pfsense, cisco packet tracer, or GNS3. 
 
You could also consider studying for certifications in the field, even if you don't intend to take the tests. Some of them can provide a good overview of topics. I'm not sure about your skill level but if it's very basic then Professor Messer - Technology Training https://www.professormesser.com/ has a great basic overview of all sorts of IT domains. Youtube is another powerful resource to learn about any number of topics. Your local library may have books as well. Read alot of Reddit as well. You'll hack it!
 
Becoming a SysAdmin requires hands on experience with the technology, so that's where you start. Set up a lab, configure it, fix problems, and learn as you go These resources might be of help; udemy.com, Acloudguru.com, Edx.org. 

You can also check out my website at http://mynameisprotocol.com/ Am working on my blog that will cover different technical products.
JavaScript Interview Question #14: 0.1 + 0.2 = ?
Tags: beginners, javascript, codenewbie, webdev
Published: 2021-02-18 18:48:39

![js-test-14](https://learn.coderslang.com/js-test-14.png)

JavaScript math is weird. What’s the output? True or false?

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Inside the computer, all numbers are stored in the **Binary Number System**.

To keep it simple, it’s the sequence of `bits` - which are "digits" that can be either `0` or `1`.

The number `0.1` is the same as `1/10` which can be easily represented as a decimal number. In binary, it will result in an endless fraction, similar to what `1/3` is in decimal.

All numbers in JavaScript are stored as `64-bit` signed floating-point values, and when there’s not enough space to hold the value, the least significant digits are rounded.

This leads us to the fact that in JavaScript `0.1 + 0.2` render `0.30000000000000004` and not `0.3` like you would have obviously thought.

If you're unfamiliar with the **Binary Number System** I suggest reading [this article](https://learn.coderslang.com/0017-algorithms-abstraction-and-pseudocode/). 

---

**ANSWER**: `false` will be printed on the screen.

[Learn Full Stack JavaScript](https://js.coderslang.com)
"The One with the Hooks"
Tags: react, javascript, redux
Published: 2021-02-18 18:36:28

In 2029 React, one of the most popular JavaScript libraries, released version 16.8.0. In this version, React Hooks are available in a stable release. 

During my time with Flatiron, I built my React project using an older version. So now, I will make sure to write the key changes and how they look for reference to whoever needs it! 

Let’s start by making sure we understand hooks. “Hooks let you use state and other React features without writing a class”. A Hook is a special function that lets you “hook into” React features. The most common ones being ‘useState’ which lets you add React state to function components and ‘useEffect’ which tells React that your component needs to do something after render. We can always tell it is a hook because it is prefixed with ‘use’.

To start using these hooks:
-	The hooks must execute in the same order they are defined
-	Hooks cannot be inside of: if statements, loops, functions or nested.
-	We first destructure by putting the hooks we will need when importing React. 
     ```import React, { useState } from ‘react’;```
-	The hook will return an array of two values: [ the state, a function that allows us to update the state] 
-	We then call the hook and in the case of useState, we pass in the default state. 
     ```const [ count, setCount ] = useState(0)```

“The useState hook returns a pair: the current state value and a function that lets you update it. It’s similar to this.setState in a class, except it doesn’t merge the old and new state together.” 
```
function Example() { 
const [count, setCount] = useState(0);
}
```
Using classes it would look like:
```
class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
```
“The useEffect hook, adds the ability to perform side effects from a function component. It serves the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount in React classes.” 

To compare:
```
function Example() {
  const [count, setCount] = useState(0);

useEffect(() => {   
document.title = `You clicked ${count} times`; 
 });
}
```
Using classes it would look like: 
```
class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  componentDidMount() {    
document.title = `You clicked ${this.state.count} times`;  }  componentDidUpdate() {    document.title = `You clicked ${this.state.count} times`;  
}
```
You can also create your own Hooks to reuse stateful behavior between different components, which you can learn more about [HERE](https://reactjs.org/docs/hooks-custom.html). 

If you want to learn more in-depth about hooks and their possibilities here are the resources I used:
- [reactjs.org](https://reactjs.org/blog/2019/02/06/react-v16.8.0.html)
- [useState - YouTube: 
Web Dev Simplified](https://www.youtube.com/watch?v=O6P86uwfdR0&t=389s)
- [useEffect - YouTube: 
Web Dev Simplified](https://www.youtube.com/watch?v=0ZJgIjIuY7U&list=PLZlA0Gpn_vH8EtggFGERCwMY5u5hOjf-h&index=2)
Best hosting services for backend and frontend!
Published: 2021-02-18 18:25:19

Many people are afraid of publishing their site, they don't know where to publish it, and **how to**
Here are a few free hosting services you should consider

# #1 - InfinityFree
https://infinityfree.net
Free Unlimited Web Hosting for **BOTH** frontend and backend
Completely free website hosting with unlimited disk space and bandwidth.
It's a good option, and it's way better than 000webhost. Full .htaccess support, and CNAME records, with free SSL certificates
### Limitations: 
* 50,000 hits in a day
* Limited CPU and Inodes 

# #2 - Profreehost
https://profreehost.com
This is an exact duplicate of InfinityFree, the only difference is that the forum isn't as good as InfinityFree's 
* Unlimited Diskspace
* Unlimited Bandwidth
* MySQL Databases
* Easy Control Panel
* Website Builder
* 100% Free
* No Hidden Costs
* Free Subdomains
* 99.9% Uptime
* No Forced Ads

### Limitations
* Same as InfinityFree

# #3 - Netlify
http://netlify.com
As per another post,
> Netlify is everything you need to build fast, modern websites: continuous deployment, serverless functions, and so much more. ... But like the definition says, Netlify offers you cloud hosting services as well as present you with the ability to handle backend operations with its serverless backend service.

* Built-in CI/CD
* Domains & DNS management
* Automated previews of every commit
* Automated builds from Git
* Deploy to global Edge network
* Site previews for every push
* Instant rollbacks to any version
* Deploy static assets & dynamic serverless functions

# #4 - Hostman
https://hostman.com
Hostman is a good platform for deploying your app from github
* Free up to 10 websites
* Very fast (As far as my experience)

### Limitations
* Static websites only, you need to pay for dynamic sites

# #5 - Repl.it
https://repl.it
Repl.it is a very powerful online code editor. It supports a wide variety of languages.
* You can clone directly from github repository
* Support forum

## Limitations
* Only static sites are hosted

# #6 - GitHub Pages
URL: Go to your github repository > Settings > Github Pages
It's a quick and easy way to host your static site from github

### Limitations 
* Only static sites are hosted

# #7 - Fleek
https://fleek.co
Fleek makes it easy to build websites and apps on the new open web: permissionless, trustless, censorship resistant, and free of centralized gatekeepers.

# #8 - Vercel
https://vercel.com
Vercel combines the best developer experience with an obsessive focus on end-user performance.

# #9 - Glitch
https://glitch.com
Bypass setting up a local dev environment. Code, auto-deploy and collaborate in real-time with friends—all right in your browser.

It's a very good option!

# #10 - Firebase
> Firebase is a PaaS Google service. It allows you to create application backend easily without coding. It also allows you to host static websites for free. Firebase is very easy to use and provides a CLI to manage yours apps . They also support hosting cloud functions.

# #11 - Begin
https://begin.com/
It's kind of like Netlify in a way
Finishing Onboarding - Building SaaS #81
Tags: python, django, templates
Published: 2021-02-18 18:13:56

{% youtube FhTrNoW4n9s %}

In this episode, I completed the last form that completes the last step on my Django app's onboarding process. We built up the view, wrote the tests, and worked through the templates changes.

I started with a discussion of what the onboarding flow does and what was left. I needed to make a form that creates a task for a course.

For the first chunk of code, we added some tests to cover all the scenarios that are important for the view. Once the tests had the right setup, I wrote the view, added the context, and wired in the form to make the view create a task.

With the view done, I moved onto a new template. The template displays the form and shows some other messages when different data is present.

That wrapped up the stream and we discussed what I'm going to work on next time to polish the onboarding flow.