teleren/devto huggingface dataset:
The Front End: S3-E2 - Matt Studdert
Tags: podcast, frontend, career
Published: 2021-03-21 15:01:21

In a very exciting second episode we have the one and only [Matt Studdert](https://twitter.com/_mattstuddert), the founder of [Frontend Mentor](https://www.frontendmentor.io/), a learning resource used by over 100,000 budding developers to sharpen their skills.

Listen to the brand new episode here:

- Apple Podcasts > https://podcasts.apple.com/gb/podcast/the-front-end/id1499349107
- Pocket casts > https://pca.st/osul2zsa
- Spotify > https://open.spotify.com/show/4GuAxptrtY8Es5iHwp09dT
- Anchor > https://anchor.fm/the-front-end

## In this episode

After being recommended as a guest to the show by several twitter peeps, we’re so pleased to welcome Matt Studdert. Matt is a fellow UK developer and founder of the hugely popular Frontend Mentor, a coding skills levelling up platform used by close to 100,000 people to hone their skills in front end development.

Matt hails from a background in fitness and personal training and made the leap to dev life, and shares a passion for helping others get into development. He’s going to share his story and give us some tips on how and where to start with learning to be a developer.

## Listening direct

Want to listen directly from here?

{% spotify spotify:episode:4MDK9OjTBRDZnWCtUKn5nQ %}

## Want to be a guest or sponsor the show?

We're always happy to take requests for guests to talk about a range of different development topics from careers to origin stories, learning and professional growth, frameworks and more.

Similarly, we're looking for sponsors to fill promotional slots within the show. 

You can find out more here:

- [Being a guest](https://thefrontendpodcast.site/guests)
- [Sponsorship information](https://thefrontendpodcast.site/sponsorship)

Thanks for listening!
Frontend Career Build - Ep. #1
Tags: career, javascript, html, css
Published: 2021-03-21 14:51:11

Building career in software engineering industry as much as it looks like very easy but you will find it shortly overwhelming,

A lot of courses, tutorials, instructors, articles, tools and etc...

What should I do?, Where should I go?, How should start?, When I can apply for a job?, Am I qualified or Not?

- - It is all about your plan, 
- = but I do not have a plan and do not know how to make it.
- - Do not worry, let's start building the path step by step until go through the real world of interviews and get a job.


> We are going to build a career regardless what is your study background.

First of all while you are working in software industry you should know about some general concepts before start your specialization.


### How the internet works

**If you like reading:**
[How Internet Works?](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work)

**If you like videos:**
* [How the Internet Works in 5 Minutes](https://www.youtube.com/watch?v=7_LPdttKXPc)
* [How the Internet Works for Developers - Pt 1 - Overview & Frontend](https://www.youtube.com/watch?v=e4S8zfLdLgQ)
* [How the Internet Works for Developers - Pt 2 - Servers & Scaling](https://www.youtube.com/watch?v=FTAPjr7vgxE)



### How the web works

**If you like reading:**
[How web works?](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works)

**If you like videos:**
[How The Web Works - The Big Picture](https://www.youtube.com/watch?v=hJHvdBlSxug)


Stay tuned for the upcoming episodes and keep learning
Making scrollable sections snap
Tags: css
Published: 2021-03-21 14:45:25

A while ago, I created this cool [section scroll in Tailwind](https://daily-dev-tips.com/posts/tailwind-css-fixed-and-scrollable-section/).
However, as a user, I would almost expect the sections to snap while I'm close to them.

So today, I'll show you how to make the sections snap!

You can try it out on the following Codepen.

{% codepen https://codepen.io/rebelchris/pen/VwmNbNZ %}

## Making the sections snap with CSS

Let's use the code as we had previously. There are, however, a couple of things we will need to change.

First of all, our current wrapping container for the sections has an infinite height, meaning it will become as big as the children are.

For the scroll-snap to work, it must be as big as the screen.

Change the following:

```html
<div class="w-full md:w-5/12 ml-auto">
```

Into:

```html
<div class="w-full h-screen md:w-5/12 ml-auto overflow-y-auto">
```

You can see we add the h-screen class, which will make this section exactly our viewport height.
We also add overflow on the y-axis to auto.

That's already half the work. Now let's add the scroll-snap magic.

Unfortunately, Tailwind does not come with these classes. For the ease of this tutorial, I'll add two custom classes.

First, on the element we modified above, let's add a `scroll-snap` class.

```html
<div class="w-full h-screen md:w-5/12 ml-auto overflow-y-auto scroll-snap">
```

This `scroll-snap` class will have the type of snap.

```css
.scroll-snap {
  scroll-snap-type: y proximity;
}
```

I'm using `proximity`, but you can use `‌mandatory` if you want it to perfectly snap.

You can see I'm using the y-axis since we scroll vertically.

Then we need to add a `snap` class to each section in there.

```html
<div class="bg-red-200 h-screen flex justify-center items-center flex-col p-10 snap">
  <h2 class="text-4xl mb-5">Meet Benny</h2>
  <p class="mb-5">I was born 20 May 2020</p>
</div>
```

Add this snap class to each element in there.

This class will have the following CSS.

```css
.snap {
  scroll-snap-align: start;
}
```

This tells the scroll-snap where to snap to. In most cases, you'd like the `start`. It will snap the element to the top of the scroll-snap container.

And that's as simple as it gets.

## Browser support

Surprisingly enough, scroll snap has really good support and can be safely used!

![CSS Scroll-snap support](https://caniuse.bitsofco.de/static/v1/mdn-css__properties__scroll-snap-type-1615876765382.png)

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
How to get radio value in vuejs
Published: 2021-03-21 14:31:16

Hi Developer, 
Hope all are okay. Now today i will show you how to get selected radio button value by using onchange event in vue js app. So i will give you a very small and simple example for get checked radio button value vue js app.
Read more ...
https://codingspoint.com/get-checked-radio-button-value-in-vue-js/
react-text-annotate-blend: a component for blended annotations
Tags: webdev, react, typescript, javascript
Published: 2021-03-21 13:59:41

<a href="https://smhaley.github.io/react-text-annotate-blend/">Live Demo</a>. 

Recently I was tasked with developing a homegrown tagging tool for NLP model development. 

At first our team looked to some of the more popular tools such as <a href="https://doccano.herokuapp.com/">Doccano</a> and <a href="https://prodi.gy/">prodi.gy</a>.

Due to infrastructure challenges we decided to develop our own annotation tool using react. Using the the library <a href="https://www.npmjs.com/package/react-text-annotate">react-text-annotate</a> this wasn't too bad. 

Unfortunately the way this tool handles overlapping tags is to duplicate text with visually unappealing results. Looking around at the NLP annotation space, I noticed there were few quick and simple tools for overlapping annotations.  

The natural question was, can I overlap and blend tags more naturally?

Spending some time, I was able to come up with <a href="https://smhaley.github.io/react-text-annotate-blend/">react-text-annotate-blend</a>.

Currently this library offers a single component <b>TextAnnotateBlend</b>. The component allows for overlapping annotations, resulting in a mixture of the annotation colors. 

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

Check out a demo with live code <a href="https://smhaley.github.io/react-text-annotate-blend/">here</a>. 

Let me know what you think! 

One update I may make soon is a stripped blending of the colors using linear gradients. 

Thanks!
Understanding Kubernetes in a visual way (in 🎥 video): part 7 – ConfigMaps
Tags: kubernetes, devops, docker, beginners
Published: 2021-03-21 13:20:30

---
title: Understanding Kubernetes in a visual way (in 🎥 video): part 7 – ConfigMaps
published: true
description: Serie of videos about Kubernetes. Explaining in a visual way Kubernetes principles.
tags: Kubernetes, DevOps, Docker, beginners
series: Understanding Kubernetes in a visual way - (in video) in video
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2pt07zur042yib3jjea8.jpg
---

Understanding Kubernetes can be difficult or time-consuming. In order to spread knowledges about Cloud technologies I started to create sketchnotes about Kubernetes, then I've auto-published a book and since now I've started a new serie of video! :-)

I imagined a serie of short videos with a mix of sketchnotes and speech.

I think it could be a good way, more visual, with audio & video to explain Kubernetes (and others technologies).

The new episode is focused on a very important Kubernetes object: ConfigMaps.

{% youtube smVv5qSKuQ0 %}

The video is in French BUT I done the subtitles in english (and french too).

If you liked the video and are interested to watch another ones, please give me some feedbacks (and you can also subscribe to [my Youtube channel](https://www.youtube.com/channel/UCrRk0kOP58lBMl9B8ZS8Vlg), if you want to ❤️).

If you are interested, I published all the sketchnotes on Kubernetes (and new ones!) to make a "book" of 165 pages: ["Understanding Kubernetes in a visual way"](https://gumroad.com/aurelievache#uCxcr).

If you like theses sketchnotes, you can follow me, I will publish others sketchs shortly :-).
Pixel art in Excel
Tags: excel, vba, bgr
Published: 2021-03-21 11:51:57

One day, I had this weird idea of displaying an animation in Excel using the cells as pixels.
First of all, I had to check if it was possible at all, and also how fast Excel would render the "pixels".

So I grabbed a 320x200 image of Dangerous Dave [here](https://github.com/gmegidish/dangerous-dave-re) and set off...
To convert a PNG file to CSV I used [this PHP tool](https://github.com/shark0der/image2excel/blob/master/img2csv.php).

VBA code:
```basic
'Canvas reset button
Sub Button2_Click()
    Range("A1:LH200").ColumnWidth = 0.25
    Range("A1:LH200").RowHeight = 2
    Range("A1:LH200").Interior.ColorIndex = 0
End Sub

'Draw button
Sub Button1_Click()
    DrawCSVFile
End Sub

`The draw subroutine itself
Public Sub DrawCSVFile()
    Dim FilePath As String
    FilePath = ActiveWorkbook.Path & "\title1.csv"
    Open FilePath For Input As #1

    Y = 1
    Do Until EOF(1)
        Line Input #1, LineFromFile
        LineItems = Split(LineFromFile, ",")
        For X = 1 To 320
            RGBString = LineItems(X - 1)
            R = Val("&H" & Mid(RGBString, 1, 2))
            G = Val("&H" & Mid(RGBString, 3, 2))
            B = Val("&H" & Mid(RGBString, 5, 2))
            RGBExcel = RGB(R, G, B)
            Cells(Y, X).Interior.Color = RGBExcel
        Next
        Y = Y + 1
    Loop

    Close #1
End Sub
```

The result: well, it works :)
![Dangerous Dave title screen in Excel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c3q6dbkm3dq3xhw74das.png)

But the image above took a full whopping minute to draw.
Reading the CSV line by line and painting individual pixels turned out to be really slow!

I guess some day I should try the range copy method :)

A couple of things I learned along the way:
- while reading a text file, VBA expects the lines to end with CR or CRLF (in Windows at least); LF is not recognized as the line end
- RGB in Excel is actually BGR
Daily Developer Jokes - Sunday, Mar 21, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-03-21 12:00:28

---
title: "Daily Developer Jokes - Sunday, Mar 21, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Sunday%2C%20Mar%2021%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1259316ab83.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ What are the three hardest problems in computer science?

___A:___ Naming things and off-by-one errors
 -->
Sticky Headings
Tags: css
Published: 2021-03-30 10:40:42

---
title: Sticky Headings
published: true
date: 2021-03-21 11:40:00 UTC
tags: css
canonical_url: https://hiltonmeyer.com/articles/sticky-heading.html
---

Came across a great [article](https://christianheilmann.com/2021/02/09/using-position-sticky-to-create-persistent-headers-in-long-texts/) showing how to create a sticky heading. Really simple and love little additions like this that don't require a ton of changes and can be added as some sparkles to tweak the site. Probably not useful in every site but I must say that they are in something like a blog where you're creating content or tutorials and have the heading still showing.

```
/* Create stick headings */
h1,
h2,
h3,
h4 {
  letter-spacing: -1px;
  position: sticky;
  top: 0;
  background: var(--background);
  padding: 0.5em 0;
}

```
Uncaught (in promise) ReferrenceError: Cannot access 'formData' before initialization at HTMLFormElement.<anonymouse> (solution)
Published: 2021-03-21 11:38:29

I was working with a javascript form submission. but I got this error which is like below:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oadhx7l0gvyzq3x4q4n4.PNG)
I was trying to solve and search this type of error why happen.
finally, I find out the point why this is happening: this is happening because I write the variable name and the instance name are the same spelling: which is like below screenshot :
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cpz3dukx98b0uuffjf36.PNG)
and after that, I do the correction in instance name spelling which is like below screen-shot:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/66qxabxm5nq2ifpwlazq.PNG)
and now it's working nicely there is no error/warning. please see below: 
this is my browser console screen-shot: 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h0553zpf0alxr62xu6e7.PNG)
see there is no warning.
and again see the network tabs screen-shot of my browser:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qezee61farr9wsd9cxu6.PNG)
this is a show a success message.
.
that's it.
.
Happy Coding.
osman forhad
Mobile & Web Application Developer💻
Team + Culture.
Tags: awesomitylab, codeofafrica, taskforce, teamculture
Published: 2021-03-21 10:55:51

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

Another week passed. This one was a lot less technical and more on the soft skills side. A lot more new things were learned and still more to come.

The most important thing I took away from the five days is Team Culture. I had never thought much about how a team needs more than just skilled members and an effective workflow. Team culture, I learned is a big part of the glue that holds a team together and that without it a team cannot last. I really enjoyed this part of the week because I got to learn about my teammates, turns out there's really a lot we didn't know about each other. I am very confident that we make a cool team.

This week also introduced me to remote collaboration. With excellent tools like Miro which we used quite a bit this last week, working remotely as a team was not just easy but fun as well (Oh God, that sounded like a YouTube ad:smile:). My new favorite collaboration tool from this week though is [Wonder](https://wonder.me). Personally, I think collaborating remotely with the team pushed us to make better use of our time, think each on our own, and therefore collectively generate more ideas as a team. I am very grateful to the wonderful person who puts her all into our growth as a team.

Last but definitely not least, Friday came with yet another interesting surprise. We were asked to think about the perfect developer backpack and man did I let myself dream. I collected every gadget I want as a developer and it was so fun. And I believe in "The Law of attraction": "The more you think and talk about something, the greater its chances of happening". So, fingers crossed (means Good Luck to me in this case).
Mutable values with React.useRef() 
Tags: react, frontend, hooks, mutability
Published: 2021-03-21 11:26:33

>**React.useRef()** hook is basically used to *refer to DOM elements* and also to *create mutable values* persisted between component re-rendering.

The first use case seems pretty straightforward but, what about the second one.!? Let's look at what it is and how does it work.

###Firstly, what is a Mutable? 
It can be referred to as a type of variable containing mutable values i.e., values that can be changed in same memory space they were created. 
>In JavaScript, only arrays and objects are mutable.

###useRef() in action
React.useRef() takes an initial value as it's only arguement and returns a special object called *reference*. It has a single property named *current* which holds the reference value.

```
const reference = React.useRef(initialValue);
console.log(reference);   // { current : <referenceValue> }
```

The reference object here is mutable which means we can access the reference value using `reference.current` and update it by assigning reference.current to a new value or variable. Huh! what's so special about this?🤷‍♂️

###The speciality
There are two important behaviours to remember about useRef() references:
1. The reference value stays the same (persists) between component re-renders.
2. Updating a reference value does not re-render the component.

###Example - Logging button clicks

```
import { useRef } from 'react';
const LogButtonClicks = () => {
    const countRef = useRef(0);

    const handleClick = () => {
        countRef.current++;
        console.log(`${countRef.current} button clicks`);
    }

    console.log("Component rendered");

    return (
        <button onClick={handleClick}>Click me!</button>
    )
}
```
Here `const countRef = useRef(0)` creates a reference `countRef` initialized to 0. We use this reference object to store the number of clicks on a button. On clicking the button, the reference value is updated and logged to the console. As you might have noticed in your console that "Component rendered" is logged only once (during the initial render) which means that the button clicks, more precisely, the reference value updates do not trigger component re-renders. 

This further leads us to think about the difference between state and references.

###Difference between state and references
1. Updating state does trigger component re-rendering but updating a reference does not.
2. The state update is asynchronous (state variable is updated after re-rendering - refer [this](https://vasanthk.gitbooks.io/react-bits/content/patterns/19.async-nature-of-setState.html) for more detailed explanation), while the reference update is synchronous.

###No rule of thumb
useRefs are just escape hatches in the framework and are not meant to be used unless necessarily required. However, they can be used to store any infrastructural data but never to store presentational data. Also do mind them while accessing DOM nodes.

###Thank you ❤
Connect with me on [twitter](https://twitter.com/Vineetkme) and let's explore the web world together.
What are your favorite FrontEnd newsletters?
Tags: html, css, javascript, webdev
Published: 2021-03-21 11:23:02

As an author of [UI Dev Newsletter](https://tinyletter.com/starbist/), I enjoy reading [CSS-Tricks](https://css-tricks.com/newsletter/), [Smashing Magazine](https://www.smashingmagazine.com/the-smashing-newsletter/), [CSS Animation Weekly](http://weekly.cssanimation.rocks/), and my absolute favorite [CSS Weekly](https://css-weekly.com/).

There are plenty of other newsletters out there, but which ones are your favorites?
Custom URL with NeXT
Tags: nextjs
Published: 2021-03-21 11:05:22

Hello everyone,ı have a problem that I didn’t solve yet.actullay ı did with express server, but used it is not best way,because  it occurs something optimazing problmes. I want to define URL that can be changed continously, on backend and for example URL is like .../.com/[slug] how i can solve it? Which is URL which is js file that under pages folder
Easiest way to Install Go on Linux
Tags: go, tutorial
Published: 2021-03-21 10:07:40

Go (golang for seo-friendliness) is an open-source and lower-level programming language designed to enable users to easily write simple, reliable, and highly efficient computer programs.

## Install Latest Go on Linux machine

It's really easy and hassle-free!, just execute this command below

```sh
curl -fsSLo- https://s.id/golang-linux | bash
```

Done!

the `~/go` is your `$GOROOT` folder.

_I suggest you to start your project outside `$GOROOT` directory, idk, maybe `~/Document/project` ?_

## Update Go on Linux machine

1. Delete existing `$GOROOT` directory (~/go?)
2. Install "New" Latest Go version with the command above :)

And if you are new in Go, I suggest you to head up to [tour.golang.org](https://tour.golang.org/)

Bash script source: [github.com/codenoid/install-latest-go-linux](https://github.com/codenoid/install-latest-go-linux/blob/main/install-go.sh)

Happy **Go**ing!
push() Array Method | JavaScript Array Method
Tags: javascript, beginners, programming, tutorial
Published: 2021-03-21 10:01:13

You can Prefer to Read or you can Watch on YouTube:

{% youtube Ns1LuWJQE8Q %}

=> The push() method adds a new element to an array (at the end)
=> The push() method returns the new array length

Example:
```javascript
// Consider an array of Fruits
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");   //  Adds a new element ("Kiwi") to fruits
```

Example:
```html
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.push("Kiwi");   //  the value of x is 5
```
Weather Bear!
Published: 2021-03-21 09:53:59

---
title: Weather Bear!
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---

I made a weather app... Check it out at https://weatherbear.app

I used LitElement for building components, some Netlify Lamdas for the data, and built it in a SPA / PWA style.