teleren/devto huggingface dataset:
You perhaps don't need CSS compiler, but only CSS in JS
Tags: webdev, css, javascript
Published: 2021-03-14 19:45:39

[BSS](https://github.com/porsager/bss) is a well known library among Mithril's lovers.

It is simpler way to do CSS in Javascript directly on the elements you're styling.

In fine, I use BSS to style elements and I use wickedElements to create 'custom elements' which does not need any polyfill

[![btn.png](https://i.postimg.cc/2j4fsLkw/btn.png)](https://postimg.cc/SjN58sz2)

The previous buttons are generated with the following code :

```html
<p><btn-orange-100></btn-orange-100></p>
<p><btn-orange-90></btn-orange-90></p>
<p><btn-orange-75></btn-orange-75></p>
<p><btn-orange-50></btn-orange-50></p>
```

```js
const { define } = wickedElements

const btn_orange = (opacity) => opacity <= 1 && b`
  color : red;
  background: rgba(255, 130, 0, ${opacity})
  color: white;
  border: 1px solid rgba(255, 130, 0, 0.4);
  padding: 10px;
  box-shadow: 3px 4px 8 rgba(255, 130, 0, ${opacity});
  letter-spacing: 2px;
  cursor: pointer;
`.$hover(b`box-shadow: unset`);

const button = (o) =>  `
    <button class=${btn_orange(o)}>Custom ${o * 100}</button>
`

define("btn-orange-100", {
  connected () {
    this.element.innerHTML = button(1);
  }
})
define("btn-orange-90", {
  connected () {
    this.element.innerHTML = button(.9);
  }
})

define("btn-orange-75", {
  connected () {
    this.element.innerHTML = button(.75);
  }
})

define("btn-orange-50", {
  connected () {
    this.element.innerHTML = button(.5);
  }
})
```

You can play with it here : [CustomButtons](https://flems.io/#0=N4IgtglgJlA2CmIBcA2ALAOgMwA4A0IAzgMYBOA9rLMgNoAMeATHXQLoEBmEChtoAdgEMwiJCAwALAC5hqBYuX5T4S5CAA8JUhAAOUgASFSxALwAdENKk7CSAPR2Arvx0BrAOYYFYOwHcIxK7wUAC08AgiSoQWAHzqdlq6UjFm-KnqOnEARlL8IeSkgvzu8CEAjCxxdjl5BUUl5ZXxmemZ6jX5hcWlAJx0VR113SF9VS38Gdm5nfWlAOwArAPTQw2LYykTbYNdDQv98TuzIfsbIASE4fDEUhCKvGILSLggAL54AsKi4gBWvPKKZSqMQKfiEAzAfRQeBcfjwfSvfQmfT+QLBACiERUUmiaX4oPB+hqAH1VvDkQAKcg6QTECBSACeAEokTF9NTafSGfp1MiyvoAGQCokAA1S+n0ClgBX0SH0pGCAG5xUTaR4KM4oHLSO4soIKYwFgs8PoylgGPoLQASYAcumM15MlVSgpy3wSenwZX8CVZArQ0hyso6AAehko0Hluv1huNpvNJotdAwaCZ3olNJgEGKQboofTRPIIZChAkgig5F8cqwof0aFrOCjeoNRpNZqTJptdq5joLCCkylIJZpdJz+kY+edjlIhFd+h05Gzg+9IowVok5AAbvBSBSsiK-cXS+XK3LnJcpCK06lUgSDFlHAPFEj9FSWSY2foxT6JTyH0+fWIWBBEIQgTBtEkyTfV4YgAYUccFyDAfQu30AAqU0WFeQ5HykRRNm-VJoVheAKQsI5hgqOgLBNYBnUUOEbmCV8WTon8JSkD1CAwK5IikDBszhUgAAkABUAFkABkX3-PD+ApMprx-V5UkdIiYWzUjyJWXZemo859DYiVQUY5QoBYwyVQ4rieKxJQBP4ISxKkmTcMUCkMB6JSJRU-g1LxYjNLIkAKLWBYaMsn8TOuMyLKM39OIgbjeOxBynIk6TkVk9yMEWbyEVUp0Ao0uFgtC0p9gi+LoqY8yKVYqz9ES5K7P4wSd2czKiTc+SMAWfLfP8m8fxVc4QG8HRuB3NQ9SycIxsuBAbjuME1DKNBUDKN4PhAIQRDULxQLG0EgSkNQ3nYEBYGzVwHhoT59rELIjoIadqDEKwbHsJwXA8LwkOqUCAAEygwFAU0B7i-jGxkdG+RI9Augg9u+eDwQAIVyXhXiAA)
Ben Awad is building an open-source app similar to ClubHouse
Published: 2021-03-14 19:43:20

It looks pretty cool. It's live, works in the browser.

Here is a video
https://lnkd.in/gKMnWPJ

Here is website
https://dogehouse.tv/

Here is repo
https://lnkd.in/gEmSnnC

#clubhouseapp #startup #opensource #yourdevguy
Top 3 CSS effects for beginner
Published: 2021-03-14 19:36:23

All the credit goes to <a href="https://codewithbishal.com">Code With Bishal</a>
Hey Guys, Welcome to my new post in Dev to, in this post I will show you how you can create great CSS animations that you can put on your website or in your portfolio. These are the top 3 CSS effects/animation of February 2021 which a beginner can make.
Why you should read this Blog?
i. You should read this blog because you will find the top 3 CSS effects which you must use in a website or keep in your portfolio in February 2021.
ii. You can download the codes (for free) by visiting the particular post.
iii. There are images with every post to give you an idea of how it looks.
iv. Registering to the site will be appreciated
#1) Button glowing effect.
![Button with hover effect](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mjxwyut1bnt1yaa4w9ru.jpg)
Preview: <a href="https://codewithbishal.com/example/css-button-glow-effect">https://codewithbishal.com/example/css-button-glow-effect</a> or click <a href="https://codewithbishal.com/example/css-button-glow-effect">here</a>

#2) Responsive Image Gallery [Made using CSS grid]
![Responsive Image Gallery.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/byb4g7ufkh77so0434cs.jpg)
Preview: <a href="https://codewithbishal.com/example/responsive-image-gallery">https://codewithbishal.com/example/responsive-image-gallery</a> or click <a href="https://codewithbishal.com/example/responsive-image-gallery">here</a>

#3) Responsive Column cards [can be used to show blogs]
![Responsive Column cards](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o5hqyhzo35dblqlwgmow.jpg)
Preview: <a href="https://codewithbishal.com/example/how-to-create-responsive-column-cards">https://codewithbishal.com/example/how-to-create-responsive-column-cards</a> or click <a href="https://codewithbishal.com/example/how-to-create-responsive-column-cards">here</a>
Testimonials Box Switch
Tags: javascript, css, html, 100daysofcode
Published: 2021-03-14 19:35:56

the day 84 of challenge #100DaysOfCode

Testimonials Box Switch Using HTML5, CSS3 & JS

Demo : https://testimonial-boxjs.netlify.app/

Code : https://github.com/saidMounaim/100DaysOfCode/tree/main/Day84

Follow Me On Github : 
https://github.com/saidMounaim
SnowFS ❄️ Let's bring version control to graphic projects
Tags: opensource, typescript, javascript, productivity
Published: 2021-03-14 19:32:03

<img src="https://github.com/snowtrack/snowfs/raw/main/img/terminal.gif" />

## Introduction 

Welcome to my first article here on **Dev.to**. In this article, I will be sharing an overview of an open-source project I kicked off to explore ideas and solutions on how to bring version control to graphic projects.

The open-source project is called [SnowFS](https://www.github.com/snowtrack/snowfs) and it is a lightweight command-line application and library for binary files with a focus on graphic files.

## But why?

<img src="https://media.giphy.com/media/lYKvaJ8EQTzCU/giphy.gif" />

I recently started developing an [UI application](https://www.snowtrack.io) that brings local version control and artists/designers together. Given the effort of the Git community to support larger files, I tried Git+LFS for my first prototype. It seemed, after several successful tests I've overcome the inner demons that were screaming **Don't even try to use Git with such big files**. Means Git with LFS is a nice solution to tackle such needs.

Unfortunately, the devil is in the detail, and some features beneficial for the software development process can be quite counterintuitive for other project types. For example, the hash integrity of Git is great to ensure the integrity of a software repository, but not really needed for a graphic project. For such project types, the requirement to delete individual files or removing entire commits without rewriting the history all the time is more important.

Basically, I needed Git, just more lightweight, support for big files, and a fraction of the functionality. And that's how **SnowFS** was born. It supports...

- ...deleting of entire commits or individual files
- ...instant snapshots
- ...instant rollback
- ...super-fast-detection of large modified files
- ...block-cloning and copy-on-write supports for APFS, ReFS, and Btrfs
- ...and more.

## How does SnowFS perform?

<img width="35%" height="auto" src="https://media.giphy.com/media/XJePrgQp0Szr5Nwi8l/giphy.gif" />

Below is a comparison between Git and SnowFS on a Macbook Pro (2020) with an APFS formatted SSD to check-in, delete and restore a 4GB Photoshop File.

```
$ git lfs track *.psd
$ git add texture.psd   # 20164ms
$ snow add texture.psd  # 4596ms <-- Not bad
$ git rm texture.psd    # 575ms
$ snow rm texture.psd   # 111ms <-- Also ok
$ git checkout HEAD~1   # 9739ms
$ snow checkout HEAD~1  # 1ms <-- Yeah!
```

## Where to go from here?

**[SnowFS](https://www.github.com/snowtrack/snowfs)** is a great lightweight and flexible project to explore and experiment with new ideas for version control. If you are interested in the project, we are looking for your expertise to share and learn!

In that sense, **Happy versioning**!
Latency versus Response Time
Published: 2021-03-14 19:24:03

While discussing a web application's performance or request profiling results, it is vital to distinguish between the latency and the response time. 

<!--more-->

![latency vs response time](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k4iqz3qc2xd4e308c46g.jpg)

A simple formula to articulate the difference between response time and latency: `response time = latency + processing time`.

**Response time** is the total time it takes for the web service to respond to the sent request, including all networking latencies. Response time is the sum of processing time and encountered latencies. 

**Processing time** is usually the time taken by the server from receiving **the last byte** of the request and returning **the first byte** of the response. It does not include the time it takes the request to get from the client to the server or the time it takes to get from the server back to the client.

If we are talking about an API, the server usually does not start processing until it receives and reads all the bytes from the request. Since the server needs to parse it and understand how it can satisfy it, once it started to render the response (sent the first byte), it does not control the network latency. 

It would be best if you communicated it clearly with your team. You may write a web service that starts parsing JSON on-the-flight and executing the business logic. Your processing time will have a slightly different meaning. Measure it from the first received request byte. 

**Latency** is the duration that a request is waiting to be handled. Until the request is handled, it is latent - inactive or dormant. A high latency indicates problems in the networking or that the server cannot handle a series of requests and is probably overloaded.   

You might be interested in a **round-trip latency.** Round-trip latency is when a request is waiting to be handled and the duration it takes for the response to get back to the client.  A high level of round-trip latency usually means bad or slow networking. 

To exclude networking problems, you must eliminate networking and ideally host your application locally if it is possible. This way, you can remove it from the equation and check the response time. 

If the server code is under your control, you can track the processing time, and if you need to get the latency value, you can subtract the processing from the response time, and you will receive the round-trip latency value. 

Another way to debug the latency is to log timestamps when the client sends a request and when the server has started to process the request. The difference between the end and the start timestamp is the latency. 

You can use Chrome DevTools to debug the response time. In the [Chrome  DevTools](https://developers.google.com/web/tools/chrome-devtools/network/understanding-resource-timing), it is defined by Waiting time or Time To First Byte (TTFB). You can also emulate slow network connection by using [network throttling](https://developers.google.com/web/tools/chrome-devtools/network/reference#throttling).
Object-Oriented Programming applied to JS (Crash Course Recommendation) 
Tags: javascript, oop
Published: 2021-03-14 19:15:46

Just wanted to share a top-notch crash course about Object-oriented programming applied to JavaScript.

I've been studying this language for about 2 years now and this is such a great approach in my opinion. Here's why: there are countless JS courses out there but very few focus on the Computer Science side of things (here in Brazil, at least), that said, I noticed a turning point in my studying path which was aknowledging that my "sprint" feeling about taking hands-on and very straight-to-the-point courses only, wasn't taking me too far as I expected and very often I caught myself having to go back to some basic concepts.

Thing is, the theory behing the stuff matters a lot in web development if you want to have strong programming skills and not just practical knowledge about a specific language!

https://www.youtube.com/watch?v=PFmuCDHHpwk&ab_channel=ProgrammingwithMosh
Can React state management get any simpler than this?
Tags: webdev, react, showdev, javascript
Published: 2021-03-14 19:08:27

I'm one that loves simplicity in things. So despite the plethora of state management libraries for React, I have always wondered what the absolute "simplest" approach would be.

After some time on the drawing board, _I think_ I've come up with just that. And today I'm happy to share with you __SimpleR State__. (yes, with capital "R", for React 😂)

Imagine being able to implement shared state in just 2 easy steps!

__Step 1:__ Create an entity (shared state) and actions (updater functions)
```js
// counter.js

import { entity } from 'simpler-state'

export const counter = entity(0)

export const reset = () => {
  counter.set(0)
}

export const increment = by => {
  counter.set(value => value + by)  
}
```

__Step 2:__ Use the entity in your components with hooks
```jsx
import { counter, increment, reset } from 'counter'

const CounterView = () => {
  const count = counter.use()

  return (
    <>
      <div>{count}</div>

      <button onClick={() => increment(1)}> + </button> 
      <button onClick={reset}> Reset </button>
    </>
  )
}
```
(Other components can use the shared `counter` the same way.)

It's that simple! __But that's just a teaser, it can actually do a whole lot more!__

Here are some of the design goals for this library:

- __Minimalist API__; no complicated concepts or boilerplate
- Use __plain functions__ to implement state changes (including async)
- Largely __unopinionated__ with flexible syntax
- Extremely __simple to unit test__ state changes
- Highly extensible with __plug-ins__ (e.g. persistence, logging, dev tools)
- Full __TypeScript__ support with uncomplicated types
- Made specifically for React, and built on __React Hooks__ 
- Multiple times __faster__ than context/reducer solution
- Tiny, just __around 1 KB__ (minified + gzipped)

If these benefits interest you, give SimpleR State a try. You can learn more about other things you can do with it at __[simpler-state.js.org](https://simpler-state.js.org)__. Yes, I wrote full documentation! 🤓

__And if you like this library, and/or the simplicity/concept behind it please give it a star on the [GitHub repo](https://github.com/arnelenero/simpler-state) to let me know.__ 😀👌

So tell me, can the library get any simpler than this? I'd love to hear your suggestions. Goal is to get it closer to its bold claim of "simplest", __not__ to compete with other libraries as the "best".

> I opened a Request For Comments ([here](https://github.com/arnelenero/simpler-state/issues/1)) on GitHub. Your comments and suggestions would be greatly appreciated. Feel free to drop me a comment here 👇 too.

<br />

> Another P.S. -- I have prior art called `react-entities` which has already been out for quite some time, and used by our company in production. SimpleR State is an evolution, based on the same stable core, but with completely different (much simpler) API.
starting with create-react-app for Beginners
Published: 2021-03-14 19:00:55

For starters, you should check out the official documentation on React's website (https://reactjs.org/docs/getting-started.html). This site has a really great guide on how getting started with React works.

Also, to get your feet wet, you should play around with the Tic Tac Toe tutorial providing by the official React website (https://reactjs.org/tutorial/tutorial.html). Building this mini-project should give you hands-on experience with the tool.

I would also suggest reading the Thinking in React blog post (https://reactjs.org/docs/thinking-in-react.html) in order to get more familiar with the concepts of React.

In order to play around with the tool, you'll need to create your first application. This can be accomplished by simply running this command in your single-application project directory:
npx create-react-app <cool-app-name>
Notice, you can name your application WHATEVER you like, it's your prerogative. Just be mindful about your naming, you'll want your project name to be related to the purpose of your app.

As a good developer, we want to make sure we have the most up-to-date tools. Set up your development environment so that you can use the latest JavaScript features and optimize your application. You'll need to have Node >= 10.16 and npm >= 5.6 on your machine. NPM & Nodejs (Node) can be downloaded on your machine using the following website for reference: https://www.npmjs.com/get-npm.



https://dpx.com.ng
Speedup your JavaScript code using this for loop.
Tags: javascript, es6
Published: 2021-03-14 18:40:35

Hello, programmers and enthusiastic learner, hope you all having great weekend. So today, I am going to show you some for loops of JavaScript with there execution speed/time. Hope it will minimize your execution time and speed up code with some keen msec.

__1.for Loop__: A regular for loop , it iterate for each array element.
```javascript
 const cars = ["Tesla" , "Tata" ,"Ford" ,"Land Rover", "Audi" ];
 console.time();
for(let i= 0 ; i < cars.length ; i++){
     console.log(cars[i]);
}
console.timeEnd();

//console Output
PS D:\Loops> node loops.js      
Tesla
Tata
Ford
Land Rover
Audi
default: 31.557ms
```

__2.forEach Loop__: A forEach loop ,it execute a given function once for each array element.
```javascript
 const cars = ["Tesla" , "Tata" ,"Ford" ,"Land Rover", "Audi" ];
 console.time();
cars.forEach((car) => console.log(car));
console.timeEnd();

//console Output
PS D:\Loops> node loops.js      
Tesla
Tata
Ford
Land Rover
Audi
default: 28.306ms
```
__3.for of Loop__: A for of loop iterate over value of property.
```javascript
 console.time();
for (car of cars) {
  console.log(car);
}
console.timeEnd();

//console Output
PS D:\Loops> node loops.js      
Tesla
Tata
Ford
Land Rover
Audi
default: 29.918ms
```
__4.for in loop__: A for in loop iterate over name/number of property.
```javascript
 console.time();
for (car in cars) {
  console.log(car);
}
console.timeEnd();
//console Output
PS D:\Loops> node loops.js      
0
1
2
3
4
default: 28.642ms
```

##conclusion:
Here I have provided an average execution time for loops. So take it in consideration next time. Enjoy the coding...
C : Programming Fundamentals
Tags: programming, computerscience
Published: 2021-03-14 18:40:00

1. Programming language
2. Purpose
3. What is a program
4. EDP (Electronic data processing)
5. CPU components
6. What is Software?

**Programming language:-**
The computer understands binary/machine/assembly language i.e. in the form of 0's and 1n's.
for example: printf("Hello"); will be 01010111110000100 in binary form

**Purpose / Why use programming language?**
The purpose of programming is to find a sequence of instructions that will automate the performance of a task (which can be as complex as an operating system) on a computer, often for solving a given problem. Also, The programing language enables us to write efficient programs and develop online solutions such as mobile applications, web applications, and games, etc. Programming is used to automate, maintain, assemble, measure and interpret the processing of the data and information.

**What is a program?**
A program is a specific set of ordered operations for a computer to perform. Also, a computer program is a collection of instructions that can be executed by a computer to perform a specific task. A computer program is usually written by a computer programmer in a programming language.

**EDP (Electronic data processing):-**
It is a modern technique to process data. The data is processed through the computer. Data and a set of instructions are given to the computer as input and the computer automatically processes the data according to the given set of instructions.

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

1. MU or Memory Unit:-
  -this unit can store instructions, data, and intermediate results. This unit supplies information to other units of the computer when needed. It is also known as the **internal storage unit** or the **main memory** or the **primary storage** or **Random Access Memory (RAM)**.
  -speed, power, and capability are affected by its size.

2. Control Unit:-
  -responsible for controlling the transfer of data and instructions among other units of a computer **or** manages and coordinates all the units of the computer.
  -It does not process or store data.

3. ALU or Arithmetic logic Unit:-
  -two parts: 1. Arithmetic Section   2. Logic Section
  -Arithmetic Section is responsible for arithmetic operations. 
  -Logic Section is responsible for logic operations such as comparing, selecting, matching, and merging of data.

**What is Software?**
   -Software is a collection of instructions and data that tell the computer how to work. This is in contrast to physical hardware, from which the system is built and actually performs the work.
   -For example calculate software holds programs to perform operations such as addition, subtraction and so on.
What's up with flex-direction?
Tags: css, flexbox, webdev
Published: 2021-03-14 18:37:06

Does flex-direction sometimes trip you up?
Does it make you ask, "Which way did he go George?"

![Abominable Snowman from Bugs Bunny](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/92lc4ieoefy322aloic8.jpg)

I came across a conversation on twitter a few weeks back. _(sorry I can't find the link)_ where someone expressed some confusion over flex-direction. Some of the replies were chastising them over it which I think was unfair. Later I saw [another post](https://twitter.com/jensimmons/status/1370348613679906818) by Jen Simmons that asked people what confused them about flexbox and some of the replies mentioned flex-direction.

This made me think about knowledge and about things we take for granted as "known". The [spec defines flex-direction](https://www.w3.org/TR/css-flexbox-1/#flex-direction-property) as 

> The flex-direction property specifies how flex items are placed in the flex container, by setting the direction of the flex container’s main axis. This determines the direction in which flex items are laid out.

I'm not advocating for changing the spec or anything. I'm just acknowledging that sometimes things aren't as simple as we think they are. And when we realize that, we can stop judging others for getting confused.

How it's defined in the spec doesn't always stick when people go to write their css. I know I often have to set both `align-items` and `justify-content`, only to adjust them after I see which one I need to alter. Those two properties effect the child elements differently depending on the flex-direction. 

I think the main hangup people have is that "row" makes the *parent* a **row**, so all the child elements are actually in columns in that row. Conversely, "column" sets the *parent* to be a **column** and the children fall into their own rows. I think the issue here is what we see vs what we know. We see columns when we set `flex-direction: row` and our brains process that as contradictory.

CSS-Tricks has [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) and there are lots of flexbox cheat sheets and examples that you could find with a simple search.

There really is no simple way to remember it other than rows go left-to-right and columns go top-to-bottom.

Speaking of examples, here's my contribution:

{% codepen https://codepen.io/khayden73/pen/JjbRZBo default-tab=css,result %}