teleren/devto huggingface dataset:
Web development roadmap for 2021 and beyond
Tags: webdev
Published: 2021-02-18 18:56:33

If you found value in this thread you will most likely enjoy my tweets too so make sure you follow me on [Twitter](https://twitter.com/VladPasca5) for more information about web development and how to improve as a developer. This article was first posted on my [Blog](vladpasca.hashnode.dev)

## 1. Learn how the internet works

[Zero to mastery playlist](http://youtube.com/playlist?list=PL2HX_yT71umBgUzdKDfbuXnysZWqiGX4L)

[MDN Introduction](http://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work)

## 2. Learn HTML

[HTML Crash Course For Absolute Beginners](http://youtube.com/watch?v=UB1O30fR-EE&t=5s)

[Basic HTML and HTML5](https://www.freecodecamp.org/learn/responsive-web-design/)

## 3. Learn CSS

[CSS Tutorial - Zero to Hero (Complete Course)](http://youtube.com/watch?v=1Rs2ND1ryYc)

[Basic CSS](https://www.freecodecamp.org/learn/responsive-web-design/)

## 4. Learn a CSS framework (optional but good to know)

[Bootstrap](http://youtube.com/watch?v=5GcQtLDGXy8)

[Tailwind](https://youtu.be/UBOj6rqRUME)

## 5. Learn JavaScript

[Learn JavaScript - Full Course for Beginners](http://youtube.com/watch?v=PkZNo7MFNFg)

[Basic and advanced JavaScript](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/)

## 6. Learn Git and GitHub

[Git and GitHub for Beginners Crash Course](http://youtu.be/RGOj5yH7evk)

[An intro to Git and GitHub for beginners](https://t.co/h6ceyV3f1G?amp=1)

## 7. Learn NPM

[NPM Crash Course](http://youtu.be/jHDhaSSKmB0)

[An Absolute Beginner's Guide to Using NPM](https://t.co/DbALy70lNZ?amp=1)

## 8. Learn a Front-End framework

[React](http://youtu.be/DLX62G4lc44)

[Vue](http://youtu.be/4deVCNJq3qc)

[Angular](https://youtu.be/2OHbjep_WjQ)

## 9. Learn Node.js

[Full Tutorial for beginners](http://youtu.be/RLtyhwFtXQA)

[Introduction to Node.js](https://nodejs.dev/)

## 10. Learn Database

[SQL](http://youtu.be/HXV3zeQKqGY)

[MySQL](https://youtu.be/7S_tz1z_5bA)

## 11. Build projects

This is the most important thing you need to do before going to the next step.

You learn HTML? Build a project.

Learned a front-end framework? Build a project.

## 12. Keep learning

Being a developer is a live long learning journey.

It might look hard at first to learn all these things but take one step at a time.

You can learn all of these in 6 to 12 months if you are effective and consistent.

## End

I hope found this useful and if you did please let me know. If you have any question feel free to DM me on  [Twitter](https://twitter.com/VladPasca5)
TypeScript videos from February
Tags: typescript
Published: 2021-03-18 13:40:18

Greetings,

Here's our TypeScript roundup, covering the most relevant TS videos from February. You can either read our article or scroll through the videos and pick your favorites below.

https://blog.meetupfeed.io/typescript-videos-february-2021/

Mastering TypeScript state management using just React | Jack Herrington

Continuing on with Typescript we are starting a series on React state management where we take the same To-Do list and implement it using a bunch of different state managers. And to kick that off we are looking at using just the React basics to start; useState, useContext and createContext.

Link: https://meetupfeed.io/talk/mastering-typescript-state-management-using-just-react-jack-herrington

Build a Glassmorphism React component – TypeScript & Material-UI

In this video Arjan explains how to create a customizable glassmorphism React component. Glassmorphism is a visual design for glass-like surfaces in user interfaces. Next to showing how to build a glassmorphic element in React, he also shows you how to manipulate the style through properties, and how to use the useStyles hook from the Material-UI library to create fully customizable styles. Finally, Arjan adds a few nice motion effects to finish the example and give it that sheen that every user desires!

Link: https://meetupfeed.io/talk/build-a-glassmorphism-react-component-typescript-material-ui

How to configure TypeScript in NodeJS

In this video you will learn how to configure TypeScript in NodeJS and express API.

Link: https://meetupfeed.io/talk/how-to-configure-type-script-in-node-js

UseContext & UseReducer with TypeScript = No more Redux!

This video will show you an effective pattern to make sure you no longer have to fight with types and Redux! 

Link: https://meetupfeed.io/talk/use-context-use-reducer-with-typescript-no-more-redux

Starting with TypeScript in Cypress | Filip Hric
Cypress.io is a JS-based front end testing tool aiming to make the lives of QA engineers much easier. And, guess what: it also works with TypeScript. Learn how!

Link: https://meetupfeed.io/talk/starting-with-type-script-in-cypress-filip-hric
Fun Tilting Form Validation Idea.
Tags: webdev, css, html, ux
Published: 2021-03-18 17:05:28

I was playing around on `codepen` trying to find playful ways of animating UI — without using `animation` or `transition` properties. Just tiny movements.

Came up with this and thought I'd share it:

*Try typing more than 12 characters.*

{% codepen https://codepen.io/shadowfaxrodeo/pen/eYBwdMO %}

## How it works.

First, we use the `pattern` attribute alongside `required`.
This allows us to target the input with the `:valid` and `:invalid` pseudo-classes.

The pattern attribute has a regular expression that matches any string from 1 to 12 characters long. If the input's value is in that range we can select it in our `css` using the `:valid` pseudo-class, otherwise use the `:invalid` pseudo-class.

```html
<input required pattern="(\S|\s){1,12}">
```

Now we style the input to tilt to the right if it's invalid. If it's valid it stays level:

```css
input:invalid {
  transform:rotate(1deg);
}
```

But, when the input is empty it's also invalid, and will tip right. We want to give the impression the text has weight. So if the input is empty it should tip the opposite way.

To select the empty input we need to do **something a bit hacky.**
 
We can use the pseudo-class `:placeholder-shown` — it allows you to style an input only when it is displaying a placeholder.

It requires a valid placeholder value to work. But if you don't want a placeholder you can use a space:

```html
<input required pattern="(\S|\s){1,12}" placeholder=" ">
```

Then we add the styles to get it to tilt to the left when empty:


```css
input:invalid {
  transform:rotate(1deg);
}

input:placeholder-shown {
  transform:rotate(-1deg);
}
```

That works, but it makes the page a **bit disorienting**. Better to only style the input once the user has interacted with it.

Here we'll add the tilt only if the input has been focused or already filled:

```css
input:placeholder-shown:invalid {
  transform:rotate(0deg);
}

input:placeholder-shown:invalid:focus {
  transform:rotate(-1deg);
}

input:invalid {
  transform:rotate(1deg);
}
```

Thats it. Except for some basic styles added to the codepen.

I like this, it really makes me want to balance out the text.

It could definitly be improved though:

- You could make it more universal by reversing the tilt when the text-direction is right-to-left with `:dir(rtl)`
- It only works with a range starting from 1. Finding a `css` only solution for say, *choose a password between 10 and 16 characters long** would be interesting. Otherwise it could use `js`.
- Add `IE 10-11` support with `:-ms-placeholder-shown`
Reconmap release notes (0.9.0) 
Tags: security, pentesting, opensource, releases
Published: 2021-03-18 21:16:40

Hi everyone! It is my pleasure to share the greatest and latest from Reconmap, the open source and SaaS **[pentest automation and reporting platform](https://reconmap.com)**, in its version 0.9.0 (maturity version is around the corner!).

Before diving into the details I am going to start thanking our early adopters for the magnificent feedback shared. Their input is helping us shape our roadmap and validate our ideas. ♥

# New features

## New vulnerability statuses

Up until now vulnerabilities had two possible statuses: Open and closed. That was modest to say the least. Since version 0.9.0 the possible options are now many more:

- Open (reported, unresolved)
- Confirmed (unexploited, exploited)
- Resolved (remediated, mitigated)
- Closed (remediated, mitigated, rejected)

![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v5zliydumhf5st2h81mg.png)

Special kudos to [GlitchWitch](https://glitchwitch.io/) for her suggestion on new statuses.

## Command line improvements

The Reconmap CLI (rmap) is a key part of our solution. This release added many things to the REST API to support our command line command. One such feature is the command search shown in the example:

![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p58hxu6zg23kuf22a0xr.png)
 
## Document library

Part of many security projects require sharing documents internally and with colleagues but there wasn't a clear place in Reconmap to store those. This version introduces a simple library where to share documents such as NDA (Non-disclosure agreements) and security questionnaires.

![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nxs04h9ps8v3s0rn72iz.png)

## Other new features

Apart from these features we added the following:

* Archive option for projects
* Bulk transition and deletion of tasks 
* New task due date (with reminders)
* New client role
* Automatic password generation for new users

## Bugfixes

As usual, there were a number of bug fixes pushed to different parts of the system, and the test coverage has seen an increase for the REST API code.

# Next release

If you liked 0.9.0 stay tuned for the next version, stay safe!
JS Set Object (2 handy usages)
Tags: functional, javascript, fundementals, algorithms
Published: 2021-03-19 11:27:37

#Hello there guys.

Today i will talk for the **SET** object which is storing new
unique values of any type as well primitive values and object references.
This could be handy for some cases,i will show you two of them
in this thread.
##Cases

1. Remove duplicated records from the arrays 
3. Using **add()** method to add values to the SET object


So first lets create our array and try our first case,in my example we will set some values twice,with this way we will see 
how **Set()** will help us to point and delete the overwrites.

```
let myArray = ['Jim','Jhon','Grace','Felice','Jhon','Sylia','Grace'] ;

let myArrayClear = [...new Set(myArray)]
console.log(myArrayClear)

```
The result without double records.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yjycjfhic7l1uff6wqnc.png)
 
Check to see the results on your console it should miss the double records,job done!

Secondary we will see how a new instance of **Set** object could work very nicely with **add()** method and create values as long as avoiding the double records, let's take a look.

```
const mySetObject = new Set()

mySetObject.add(2)
mySetObject.add('Hello Word')
mySetObject.add(4)
mySetObject.add({a: 1, b: 2})
mySetObject.add(2)


```

 
After our additions (number,string,object) we can itterate through our array that contains different values and data types but you will notice that we add the number **2** twice,whe we will loop though and you will see that is beeing added only once because of the rule **"A value in the Set may only occur once"**.So let's use **for** to see what we get.
```
const mySetObject = new Set()

mySetObject.add(2)
mySetObject.add('Hello Word')
mySetObject.add(4)
mySetObject.add({a: 1, b: 2})
mySetObject.add(2)

for (let item of mySetObject) console.log(item)

```
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hocyaelejrb3t483u1qh.png)
 
 
That's all for today!

Have a nice workday guys, in case for further explanation do not hesitate to contact me or find me in github or linkedin.
GitHub : https://github.com/feco2019
Linkedin : https://www.linkedin.com/in/dimitris-chitas-930285191/
10 Days of JS
Tags: javascript
Published: 2021-03-19 09:25:37

Recently completed 10 Days of JS on HackerRank.
https://www.linkedin.com/feed/update/urn:li:activity:6778605295544479744/

The importance of JavaScript as a web technology can be determined from the fact that it is currently used by 94.5% of all websites. As a client-side programming language, JavaScript helps web developers to make web pages dynamic and interactive by implementing custom client-side scripts. At the same time, the developers can also use cross-platform runtime engines like Node.js to write server-side code in JavaScript. They can even combine JavaScript, HTML5, and CSS3 to create web pages that look good across browsers, platforms, and devices. There are also a number of reasons why each modern web developer must know how to leverage all benefits of JavaScript.
sysctlbyname-improved v20210223
Tags: freebsd, unix, kernel, sysctl
Published: 2021-03-19 21:27:01

**sysctlbyname-improved version 20210223 is out!**

The [FreeBSD](https://www.freebsd.org) Operating System maintains a Management Information Base ("MIB") where an object represents a parameter of the system, the [sysctl](https://man.freebsd.org/sysctl/3) system call explores the MIB to find an object by its Object Identifier ("OID") to get or set the value of the parameter.

An OID is a series of numbers, it is possible to replace a number with a string to obtain an object name, example [1.1] -\> "*kern.ostype*", the *sysctlbyname* system call finds an object by its name.

The purpose of [sysctlbyname-improved](https://gitlab.com/alfix/sysctlbyname-improved) is to allow *sysctlbyname* to handle:

 - a name with an empty string level, example "**security.jail.param.allow.mount.**"
 - an extended name for a CTLTYPE\_NODE with a defined handler, example "**kern.proc.pid.\<pid\>**"

Example with "*kern.proc.pid.0*", the implementation of *sysctlbyname\_improved()* is in the project repo:
```c
#include <sys/types.h>
#include <sys/sysctl.h>
#include <sys/user.h>

#include <stdio.h>
#include <string.h>

int main()
{
    size_t valuelen;
    struct kinfo_proc kp;

    printf("  ## sysctlbyname ##\n");
    valuelen = sizeof(kp);
    if (sysctlbyname("kern.proc.pid.1", &kp, &valuelen, NULL, 0) == 0)
        printf("effective user id: %d\n", kp.ki_uid);
    else
        printf("kern.proc.pid.1: error\n");


    printf("  ## sysctlbyname_improved ##\n");
    valuelen = sizeof(kp);
    if (sysctlbyname_improved("kern.proc.pid.1", &kp, &valuelen, NULL, 0) == 0)
        printf("kern.proc.pid.1: (effective user id) %d\n", kp.ki_uid);
    else
        printf("kern.proc.pid.1: error\n");

    return 0;
}
```
Output:
```default
  ## sysctlbyname ##
kern.proc.pid.1: error
  ## sysctlbyname_improved ##
kern.proc.pid.1: (effective user id) 0
```

Furthermore this project can be useful to convert an extended name in the corresponding OID, example "*kern.proc.pid.2021*" -> [1.14.1.2021], this feature is used by *sysctlmif\_oidextendedbybame()* function of the [sysctlmibinfo2](https://gitlab.com/alfix/sysctlmibinfo2) library.

-----------------------------------------------------

Properly, *sysctlbyname-improved* is an extension of *sysctlinfo*, so this new version takes advantages of the improvements (mainly efficiency) of [sysctlinfo 20210222](alfonsosiciliano/sysctlinfo-20210222-b10).

To install the port [sysutils/sysctlbyname-improved-kmod](https://www.freshports.org/sysutils/sysctlbyname-improved-kmod/):
```default
# cd /usr/ports/sysutils/sysctlbyname-improved-kmod/ && make install clean
```
To add the package:
```default
# pkg install sysctlbyname-improved-kmod
```

**To know more**: <https://gitlab.com/alfix/sysctlbyname-improved>.
AI
Published: 2021-03-20 13:59:14

There was a time, not so long ago, when artificial intelligence, machine learning, and natural language processing were only found in science fiction novels. Artificial intelligence, on the other hand, has been around for over 70 years. We were still working on a model of the most basic component of artificial intelligence at the time: artificial neurons. Artificial intelligence (AI) and machine learning had crept into the public's blind spot for a long time after that, all the while becoming smarter. It wasn't until IBM's Deep Blue defeated Garry Kasparov in 1997 that AI technologies gained traction and the data race began.

Of course, today's digital imperative includes AI, machine learning, and natural language processing. The benefits of using AI technologies in all shapes and sizes have prompted companies to invest heavily in their growth and application. Transportation, entertainment, and manufacturing operations have all seen tremendous growth and result of AI adoption.

AI's ability to automate sales and marketing activities has shown great promise in terms of lowering human effort and costs while still boosting top-line growth. Artificial intelligence (AI) reduces the time spent on administrative tasks, improves a brand's ability to provide customised services to consumers, and creates previously untapped revenue streams. This is why AI is at the heart of the most promising marketing automation initiatives.
VSCode terminal & meta key
Tags: vscode, terminal, zsh
Published: 2021-03-21 09:17:52

I had the same issue as described here: https://superuser.com/questions/1549993/how-to-map-option-shift-digit-keys-in-zsh-using-bindkey

I went with the same solution that disables `terminal.integrated.macOptionIsMeta` and uses bindkey to map the traditional readline meta key commands. I added `insert-last-word` and had to modify the bound characters to some extent. Still need to figure out how to best handle dead keys (`option-t` and `option-u` for example)...

```
bindkey '' accept-and-hold # option-a
bindkey 'ƒ' forward-word # option-b
bindkey 'ç' fzf-cd-widget # option-c
bindkey 'ð' delete-word # option-d
bindkey '›' backward-word # option-f
bindkey '¸' get-line # option-g
bindkey '˛' run-help # option-h
bindkey 'ﬁ' down-case-word # option-l
bindkey '‘' history-search-forward # option-n
bindkey 'π' history-search-backward # option-p
bindkey '•' push-line # option-q
bindkey 'ß' spell-word # option-s
bindkey '†' transpose-words # option-t
bindkey 'ˀ' up-case-word # option-u
bindkey 'Ω' copy-region-as-kill # option-w
bindkey '≈' execute-named-cmd # option-x
bindkey 'µ' yank-pop # option-y
bindkey '…' insert-last-word # option-.
```

Would be nice if VSCode supported choosing just the left option key as meta, same as iTerm does.
We partnered with Bauman Moscow State Technical University to teach biomedical programming
Tags: beginners, writing, programming
Published: 2021-03-23 11:06:14

The Evrone team doesn’t just work on commercial projects. We also actively support the open-source community, sharing our tools and holding events for developers of all different levels. Because of this, Bauman Moscow State Technical University has invited one of our specialists to teach the “Algorithmization and Programming” course for students of the Faculty of Biomedical Engineering.

Through our partnership with the University, we will teach freshmen to write and understand code and use it to solve scientific and technological challenges. [In this article,](https://evrone.com/bauman-mstu-course) we explain why we chose to teach the Julia programming language, and how this knowledge will help students prepare for their future careers.
SREview Issue #11 March 2021
Tags: sre, devops
Published: 2021-03-23 15:01:42

Is it spring yet? Or spring still? Time sure is strange nowadays. At least we have a ton to look forward to in the next few weeks! Here are some of the most exciting Tweets, content, and events happening in the SRE and resilience engineering community this month.

![White cartoon dog running with a laptop tucked under his paw from a winter landscape with bare trees and snow into a spring landscape with greenery, flowers, and butterflies.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nd78s8wzsgdzacbjmv41.jpeg)

#Tweets that have us twittering#
{% twitter 1371338187352645634 %}
{% twitter 1370883721319026690 %}
{% twitter 1367618267246858247 %}
#SREading#
**[SRE2AUX: How Flight Controllers were the first SREs](https://www.blameless.com/blog/how-flight-controllers-were-the-first-sres)**: Geoff White writes about what vintage space lore has to do with site reliability engineering in the 21st century.
**[The Netflix Cosmos Platform](https://netflixtechblog.com/the-netflix-cosmos-platform-35c14d9351ad)**: This article explains why the Netflix team built Cosmos, how it works, and shares some of the things the team learned along the way.
**[SRE as Organizational Transformation: Lessons from Activist Organizers](https://www.blameless.com/blog/sre-as-organizational-transformation-lessons-from-activist-organizers?utm_content=155300039&utm_medium=social&utm_source=linkedin&hss_channel=lcp-28625893)**: Chris Hendrix writes about how we can learn from activist organizers while driving company-wide change.
**[What is a Canary Deployment?](https://launchdarkly.com/blog/what-is-a-canary-deployment)**: This post contains a thorough description of canary releases including benefits, visual examples, and how it fits into an effective deployment strategy.
**[How We Built and Use Runbook Documentation](https://www.blameless.com/blog/how-we-built-and-use-runbook-documentation-at-blameless)**: Alicia Li and Lucas Bartroli write about runbooks. “Even if you don’t notice, you are executing runbooks everyday, all the time.”
**[Increment’s Reliability Issue](https://increment.com/)**: This issue contains articles on reliability from thought leaders such as Tanya Reilly, Mads Hartmann, Ana Margarita Medina, and more.
#Events#
**[SRE Thought Leader Panel](https://blameless.zoom.us/webinar/register/WN_vN5XzMblQrW4jYKEfvz34g)**: SRE Adoption as Organizational Transformation March 25, 11 AM PDT: Hear from experts Kurt Andersen, Vanessa Yiu, and Tony Hansmann. Hosted by Chris Hendrix.
**[Blameless Bi-Weekly Demo](https://blameless.zoom.us/webinar/register/WN_xiwvRmJjRLeXGYaJeObnNg)** March 30 at 8 AM PDT: Check out a live demo of Blameless as we walk you through operations best practices, and get your questions answered.
**[DevOps Online Summit](https://devopsonlinesummit.com/)** April 26-30: DevOps professionals throughout the world come together and share their learnings.
**[Deserted Island DevOps](https://desertedisland.club/)** April 30: A single-day virtual event streamed on Twitch. All presentations will take place in the world of Animal Crossing: New Horizons.