teleren/devto huggingface dataset:
How to start a project with NuxtJS 3 and Tailwindcss ?
Tags: vue, nuxt, tailwindcss, javascript
Published: 2023-01-07 10:40:38

Nuxt.js is a framework for building universal Vue.js applications. It is based on Vue.js, a popular JavaScript library for building web user interfaces, and adds a number of additional features to make it easier to build universal applications.

**To start a project with Nuxt.js and Tailwind CSS, you will first need to install the required dependencies.**

To install Nuxt.js, you can use the following command :

```
npx nuxi init <project-name>
```

**To install Tailwind CSS, you can use the following command :**

```
yarn add tailwindcss postcss autoprefixer
npx tailwindcss init
```

**Next, you will need to configure Nuxt.js to use Tailwind CSS.** To do this, you will need to add the following to your nuxt.config.js file :

```
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
css: ['~/assets/css/main.css'],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
})
```
This will configure Nuxt.js to include the tailwind.css file in your project's build.

Create ./assets/css/main.css : 

```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Finally, you will need to create a tailwind.config.js file in the root of your project and configure it to use the styles that you want.

For example, you might add the following to your tailwind.config.js file to use the default styles provided by Tailwind CSS:

```
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
    "./app.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

With these steps, you should now have a working Nuxt.js project with Tailwind CSS configured. You can now start building your project!
models validates
Published: 2023-01-07 10:12:08


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ypuxnr3we3xtc79edx5.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f784j8p0z7ppq4890chl.png)
Day 1 of writing: Why do I want to start writing?
Tags: beginners, productivity, career, motivation
Published: 2023-01-07 10:05:48

Writing, especially for tech people, is becoming increasingly important. As we can see here at dev.to, sharing knowledge is crucial to something greater. I wanted to be part of the community and did some articles. However, there were a lot of issues with writing I was struggling with.

That's why I recently signed up for Dickie Bush and Nicolas Cole's cohort-based course, Ship 30 for 30. For this, I will post a short "atomic" essay every day for the next 30 days. For this, I plan on sharing details about cloud computing, personal productivity, and my overall experience as a consultant.

## Here are a few reasons why:
### I want to build a more consistent habit:
In the past, I have written. However, it was mainly when I felt like writing. This was inconsistent, as you might expect, and I would occasionally go months without writing.

Nonetheless, I enjoyed the writing process. There's something magical about seeing a concept develop into an outline, a draft, and a published article. It also assisted me in organizing my ideas and served as a future reference when I needed the information.

With Ship 30 for 30, I intend to establish a daily writing habit. If I lose motivation, I can focus on my routines and habits to keep writing.
### I want to improve my writing
You must write everywhere. Whether through social media, business e-mail, or documentation/wikis.

Whenever I've written in the past, I've always overthought everything. It had to be "perfect," therefore it took forever to make. I once spent an hour writing a three- or four-sentence e-mail. This feels like a waste of time and hinders my productivity anytime I have to write.

I want to get better at writing and reduce the time it takes to make better work by writing more and within some limits.
### There is so much information to share.

Technology is constantly evolving, and it can be challenging to keep up.

Learning new concepts, languages, or frameworks is always tricky, and occasionally documentation/guides do not exist or do not fit your situation. Reading articles rather than technical documentation was beneficial when I was studying. They frequently add context and personal experiences to make it easier to understand.

By sharing my knowledge online, I hope to assist those who want to learn about new technologies and make it easier for people to grasp technology.

---
Join me on this adventure—and let me know if you have any questions along the way!

Let's get that ship sailing! 🚢
Terraform AWS network module
Published: 2023-01-07 10:03:46

Hi, devops fans

As continuation of post related to "[How to deploy high available Elasticsearch cluster at AWS OpenSearch using terraform](https://sergiiblog.com/how-to-deploy-a-high-available-cluster-at-aws-opensearch/)" a new articles appeared:

[Terraform network module – part 1](https://sergiiblog.com/terraform-network-module-part-1/)

[Terraform network module – part 2](https://sergiiblog.com/terraform-network-module-part-2/)

[Terraform network module – part 2](https://sergiiblog.com/terraform-network-module-part-3/)

Have a pleasant reading
The Green Software Foundation Releases New Tools to Promote Software Decarbonization Efforts
Tags: software, react, devops, career
Published: 2023-01-07 09:57:34


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ica8a6mdtba4fhnld7sr.png)

The Green Software Foundation (GSF) has released new tools and resources that provide organizations with a coordinated three-step action plan to learn, measure, and reduce their carbon emissions. Formed under
Continue to read: https://bit.ly/3CvaGjs
Ios App Development Process
Tags: ios, mobile, swift, android
Published: 2023-01-07 09:54:12

## Developing an iOS app typically involves the following steps:

- Define the app's purpose and its target audience.
- Create a design for the app, including the user interface and navigation.
- Write the code for the app in a programming language, such as Swift or Objective-C.
- Test the app to ensure that it is bug-free and performs as expected.
- Submit the app to the App Store for review and approval.

## Here is a more detailed breakdown of the process:

**Planning**: Determine the purpose of the app, its target audience, and the features it will include.

**Design**: Create a visual design for the app, including the user interface (UI) and user experience (UX). You can use tools like Sketch or Adobe XD to create mockups and wireframes.

**Development**: Write the code for the app using a programming language like Swift or Objective-C. You can use tools like Xcode to help with development.

**Testing**: Test the app to ensure that it is bug-free and performs as expected. This may involve testing the app on different devices and using tools like Xcode's Simulator.

**Submission**: Submit the app to the App Store for review. If the app is approved, it will be made available for download.

It's worth noting that these steps are just a general outline, and the actual process of developing an app may involve more or fewer steps depending on the complexity of the app and the resources available.

You can achive above by working with a professional [ios app development company] (https://www.uplogictech.com/ios-app-development-company) , clients can take advantage of the expertise and resources of a team of experienced developers, designers, and project managers. This can help ensure that the app is of high quality and is delivered on time.
Bash: clearing the scrollback
Tags: bash, terminal, linux
Published: 2023-01-07 09:47:11

So, clearing the screen in Terminal may be the most trivial thing to do - you type `clear` or use the keyboard shortcut `Ctrl-L`. And then of course you can/will setup some alias to make it easier.

But, I wanted to do a better setup, to also clear the scrollback. Basically when you type `clear`, it'll only push it out of screen, leaving you with a blank screen - but you can still scroll back to the previous output.

Now, there are several ways to do that, and everyone has their own way and habits. This is what I use.

- - -

First, there are some distros and other OS's that already do this by default. OS X/macOS will clear the scrollback with its keyboard shortcut, and Debian had that already fixed with their `Ctrl-L`. But, not all have that - and just the `screen` command definitely doesn't clear it.

&nbsp;

### Aliases

First you can always have a few handy aliases, like `c` & `k`. 

```bash
alias c='clear'
alias k="printf '\\033c'"
```

The alias `k` will clear the scrollback.

&nbsp;

### Keyboard shortcut

If your keyboard shortcut doesn't clear the scrollback you can map it with a `bind` (readline) command. I've seen serveral examples using that. But, one caveat is that whatever command you put in that bind line - it'll end up in the history. So, we have to be creative. :)

Bash have 2 different commands to clear the screen: `clear-display (M-C-l)` and `clear-screen (C-l)` (see [Ref manual](https://www.gnu.org/software/bash/manual/bash.html#index-clear_002ddisplay-_0028M_002dC_002dl_0029)). The shortcut `Ctrl-L` uses `clear-screen`.

I was looking through the list of builtins in my Bash version, and it didn't have `clear-display`. Maybe it's gone, because normally - using `Ctrl-Alt-L` is the shortcut to lock the (computer) screen, and you'll need to login again. But, that's the command we want.

So, here's the code. You can use this in your `.bashrc` or `/etc/bashrc` (or where you want to keep your Bash stuff):

```bash
# Mimic readline's "clear-display (M-C-l)" behaviour,
# and bind it to C-l (ie. replacing: "clear-screen (C-l)")
function clear-display() {
    printf "\\033c" && history -d $(history 1);
}

bind '"\C-l": "\C-e\C-uclear-display\C-m\C-y"'
```

Ok, so what the code does. It will bind `Ctrl-L (\C-l)` to first go to the end of the line (`\C-e`) and cut it to the beginning of the line (`\C-u`). Then run the function `clear-display()`, make a new line (`\C-m`), and then paste in what was cut out (`\C-y`).

When I was looking at other examples, they used `\C-a\C-k` - which is the opposite way. Go to the beginning and cut it from there. I found that way didn't work when pasting it back.

Since everything run by bind will end up in Bash's history… we add `history -d $(history 1)` to clear it out.

Well, that's it.

- - -

This is maybe a bit overkill, but “old habits” and “muscle memory” are two difficult things to escape. ^_^

_// Happy Hacking…_

· Eric
Database Basics: What is a Database?
Tags: webdev, database, beginners, tutorial
Published: 2023-01-07 09:44:11

The most efficient way to store data is with the help of a database. A database is made up of tables that contain columns and rows. Each category is given its's own table. For example, a company may have a table for customer information and another for sales numbers. You can think of a table somewhat like a spreadhseet. Inside a spreadsheet there are columns and rows of data. For a database however each row is called a record and each cell is called a field.

When people talk about a database they are usually referring to a relational database. This is the oldest type of database and has been used for over 40 years.

A relational database consists of 3 high-level components:

Tables
Relationships
Keys


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k8cbntbdndgdszu68ebm.png)

With these assets, you can easily link zettabytes (1,000,000,000,000,000,000,000 bytes) of data into something meaningful, that can easily be traversed at will to see everything you could want to.

Do you want to ...
Continue:http://urlshortx.in/vc5rZ
Pure CSS Logo: Netflix
Tags: css, netflix, beginners, webdev
Published: 2023-01-07 09:40:59

Hey, hope you are doing well!

We can only learn CSS by practicing. CSS is something that you should regularly practice as a Web Developer. So, to learn CSS in advanced way, we will make different company logos. So, let’s get started with our first one.

## Netflix Logo

Netflix Logo using pure CSS

**Step 1: HTML**

```html
<div class="netflix"></div>
```
In HTML, we only have a div with class “netflix”. Now, let us style it with CSS.

**Step 2: CSS**

The basic page styling:

```css
body {
  display: grid;
  place-items: center;
  background: black;
  min-height: 100vh;
}
```
Styling the main logo:

```css
.netflix {
  height: 15rem;
  width: 3rem;
  border-left: 3rem solid #e50914;
  border-right: 3rem solid #e50914;
  position: relative;
}
.netflix:before {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background: #e50914;
  transform: skewX(21.5deg);
  box-shadow: 0 0 30px black;
}
.netflix:after {
  content: "";
  width: 15rem;
  height: 2rem;
  background: black;
  border-radius: 50%;
  display: block;
  position: absolute;
  left: -200%;
  top: 98%;
}
```
You can refer to the below Codepen for preview:

{% codepen https://codepen.io/coding_dev_/pen/ZErNvmX %}

So, this is it. Thanks for Reading 😊

Don’t forget to like and follow for more…

Instagram: [coding_dev_](https://instagram.com/coding_dev_/)

Support: [coding_dev_](https://www.buymeacoffee.com/codingdev)
Make your own adblocker Chrome Extension
Published: 2023-01-07 09:36:41

Hello everyone,
This is my first ever post on dev.to

Ad blockers are a popular way to improve the browsing experience by blocking unwanted ads from appearing on websites. They can help reduce distractions, save data, and even improve page load times. In this tutorial, we will learn how to create our own ad blocker Chrome extension using JavaScript.

**Prerequisites**
Before getting started, make sure you have the following:

- Basic knowledge of JavaScript
- A text editor (e.g. Sublime Text, Atom)
- Google Chrome browser

## **Step 1: Set up the project**

First, we need to create a new folder for our project and create the following files inside it:

- `manifest.json:`This file tells Chrome about our extension and its properties.
- `popup.html:` This is the HTML file for the popup window that will appear when the user clicks on the extension icon.
- `popup.js:` This is the JavaScript file for the popup window that will contain the logic for blocking ads.
- `style.css:` This is the CSS file for styling the popup window.

Next, we need to add the following code to the **manifest.json** file:

```
{
  "manifest_version": 2,
  "name": "My Ad Blocker",
  "description": "This extension blocks ads on websites.",
  "version": "1.0",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "webRequest",
    "*://*/*"
  ]
}
```
Let's go over the different properties in this file:

- `manifest_version:` This specifies the version of the manifest file.
- `name:` This is the name of the extension that will be displayed in the Chrome Web Store and in Chrome's extension management page.
- `description:` This is a brief description of the extension that will be displayed in the Chrome Web Store.
- `version:` This is the version of the extension.
- `browser_action:` This specifies the properties for the extension's icon in the browser toolbar. The default_icon property specifies the path to the extension's icon, and the default_popup property specifies the path to the HTML file for the popup window that will appear when the user clicks on the icon.
- `permissions:` This specifies the permissions that the extension needs in order to function. In this case, we are giving it access 
to the webRequest API and allowing it to run on any website.
Metaverse
Tags: web3, metaverse, webdev, beginners
Published: 2023-01-07 09:11:31

The word Metaverse is derived from the two words Meta means “Different “ Verse means “the universe” .The whole word Metaverse Means Different universe This concept is run by many human being brains by the help of movies, Novels, Fock stories etc. Facebook also named there app meta In this metaverse You will login by your computer You will enter cyber world of computer in this metaverse universe you see the technology animation, Virtual reality.

**Metaverse Advantages:**

5G , and 5D images used in metaverse world You see the head glasses invented by google In Future New head glasses discovered the metaverse technology made a avatar of human being and this avatar is enter in new metaverse world you can perform the movement possible and impossible movement in this different universe called metaverse you can enter this world and you can also invite your friends in this metaverse world and this universe set by user own computer In this world you can attend actual business meetings. You will buy plots and doing business You can Play and earn by the world of metaverse you can doing this by virtually
My first attempt to make script for Lazy-load images
Tags: javascript, webdev, beginners
Published: 2023-01-07 09:08:42

This is very simple script, what make images to load only when they appear in your browser viewport. Why it's important you can read here [here](https://web.dev/browser-level-image-lazy-loading/).

Script written on plain JavaScript, and it's weight <1 kb.

In html code it uses the same idea, as other similar scripts. Let's say you have image:

`<img src='myCat.jpg'>`

Change attribute _src_ to _data-src_, so it will look like:

`<img data-src='myCat.jpg'>`

Script, when image appear in viewport will put value from _data-src_ to newly created _src_ attribute.

In first line of the script I put in array all the elements what I got by using _getElementsByTagName()_:

`var myImages = [...document.getElementsByTagName('img')];
`

This is because I don't know how to delete elements from the _HTMLCollection_, which I get using clearly _document.getElementsByTagName('img')_. So I put it into array, and can easily manipulate them.

I used:

`document.addEventListener('scroll'`

and function inside it, to check if image appear in viewport.

Inside of this function - simple _for..._ cycle, which, using method _getBoundingClientRect()_ will check, if image come in sight of viewport.

By using _myImages.splice(i, 1)_ I remove already lazy-loaded image from array. When array empty - script stops:

`if (myImages.length == 0) {
        document.removeEventListener('scroll', lazyLoad);
    }`

---

I don't know how good or bad this script, but it works.
If someone find it useful I'll be happy 😊

[Demo](https://lestrangeqq.github.io/lazyLoad/) || [Github](https://github.com/lestrangeqq/lazyLoad)
Getting Started with OpenCV - Reversing a Video
Tags: python, machinelearning, ai
Published: 2023-01-07 08:50:21

OpenCV's documentation is the best place to learn OpenCV, check it out. 

Learn the basics of Image and Video Handling and then try reversing a video by yourself. If you are stuck here is the code for your reference.

Make sure you are comfortable with Numpy before jumping on it OpenCV.

```

# Import the library 
import cv2 as cv

#Video Capture Instance
cap = cv.VideoCapture('videopath.mp4')

#Total number of frames in video
frames = cap.get(cv.CAP_PROP_FRAME_COUNT)

#Frames per second 
fps = cap.get(cv.CAP_PROP_FPS)

#height and width of video
height = cap.get(cv.CAP_PROP_FRAME_HEIGHT)
width = cap.get(cv.CAP_PROP_FRAME_WIDTH)

fourcc = cv.VideoWriter_fourcc(*'MJPG')
out = cv.VideoWriter('reversed_vid_name.avi', fourcc,fps ,(int(width*0.5), int(height*0.5)))

#We can print the progress of the video as it will take some time depending on video quality and length.
# print("No. of frames are : {}".format(frames))
# print("Frames per second is :{}".format(fps))

# We get the index of the last frame of the video file
frame_index = frames-1

if(cap.isOpened()):
	while(frame_index!=0):
		cap.set(cv.CAP_PROP_POS_FRAMES, frame_index)
		ret, frame = cap.read()
		frame = cv.resize(frame,(int(width*0.5), int(height*0.5)))

		#OPTIONAL : To show the reversing video
		#cv2.imshow('winname', frame)

		#Writing the reversed video 
		out.write(frame)
		#Decrementing Frame index at each step
		frame_index = frame_index-1

		#Printing the progress
		if(frame_index%100==0):
			print(frame_index)
		# if(cv2.waitKey(2)==ord('q')):
		# 	break
out.release()
cap.release()

```
CodePen Designs - 17 : Daily UI #002: Credit Card Checkout
Tags: codepen, css, webdev, design
Published: 2023-01-07 08:36:49

### We are excited to introduce our new series that will explore the best design ideas from the Codepen community. 

We will be publishing these each day and hope you find them insightful and inspiring as we showcase some of the most talented designers in this space.

---


#### Codepen Design - 17

<p><a href="https://dailyui.co/" target="_blank">https://dailyui.co/</a> #002</p>

{% codepen https://codepen.io/supah/pen/OMdPpW %}


---
## For more information

1. Check my GitHub profile
[https://github.com/amitSharma7741](https://github.com/amitSharma7741)

2. Check out my Fiver profile if you need any freelancing work
[https://www.fiverr.com/amit_sharma77](https://www.fiverr.com/amit_sharma77)

3. Check out my Instagram
[https://www.instagram.com/fromgoodthings/](https://www.instagram.com/fromgoodthings/)

4. Linktree
[https://linktr.ee/jonSnow77](https://linktr.ee/jonSnow77)

5. Check my project

- EVSTART: Electric Vehicle is the Future
[https://evstart.netlify.app/](https://evstart.netlify.app/)
-  News Website in react
 [https://newsmon.netlify.app/](https://newsmon.netlify.app/)
-  Hindi jokes API
 [https://hindi-jokes-api.onrender.com/](https://hindi-jokes-api.onrender.com/)


---
---
How to create God Of War signup page with HTML & CSS from scratch for beginners
Tags: html, css, beginners, tutorial
Published: 2023-01-07 08:12:17

{% youtube as8GQbj8CyQ%}

Hi Guys, today we want to show How to create a signup page with HTML & CSS from scratch for beginners.
Please, if you love it, Support us with Like & Subscribe.🙏🙏❤️❤️

https://shorturl.at/gKWY9

In the comments, you can say what design you want so that we can prepare the video for you.

If you want to know how the design was done, check here : https://youtu.be/_cbN8DJoSns