teleren/devto huggingface dataset:
Day 86/100 Font Weight
Tags: 100daysofcode, javascript, programming, motivation
Published: 2021-12-10 12:56:23

Finding the right balance on details needed to accomplish the ideal design must value the hierarchy of context and establish possible outcomes to solidify the final result.

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

The font-weight property can take any one of these keyword values:

- `bold`: Bold font weight.
- `normal`: Normal font weight. This is the default value.
- `lighter`: One font weight lighter than the element’s parent value.
- `bolder`: One font weight bolder than the element’s parent value

Numerical values can range from 1 (lightest) to 1000 (boldest), but it
is common practice to use increments of 100. A font weight of 400 is equal to the keyword value normal, and a font weight of 700 is equal to bold.

## Code Snippets

```
let season = 'summer';

if (season === 'spring') {
    console.log('It\'s spring! The trees are budding!');
} else if (season === 'winter') {
    console.log('It\'s winter! Everything is covered in snow.');
} else if(season === 'fall') {
    console.log('It\'s fall! Leaves are falling!');
} else  if(season === 'summer') {
    console.log('It\'s sunny and warm because it\'s summer!');
} else {
    console.log('Invalid season.');
}
```

## a11y myths 
**Web accessibility is just a developer's job**

> It's a team effort. Designers create accessible UIs, developers build it, QA engineers do the accessibility testing, PMs make sure that accessibility is included in the team processes, legal team checks if a product is risk free from an accessibility perspective, content managers adjust content to be compliant. 

[![resource](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ra3ljfdusxyizbyp6y6y.png)](https://accessibility.digital.gov/)
Die besten LiteSpeed Hoster
Tags: wordpress, hosting, litespeed
Published: 2021-12-10 14:16:23

---
title: Die besten LiteSpeed Hoster
published: true
date: 2021-12-10 12:51:21 UTC
tags: WordPress,hosting,litespeed
canonical_url: https://bloggerpilot.com/litespeed-hoster/
---

![Die besten LiteSpeed Hoster](https://bloggerpilot.com/wp-content/uploads/2021/11/litespeed-hoster.png)

Im folgenden Artikel erklären wir dir, was Litespeed-Hosting ist und warum du es nutzen solltest. Wenn du schon einmal eine Website bei einem anderen Serveranbieter gehostet hast, wirst du verstehen, was Litespeed ist - aber falls nicht, erklären wir es dir:

Der Original-Artikel erschien auf [Die besten LiteSpeed Hoster](https://bloggerpilot.com/litespeed-hoster/).

 
litespeed Hosting ist ein Webhosting-Dienst, den es seit 2003 gibt. litespeed unterscheidet sich von herkömmlichen Hosting-Anbietern dadurch, dass wir dir einen Server, die nötige Software und sogar freundliche, sachkundige Mitarbeiter zur Verfügung stellen, die dir bei allen Problemen helfen. Unsere Server stehen in den USA, so dass du dich bei Problemen an unseren technischen Support wenden kannst. litespeed ist ein zuverlässiger Hosting-Anbieter und unsere Server gehören zu den schnellsten, die es gibt, so dass du sicher sein kannst, dass deine Seiten schnell laufen.
Where can we find Erlang developers?
Tags: erlang, beam
Published: 2021-12-10 12:42:13

At [Code BEAM America 2021](https://codesync.global/conferences/code-beam-sf-2021/), I heard people complaining that it is difficult to find Elixir and Erlang developers.

As a [member of the Education, Training, & Adoption Working Group of the Erlang Ecosystem Foundation](https://erlef.org/wg/education), I feel it is kind of my "job":

1. To help Elixir/Erlang developers find good jobs;
1. To help companies that use Erlang/Elixir in production find good professionals;
1. To help bring more people to the community, especially more diverse people (non-white and non-males).

So, the list below tries (which originated from [this tweet](https://twitter.com/adolfont/status/1469001137382645762) and was updated thanks to some comments)  to address point (2) above. If you have something to add, please comment below.

## One channel groups

- Erlang Brasil Telegram Group (in Portuguese) https://t.me/erlangbrasil (09/Dec/2021 100 members)
- "Erlang Developers (Worldwide)" private group on Facebook https://www.facebook.com/groups/521640357945562
- Erlang Developers on LinkedIn https://www.linkedin.com/groups/60972/
- Erlang/IOTP professionals https://www.linkedin.com/groups/90878/
- Erlang https://www.linkedin.com/groups/83153/
- Erlang IRC channel irc://irc.libera.chat/erlang

## Multi-channel groups

- Erlanger Slack https://erlef.org/slack-invite/erlanger

## Forums 

- Erlang Forums https://erlangforums.com/
- Erlang on Stack Overflow https://stackoverflow.com/questions/tagged/erlang
- Erlang on Reddit https://www.reddit.com/r/erlang/
- Erlang on Lobsters https://lobste.rs/t/erlang

## Mailing Lists

- erlang-questions https://erlang.org/pipermail/erlang-questions/
- erlang-announce https://erlang.org/pipermail/erlang-announce/
- eeps https://erlang.org/pipermail/eeps/

## Social Networks

- Twitter
  -  [\#WeBEAMtogether](https://twitter.com/hashtag/WeBEAMtogether?src=hashtag_click&f=live)
  -  [\#Erlang](https://twitter.com/search?q=%23Erlang&src=typed_query&f=live)
  -  Only [Erlang](https://twitter.com/search?q=Erlang&src=typed_query&f=live) does not lead to good results
- LinkedIn https://www.linkedin.com/search/results/all/?keywords=erlang&origin=GLOBAL_SEARCH_HEADER&sid=P9d
Release 0.4 - Part 2
Tags: opensource
Published: 2021-12-10 12:33:37

## Introduction

Continuing with my release 0.4, I started putting my plan for the two selected issues into action. After talking with the project maintainers and noting down almost everything I needed to know, I was confident that I could get both pull requests up for review within the week. Sadly, things did not go as planned.

## Working on the issues

### 1. [#issue-2416](https://github.com/Seneca-CDOT/telescope/issues/2416)

At first, I intended to reuse the existing table layout and only made tiny modifications. However, I soon realized that this approach only made everything more difficult. By duplicating the code, not only did I make the already bulky HTML even harder to read, but it also made naming classes, IDs, and performing DOM manipulation to render the data more challenging. After several days of just writing and deleting the same code, I decided to go back to the drawing board.

- **_Initial design_**

![image](https://user-images.githubusercontent.com/59778930/144354666-505bd5d4-b2d1-4728-9da3-d7fe129c6d7e.png)

To make the final product matches the provided example, I had to choose between flexbox and grids. Both of them will get the job done, but to my experience, I find that grid is much simpler to use. After hours of sketching out the design in my notebook, it was time to write the actual code. I started working my way slowly through each section of the layout, adding minor adjustments and constantly going back and forth between the Bootstrap documentation to ensure the result looked good on the web.

- **_My ugly sketch of the new layout_**

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

- **_Final result_**

![image](https://user-images.githubusercontent.com/59778930/145264347-b7c2770d-b8a2-4ec0-8487-a01fb38717e9.png)

Another roadblock I had while working on this issue was figuring out how to fetch the data and render them to the UI. I initially thought I had to make an API call and process the data, but one of the maintainers mentioned that doing so was unnecessary. Thus, I had to play around with the return values inside the function responsible for fetching the data. After hours of logging different variables, objects, messages, and a couple of calls with one of the maintainers, I managed to get everything worked and combine it with the design I made earlier.

### 2. [#issue-107](https://github.com/Seneca-ICTOER/IPC144/issues/107)

Surprisingly, I hadn't had as much trouble working on this as the previous one. As a lot of the work was similar to one of my labs about continuous integration, I was able to use it as a reference and quickly get my pull request up for review. 

## Conclusion

It has been a rough week, but I managed to get both the issues up and ready for review. By the time this blog is up, #issue-107 has been merged successfully, while #issue-2416 was on its final stage of reviewing. I'll be waiting for feedback and making any modifications where necessary.
Open this link and see one of my javascript application programs.
Tags: javascript, programming
Published: 2021-12-10 12:33:12

This program is a quadratic equation solver which solves quadratic equations with second degree..
I am going to write a program for an equation with degree third.
Please try this program and send me feedback.
Here is the link.
[https://complex-quadratic-equation-solver.netlify.app/](https://complex-quadratic-equation-solver.netlify.app/)
How to be productive as a developer :)
Tags: webdev, beginners, programming, tutorial
Published: 2021-12-10 12:32:48

In this article i am going to share the open source app i built. 

You can assess the application from here -> https://time-stamp.vercel.app

Suppose you want to know where did you spent the time in the last week, if you have this small visualization then you can easily get it.


### How to use this?
Described in https://github.com/ats1999/time-stamp

Thanku :)
Print your Markdown content with React through AST
Tags: react
Published: 2021-12-10 12:28:32

---
title: Print your Markdown content with React through AST
published: true
description: A journey to printing my blog Markdown contents with my custom components.
tags:
  - ReactJS
---

New blog post:
https://insertafter.com/en/blog/markdown_ast_to_react.html
infinity scroll down reactjs
Tags: javascript, html, css, webdev
Published: 2021-12-10 12:22:11

Code 
```
import { useCallback, useEffect, useState } from "react";
import "./styles.css";
import InfiniteScroll from "react-infinite-scroll-component";
export default function App() {
  const [state, setState] = useState([]);
  const [data, setData] = useState([]);
  const [hasMore, setHasMore] = useState(true);
  const [perPage] = useState(20);
  const [currentPage, setCurrentPage] = useState(1);
  const lastIndex = currentPage * perPage;
  const firstIndex = lastIndex - perPage;

  const fetchPost = async () => {
    const json = await fetch("https://jsonplaceholder.typicode.com/posts");
    const result = await json.json();
    setState(result);
  };

  const fetchMore = useCallback(() => {
    setTimeout(() => {
      setCurrentPage(currentPage + 1);
      let d = [...state].slice(firstIndex, lastIndex);
      setData((prev) => [...prev, ...d]);
    }, 1000);
  },[state])

  useEffect(() => {
    fetchPost();
    if (state.length) fetchMore();
  }, []);

  useEffect(() => {
    if (data.length < state.length) {
      setHasMore(true);
    } else {
      setHasMore(false);
    }
  }, [state]);
  console.log({ state, data, lastIndex, firstIndex, currentPage });
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <InfiniteScroll
        dataLength={data.length}
        next={fetchMore}
        hasMore={hasMore}
        loader={<h4>Loading...</h4>}
        scrollableTarget="scrollableDiv"
      >
        {data.length &&
          data.map((post) => {
            return (
              <div
                style={{
                  backgroundColor: "green ",
                  padding: "10px",
                  margin: "10px"
                }}
              >
                {post.title}
              </div>
            );
          })}
      </InfiniteScroll>
    </div>
  );
}

```
Fiat currencies are not one thing
Tags: crypto, cryptocurrency, economics
Published: 2021-12-10 12:10:33

When we discuss the potential future usefulness of cryptocurrency, we compare against existing use-cases of fiat currency. Given a particular fiat currency -- its name, its unit, and its exchange rate -- our language enforces us to think of it as one currency.

This is a misconception that will lead to poorly designed alternatives with strong, but unaligned monetary properties at the wrong time. If we don't think of a fiat currency as many currencies within one brand, then any attempt to re-model those use-cases with cryptocurrencies will come short of being practically useful.

The classic shapes of fiat currencies are:

- Physical cash money
- Credit card money
- Bank loan money
- Company money
- Point system money
- New digital cash money

The reason why thinking of these as separate currencies within the same brand is that they do not have the same monetary properties, or even the same purposes, at all. And if you consider the cost of exchanging one shape for another as part of the exchange rate, they don't even share that.

When Bitcoin were still getting popular, the following [six historic monetary properties](https://bitcoinmagazine.com/culture/monetary-properties-of-bitcoin) were used to justify being "real money":

- Scarcity (has limited supply)
- Durability (doesn't break)
- Acceptability (can pay with)
- Portability (can carry)
- Divisibility (can buy big/small things)
- Fungibility (all coins are the same)

Now cryptocurrencies are immensely popular, but still mostly useless. While these monetary properties have gradually become true for money historically, cryptocurrencies generally lack some of them; in particular, mainstream acceptability and practical durability ([recover lost funds](https://vitalik.ca/general/2021/01/11/recovery.html)).

We could write that off as work in progress. But why bother changing currencies if all you get is the same, but with fewer consumer guarantees (e.g. conditional transaction reversibility) and a worse user experience?

Perhaps, like not all historic money had all desirable monetary properties in the same degree, or at all, the newer monetary properties of cryptocurrencies have yet to be understood and valued because they still fail basic usability.
-1 * 0 = -0
Tags: javascript, watercooler, programming
Published: 2021-12-10 11:48:52

Yes you heard it right. It seems javascript evaluates -1 * 0 equals to -0. You can see the below screenshot:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hq6z8xaw93w8r1745tws.png)
Simple flexbox tutorial 
Tags: css, flexbox, beginners, tutorial
Published: 2021-12-10 11:41:19

How to style multiple blocks of different colors in one single row and get what we call a color palette out of it?

In this tutorial I will show you how you can style multiple blocks of different colors and make a color palette using css property flexbox.

Fist we will start by creating a div container that will contain five divs with different colors.

#### This is how our html will look like

```html
<div class="container">
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
</div>
```

#### And this is the css code below

```css
.container{
  width:100%;
  max-width:1000px;
  height: 200px;
  display: flex;
  flex-direction:row;
  justify-content:space-evenly;
}
.container > div{
  width:calc(100%/5);
  height:100%;
}
.container > div:nth-child(1){
  Background:blue;
}
.container > div:nth-child(2){
  Background:lightblue;
}
.container > div:nth-child(3){
  Background:red;
}
.container > div:nth-child(4){
  Background:lightred;
}
.container > div:nth-child(5){
  Background:pink;
}
```
And that is how you create a css flexbox color palette guys :)
Pure CSS Carousel
Tags: html, css, tutorial
Published: 2021-12-10 11:39:13

Hey **fellow creators**,

You can easily do a *carousel completely in CSS*, let's learn how to do that now!
 
If you prefer to watch the video **version**, it's right here :

{%youtube JlKTW8A3_S4%}


Here's the [source code]( https://codepen.io/Ziratsu/pen/ZEKWaRv) if you want to follow along with me.

##1. The HTML structure.

Create a frame that'll wrap everything, meaning the carousel, that'll contain several elements.
You need to put the exact same text in the first and last paragraph.

```html
<div class="frame">
      <div class="carousel">
        <p class="element">"Incredible"</p>
        <p class="element">"Perfect"</p>
        <p class="element">"Awesome"</p>
        <p class="element">"Punctual"</p>
        <p class="element">"Incredible"</p>
      </div>
</div>
```

##2. Style the frame.

Style the frame so that it sits in the center of the page, has a coloured background and white text:

```css
.frame {
    position: relative;
    top: 100px;
    margin: 0 auto;
    width: 600px;
    height: 200px;
    border-radius: 2px;
    background: #373737;
    color: white;
    overflow: hidden
}
```

##3. Style the elements.

Each element needs to take the full width and height of the frame. In order to do that, you'll use line-height and make it the same size as the height of your frame, here it'll be 200px.

```css
.element {
    text-align: center;
    font-size: 50px;
    line-height: 200px;
}
``` 

Why use *line-height*? It'll put 100px above the text and 100px below it, so that it'll center the text in the middle of the container.

##4. Animate the carousel.

```css
.carousel {
    animation: carousel 8s ease-in-out infinite;
}
@keyframes carousel {
    0%, 20% {
        transform: translateY(0);
    }
    25%, 45% {
        transform: translateY(-200px)
    }
    50%, 70% {
        transform: translateY(-400px)
    }
    75%, 95% {
        transform: translateY(-600px)
    }
    100% {
        transform: translateY(-800px)
    }
}
```

Use the height of the frame in your *translateY()* so that each element of the carousel will slide up and show the different texts and then go back to the original value (which is 0).

Indeed, you could add more features with JavaScript, but it's already a nice way to create a basic slider in pure CSS.

Come and take a look at my **Youtube channel**: https://www.youtube.com/c/TheWebSchool

*See you soon!*

Enzo.
Github Finally Fixes Issue That Was Costing  Lot of Wasted Space
Tags: github
Published: 2021-12-10 11:30:30

---
title: Github Finally Fixes Issue That Was Costing  Lot of Wasted Space
published: true
description: It was a simple missing feature which costed big!
tags: github
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nkxik3pfmncu2hnv29bu.jpeg
---

Github had all a GIT-in-the-cloud service needed. It added much more features, like the dark mode. It hit hard on community aspects.

But it missed one thing early on, to identify how people used the app, what for.

![Footpath trails](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s3bcywem4ojavqf5nnu6.jpg)

Much like foot trails in Urban Planning. You can read more here: [Desire paths: the illicit trails that defy the urban planners](https://www.theguardian.com/cities/2018/oct/05/desire-paths-the-illicit-trails-that-defy-the-urban-planners) 

People sometimes use the most convenient solution in your setup even if you did not have plans for it. And it might be a flag that your design is flawed, to some degree.

## People have always used Github forks as bookmarks 

Much to the horror of the Linux/Unix/freeBSD OpenSource community, Github users have been forking projects. Forks are not welcomed. Even a for forking [article](https://opensource.com/article/19/1/forking-good) on opensource.com starts with 

> Although forking is undesirable, ...

But many many of those forks were unnecessary. And they cost storage space. People have always used forks to bookmark projects. And Github has been battling wastage. At one time i remember Github offering to delete forks when PRs were merged.

## Finally fixed

![Github bookmarks](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gegyzwr3tpvn4o6cex3e.png)

Now you can add your favourite project to your well favourite list. No longer need to fork!
Three types of functions in JavaScript!
Tags: javascript
Published: 2021-12-10 11:26:27


![JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k75uiyrb0wmdnnw813bb.jpg)

There are 3 ways which functions can be declared in JavaScript.
In this article, I'm going to show you and compare these.

## Named Functions
This type receives a name for the function declaration:
```javascript
function myFunction(text) {
    console.log(text);
}

myFunction('Hello World!');
```

## Anonymous Functions
This type doesn't receive explicitly any name for declaration. Instead, the function will be assigned to a variable for invoking.
```javascript
const myFunction = function(text) {
    console.log(text);
}

myFunction('Hello World!');
```

## Arrow Functions
This type is similar to **lambda** functions in other programming languages. It doesn't receive explicitly any name (it will be assigned to a variable for invoking) and the structure is so simpler.
```javascript
const myFunction = (text) => {
    console.log(text);
}

myFunction('Hello World!');
```

BOOM! Now you've been learning 3 types of function declaration in JavaScript which may help you a lot in developing web applications and etc.

***You can or may want to connect with me through the networks I've put on my website:*** [Ali Bahaari's Website](https://alibahaari.github.io)
Issue in to show HTML string by dome sanitizer in angular by SafeHtml
Tags: angular, html, typescript, javascript
Published: 2021-12-10 11:25:47

Hi gays,My name is Hamza Hassan, i am facing an issue to show HTML String in iframe , actually problem is there are lots of link , when we click on any link, user logout from our platform and it redirect to login page. how we can disable these links using external css file.?