teleren/devto huggingface dataset:
Create a Website With Typing Text Animation using HTML & CSS
Tags: websitedesign, simplewebsite, websitewithtypingtext, designwebsite
Published: 2021-02-26 10:47:16

Hello guys, today in this blog you will learn to create a Website With Typing Text Animation using HTML & CSS. As you know, in my earlier blog I have shared how to create a Simple Website in HTML & CSS, also I will add some essential features to this website that we had a skip in the previous website design.

Website is the combination of various webpages and it contains articles, images hyperlinks, navigation menus, and so many other things. We can find various types of website on the internet, some give us news, text article, some sells us products, and some provide us jokes also. The website could be different in design and contains but they are built to fulfill user's needs.

As you see on the given image of the website on the webpage. Basically website header looks like this, one navigation menu some images, and buttons. Also, you can see some social media buttons on the right bottom side. Those on the image have typing text animation, I'm mean they appear like someone is typing them. When we will hover those media icon brightness increase smoothly and also I have added hover animation one that two buttons.

##You Might Like This:##
<a href="https://www.codinglabweb.com/2020/12/responsive-navigation-menu-bar-design.html">Responsive Navigation Menu</a>
<a href="https://www.codinglabweb.com/2020/12/responsive-profile-cards-using-html-css.html">Responsive Our Team Section</a>
<a href="https://www.codinglabweb.com/2020/12/responsive-footer-html-css.html">Responsive Footer Section</a>
<a href="https://www.codinglabweb.com/2020/12/side-bar-menu-using-html-css.html">SIdebar Menu using HTML & CSS</a>

##Website With Typing Text Animation [Source Code]##
You can download all source code from the given link. <a href="https://www.codinglabweb.com/2021/02/create-website-with-typing-text.html">Click Here To Download All Source Code</a>
How to add Discord OAuth to your Sapper web application
Tags: discord, sapper, oauth, svelte
Published: 2021-02-26 10:44:47

Hello, in this guide I will show you how to bundle your Sapper app with Discord OAuth that’s handled on the server side of your web application. 

You can access the guide in Medium:  https://link.medium.com/RJTU1KzLbeb

If you are looking for a quick start template, you can use my sapper-discord-supabase-tailwind starter that has similar project structure than this guide offers.
FEC Day 2
Published: 2021-02-26 10:41:37

We had to set up our repo's foundation by creating the folder structure and installing all the dependencies. Setting up babel was a bit complex at first, seeing how the config file has so many options inside of it. Our approach ended up being to look at the docs for the official info and then comparing what we see to how babel was set up in our old repos. This was how we eliminated the unnecessary parts. One struggle we had was getting Enzyme to work with the latest version of react. We had two options: either use an unofficial Enzyme adapter with React 17.0.0 or downgrade our React to 16.4.0 and use the latest Enzyme adapter. We decided to go with the latter bc we prioritize official technologies and learned that the features we lose in react won't affect our code. I'm glad we finished setting up everything so we were free to start fresh the next day!
JOB: Front-end Developer
Tags: career, typescript, javascript, react
Published: 2021-02-26 10:36:07

FRONT-END DEVELOPER
You'll be joining our team working on a next-gen internet experience powered by WebGL. Your goal will be to create a performant, responsive, and intuitive UI based inside the WebGL canvas using Three.js and React.

WHAT WE REALLY NEED FROM YOU
Proficiency with JavaScript/TypeScript.
Background in computer graphic.

WHAT WE FIND AS NICE TO HAVE
Experience with WebGL (or any of its frameworks).
Basic understanding of shaders (GLSL/HLSL).

WHAT WE FIND AS A BIG BONUS
Experience with NodeJS, React, React Native, native development.

PAYMENT
Monthly gross salary range 3000€ - 5500€, depending on previous experience.

LOCATION
Fully remote or Ljubljana office.

CONTACT AND MORE INFO
Join our team by sending an application to: jobs@styliff.com
Don’t forget to include your CV and portfolio.

DISCLAIMER
Even if you feel that you’re not a perfect fit based on desired requirements but you’re a motivated person who loves to learn and can handle interesting challenges, don’t hesitate to contact us.

ABOUT STYLIFF
We’re a small agile multi-national team of developers and designers building innovative web, mobile and VR apps. Flexibility and autonomy mean a lot to us. We find positive company culture extremely important as it energizes and encourages us to stay connected, have great relationships and produce amazing teamwork. We like to stay active by continuously learning and growing as individuals - personally and professionally. Our working environment is fast-paced and filled with challenges so we’re never bored, not to mention the steep learning curve it provides. Besides collaborating with some big-name clients globally, we are developing an exciting in-house product.
DayJS: Awesome lightweight modern Date API and an alternative to MomentJS
Tags: javascript, webdev, react, opensource
Published: 2021-02-26 10:12:06

## Concepts

DayJS is a lightweight JavaScript date API (<strong>2kB</strong>) which describe the same MomentJS API. (If you use Moment.js so could use easily Day.js )

Day.js is a minimalist and simple library that parses, validates, manipulates, and displays dates and times for modern browsers.



## Why DayJS replace Momentjs

![Image](https://miro.medium.com/max/2523/1*mAuyw--iuoPQ3G5_HJTs6g.png)

![Image](https://pbs.twimg.com/media/DyOuVlBXQAImfs-.jpg)

<strong>Tree-shaking</strong>: Moment doesn't work well with modern "tree shaking" algorithms, so it tends to increase the size of web application bundles.

<strong>Mutable</strong>: consider that Moment objects are mutable. Changing Moment to be immutable would be a breaking change for every one of the projects that use it.


## Get Started

### Installation

```bash
npm install dayjs
```

```javascript
import dayjs from 'dayjs' // ES 2015
```

### Parse

```javascript
now = dayjs();
d = dayjs('2013-03-01', 'YYYY-MM-DD');
d = dayjs('2018-04-04T16:00:00.000Z') // ISO
d = dayjs(1318781876406) // Javascript timestamps -- Millis
d = dayjs.unix(1318781876) // Unix timestamps
d = new Date(2018, 8, 18) // Date object
d = dayjs({ years:2010, months:3, date:5, hours:15, minutes:10, seconds:3, milliseconds:123});
```

### Format

```javascript
d.format()            // "2013-03-01T00:00:00+01:00"
d.format('dddd')      // "Friday"
d.format('MMM Do YY') // "Mar 1st 13"
d.fromNow()           // "7 years ago"
d.calendar()          // "03/01/2013"
```

### Get/Set

```javascript
dayjs().second() // => new Date().getSeconds()
dayjs().second(30).valueOf() // => new Date().setSeconds(30)

dayjs().hour()
dayjs().hour(12)
```
### Manipulate (Add-Substract)

```javascript
d.add(1, 'day')
d.subtract(2, 'days')
d.startOf('day')
d.endOf('day')
d.startOf('hour')
```

### Query

```javascript
d.isBefore(dayjs('2011-01-01'))
d.isSame(dayjs('2011-01-01'))
d.isAfter(dayjs('2011-01-01'))
```

## Bundlephobia

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

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

## Link

* [https://day.js.org/](https://day.js.org/)

* [https://devhints.io/moment](https://devhints.io/moment)

* [https://momentjs.com/docs/#/-project-status/](https://momentjs.com/docs/#/-project-status/)
Releasing the Nexus Guide 2020
Tags: scrum, scrumorg, agile, nexus
Published: 2021-03-30 21:23:09

---
title: Releasing the Nexus Guide 2020
published: true
date: 2021-02-26 10:07:05 UTC
tags: Scrum,Scrumorg,Agile,nexus
canonical_url: https://jessehouwing.net/scrum-scaled-releasing-the-nexus-guide-2020/
---

 ![Releasing the Nexus Guide 2020](https://jessehouwing.net/content/images/2021/02/2021-02-26_11-05-38-1.png)

After the release of the Scrum Guide 2020, it was inevitable we'd release an updated version of the Nexus Guide and the Scaled Professional Scrum class as well.

It's only a short document, but being short, concise, and truly clear all at once is hard, so Patricia, Kurt, Simon and I spent many hours wordsmithing each paragraph.

You can listen to us all discussing the changes in this episode of the Scrum Community Podcast:

[Updates to the Nexus Guide based on Scrum Guide 2020 - In this episode of the Scrum.org Community Podcast, Patricia Kong and Kurt Bittner from Scrum.org discuss changes made to the Nexus Guide in January 2021 based on the most recent 2020 Scrum Guide update with Jesse Houwing and Simon Flossmann, Professional Scrum Trainers and Scaled Professional Scrum...](https://www.scrum.org/resources/updates-nexus-guide-based-scrum-guide-2020)

And you can read the latest version of the Nexus Guide here:

[The Nexus™ Guide - This Guide Describes Nexus, the Framework for Scaling Scrum ![Releasing the Nexus Guide 2020](https://www.scrum.org/themes/custom/scrumorg/assets/images/logo-250.png)](https://www.scrum.org/resources/nexus-guide)
PugJS Form Mixin
Tags: pugjs, mixins
Published: 2021-02-26 05:39:17

To me, one of the most tedious parts of writing HTML is creating forms. So now that I've started using [PugJS](https://pugjs.org/) as a templating engine and to speed up my development process, I naturally wondered if I could use it to streamline the form-creation process while keeping everything accessible.

I came up with this mixin that should cover most use cases:

```
mixin form(method, action, inputs, submitLabel)
  form(method=method action=action)
    if inputs
      each input in inputs
          case input.type
            when 'textarea'
              label #{input.label}
                textarea(placeholder=input.placeholder required=input.required name=input.name id=input.id class=input.class maxlength=input.maxlength autofocus=input.autofocus autocomplete = input.autocomplete)
            when 'checkbox'
            when 'radio'
              label
                input(type=input.type name=input.name id=input.id class=input.class required=input.required)
                | #{" " + input.label}
            default
              label #{input.label}
                input(type=input.type min=input.min max=input.max multiple=input.multiple pattern=input.pattern step=input.step height=input.height width=input.width placeholder=input.placeholder required=input.required name=input.name id=input.id class=input.class maxlength=input.maxlength autofocus=input.autofocus autocomplete = input.autocomplete)
    input(type="submit" value=submitLabel)
```
It looks a bit unwieldy at first, but all those attributes just help me cover all the different input types. Now that I've made this (I can use an [include](https://pugjs.org/language/includes.html) to use the same mixin on all the pages it's needed), all I need to do is this to make a form:

```
+form
```

Now, all this makes is an empty form element with a submit button. Here's a more complete example with a couple of basic input elements:

```
+form("post", "", [
  {
    label: 'Your Full Name',
    name: 'name',
    type: 'text',
    placeholder: 'John Doe',
    required: true,
    autofocus: true
  },
  {
    label: 'Your Email',
    name: 'email', 
    type: 'email',
    placeholder: 'john@doe.com',
    required: true
  },
  {
    label: 'I agree with the Terms & Conditions',
    type: 'checkbox',
    required: true
  }
], "Go!")
```
Which gives me this neat tidy form, easy as pie:

{% codepen https://codepen.io/bibliobone/pen/rNWJeWq %}

Have fun. :)
We can finally animate CSS gradient
Tags: css, webdev, tutorial
Published: 2021-02-26 09:48:45

<sup>**Find out more CSS tricks at [css-tip.com](https://css-tip.com)**</sup>

Thanks to the new `@property` defined in the [CSS Properties and Values API Level 1](https://drafts.css-houdini.org/css-properties-values-api-1/#at-property-rule) specification we can now have transition with custom properties (aka CSS variables).

```css
@property --my-var {
  syntax: '<integer>';
  inherits: false;
  initial-value: 0;
}
```

All the trick is within the `syntax` part that allows us to explicitly define the type of the property thus the browser will know how to do the interpolation between values (the transition we want to have)

>Specifies the syntax of the custom property registration represented by the @property rule, controlling how the property’s value is parsed at computed value time.


Considering this we simply need to use the variables inside the gradient definition and animate them.

## Animate the colors

We use `<color>` for the syntax

{% codepen https://codepen.io/t_afif/pen/bGBLgpj %}

## Animate the color size

We  can use `<percentage>`, `<length>` or `<angle>` based on each use case

{% codepen https://codepen.io/t_afif/pen/dyOdNvW %}

## Animate the direction

We use `<angle>` 

{% codepen https://codepen.io/t_afif/pen/jOVZywJ %}

## Animate the position

We use `<percentage>` or `<length>` 

{% codepen https://codepen.io/t_afif/pen/poNaRLM %}

----

As you can see, it's easy and the code looks like the following in all the cases:

```css
/* we define the variable */
@property --a{
  syntax: '<percentage>'; /* its type */
  inherits: false;
  initial-value: 10%; /* the initial value */
}
/**/
.box {
  transition:--a 0.5s; /* we add transition to it */
  background:linear-gradient(red var(--a),blue); /* we use it inside the gradient */
}
.box:hover {
  --a:50%; /* we update on hover */
}
```

We can have complex animation:

{% codepen https://codepen.io/t_afif/pen/ExNQZzW %}

and use `keyframes`

{% codepen https://codepen.io/t_afif/pen/ZEBrLgO %}

Let's wait for this to be supported on Firefox and we can do a lot of magic with 😉
How to style broken images with css
Tags: webdev, css, html
Published: 2021-02-26 09:42:59

![Before](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/knicyxyfbrkwp72girpa.png)
Broken images are ugly, but we can style them to provide a better user experience.
Here's what we'll be creating today:
![After](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u768145gd6lho8lyijm1.png)

But before we begin let's take a closer look at how images behave.

#### 1. We can apply typography styles to images. 
They will be applied to the alternative elements.
#### 2. You can use pseudo-elements on broken images.
Typically ::before and ::after elements won't work on images, however, when image is not loaded this elements can appear.

### Let's get to the interesting part.
Create an image tag and set a broken url and an alt attribute.

```css
<img src="https://imag.unsplash.com/photo-1509021436665-8f07dbf5bf1d?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8M3x8fGVufDB8fHw%3D&w=1000&q=80" alt="Good book">
```
This is what we get in the browser:
![Before](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/knicyxyfbrkwp72girpa.png)

Apply styles for the image element itself.
```css
img {
     display: inline-block;
     font-family: Arial, sans-serif;
     font-weight: 300;
     line-height: 2;
     text-align: center;

     min-width: 300px;
     min-height: 50px;
     position: relative;
}
```

Add ::before element to create a background for the broken image
```css
img::before {
     content: '';
     width: 100%;
     height: calc(100% + 10px);
     background-color: #ccc;
     border-radius: 10px;
     position: absolute;
     top: 50%;
     left: -2px;
     transform: translateY(-50%);
 }
```
Here's what browser renders
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1b4hmnsr43o3nc6mo6a6.png)

After this add ::after element to create text and icon.
```css
img::after {
     content: "\2639" " " attr(alt);
  
     font-size: 18px;
     color: rgb(100, 100, 100);
            
     display: block;
     position: absolute;
     z-index: 2;
     top: 5px;
     left: 0;
     width: 100%;
     height: 100%;
}
```
Final output
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/luft0icn7iu1z9mmehqu.png)
Also in order to use html symbols inside a pseudo-element you have to first get the symbol number and then convert it to Hexdecimal value. [Here's](https://medium.com/@clasbery/using-css-pseudo-elements-and-html-entities-b7636b334c22) a nice tutorial on achieving this.
Why I stopped using Postman?
Published: 2021-02-26 09:20:29

I've been using Postman for about 7 years now and I must say, it was an amazing journey. When I started as a software developer there wasn't any good tool to create/test/share APIs but then Postman appeared in my life and made everything much, much better. 7 years later, Postman is the industry standard. Very well done, Postman 👏!

During all these years of using Postman I've also found many disadvantages. It turns out, sharing your requests is not that simple, it has so many features I don't need and that makes it difficult to find what you do need. The application is slow to start and eats a lot of memory. Still, with all these disadvantages I was using it everyday without even thinking to search for a replacement. Until one day.

I've just switched jobs and I was discussing with my new teammate, Csaba, about designing the API for a new set of features we were to  develop. I proposed to use Postman for the API design and then start the implementation based on the contract we define between the frontend and the backend. He told me that he knows a better tool for this task: [REST Client extension for VS Code](https://marketplace.visualstudio.com/items?itemName=humao.rest-client). I was skeptic 🤨about this, after all, Postman is the industry standard, use by so many developers. Even so, there was one thing that I loved from the beginning: I was able to /create/test/share the api from within the comfort of my editor 🤟. I mean, how awesome is that? And there is more, I can design my APIs by writing code, it has auto-complete, variables and no unnecessary functionality. We created a file .http file in our repository and off we went on coding our APIs. There are so many advantages to this like: it's easy to do versioning, track changes and share the file with other developers.

I removed Postman from my laptop and I've been enjoying this extension ever since. Go have a look at this extension and let me know how it helped you.

Thanks Csaba for introducing me to this extension.
What If Every Color Is Given Its Own Name? Here It Is!
Tags: javascript, css
Published: 2021-02-26 08:39:39

What is the most comprehensive way of expressing colors in CSS? For a majority of developers, it should be color names.

```css
a {
  color: blue; /* <- color name for #0000ff */
  text-decoration: none;
}
```

However, color names have one critical downside; not all colors are given names. While the sRGB color space can express 16,777,216 colors, only less than 0.002% of them are given names by the CSS standard.

That's why the author has created [Everycolor](https://everycolor.vercel.app/). With this package, all colors are given systematic names. It comes with a PostCSS plugin that converts the Everycolor names to the `#123456` notation, so you can use the Everycolor names in your CSS now!

Let's see what the Everycolor names look like.

```css
p {
  background-color: redhalfwhite; /* #ff8080 */
}
```

Everycolor gives the name `redhalfwhite` to `#ff8080`, as this color is halfway towards white (`#ffffff`) from red (`#ff0000`). Wow, how easy it is!

Then, can you guess what name `#ff4040` is? Yes, it's `redquarterwhite`. Now you know how to express colors you want to use!

With Everycolor, you can express every single color with names rather than hard-to-recognize numbers.

We also provide a website where you can convert color codes to Everycolor names. This is very useful for learning Everycolor quickly.

- https://everycolor.vercel.app/

At the end, let's see a little more complicated examples.

```css
body {
  /* #14211a */
  background-color: quarterimperceptiblegreensomewhatlittleslighttealsomewhatbitgray;
  /* #c7eaf9 */
  color: navyhalfquartersomewhatlittleimperceptiblebluetealhalfquarterlittleslightaquahalfquarterslightimperceptibleinfinitesimalwhite;
}
a {
  /* #e4d923 */
  color: maroonhalfquarterbitredolivehalfsomewhatlittleimperceptibleyellowsomewhatimperceptibleinfinitesimalwhite;
}
```

Wow, so understandable! 😍
Machine Learning And Artificial Intelligence: The Future Of eLearning
Tags: machinelearning, machinelearningcourse, ai
Published: 2021-02-26 08:34:22

What does the future hold for prescient examination and iterative robotization in eLearning? In this article, I'll examine the numerous preferences of Machine Learning Course in Gurgaon. I'll likewise investigate how these tech-focused procedures will change the eLearning business as far as we might be concerned.

It's an energizing time in the realm of eLearning. Innovation is continually developing and adjusting to support regular productivity and make our lives simpler. Present day apparatuses enable us to associate from around the world and scaffold holes when they show up. One such headway is the ascent of Machine Learning and Artificial Intelligence. To be specific, their job later on for eLearning. Forecasts, calculations, and investigation meet up to make more customized eLearning encounters. In any case, how precisely will Machine Learning and Artificial insight (AI) change the eLearning scene in years to come? What's more, how might you begin getting ready for amazing changes today?

Before we jump into the figure of Machine Learning Training in Gurgaon, how about we cover the essentials of these tech-based methodologies. It includes calculations that anticipate potential results dependent on client information. The framework recognizes certain examples and patterns, at that point gains from the information to give more prominent personalization. Each piece of new data that the program gets makes it more instinctive. The whole interaction happens self-sufficiently, from removing and assessing the informational collections from the Learning Management System to anticipating what online students need dependent on their past exhibition.

Read more:- https://www.ssdntech.com/ai-courses/machine-learning-course-gurgaon-city
Why do you love programming?
Tags: healthydebate, career, beginners, discuss
Published: 2021-02-26 08:33:26

`Hello World!` [My first two #healthydebate](https://dev.to/devlorenzo/series/11376) generated more than 4000 views and 100 comments! So I decided to create another debate, it feels so good to have interactions with other programmers! 

I would like to thank @brandon_wallace for giving me the idea:
{% comment 1bp87%}

---

**The questions are: Why do you started coding? What leads you to code every day? What did you find special about programming?** 

---

I'm very interested in creating a conversation / a debate thinking about why different peoples love to code. I also have in mind to use quotes from this post in my next writings. So I need you to tell us all the funniest things! 

---

Remember the comment!

Check these articles about [how programmers love to code](https://dev.to/devlorenzo/how-do-you-love-to-code-2l29) / [best operating system for dev](https://dev.to/devlorenzo/windows-or-mac-4f8k)

{% link https://dev.to/devlorenzo/how-do-you-love-to-code-2l29 %}

{% link https://dev.to/devlorenzo/windows-or-mac-4f8k %}

---

If you have other post ideas feel free to write a comment.

---

## **[Subscribe to my Newsletter!](https://chipper-motivator-3112.ck.page/05710ea3d3)**
A loooong, and fun, weekly recap for you 
Free PDF version of my articles
Highly customizable inbox
That's --> free <-- and you help me!
Add a Auto-stop Playing Feature to SONY NWZ-ZX1(NW-ZX1) 
Published: 2021-02-26 08:03:02

Added a new feature to SONY NWZ-ZX1 music player, which is pretty old that even don't have a auto-stop playing function.

Check the link below to see how it works.
[Demo Video](https://www.bilibili.com/video/BV1cK4y1D7uZ)