teleren/devto huggingface dataset:
Houdini
Tags: webdev, css, javascript, houdini
Published: 2020-12-20 17:17:51

# Introduction

Houdini is a set of low-level APIs that exposes parts of the CSS engine. Hence, giving developers the power to extend CSS by hooking into the styling and layout process of a browser’s rendering engine.  Houdini is a group of APIs that give developers direct access to the CSS Object Model (CSSOM), enabling developers to write code the browser can parse as CSS, thereby creating new CSS features without waiting for them to be implemented natively in browsers. Also, it takes quite long for new CSS features to come to the browsers. Houdini will help bring them faster.
JavaScript-based polyfills can be used as a substitute for the lack of browser support in order to use new CSS features before they’re officially implemented. For example, [scrollsnap-polyfill ](https://github.com/ckrack/scrollsnap-polyfill/) is one of several polyfills that can be used to fix browser support inconsistencies for the CSS Scroll Snap specification.

# Advantages

Houdini enables faster parse times than using JavaScript style for style changes. Houdini's CSS Typed Object Model is a CSS Object Model with types and methods, exposing values as JavaScript objects making for more intuitive CSS manipulation than previous string based HTMLElement.style manipulations.

# Disadvantages

This would look great but there are a few things to keep in mind before using it. Those are:
1. With Houdini you could invent your own masonry, grid, or regions implementation, but doing so is not necessarily the best idea. The CSS Working group does a lot of work to ensure every feature is performant, handles all edge cases, and considers security, privacy, and accessibility. But as you extend CSS with Houdini, make sure to keep these considerations in mind.
2. JavaScript Polyfill solutions run only after the initial render cycle has been completed, i.e. when both DOM and CSSOM have been created and the document has finished loading. After Polyfill makes changes to styles in the DOM, it causes the render process to run again and the whole page re-renders. Negative performance impact gets even more apparent if they rely on the user interactions like scroll events.

# Learn it

To **learn about it in a simpler manner**, a great article would be: [https://css-tricks.com/css-houdini-could-change-the-way-we-write-and-manage-css/#modularity](https://css-tricks.com/css-houdini-could-change-the-way-we-write-and-manage-css/#modularity)
###### To learn it in a difficult manner
Learn more about the specifications of Houdini and worklets here: 
[https://developers.google.com/web/updates/2016/05/houdini#the_specifications](https://developers.google.com/web/updates/2016/05/houdini#the_specifications)
To explore the various APIs that Houdini provides see here: [https://developer.mozilla.org/en-US/docs/Web/Houdini#The_Houdini_APIs](https://developer.mozilla.org/en-US/docs/Web/Houdini#The_Houdini_APIs)

###### A recommended watch

{% youtube 5eBar5TI71M %}
What is a static site generator?
Tags: gatsby
Published: 2020-12-20 17:16:33

The web development industry has found new ways to make the process of maintaining and upgrading sites more successful as websites have evolved to provide more and more content. Years ago, we saw a step away from making large numbers of individual files by hand, to a method where it was possible to include and replicate repetitive parts of code more easily. Whenever a request for a resource is made, web servers can perform the task on demand. Whenever one was requested, they would diligently combine templates and text, add loops and logic and return a page view. And we'd have to make sure they had enough horsepower to keep up with demand, afraid of the popularity of our platform!

Much the same thing is achieved by static site generators (SSG). They apply templates to data and content and create a view of a website that can be served to a site's visitors. 

The key difference between a static site generator and a conventional web application stack is that a static site generator does this in advance instead of waiting until a page is requested and then generating its view on demand each time, so that the view is ready to serve in advance. And at construction time, it does so for any possible view of a site.

This has a variety of useful consequences, but most importantly, it moves this work from "request time" (when users request the view) to "build time" which is not connected to when users request a page view. This "decoupled" design breaks the connection between the number of site visitors and the overhead of creating the views for all those visits to be serviced.

![ssg](https://www.digivats.com/static/0eb549d186920d82acbec8e016c49686/2c5fd/ssg.png)

## Why are static site generators so popular now?

### Static site generators got good!

Over the years, the instruments have greatly improved. As we learned what skills were most important for the job of producing tons of website pages, new technologies were especially well designed for those things. And these tools are now very open to developers, which means they can get up and running, be effective, and start creating websites in minutes.

### In all flavors, static site generators come with

As the approach started to gain popularity, more and more developers developed tools that better fit their development tastes to work in the language and environment. You will now find site generators based on a wide range of programming languages, use various templating languages and conventions, and work in all kinds of environments. That familiarity generates productivity.

### Automation became common

Running the web generator to generate an updated version of the pages is the job of updating a site designed this way. This was cumbersome years ago, but there are many resources now that can automate that assignment for us. The effect is a very powerful and predictable development workflow, but which also generates very stable, pre-generated views as a result.
Expand file editor in split mode
Tags: vscode, webdev, codenewbie, beginners
Published: 2020-12-20 17:04:06

Double-tap the tab in split mode to expand the screen
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/m2nttge31hnurcwjzrgx.gif)

---

**Thanks for reading 💙**  
Follow **@codedrops.tech** for daily posts.  
[Instagram](https://www.instagram.com/codedrops.tech/) ● [Twitter](https://twitter.com/codedrops_tech) ● [Facebook](https://www.facebook.com/codedrops.tech/)

Micro-Learning ● Web Development ● Javascript ● MERN stack ● Javascript  
**[codedrops.tech](https://www.codedrops.tech/)**
Retag a Git Tag
Tags: git, github
Published: 2021-01-12 22:01:10

---
title: Retag a Git Tag
published: true
date: 2020-12-20 16:56:49 UTC
tags: git, github
canonical_url: https://michaelheap.com/retag-git-tag/
---

The convention when building GitHub Actions is that you have a `v1` tag that alway points at the latest release in the `v1.x.x` series. In most cases I’m using [build-and-tag-action](https://github.com/JasonEtco/build-and-tag-action) to handle this but in some cases I needed to retag things manually.

To update what a Git tag points to:

```
# Fetch existing tags
# -f is needed in case you previously had a tag.
# The action updates an existing tag, so we need to force pull
git fetch —tags -f

# Force update a tag
git tag -f v1.2.1 7585bee052d6780cc93dfe35bdc5f46baa29500d

# Force push this single tag
git push origin v1.2.1 --force
```

If you’re updating a tag to point to another tag `e.g. v1 = v1.2.3` you can use the new tag name as a reference:

```
git tag -f v1 v1.2.3
git push origin v1 --force
```
Selectors in CSS
Published: 2020-12-20 16:46:34

Selectors are used in CSS to target the HTML items we want to style on our web pages. A wide range of CSS selectors is available, allowing fine-grained precision when choosing style components. In this article and its sub-articles, we're going to go over the various forms in great depth to see how they work.

In CSS, selectors are used to targeting the HTML elements that we want to style on our web pages. A wide range of CSS selectors is available, allowing fine-grained precision when specifying style components. Here, we're going to go over the various forms in great depth to see how they work.

The first element of a CSS Rule is a CSS selector. It is a series of elements and other words that tell the browser which HTML elements should be identified to have the CSS property values within the rule attached to them. The selector's topic is the element or items chosen by the selector.
Selectors are classified in the CSS Selectors specification; like any other component of the CSS, they require support in the browsers so that they can function. The Level 3 Selectors standard, which is a mature specification, specifies the bulk of selectors that you can come across, so you can find excellent browser support for these selectors.
There are five different types of selectors available in CSS.

1.CSS Element Selector
2.CSS Id Selector
3.CSS Class Selector
4.CSS Universal Selector
5.CSS Group Selector

**1.CSS Element Selector**- The selector element chooses the name of the HTML element.
**2.CSS Id Selector**- To choose a specific element, the id selector selects the id attribute of the HTML element. The id is often unique within the page such that a single, unique element is picked. It is written with the hash character (#) followed by the element id.
**3.CSS Class Selector**- HTML elements of a certain class attribute are chosen by the class selector. It is used for the character of the time. (full stop symbol) followed by the name of the class.
**4.CSS Universal Selector**- As a wildcard character, the universal selector is used. On the pages, it picks all the elements.
**5.CSS Group Selector**- To pick all the items with the same type descriptions, the grouping selector is used. The selector for classification is used to reduce the code. Commas are used in grouping to differentiate each selector.
What are TCP and UDP?
Published: 2020-12-20 16:41:02


What are internet protocols? 

For you to safely and successfully browse the internet, you have to follow certain rules or “protocols” so that the servers and service providers know how to react and respond to your request. Don’t worry, however, as your browser does all the behind the scenes of the work. The browser by default follows roles of procedure laid down by the internet and are uniform along the entirety of the internet. These rules ensure uniformity and safety. The most basic connection-oriented protocol that is followed is the UDP and the TCP that is used in data transfer.  

What are TCP and UDP 

TCP stands for Transmission Control Protocol. It is specifically designed as a model to offer a highly reliable end to end byte stream in a session. On the other hand, UDP is a datagram-oriented protocol. It is used for broadcast and multicast types of network transmission. Its full form is User Datagram Protocol. The UDP is similar to TCP, but it’s a lot quicker and unreliable. It doesn’t do error-checking to see if any byte got corrupted or wasn’t sent during the entire process. Some key features of TCP are delivery acknowledgment, retransmission, easy error detection, and delays when the network is congested. UDP has a lot of lesser delay with the possibility of data loss and sends the bulk quantity of packets. 

WHEN TO USE WHAT?

UDP is ideal to use with multimedia like VoIP as if a few packets are missed during the transaction, will only make a screen a little blurry in places, and speed is more important while buffering a video. TCP is ideal if security is paramount and all bytes of data are a must, like in an email.
Why I Decided to Study Software Engineering
Tags: programmer, juniordev, codingbootcamp, programming
Published: 2020-12-20 16:33:30

My entrepreneurial spirit led me to study Software Engineering. I love the thrill of achieving synergy within different business departments as an entrepreneur. I have also been fascinated with technology since I was a kid.  Throughout high school I made a few attempts to learn to program but to no avail. My journey to becoming a Software Engineering did not start until I discovered how Software Engineering could feed my entrepreneurial spirit.

Technology is the entrepreneur's best friend. During high school, I started a local service business. In the beginning, I had to wear many hats, from marketing to managing staff to customer service. Fortunately, my marketing efforts were working, and I was receiving multiple leads. The issue was that I had to drive to each potential client's home to provide an estimate. Working on estimates took too much time off my day. One day I decided to integrate a custom form to the business site. The form would provide our potential clients with an instant online quote. Fortunately, the new online form worked! It was a gamechanger because most of the competition was not providing this feature. And it also saved the company approximately $720 a week in payroll and other expenses. After noticing the impact of integrating technology into a business, I was the hook!

My desire to integrate custom technology solutions to the business introduced me to software engineering. In the beginning, integrating new software and plugins to the business was great. But after a while, too many plugins were slowing down the website. And the plugins themselves lacked customizability. So I decided to watch a couple of online tutorials and play around with the site's code. After a couple of months, I found myself spending most of my day programming. Perhaps it seems my previous attempts to learn programming had failed because I would start learning for the wrong reasons. I realized that the best way to learn to program was, to begin with, the desire to solve a specific problem. For me, entrepreneurship was fun because it was all about solving problems and innovation, just like Software Engineering. The most appealing thing about Software Engineering is that it does not require many resources; all a person needs to get started is a laptop and some coffee from time to time. I am thankful that my entrepreneurial spirit influenced me to begin my Software Engineering journey.
How to setup Vue 3 with Laravel 8 ?
Tags: vue, laravel, vuejs3, laravelmix
Published: 2020-12-20 16:29:52

Now with [`laravel-mix v6`](https://github.com/JeffreyWay/laravel-mix/blob/master/UPGRADE.md) you could run Vue 3 code in Laravel App:

**1. Installation :**

    npm i -D laravel-mix@next vue@next @vue/compiler-sfc vue-loader@next
----
    npm i

before doing that try to **remove** the following dependencies from `package.json` which some of them are added by `php artisan ui vue` :

 - `vue`
 - `vue-template-compiler`
 - `laravel-mix`

**2. Config:**

in the `package.json` change the scripts to the following ones:

```json
"scripts": {
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "production": "mix --production"
}
``` 
`webpack.mix.js` should contain :

```js
    const mix = require('laravel-mix');

    mix.js('resources/js/app.js', 'public/js').vue();

```

The minimum content of `resources/js/app.js`

```js
import { createApp } from 'vue';
import App from './components/App.vue'
createApp(App).mount("#app")
```

In order to avoid this confusing steps  clone this **[REPOSITORY](https://github.com/boussadjra/laravel-vue-3-starter)** and start coding.

if this article helped you please don't to forget to upvote my answer [here](https://stackoverflow.com/questions/63967346/install-vue-3-0-in-laravel/63968220#63968220)
A cool tool to generate sample data in JSON: JSON Generator
Tags: webdev, tools, json
Published: 2020-12-20 16:20:25

A cool project by https://vazha.me/ that generates random data in JSON format.

A very handy tool to get well formed JSOn for your projects. 

https://next.json-generator.com/

![json generator screenshot](https://dev-to-uploads.s3.amazonaws.com/i/cqb65ue28vgasb2fs9v3.png)

 #tools #webdev
The quick and sweet npm package
Tags: javascript, npm, html, css
Published: 2020-12-20 16:00:57

#Start creating quick packages while working with **Javascript**


* Create an account on [npm](https://www.npmjs.com/)
* Create your [GitHub](https://github.com/) account
* Choose a quick JS work like [Image Switcher](https://github.com/nebula-byte/image-switcher)
* Now write your JS
* Do some testing
* Publish package on **GitHub** and **npm**

_If you are interested to know the full process of creating and publishing your package please let me know in the comment_

>**Importance to do so**

1. GitHub and npm are huge communities for developers, so you will have the opportunity to be part of that and that will give your profile a star. 

2. For beginners It will help a lot to grow confidence as a developer. 

3. Your code will have real-time testing.

If you like it, you can checkout my work here
https://github.com/nebula-byte/image-switcher

#Conclusion
Developers are basically creator, and sharing your creation is important. It will help others to grow.  

Love and best wishes to all creator..

_If you found this article interesting please consider following me on [Twitter](https://twitter.com/ByteNebula), [facebook](https://www.facebook.com/NebulaByte-100116265295910)_
JavaScriptmas Solutions
Tags: scrimba, javascriptmas
Published: 2020-12-20 15:59:57

Day 1 - Candies
https://scrimba.com/learn/adventcalendar/note-at-0-00-cocb94a26811c54a0c801aac9

Day 2 - Deposit Profit
https://scrimba.com/learn/adventcalendar/note-at-1-21-co3644d278b201e57388336b3

Day 3 - Chunkey Monkey
https://scrimba.com/learn/adventcalendar/note-at-0-51-co46043219865961743efc74e

Day 4 - Century from Year
https://scrimba.com/learn/adventcalendar/note-at-0-01-coe3042eb8a9f690bfd451d93

Day 5 - Reverse a String
https://scrimba.com/learn/adventcalendar/note-at-0-42-co4fb4552a47473b8266141d9

Day 6 - Sort By Length
https://scrimba.com/learn/adventcalendar/note-at-0-15-coe5748cfb66390918d687217

Day 7 - Count Vowel Consonant
https://scrimba.com/learn/adventcalendar/note-at-0-19-coe5d4b0198e6bcfc348c3f4f

Day 8 - Rolling Dice
https://scrimba.com/scrim/cof1c4d7581c8d2d2634fd568

Day 9 - Sum Odd Fibonacci Numbers
https://scrimba.com/scrim/co6d241948a80fcacfcc2fa46

Day 10 - Adjacent Elements Product
https://scrimba.com/scrim/co703435ebeff66eda3ac3157

Day 11 - Avoid Obstacles
https://scrimba.com/scrim/cod844210947ddb3237a86caa

Day 12 - Valid Time
https://scrimba.com/scrim/cof3943249f81bbc81e898828

Day 13 - Extract Each kth
https://scrimba.com/scrim/co2224bbf9bd528c641c69a47

Day 14 - Array Maximum Adjacent Difference
https://scrimba.com/scrim/co70c476eb786ae6bc0c2345b

Day 15 - JavaScript Carousel
https://scrimba.com/scrim/co17a48328246e2ada4669e25

Day 16 - Insert Dashes
https://scrimba.com/scrim/cof7a40f88067f51b14baf0a0

Day 17 - Different Symbols Naive
https://scrimba.com/scrim/co02c45f78aa90f837cc199c0

Day 18 - Array Previous Less
https://scrimba.com/scrim/co073452a8d8b947a4a1c87bb

Day 19 - Alphabet Subsequence
https://scrimba.com/scrim/co5cc4facbbbb9768322a26db

Day 20 - Domain Type
https://scrimba.com/scrim/cob084d0788fac90e7b611d60

Day 21 - Sum of 2
https://scrimba.com/scrim/co11e40489543678905d2ee2f

Day 22 - Extract Matrix Column
https://scrimba.com/scrim/co6a9404d92633288f60ac990

Day 23 - Social Media Input
https://scrimba.com/scrim/cod284307966bbf39baf0dccd

Day 24 - Test Your Agility
https://scrimba.com/scrim/coc234f37a269ce0a18930d3e
Adding Variables into Strings using JavaScript's Template Literals
Tags: javascript, webdev, beginners
Published: 2020-12-20 15:57:59

If you've been browsing this series, or just trying out new parts of JavaScript, you've seen how `console.log()` can be the quickest way to test your code as you work. You may (quite often) need to log the value of a variable and a label that makes the data more readable.

The `+` operator is probably the most obvious way to tack strings together -- or **concatenate** them. When you first started out you probably guessed you could concatenate strings this way.

```javascript
var label = 'value:';
var value = 'breakfast';

console.log(label + ' ' + value);
```

You might've used a similar approach to tack more strings together, for example to log two variables to the console.

```javascript
var label = 'values:';
var values = [ 'breakfast', 'lunch' ];

console.log(label + ' ' + values[0] + ' and ' + values[1]);
```

Those methods of logging our variables are valid, but there is another syntax that you might find useful. It's called a **template literal**. One of its features allows us to include the values of variables in a string.

# Template Literals

Let's use our second example above to demonstrate this. We want to log a string to the console that lists the two values in our array and labels for readability. Instead of enclosing our string in quotes as usual, we'll use **backticks** **`` ` ``**, aka grave accents or acutes. They look similar to single quotes, but they turn our string into a template literal.

Unlike regular strings, we can slot expressions directly into template literals, meaning that we can effortlessly pull values into our string. **If we use `${` and `}` to enclose the name of a variable, and that variable's value will be spliced into our string**.

Let's use this to rewrite our example from this:

```javascript
console.log(label + ' ' + values[0] + ' and ' + values[1]);
```

To this:

```javascript
console.log(`${label} ${values[0]} and ${values[1]}`);
```

So we've removed a few `+` operators and made the code more readable and easier to understand (now that you recognize a temperate literal syntax, that is). Template literals provide the opportunity for a more elegant syntax, though both `console.log()` calls result in the same output:

```
values: breakfast and lunch
```

# Last Word

Imagine putting this technique to use in updating displays: we can easily declare strings with variable data, from small spots like slotting in a user name, to bigger applications like displaying a blog post's tags, related articles, and other metadata. 

Template literals provide other opportunities too, like multi-line strings and nesting. They're worth taking a deeper look into, but their ability to effortlessly concatenate strings with variables is useful in just about any JavaScript project. While template literals may be confusing if we don't recognize their syntax, they're a fantastic addition to our tool belt once we do!
My Vim Config
Tags: vim, python
Published: 2020-12-20 15:57:02

What Is Vim? Vim is a highly configurable text editor built to enable efficient text editing. It is an improved version of the vi editor distributed with most UNIX systems.

It's known for being fast and efficient, in part because it's a small application that can run in a terminal (although it also has a graphical interface), but mostly because it can be controlled entirely with the keyboard with no need for menus or a mouse.

I use NeoVim; it is a more openly community driven open source code project compared to Vim. NeoVim has much better performance in the long run. It has plugins, integrations, and interfaces that will be enabled by changes over the stock Vim.



My plugins:

1.https://github.com/frazrepo/vim-rainbow
2.https://github.com/tpope/vim-fugitive
3.https://github.com/preservim/nerdtree
4.https://github.com/davidhalter/jedi-vim
5.https://github.com/romkatv/powerlevel10k/blob/master/README.md#instant-prompt

You can also access my config file here:

https://github.com/rithik9/nvim-config
WEBSITE BUILDER
Published: 2020-12-20 15:47:40

How to Create a Free Website
Sign up for a free website builder. Choose what kind of website you want to create.
Customize a template or get a website made for you. Choose your starting point.
Drag and drop 100s of design features. ...
Get ready for business. ...
Publish your website and go live. ...
Drive traffic to your site.