teleren/devto huggingface dataset:
Top 7 Featured DEV Posts from the Past Week
Tags: top7
Published: 2022-03-15 22:22:05

---
title: Top 7 Featured DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week
tags: icymi 
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---

_Every Tuesday we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week._ 

## Mix it up

As @austin642 explains, by using just two mixins, you'll be able to create highly complex, but scalable and flexible CSS layouts, without restrictions. Sounds pretty good, right?

{% post https://dev.to/austin642/simple-mixin-alternative-to-standard-css-grids-3m4l %}


## Exciting changes in React 18

The React 18 Release Candidate was released March 8th, 2022. That means the features are all finalized and there are only a few weeks left until React 18 is officially released. @kathryngrayson shows us the major takeaways from the latest RC.

{% post https://dev.to/kathryngrayson/everything-you-need-to-know-about-the-react-18-rc-3kc6 %}


## Escaping tutorial limbo with coffee chatters

@diballesteros shares his experience jumping between tutorials and bootcamps and finally figuring out how to escape the loop. The goal isn’t to learn a concept 100%, the goal is to use what you learned to make anything you can. 

{% post https://dev.to/diballesteros/how-to-escape-tutorial-hell-the-100-fallacy-56md %}


## What is an ADR and Why Should I Write Them?

An architecture decision record is a document that captures an important architecture decision, including the context of how the decision was made and the consequences of that change. @carloscuesta shares the long-term benefits of writing up ADRs.

{% post https://dev.to/carloscuesta/writing-architecture-decision-records-3582 %}


## Serverless is more

@shreythecray shares some advice for coding newbies with little or no experience with serverless architecture to get a general understanding of it. Good stuff!


{% post https://dev.to/shreythecray/getting-started-with-serverless-4gkk %}


## Format your Git commits in just 9 minutes!

It’s really important to maintain a consistent code style when collaborating with others. @ruppysuppy shows us how we can make this easy by using Husky, ESLint, and Prettier!

{% post https://dev.to/ruppysuppy/automatically-format-your-code-on-git-commit-using-husky-eslint-prettier-in-9-minutes-45eg %}


## How to organize your React components

@antjanus has been working on structuring the anatomy of their React components in an efficient and readable way. What techniques do you use to organize your React components?

{% post https://dev.to/antjanus/the-anatomy-of-my-ideal-react-component-1lo0 %}


_That's it for our weekly Top 7 for this Tuesday! Keep an eye on dev.to this week for daily content and discussions...and be sure to keep an eye on this series in the future. You might just be in it!_
Day 550 : Endless Space
Tags: hiphop, code, coding, lifelongdev
Published: 2022-03-15 22:04:32

_liner notes_:
- Professional : Pretty chill day. I set up my slides for my workshop coming up. I'm looking into some other ways to do some things a little bit easier and through the browser without having to set anything up on their local machines. Ran into some issues with trying to include a library and reached out to the team.

- Personal : Last night I was able to add the third party library to do the speech recognition. Tested it on Chrome in iOS and the freaking audio isn't being transmitted. The same for the Safari browser. The speech recognition is work, but not the audio. No clue. I tried the site on my Galaxy Z-Fold 3 phone and it works perfectly! I was using the site in conjunction with an app, but I just downloaded it on my Android device and things seem to be working. I'll just use the iPad mini for only apps and nothing for the web. Terrible. Also caught up with Attack on Titan.

![Dirt road through some trees where the branches are proving shade on the path in Kansas City, MO, USA with a wooden gate on the left side.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c5yj2w3jhc8fbljee4rn.jpg)

Got in some packages to help with packing my suitcase. One of them are some compression cubes that are supposed to save me space. I'm only taking a small bag so I don't have endless space. haha Going to finish packing. Maybe add another feature to my side project and then do another full test run before going live with the site this week (hopefully tomorrow). I've been slacking on watching "Atlanta". Maybe I'll watch an episode tonight. Can't believe this trip is coming up so soon!

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube Y6Fyp0Nlaj8 %}
Draft: Using DEV.to as CMS for my blog
Tags: javascript, nextjs, react, cms
Published: 2022-03-15 21:00:44

Hello everyone, welcome to my blog, this is my first post in a language that are not my mother language and I'm really excited to start this.

First of all, thanks for your time and I hope you enjoy my content.

## Before we start

First things first! I decided to create a blog using Dev.to as CMS because I tried everything in the past, believe me, everything, from markdown files to some more complex CMS system like Sanity.

Each options has good and bad points, let me explain why not choose them:

- Using markdown files is a good option, it's really simple and just works, but I don't like the idea to commit and push manually to update my blog, it should be automatic;

- Sanity is nice, but is too much for small projects, it's like use a sledgehammer to crack a nut.

- I even tried to use Notion as CMS and at the first moment it looks nice, but when you try to traverse the Notion api response you see the horror. When you realize you are writing things like [this](https://github.com/infinite-nil/joaoalberto.dev/commit/d29036d42b29a159e7610b12edccc2d98ad2d062#diff-18e0d4553c97cfc420e938ccafb4e3a688e782fa4512ba4ceae3e2a6f24c1987R39-R54) and [this](https://github.com/infinite-nil/joaoalberto.dev/commit/d29036d42b29a159e7610b12edccc2d98ad2d062#diff-f7d980500850ac49a9056dbd0095a477c50b8d77bbbf9cd51671e69a042f8551R1-R13).

After a lot of tries with a vary of tools and some POCs I decided that my choice should be based in some points:

- Automatic update: I want to publish with one click.
- Simple api: I don't want to read five pages of docs just to render one string.
- Easy to replace: If the tool don't feel the right one for the job I want to replace them fast.

With this in mind I tried two platforms, Hashnode and Dev.to. 

I know that both of them has public API's and a great and easy to use interface to publish new content.
Unfortunately Hashnode does not provide what I need in the API, you can check [here](https://api.hashnode.com/).

So, I came to Dev.to API and voilà, everything I need (List publications and publication details) with a simple response, Json and Markdown.

This is what I'm looking for.

## Getting started

Once the content platform was chosen I could start working on the code.

My stack for this project is Typescript, Remix, Vercel, Stitches for styling and Radix for some components.

I'll not cover all aspects of the project setup because is very simple and is better to read from the Remix.run [documentation](https://remix.run/docs/en/v1).
How to build a successful Shopify store
Published: 2022-03-15 20:47:51

We've created tons of online stores for our clients, and most of them are built on Shopify. Learn why we love it so much and how easy it is to launch a Shopify store that converts!

### Why we love it

Unlike many popular e-commerce platforms, Shopify gives merchants the possibility to customize almost everything in their site to present their brand accurately.

It offers a clean, user-friendly interface and allows you to replace most custom-development functionalities with third-party apps that integrate easily.

On top of that, it provides essential insights into your customer base, which is key to learn how your clients navigate through your store and keep it optimized!

### Set up a conversion-centered online store

The first step is to decide whether you’ll use a **Shopify theme** or not. Unless your business has really specific needs, we recommend you do. There are lots of different options to choose from, and the key is they are specifically built to convert.

The theme you choose will affect your store’s aesthetics and user experience, so it can be a bit overwhelming to pick one. A great tip is to use [BuiltWith] (https://builtwith.com) to see which themes your favourite Shopify stores use.

Consider the main features you want for your site and make sure the theme you choose has them all. Once you’ve made a decision you’ll need to think about how you want to display your content throughout the store.

When designing your **homepage**, always keep in mind the difference between above the fold (before scrolling) and below the fold (after scrolling). The first section is meant to feature pictures and CTAs. Don’t include extra information, keep the copy short. Any additional details will go below the fold, where you can add reviews, blogs and important categories like best sellers.

Once you’ve established a straightforward homepage, you can build the **product pages**. These should draw attention to your product photos and the “add to cart” button. Don’t get creative here, you’ll risk drawing people away.

The same goes for the **checkout page**: make sure there are no distractions or exits that would stir your customers away from their purchase.

### Closing remarks

Always keep in mind that the main goal of a Shopify store is to generate conversions. Leave unnecessary information apart and avoid busy elements like animations, they will only reduce the speed of your site and drive clients away. Instead, focus on your products and CTAs.

Follow these basic tips to get the most conversions!
One color palette a day with example. - 008
Tags: design, uiweekly, uiux
Published: 2022-03-15 20:29:02

www.colorsandfonts.com

## Color and typography for Web Developers and Digital Designers.

From today, I will sharing 1 Color palette a day as I did before, when I started Colors & fonts.





![1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a17msrr7jja3mgoaw418.png)
![2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hdso6dpzgislpuj6e2vl.png)
![3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/35mj0fn8rl8lwstbrktt.png)

You will find them here, [Dribbble](https://dribbble.com/MichaelAndreuzza), [Instagram](https://www.instagram.com/apes_of_london/), [Pinterest](https://pin.it/w18zxbr) and [Twitter](https://twitter.com/Mike_Andreuzza).

Since 2017 - 2022
QUIZ GAME | TEST 1
Published: 2022-03-15 20:27:53

###1 SAVOL:
Terminalda bugungi sana nomi foramtida papla ochish komandasi qanday? **(date; dd-mm-YY)**
**JAVOB**:
```
mkdir $(date'+%d-%m-%Y')
```
###2 SAVOL:
Siz turgan papka mazilini chop etish komanda nma? 
**JAVOB**:
```
pwd
```
###3 SAVOL:
***$HOME*** papkaga qanday boriladi?
**JAVOB**:
```
cd~
```
###4 SAVOL:
Hozirgi turgan papkadan bitta oldin ga qaytish komandasi qanday?
**JAVOB**:
```
cd..
```
###5 SAVOL:
Siz hozir **$HOME** papkasida turbsiz, shu papkadan chiqmasdan  Downloads papkasi ichiga keraksiz.txt deb nomlangan fayilni qanday qilb o'chiriladi?
**JAVOB**:
```
rm -rf~/Downloads/keraksiz.txt
```
How to Check Arduino with Multimeter: A Guide for Beginners
Tags: arduino
Published: 2022-03-15 19:51:18

Arduino is an open-source electronics platform based on easy-to-use hardware and software. It's a great way to learn about electronics, programming, and robotics.

A multimeter is an electronic measuring instrument that can measure voltage, current, and resistance. Most multimeters can also measure continuity and test diodes.

To use a multimeter with Arduino, you'll need to connect the positive lead of the multimeter (red) to the positive terminal of the circuit, and the negative lead of the multimeter (black) to the negative terminal of the circuit.

You can measure voltage by setting the dial on the multimeter to "V" for volts and then touching the leads to the positive and negative terminals of the circuit.

To measure current, you'll need to set the dial to "A" for amps, and then touch the leads to the positive and negative terminals of the circuit. The multimeter should show a current reading of [50 milliamps](https://electrouniversity.com/what-does-50-milliamps-look-like-on-a-multimeter/).

To measure [resistance](https://www.fluke.com/en/learn/blog/electrical/what-is-resistance#:~:text=Resistance%20is%20a%20measure%20of,Greek%20letter%20omega%20(%CE%A9).), you'll need to set the dial to "ohm" for ohms, and then touch the leads to the positive and negative terminals of the circuit.

When taking measurements with a multimeter, it's important to take safety precautions. Always make sure that the power is turned off before taking any measurements.

If you're working on a circuit that is powered by batteries, make sure to disconnect the battery before taking any measurements. When measuring voltage, always start with the lowest range and work your way up. If you're not sure what range to use, consult the manual for your multimeter. And always use caution when working with circuits powered by electricity!

If you're just starting out with Arduino, I recommend getting a starter kit that includes everything you need to get started. You can find starter kits online at Amazon, eBay, and other online retailers. Starter kits typically include an Arduino board, a breadboard, jumper wires, resistors, and LEDs. Once you have a starter kit, you can begin experimenting with circuits and programming!

Checking your Arduino with a multimeter is a great way to troubleshoot circuits and ensure that everything is working properly. By following the steps, you'll be able to safely and effectively use a multimeter with Arduino. And if you're just starting with Arduino, don't forget to pick up a starter kit!

With a starter kit, you'll have everything you need to get started building circuits and programming your Arduino.
TERMINAL KOMANDALARI QUIZ GAME TEST.
Tags: terminal, beginners, uzbek, cpp
Published: 2022-03-15 19:42:20

#QUIZ TEST SAVOLLAR.
####1. Terminalda bugungi sana nomi bilan (dd-mm-yyyy)formatida papka ochish komandasini kiriting?
####2.c++ dasturlash tilida quyidagi **using namespace std;** kodning buyrug'i nima?
####3.Joriy papkadagi main.cpp nomli code ni kompiliyatsiya qilish komandasini kiriting?
####4.Joriy papkadagi main.cpp nomli code nikompiliyatsiya qilgach a.out nomli by **by default**faylni ishga tushirish komandasini kiriting?
####5.Hozirgi papkadan bitta oldingi papkaga qaytish komandasini kiriting? 
####6.$HOME papkasiga qanday qaytiladi?
####7.Siz $HOME papkasidasiz va shu papkadan chiqmasdan qanday qilib Dwnloads papkasi ichidagi keraksiz.txt faylni o'chiradi?
####8.Siz turgan papka ichidagi keraksiz.txt nomli faylning ichidagi kontentni terminalga chop etadigan komandani kiriting?
####9. Siz turgan papka manzilini chop etadigan komandani kiriting?
####10.Siz turgan papka ichidagi barcha papka fayllarnin chop etadigan komandani kiriting?
####11.Siz hozir ~/Documents papkasidasiz  shu papkadan chiqmasdan ~/Downloads ichidagi barcha fayl va papkalarni **yashirinlarni ham** chop etadigan komandani kiriting?
Using vendor chunk file from another application
Tags: react, webpack, javascript
Published: 2022-03-15 19:34:29

There is a react project where the vendor and _app code_ are split into separate files upon build.
Can I load this _app code_ js file in another react project (say Project B) using only the Project B's vendor code and not using the vendor file which was generated during the creation of the _app code_ file?
If it is possible I want to understand how the webpack configuration would be like.

Note: I cannot build both project A and project B together in order to get a shared vendor file.
15 UI Component Libraries for Vue 3 in 2022
Tags: vue, frontend, javascript, css
Published: 2022-03-15 19:32:06

---
title: 15 UI Component Libraries for Vue 3 in 2022 
published: true
description: Yet another list of component libraries that work with Vue 3 in 2022 (as of March 🙂)
tags: vue, frontend, javascript, css 
//cover_image: https://direct_url_to_image.jpg
---

Here are ~15 libraries that appear to be working with Vue 3 and the Composition API…

[Ant Design for Vue](https://github.com/vueComponent/ant-design-vue) (16k stars on GitHub)
Folks have complained that Ant is bloated, inaccessible, and not performant. That said, Ant also has a ridiculously large components set.

[AgnosticUI](https://github.com/AgnosticUI/agnosticui) (100 stars on GitHub)
Disclaimer: I'm the author! AgnosticUI is a set of UI primitives that start their lives in clean HTML and CSS. These standards compliant components are then copied to our framework implementations in: React, Vue, Angular, and Svelte.

[Element Plus](https://element-plus.org/en-US/) (14k stars oa Vue 3 based component library for designers and developers
A Vue 3 based component library for designers and developers

[Equal](https://github.com/quatrochan/Equal) (743 stars on GitHub)
Equal is a Vue 3 UI library based on TypeScript

[headless-vue](https://github.com/tailwindlabs/headlessui)
Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.

[LightVue](https://github.com/lightvue/lightvue) (50 stars on GitHub) — The Emerging UI Component library designed for Vue 3.x & Vue 2.x

[Naive UI](https://github.com/TuSimple/naive-ui) (8k stars on GitHub)
A Vue 3 Component Library. Fairly Complete. Customizable Themes. Uses TypeScript. Not too Slow.

[Oruga UI](https://github.com/oruga-ui/oruga) (685 stars on GitHub)
Oruga is a lightweight library of UI components without CSS framework dependency

[PrimeVue](https://github.com/primefaces/primevue) (2k stars on GitHub)
Next Generation Vue UI Component Library

[Vuestic](https://github.com/epicmaxco/vuestic-ui) (1k stars on GitHub)
Free and Open Source UI Library for Vue 3

[Vant UI](https://github.com/youzan/vant) (19k stars on GitHub)
Lightweight Mobile UI Components built on Vue

[Vuetensils](https://github.com/AustinGil/Vuetensils) — appears to work with both [Vue 2 & 3](https://github.com/AustinGil/Vuetensils/blob/production/package.json#L83)
A tasty toolset for Vue.js - Lightweight, functional components to boost your next project. I'm a fan of Austin Gil's work overall and I can vouch for the source code (unlike most of the other projects on this list)

[Vuetify 3 Alpha](https://next.vuetifyjs.com/en/getting-started/installation/)
Vuetify 3 Alpha is here!

[Quasar Framework](https://github.com/quasarframework/quasar) (20k stars on GitHub)
Quasar Framework - Build high-performance VueJS user interfaces in record time

## Honorable Mention:

[VueUse](https://github.com/vueuse/vueuse) (8k stars on GitHub) — Collection of essential Vue Composition Utilities
The Functional, Usable, Delightful of... Park Benches
Tags: ux, design, webdev, delightful
Published: 2022-03-15 19:02:31

## <center>Functional</center>
![Stone slab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/setm7dhibzspzdoyl6s8.jpg)
<center>It's a stone cold, cold, stone slab.  You can _sit on it,_ although you're just as likely to be lying _underneath it_.</center>
<hr />
## <center>Usable</center>
![Wooden bench with back rest and arm rests](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lyfs55pyr067phelbzii.jpg)
<center>A back rest, an arm rest, a shaded, sheltered rest. 
 Also, your arse won't fall off.</center>
<hr />
## <center>Delightful</center>
![Swing bench with canopy with heart details](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wol1f8cja1xpll9k8yje.jpg)
<center>Guys, it's a swing!  **It's a swing!** It's got hearts, guys!  Look at the hearts!  _It's adorable, I want one!_</center>
How to Persist and Rehydrate Vuex State Between Page Reloads
Tags: vue, vuex, javascript, webdev
Published: 2022-03-15 19:00:42

There are instances in your Vue.js project where you need to share data between components. The global event bus could be the first idea to come to mind. While this may be enough for a simple application, its readability and reusability can become messy as the project grows.

**Vuex to the rescue**
[Vuex](https://vuex.vuejs.org/) works as a centralized store for all of your components. At the core of Vuex is its separation of concepts involved in state management while ensuring independence between views and states. This is solely responsible for ensuring readability and reusability of code for medium to large applications.

However, Vuex may not always be appropriate especially for small applications. A [simple store pattern](https://vuejs.org/guide/scaling-up/state-management.html#simple-state-management-from-scratch) could be all you may need for such scenarios.

**The problem**
While Vuex enables data sharing between components, it doesn’t ensure retention beyond a page reload. This can only be achieved by taking advantage of long-term storage such as localStorage, sessionStorage and cookies among others.

**The solution**
Combining the short-term storage (Vuex) and long-term storage can be achieved by using a [plugin](https://vuex.vuejs.org/guide/plugins.html). One such plugin is [vuex-persister](https://www.npmjs.com/package/vuex-persister).

> It is the smallest and fastest [Vuex4](https://vuex.vuejs.org/), [Vue3](https://vuejs.org/) and [Nuxt](https://nuxtjs.org/) — ready plugin that saves and rehydrates the state of your application between page reloads.

**Installation**
You first need to install the package through pnpm, yarn or npm.

```bash
pnpm add vuex-persister
```
or

```bash
yarn add vuex-persister
```
or

```bash
npm install vuex-persister
```

**Usage**
Import the package

```js
import VuexPersister from 'vuex-persister'
```

Instantiate the instance

```js
const vuexPersister = new VuexPersister({
    //...
})
// new VuexPersister<State> for TypeScript
```

Initialize the store

```js
const store = createStore({
  state: {/* ... */},
  // ...
  plugins: [vuexPersister.persist]
})
// createStore<State> for TypeScript
```

**For Nuxt.js**
Define the plugin

```js
// first create a plugin under the plugins folder ~/plugins/vuex-persister.js
import VuexPersister from 'vuex-persister'

export default ({ store }) => {
  new VuexPersister({
    // ...
  }).persist(store)
}
```

Register plugin

```js
// ~nuxt.config.js
export default {
  /* ... other options */
   plugins: [{ src: '~/plugins/vuex-persister.js', ssr: false }],
}
```

**Conclusion**
There is a lot you can do with the [plugin](https://www.npmjs.com/package/vuex-persister), including obfuscating localStorage and using Cookies and sessionStorage among others. A list of API options is also available.