teleren/devto huggingface dataset:
ABCs for Web Developers
Tags: webdev, showdev, coding, react
Published: 2020-12-01 20:31:25

For the holiday season I thought I'd do something a bit different. Why not make a ABCs website for web developers?

## What is this?
In the style of alphabet learning books of childhood, ABCs for Web Developers has a little rhyme and web technology associated with it. Over the next 25 days I'll be adding a new letter to the website.

## Disclaimer

This is a bit of fun, not to be taken too seriously. There are lots of great technologies that I could have chosen for each letter but I'm limiting it to just one. Let's see what happens next year, until then I hope you enjoy.

Stay up to date with the rest of the letters, I'll add one daily until the 26th of December.

Watch the videos or visit the link to see the original web version.

***

# A is for Angular

{% youtube czRgWTsYSjM %}

[View the web version of A](https://abcs-for-web-developers.sethcorker.com/2020/a)

***

# B is for Babel

{% youtube RLIFI7oqd1w %}

[View the web version of B](https://abcs-for-web-developers.sethcorker.com/2020/b)

***

# C is for CSS

{% youtube ESxP6KhXDvo %}

[View the web version of C](https://abcs-for-web-developers.sethcorker.com/2020/c)

***

# D is for div

{% youtube ZLCdYFB3_pE %}

[View the web version of D](https://abcs-for-web-developers.sethcorker.com/2020/d)

***

Check back daily for the next one in the series.
Today I learned a small trick on how to count in Binary
Tags: beginners, computerscience, codenewbie
Published: 2020-12-01 20:11:52

Hey welcome back,

Today I learned a small trick on how to count in binary. It is really simple.

How to do it? You need to divide it by two until you reach the number 1, but you need to ignore the numbers after the comma, and important is that you don't round the number you get after you divide it by 2. We will try now to get the binary number of the number 45.

|    	| 45/2  	| 22/2 	| 11/2 	| 5/2 	| 2/2 	|
|:--:	|:-----:	|------	|------	|-----	|-----	|
| 45 	| 22    	| 11   	| 5    	| 2   	| 1   	|

Now we have divided everything by two and got the last number the last part is to add under every even number a 0 and under every odd number a 1 then our table will look like this:

|    	| 45/2  	| 22/2 	| 11/2 	| 5/2 	| 2/2 	|
|:--:	|:-----:	|------	|------	|-----	|-----	|
| 45 	| 22    	| 11   	| 5    	| 2   	| 1   	|
| 1  	| 0     	| 1    	| 1    	| 0   	| 1   	|

Now it looks like this and we got the binary number *101101* in this example it is not necessary to flip the binary number (*101101*) but I had to flip the binary number because sometimes I got another number then I needed. Here is another example for the number 34 where you need to flip the binary number at the end:

|    	| 34/2  	| 17/2 	| 8/2 	| 4/2 	| 2/2 	| 
|:--:	|:-----:	|------	|------	|-----	|-----	|
| 34 	| 17    	| 8   	| 4    	| 2   	| 1   	|
| 0  	| 1     	| 0    	| 0    	| 0   	| 1   	|

Then we get the binary number *010001* but this number is the wrong number we need to flip it then our binary number looks like this: *100010* now if we check it with a Decimal to Binary online converter we can see that we are right here is the prove:

![Here is the prove](https://dev-to-uploads.s3.amazonaws.com/i/xikg2co7ys6zvd7png08.png) 

To the [Converter](https://www.rapidtables.com/convert/number/decimal-to-binary.html)

I hope you enjoyed this blog post. If you have any idea or recommendation feel free to write a comment :)
The 7 Most Popular DEV Posts from the Past Week
Tags: top7
Published: 2020-12-01 19:54:24

---
title: The 7 Most Popular DEV Posts from the Past Week
published: true
description: A round-up of the most-read and most-loved contributions from the community this past week.
tags: icymi
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---
Every Tuesday, we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week. ❤️

### The rewards of consistency

@fgauna12 wrote for 100 days straight! In the process, they learned a ton about writing, patience, and building readership. 

{% link https://dev.to/fgauna12/i-wrote-a-daily-blog-post-for-100-days-here-s-what-happened-3673 %} 

### Airtight API design 

How to build good APIs and why it's essential, via @johannea

{% link https://dev.to/johannea/practical-advice-to-good-api-design-2hac %} 

### A simple scroll-to-top button

"Making a scroll-to-top button and making it scroll smoothly is probably a lot easier than you think," says @ashleemboyer — and she proves it!

{% link https://dev.to/ashleemboyer/accessible-smooth-scroll-to-top-buttons-with-little-code-3b9d %}

### Standing out when you start out 

Sure, it's important to be good at what you do, but there's more subtlety to standing out as a newer developer — and more specificity. Terrific explanation, courtesy of @matthewrungwe.

{% link https://dev.to/matthewrungwe/how-to-be-a-stand-out-as-developer-53h3 %}

### Semantic HTML is the thing to do

... @eevajonnapanula shares why.

{% link https://dev.to/eevajonnapanula/ode-to-semantic-html-38c3 %}

### Brushing up on JavaScript

When @glitteringkatie was in need of a new job, they also needed to dust off their JS skills. Here's how Katie did it.

{% link https://dev.to/glitteringkatie/keeping-up-with-the-javascripts-lc3 %}

### How to make time for "it" 

... courtesy of @lankjan007. Hint: start the day on **your** terms.

{% link https://dev.to/lankjan007/the-5am-hack-4im7 %}

_That's it for our weekly wrap up! Keep an eye on dev.to this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Tuesday!_
Gaming and Tweaks Tech
Tags: gaming, tech, console, mobile
Published: 2020-12-01 19:45:09

Gaming and Tweaks Tech is your complete guide to computers, peripherals, and upgrades. We test and review tech product report technology news and trends, and provide shopping advice with the price. We're all about video games, hardware, software, pc gaming, tutorials, windows tutorials, tests, and consoles.

<a href="https://www.gamingtweaks.com/">Gaming and Tweaks Tech</a>
Initial Post
Tags: introduction, learning, react
Published: 2020-12-01 19:02:41

As my first post, I figure I give a little background about where I've been and where I'm trying to go.

I have been trying to make the career switch into web development for the past couple of years now with minimal luck.  I started this path when I reconnected with an old friend who told me his story about how he was able to transition into a full-stack developer role.  

His story was inspiring and in some cases similar to my own.  After hearing about the different aspects of a developer's life and, considering my first experiences with any type of coding was changing color schemes and adding music players to my old Facebook page which I genuinely enjoyed, I decided that maybe this would be my future.

After joining the coding community of which he and a few others started to help people like myself who wanted to make the change to being a web developer I began learning from free coding sources like Codecademy, Online courses from Udemy and Udacity.  Eventually, I joined a Google scholarship program from which I graduated and got a certificate.

Fast forward to now and I have been able to work on a few freelance projects and even joined a coding boot camp for front-end web development.  I am currently still on track with that boot camp and learning the fundamentals of the React framework.
Getting to Git is not just a tech change. It is a mindset change.
Published: 2020-12-01 18:08:23

Thursday afternoon. Everyone is focussed on getting the deliverables packaged. The team is having a checkpoint to call to ensure if everything is still on track. And I decide to join the call. 

The team was not expecting me on the call as it was a regular checkpoint meet, but seeing me on the call, they already start to anticipate a twist. 

A moment of silence which is then broken by my "Oh! it's very quiet in here" followed by "I have an ask if you think it makes sense". I decided to change the requirement slightly but that had an impact on the code already written. So I asked them to experiment and see if the change is feasible.

The developer on the job copied the code and took a backup of the file before starting to make any changes. That immediately prompted my question "Why did you do that?".

Me: "Why did you take a backup of the file?"
Dev: "Just in case if it does not work then I have a backup"
Me: "But we are using Git..right?"
Dev: "Yes but for additional safety"
Me: "So you do not trust Git"
Dev: "It's not that. It is better to take the backup"

The tools are no good if the users of the tools still opt for traditional (if not barbarian) ways.

Git has revert functionality and you can revert back to any commit but if you do not trust Git then you will still rely on methods that are slow, error-prone and not efficient.

We then had a training session with the entire team on Git and how we can up our game by using the tools effectively than just treating Git as a store.
Queue (data structure)
Published: 2020-12-01 18:46:06


Hello friends, I am Mohammad. This is the first post on this website
in this post we learn How it works queue list in data structure

What is a queue : **queue** A list of items Similar to a stack list,A kind of simplified array,
But We can apply **limited** operators in the queue list

* for Example
We have a queue list below</n>
```
[13,16,8,6]
```
* When we add a value to this list
The addition is done from the beginning of the list.
* For example, if we add a value of **9** to the list, this value will be added to the list first
```
[9,13,16,8,6]
```
* The act of adding is called : **enqueue**
* For example, if we delete a value, it will be removed from the bottom of the list.
```
[9,13,16,8]
```
* The delete operation is called : **dequeue**

The most important difference between `Queue` and `stack`

In **queue**, adding a value is always at the top of the list
In **queue**, deleting a value is always from the bottom of the list
This is also called `FIFO` **First In First Out**.

thank you
How to Create Draggable Lists with Javascript - Code With Bishal
Tags: html, css, javascript, cwb
Published: 2020-12-01 18:40:31

Draggable Lists is made with HTML, CSS and JS. They are usually used to prioritize a task for you. It is very usefull and Important You can also use it by copy pasting the code from my site. 
<a href="https://www.codewithbishal.com/example/create-a-sortable-list-with-draggable-items-using-javascript">View it on our website</a>

At first, on our webpage, there is the overview of our blog then there is the example of our draggable list . When you drag the list after visiting our website you can see the lists can change their place, there is a also a button to copy the codes (HTML, CSS and JS).

You can view and copy the source code files through the link given below. <a href="https://www.codewithbishal.com/example/create-a-sortable-list-with-draggable-items-using-javascript">View and Copy Source Code</a>
On .NET Episode: Authentication with Microsoft Graph SDKs
Tags: microsoft365, dotnet, microsoftgraph, webdev
Published: 2020-12-01 18:22:00

To call into Microsoft Graph, your code must acquire an access token from the Microsoft identity platform. To get an access token, your app must be registered and authorized with the Microsoft identity platform.

In this episode, Darrel Miller joins Christos to show us all how to make authorized requests with the Microsoft Graph SDK within our .NET applications.

{% youtube g-KbSUu9k0A %}

If you liked this video and would like to see some more of our .NET content, please subscribe to our [.NET Developers YouTube Channel](https://www.youtube.com/channel/UCvtT19MZW8dq5Wwfu6B0oxw).

<ul>
<li><a href="https://docs.microsoft.com/graph/overview?WT.mc_id=dotnet-00000-cephilli" target="_blank">Microsoft Graph Docs</a></li>
<li><a href="https://developer.microsoft.com/graph?WT.mc_id=dotnet-00000-cephilli" target="_blank">Microsoft Graph Dev Center</a></li>
<li><a href="https://developer.microsoft.com/graph/graph-explorer?WT.mc_id=dotnet-00000-cephilli" target="_blank">Microsoft Graph Explorer</a></li>
<li><a href="https://github.com/microsoftgraph" target="_blank">Microsoft Graph on GitHub</a></li>
</ul>
Quick hits: Azure AD B2C with the MSAL v2 Angular alpha
Tags: azure, identity, b2c
Published: 2020-12-01 18:02:02

We get a lot of interesting questions over here at 425 HQ. Today I have a friend working with a customer doing angular - they're interested in using the msal-angular v2 alpha to use auth_code with PKCE instead of implicit. There is a sample app [here](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-angular-v2-samples/angular10-browser-sample), although that app is for regular Azure AD, not b2c. While the library usage is largely the same between AAD and B2C, the configuration is not. 

To use the alpha with the sample app with b2c, make sure to add an authority that includes your b2c policy/user flow ID, in addition to adding that in the `knownAuthorities` block. For example, in `app.module.ts`:

```angular
function MSALInstanceFactory(): IPublicClientApplication {
  return new PublicClientApplication({
    auth: {
      clientId: 'your-app-id-guid',
      redirectUri: 'http://localhost:4200',
      authority: 'https://your-b2c-tenant.b2clogin.com/your-b2c-tenant.onmicrosoft.com/B2C_1_your_user_flow'
      knownAuthorities: [
        'https://your-b2c-tenant.b2clogin.com/your-b2c-tenant.onmicrosoft.com/B2C_1_your_user_flow',
        'https://your-b2c-tenant.b2clogin.com/your-b2c-tenant.onmicrosoft.com/B2C_1_another_flow'
      ]
    }
  });
}
```

You may also need to add a dummy scope to your app registration - earlier versions of msal-browser expected an access_token but one was not provided by default with b2c if there were no scopes outside of openid.
What A Story / Telegraph
Tags: help, php, mysql, github
Published: 2020-12-01 17:59:42

Found this project somehow (github.com/excodex/What-A-Story)
I put it on hosting, but ran into a problem. If the picture weighs a lot, then the post is not published and if you put a space in the title, then there will be an error. Can you help me fix it?

demo: w.trip.tk

![Trip Publishing logo](https://dev-to-uploads.s3.amazonaws.com/i/nvbfi1bfghdsks8w7lbd.png)
Group Buttons Properties in Material-UI with React
Published: 2020-12-01 17:17:28

##Material-UI with React

###Create a React project

```
npx create-react-app material-ui-react
```

##Move to the folder project
```
cd material-ui-react
```

###Import Material-UI with npm or yarn (Just one of course!)
```
npm install @material-ui/core
```
**or**

```
yarn add @material-ui/core
```

###Start the Application
```
npm start
```
**or**
```
yarn star
```

###Open the folder project in your favourite Text Editor

###Delete the code between the header tag
* Delete the all the code between the header tag in src/App.js

###Add a Button
* Go to src/App.js file
* Add the following line under the imports
`import Button from '@material-ui/core/Button'`
* Add all the Contained Buttons that the current Material-UI documentation give us between the header tag
```
<Button variant="contained">Default</Button>
<Button variant="contained" color="primary">
  Primary
</Button>
<Button variant="contained" color="secondary">
  Secondary
</Button>
<Button variant="contained" disabled>
  Disabled
</Button>
<Button variant="contained" color="primary" href="#contained-buttons">
  Link
</Button>
```

*You can see the look of the buttons in the following link. You will also find other types of buttons that you can use in your project *
[Link](https://material-ui.com/components/buttons/)

###Add a Button Group
*In the Buttons code we entered before, we only worked with contained variant. There is a better way instead of repeting the variant="contained" part in our code. To avoid all this repeated code we are going to use Button Group*
* Import the ButtonGroup functionality `import ButtonGroup from '@material-ui/core/ButtonGroup';`
* Replace the code before to this new one:
```
<ButtonGroup
          variant="contained">
<Button>Default</Button>
<Button color="primary">
  Primary
</Button>
<Button color="secondary">
  Secondary
</Button>
<Button disabled>
  Disabled
</Button>
<Button color="primary" href="#contained-buttons">
  Link
</Button>
</ButtonGroup>
```
Managing my sonoff device from command-line
Tags: sonoff, making, homeautomation, python
Published: 2020-12-01 17:06:20

Some time ago I bought a Sonoff Smart Remote Control Wi-Fi Switch Smart Home Automation device (too much names for the thing!). I plugged it to a lamp in our livingroom, installed the app, configured the device, and started using it.
It works more or less well (sometimes is not very fast) and in these months the app evolved and become more useful (or, perhaps, my knowledge about it).

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

Anyway, I was not very happy with the idea of using the mobile app: yo need to install it, configure, maybe you do not have your mobile at hand but you have a computer ....
At that time I was not able to find alternatives (well, yes, you could flash de device and so on, but then... Why not to make your own device with the ESP?).

Recently I've researched a bit more and I found the project [pysonofflanr3](https://pypi.org/project/pysonofflanr3/) which provides a command line interface to manage the device.

For example, if you type:

    pysonofflanr3 discover

You'll get a list of devices available in your network:

    2020-12-01 17:49:31,274 - info: Attempting to discover Sonoff LAN Mode devices on the local network, please wait...
    2020-12-01 17:49:31,441 - info: Found Sonoff LAN Mode device 10005f4eae at socket 192.168.1.33:8081

Then, with this IP and some other parameters, you can switch on and off the device, look at its state, and so on:

On:

    pysonofflanr3 --host myIp --api_key myAPIkey on

Off:

    pysonofflanr3 --host myIp --api_key myAPIkey on

My Raspberry Pi terminal output.

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

You can obtain your parameters, for example, setting the device in [pairing mode](https://www.itead.cc/blog/user-guide-for-sonoff-slampher#:~:text=Quickly%20press%20%22SET%22%20button%20on,turn%20on%2Foff%20your%20device) and then, you can connect to the *access point* of the device, and pointing your browser to http://10.10.7.1/device 
You'll get some parameters including the API key.

The next step is to integrate this actions in another programs. Maybe for another post.
New slack bot for status check-in
Tags: productivity, slack, slackbot, remote
Published: 2020-12-01 16:52:18

Hi product teams,

Do you have multiple people working on your projects?
Status check-ins are a good way to keep track on team's progress and understand roadblocks.

I hope you are already doing this.

We want to help managers in noting down teams' progress and prepare reports. Our aim is to make difficult things easy.

We are taking a survey to understand your requirements.
Kindly visit our website and help us complete the survey.
https://status.coffee/


We need five minutes of your time and would be extremely grateful if you could tell us your opinion.

Thank you
Akshay
Deploy your own short URL to Vercel
Tags: showdev, news, vercel
Published: 2020-12-01 16:50:08

A few months ago, I posted how I setup GitHub Actions to deploy a short URL application to Vercel.

{% post thewdhanat/create-your-personal-shorturl-with-vercel-github-actions-4idm %}

However it requires some complex setup such as token and project secrets management.

Now, I would like to introduce a new version of **vercel-shorturl**. In this version, you just clone the [template repository](https://github.com/ThewApp/vercel-shorturl-starter), edit `redirects.yml` and deploy to Vercel.🎉

Or click the below button to deploy to Vercel immediately!😊
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2FThewApp%2Fvercel-shorturl-starter&demo-title=vercel-shorturl&demo-description=Create%20your%20own%20shorturl%20on%20Vercel&demo-url=https%3A%2F%2Fvercel-shorturl-starter.vercel.app%2F)

With this new version, you can edit your configuration through GitHub web interface and let Vercel GitHub Integration deploy it immediately.❤

Currently, it is still a beta version and I would like to hear your feedback!🤗 You can reach me on [Twitter](https://twitter.com/ThewDhanat).

## Demo

[Demo](https://vercel-shorturl-starter.vercel.app) is deployed with the example [redirects.yml](https://github.com/ThewApp/vercel-shorturl/blob/Main/assets/redirects.example.yml).

Here is some route you can try:

- [/me](https://vercel-shorturl-starter.vercel.app/me)
- [/google/path-parameters](https://vercel-shorturl-starter.vercel.app/google/path-parameters)
- [/google?action=search&q=some-query](https://vercel-shorturl-starter.vercel.app/google?action=search&q=some-query)
- [/dev?u=thewdhanat](https://vercel-shorturl-starter.vercel.app/dev?u=thewdhanat)

See more supported routing features in the example [redirects.yml](https://github.com/ThewApp/vercel-shorturl/blob/Main/assets/redirects.example.yml).

## Features
### Custom page

You can override home page and 404 page by placing `index.html` and `404.html` in project root.

### Analytics

vercel-shorturl can automatically send an event to [Amplitude](https://amplitude.com/), just set `Amplitude` [environment variable](https://vercel.com/docs/environment-variables) to your HTTP API key.

## Why Vercel?

Because it's easy and free!✨

## Why short URL?

Because it's easy to share and remember. You can set it to your own domain to improve your brand.

{% github ThewApp/vercel-shorturl %}

<a href="https://www.buymeacoffee.com/thew" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-blue.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>