teleren/devto huggingface dataset:
Why JavaScript is a mess.
Tags: node, javscript
Published: 2021-03-11 08:18:50

Nowadays, programming is a well established field in the market with more and more new technologies popping out of nowhere. I started programming almost 3 years ago, with a well know language called "JavaScript". So what are the problems and what my concerns about the JavaScript ecosystem.

## The small problem.
JavaScript is the foundation of the the internet, most use JavaScript on the front-end part of their website. JQuery, Vuejs, Reactjs, Angularjs are some of the frameworks. But what is the problem with all of them? Well eslint is the problem, and no eslint is a great tool but the need to use eslint a the real problem. You learn to write React one way, then you go to a company and they write react another way. Then you edit some "legacy code"(just 2 years old) and they write React another way. Some use hooks, some don't, some use es5 some don't. 

In conclusion, the result is always the same, the differences are minimal. Yet you are going to say, "but no, the bundle size changes, the performance change and the lines of code we write changes". Going from 6mb to 5mb is not going to change anything, going from 200ms to 170ms is not going to change anything, the only thing that I agree is the simpler code. But simple is not re-learning the same technology every 2 months.

## The big(huge) problem.
Let's talk about the back-end. 7000 frameworks there are. All producing the same result with a different way. There is not a single folder structure to follow, everyone use's their own folder structure, there is not a single coding style, everyone is writing with there own style, even when using the same framework.

I am using express to write code, every-time I start a new project I need to spent 8 hour just to configure eslint, prettier and typescript to the needs of the project, and when a new developer jumps in, he needs to spent another 8 hour to figure out the coding style of the project. Also thanks god I learned Typescript because with JavaScript things where even worse. 

What is my suggestion.
In a nutshell, I love JavaScript and I use it everyday, yet above I mentioned some of my concerns. Large corporation can handle this type of issues, but when it comes to the individuals it is harder that it seems. Learning is something developers need to master, however when it comes to learning the same thing again and again, sometimes it is a little nerve racking. What I suggest to the community is to find a single framework to work. Next.js is now the most popular on the front-end. On the other hand on the back-end language like Golang, Python or even Ruby are more stable than Nodejs and from company to company coding style doesn't change much so stick with those. 

Thanks for reading, 

Sotiris
List of helpful FFMPEG command for checking capabilities
Tags: ffmpeg, multimedia
Published: 2021-03-11 08:07:11

A lot of FFMPEG options are not in the documentations and only available to the specific build, hardware acceleration, or codecs. So I need a list of commands on how to show and search all available settings and options.


#### 1. List all possible options of `-filter_complex` and `-vf` filter graph
```sh
ffmpeg -hide_banner -filters
```
```
Filters:
 A = Audio input/output
 V = Video input/output
 N = Dynamic number and/or type of input/output
 | = Source or sink filter
 
 T.. = Timeline support
 .S. = Slice threading
 ..C = Command support
 ---
 ... filter_name            N->N       Description.
```

##### 1.2 Check filter details
```sh
ffmpeg -hide_banner -h filter=$fname
```
```
Filter lowpass
  Description.
    Inputs:
       … (…)
    Outputs:
       … (…)
lowpass AVOptions:
  options         <type>     ..F....... Description (default or range value)
```


#### 2. List all hardware acceleration
```sh
ffmpeg -hide_banner -hwaccels
```
```
Hardware acceleration methods:
vdpau
cuda
vaapi
qsv
drm
```


#### 3. List all encoders and/or decoders
```sh
ffmpeg -hide_banner -encoders
ffmpeg -hide_banner -decoders
```
```
Encoders/Decoders:
 V..... = Video
 A..... = Audio
 S..... = Subtitle
 .F.... = Frame-level multithreading
 ..S... = Slice-level multithreading
 ...X.. = Codec is experimental
 ....B. = Supports draw_horiz_band
 .....D = Supports direct rendering method 1
 ------
 ...... cname_hwaccel                 Description
```

##### 3.0 List all codecs
```sh
ffmpeg -hide_banner -codecs
```
```
Codecs:
 D..... = Decoding supported
 .E.... = Encoding supported
 ..V... = Video codec
 ..A... = Audio codec
 ..S... = Subtitle codec
 ...I.. = Intra frame-only codec
 ....L. = Lossy compression
 .....S = Lossless compression
 ------
 ...... cname_hwaccel                 Description
```

##### 3.1 Check encoders details
(can list multiple encoders depend on hardware acceleration you have)
```sh
ffmpeg -hide_banner -h encoder=$cname_hwaccel
```
```
Encoder libname [Description]:
    General capabilities: delay threads 
    Threading capabilities: auto
    Supported pixel formats: … … …
libname AVOptions:
  -option            <type>     .......... Description (default or range value)
 
 codec_name configuration using a :-separated list of key=value parameters


Encoder cname_hwaccel [Description]:
    General capabilities: delay hardware 
    Threading capabilities: none
    Supported hardware devices: …
    Supported pixel formats: … …
cname_hwaccel AVOptions:
  -option             <type>        E......... Description (default or range value)
```

##### 3.2 Check decoder details
```sh
ffmpeg -hide_banner -h decoder=$cname
```
```
Decoder cname [Description]:
    General capabilities: dr1 delay threads 
    Threading capabilities: frame and slice
    Supported hardware devices: … … … 
cname Decoder AVOptions:
  -option         <type>    .D........ Description (default or range value)
```
10 best platforms for online courses.
Tags: onlinecourse, platforms, jobs, study
Published: 2021-03-11 08:03:04

Hello Guys,

Want to get better pay jobs????

Then you need to sharp your skills and its possible from online free or paid courses there is lots of online courses platforms but I suggest best top 10 to help out you so lets start....

(1) <a href="https://www.udemy.com/">Udemy</a>

--Find courses across different domains including data science, IT, management, economics, web design, etc. 

--Great discounts of up to 90% available on the courses  

(2) <a href="https://www.coursera.org/">Coursera</a>

--Offers best online courses, certifications, and degrees by top instructors from world-class universities and companies

--Provides access to on-demand video lectures, homework exercises, and community discussion forums

(3) <a href="https://www.edx.org/">edX</a>

--Both free as well as paid subject matter available from top universities and institutes globally

--Find MOOCs as well as paid verified best online courses from highly rated institutes

(4) <a href="https://www.upgrad.com/">UpGrad</a>

--Explore a number of courses and certifications from top colleges and universities

--Find long term diploma and certification courses
Connect on the live platform that replicates real-time classroom -

--learning and the sessions include doubt resolution and session analytics.  


(5) <a href="https://www.SkillSoft.com/">SkillSoft</a>

--Comprehensive digital skills training available through courses, videos, books, and other resources

--Courses available on topics like software development, leadership, business skills, digital transformation, technology, etc. 

(6) <a href="https://www.jigsawacademy.com/">Jigsaw Academy</a>

--This platform is specifically designed for data science and analytics enthusiasts

--Both free and paid certifications and training programs available

--Covers topics like data science, machine learning, big data, SAS, R, Python, etc.

(7) <a href="https://www.Skillshare.com/">Skillshare</a>

--Provide online training on illustration, photography, design, entrepreneurship, lifestyle, technology and others

--Offers hands-on projects & community, support to the users


(8) <a href="https://swayam.gov.in/">Swayam</a>

--India’s first MOOC platform to offer a quality learning experience to all

--Free courses available

--Hosts school, under-graduate, post-graduate, engineering, law, and other professional courses

(9) <a href="https://www.Futurelearn.com/">Futurelearn</a>

--Provide best online courses, programs, and degrees designed by top universities, business schools, and specialist organizations

--Helps candidate in finding jobs by conducting mock interview sessions and create a high-quality resume


(10) <a href="https://www.google.com/">Google</a>

--Offers online data & tech, digital marketing, and career development courses for beginners and intermediates 

--Most of the courses are short and can be covered within 20 hours and easy to understand
Project 57 of 100 - Compras MVP Splash Page
Tags: react, javascript, 100daysofcode
Published: 2021-03-11 07:52:04

*Hey! I'm on a mission to make 100 React.js projects ending March 31st. Please follow my dev.to profile or my [twitter](https://www.twitter.com/jwhubert91) for updates and feel free to reach out if you have questions. Thanks for your support!*

Link to the deployed project: [Link](https://100-react-projects-day-57-compras-mvp-beta.netlify.app/)
Link to the repo: [github](https://github.com/jwhubert91/compras-beta)

I didn't have anything else planned for today so I'm giving y'all a sneak peak at the homepage for a new application I am building. Would you let me know what you think of the initial design?

The service is called "Compras" which is Spanish for groceries/purchased goods. The idea is to give physical retail stores a free way to post their products online and make them searchable to everyone, absolutely free.

The idea came to me actually before Covid in 2019. I was in a neighborhood far from home and purchased a Fentiman's lemonade at a small coffee shop. It was so good I wanted to see if there was any store near me that had it, but there's no way to just look. You can search on Google Shopping- but that only really has data from big box retailers that sell things online. You can check on a delivery app, but they will charge you a delivery fee which would far surpass the price of the lemonade itself and you have to wait minutes or hours for it to arrive.

After moving to New York in 2020 I realized lots of businesses had the problem of not having an easy way to post their products online- and the solutions that do exist cater to higher end or more tech savvy partners, or there are delivery apps that take substantial margins away from the retailers or charge you for delivery. There's Yelp for restaurant menus and such, but what about at a local cornerstore or deli? What about a clothing store? Also Yelp has the issue of pitting store owners against the platform- which gives them free publicity but also forces them to maintain their profile and fend off low ratings, creating an air of hostility between the two.

Covid seems to have been the perfect time to launch such a service but I didn't have the development chops to pull it off until recently. Now the market seems to be crowded with competitors. Just yesterday- a billionaire VC named Keith Rabois who founded Opendoor and just exited with a $16 billion IPO announced on Twitter a mysterious new company he was hiring for called "Openstore" but didn't provide any more info.

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

When I've had good ideas in the past I usually notice someone else makes it within a year or two of me having the idea so that could be it- either way- the race is on to develop it :)

Let me know what you think of this beta version of the homepage :)

As always please feel free to add me on [the Twitters](https://www.twitter.com/jwhubert91)
Solving problem: just one of my WPML site is indexed in Google
Tags: wordpress, tips, wpml
Published: 2021-03-11 07:47:57

Ever since I’ve created my English website and blog, I’ve noticed that whenever I search for my name on Google, I can see only my Romanian website, not the newly created English one.

Initially, I thought it is a time problem and eventually it will appear since I’ve set it up on Search Console and everything looked ok. But yesterday it has been over a month since I’ve indexed and still won’t work.

I checked the canonical tag to be sure it is not set to the Romanian site and it wasn’t. But then I also noticed a strange behavior: searching my name in incognito showed the English website, searching in a normal browser showed my Romanian one. So it was clear to me that something was telling Google “Hey, this is in Romanian and only index it in Romania, this is English, can be indexed internationally”.

And indeed I’ve missed the **alternate** tag in the source.

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

Since I am using WPML to have multiple languages using the same WordPress installation, that is what is writing those tags there and tells search engines that for the same website there is an alternative version in another language.

Thankfully though, it can easily be turned off if you do not want this behavior: go to WPML > Languages and turn off/untick **“Display alternative languages in the HEAD section.“**

![Screen-Shot-2021-03-11-at-09.21.56](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hf7o5kb8lmqod99x66mh.png)

After one day of turning this off, my international website appeared for Romanian users too and vice-versa.

For me, this is the behavior I want, for you though you might want to index the way WPML does it by default: each language on its own search engine country.
Sticky Sidebar in Vanilla JavaScript
Tags: javascript, html
Published: 2021-03-11 07:44:18

This code is built with Pure JavaScript without any dependencies.  It just count top and bottom edges of the element in which the element needs to be sticky. 

You can also check the [Demo](https://codepen.io/dhruvangg/full/WNoLRZq)

```
function offset(elt) {
  var rect = elt.getBoundingClientRect(), bodyElt = document.body;
  return {
    top: rect.top + bodyElt .scrollTop,
    left: rect.left + bodyElt .scrollLeft
  }
}

window.addEventListener("load", function(){
  if(document.querySelector("#sidebar")){
    const sidebar = document.querySelector("#sidebar");
    const footer = document.querySelector("section");
    const top = offset(sidebar).top;
    const footTop = offset(footer).top;
    const maxY = footTop - sidebar.offsetHeight

    window.addEventListener("scroll", function(){
      let y = document.scrollingElement.scrollTop;
      if (y > top) {
        if (y < maxY) {
          sidebar.classList.add("fixed")
          sidebar.removeAttribute('style');
        } else {
          sidebar.classList.remove("fixed")
          sidebar.setAttribute('style', 'position: absolute; top: '+(maxY - top)+'px');
        }
      } else {
        sidebar.classList.remove("fixed")
      }
    })
  }
});
```
Two Months into Software Engineering!
Tags: devjournal, codenewbie, career, womenintech
Published: 2021-03-11 07:33:14

_This post was originally published on March 11, 2021 on [my blog] (https://alexlsalt.github.io/blog)._

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

It's been a little over two months since I've started my career as a software engineer, and I'm so unbelievably convinced that this was the ultimate move for me.

Yesterday, I was thrilled to wake up to a wonderful article that was written about my journey teaching myself how to code in 2020 and making that transition.

Here's a little excerpt:

'“I feel like I’m at the start of this amazing adventure. And there are so many different avenues to take or doors that can be opened,” Morton said. “I’m here. I’m doing the work every day. I’m in it. And the opportunities are endless — that’s how it feels."'

Feel free to [give it a read here >>](https://builtin.com/software-engineering-perspectives/building-in-public-job-hunt-strategy)

At work, I'm working on coding up the new designs for the emails that are sent from our Rails application. I've been learning a ton about ActionMailer in Rails, MJML formatting for email code, and setting the email to send at the right time.

It's really exciting stuff for me! As always, I'm taking it step by step and even when I'm faced with a big mountain of things that I don't quite yet know how to do, I always fall back on the solution of breaking everything up into smaller steps and working my way down the list.

Soon enough, the bigger picture starts to make more sense and before I know it, I have a fully polished bit of code ready to be submitted and reviewed!

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

Pssst! I send weekly newsletters about the self-taught coding journey and my own coding adventures (and misadventures!)  [Sign up here! >>](https://ladies-code-collective.ck.page/e53b5fca44)
All about Azure DEV Challenge!1
Tags: azure, android, azureapril
Published: 2021-03-11 07:10:51

I recently came to know about Azure when I saw a challenge by KonfHub where all the participants have to complete Learning challenges by Azure.. The goal of the initiative is to skill developers to learn new technologies on MS Learn and create content sharing their experiences building on Azure.
While completing the Python on Azure track I learnt how to build an AI app by using Python and Flask, How to automate Python deployments using Azure pipelines and How to host a web application using Azure App service.

Now I will tell you how to join Azure Dev challenge and learn Azure and also some extra things you can do with Azure...


HOW TO JOIN AZURE CHALLENGE-->
Visit the link for challenge--https://challenge.konfhub.com/#registration
Procedure -- 
*STEP 1*--
Fill the required information with accurate details
*STEP 2*--
Check your registered email you will receive an email form them..
You will get 3 different choices to learn choose them accordingly..
*Step 3*--
In an challenge you will get 3 courses to learn you have to attend them and answer the questions accordingly to gain xp.
*Step 4* -- 
Once done you can go back to the link and submit the challenge
Goal of Challenge -- To provide you knowledge about azure and expand you mind.


What else you can do using Azure--
-->Shell access from virtually anywhere
-->Choose your preferred shell experience
-->Host web apps
-->And much more........................................
Should I use Testing?
Tags: javascript, testing, feedback, discuss
Published: 2021-03-11 06:57:25

Hello Everyone,

It's my first time here posting in dev.to and I have been quite interested in implementing tests in my current JavaScript project. It has been in the works for almost a year now and its growing big. During early development, I didn't quite implemented testing (even code styling fixes) since I was just getting started in JavaScript.

I've been reading a lot of posts regarding testing and was thinking if I should implement it right now. The project is getting quite tedious in development since I also work on it's backend (using Laravel to act as it's API). The project is big as some sort of forum website using Vue as front-end.

I would like to know if I should still put testing. Waiting for response 😀
freeCodeCamp Project Done #2: A Survey Form
Tags: webdev, showdev, css, html
Published: 2021-03-11 06:51:28

This is a continuation of my <a href='https://dev.to/babib/a-freecodecamp-challenge-done-breaking-out-of-the-learning-phase-175l'>previous post</a>.

This second project is a survey form. This is what I did:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w78vw1scdxc8pw3365wu.png)
<a href = 'https://codepen.io/babi-b/full/MWbZJrK'>CodePen Link</a>

<h2>Feedback on the work done</h2>
Working this project was not very difficult. It touches almost every aspect of a <code>form</code>. This is quite useful is mastery.(Just what I need😊!)

Did you notice the roundness of the edges of the box and input fields?

However, I did take some time in aligning the <code>form</code> itself to the center. I had to try out several values (trial and error 😅).
Also, choosing the right shade of the form to complement the background took some time too, but I most confess it was fun!😊
<p>Please,I'll like to know:</p>
<ul>
<li>Your impressions on my work done.</li>
<li>What was your experience like creating an HTML and CSS(only) form?</li>
<li>Any ideas on what I might improve?</li>

<br>Please stay with me as I continue this gradual journey to mastery!🤗


                                                💞 Babi
5 super under-rated free tools/resources I use almost every day. (As a Frontend developer)
Tags: webdev, design, productivity, frontend
Published: 2021-03-11 06:36:02

Hello everyone! Let's get straight into the list of 5 tools/resources I use almost every day as a frontend developer and UI designer. Of course, I use many more tools and resources in my creative process but these are the more underrated ones.

## 1. [ScreenToGif](https://www.screentogif.com/)

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

With this tool, we can record our screen and export the clip as a gif. Some of its amazing features include -
* Recording a specific part of your screen with the area selector.
* Recording with webcam.
* Drawing on the screen while you are recording with the board feature.

Also, this tool is completely free and open-source on GitHub! Definitely worth a try.

## 2. [Responsively](https://responsively.app/)

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

With this amazing tool or as they call it 'A web developer's browser you can see how your website will look on different devices. For example, here's what my website looks like on different devices

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

There are more than 40 devices you can choose from and check the responsiveness of your website. There are some glitches here and there but it works pretty great for the most part. Also, the community is constantly improving it because it is free and open-source!


## 3. [DevDocs](https://devdocs.io/)

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

Devdocs is a free resource where you can find documentation for pretty much every technology used in web development. You can download it as a PWA on your desktop or even your phone. Also, you can download documentation of your favourite technologies for offline reading.


## 4. [Undesign](https://undesign.learn.uno/)

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

Undesign is a collection of free resources for developers and designers. The resources are divided into 45 categories like Inspiration, Colors, Gradients, Illustrations, Templates, etc. Also, you can install it as a PWA.


## 5. [Colorsinspo](https://colorsinspo.com/)

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

This is probably the only tool most people will need when it comes to choosing colors and color palettes for their projects. It has premade color palettes, solid colors,  gradients, brand colors, etc. and you can also install it as a plugin for Adobe XD.


So these were my favorite 5 tools that I use almost every single day. If you find it useful please share this post. Thank you😀