teleren/devto huggingface dataset:
SQL - Stored Procedure 📦
Tags: sql, database, tutorial, beginners
Published: 2021-10-27 06:54:52

SQL is the standard language for the Relational Database, for storing, manipulating and retrieving stored data. For basics of SQL ([link](https://www.tutorialspoint.com/sql/))

A Stored Procedure is a SQL code that we can save, so the code can be reused again and again. 
So, if we have any SQL query which we write over and over again, we can use it as a stored procedure so that we can just call it to execute it.


#### The Syntax for creating the stored procedure

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6j2wlzz9nq0w9hvy63mr.png) 
 
#### Executing stored procedure

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


#### Stored Procedure with Parameters

To add Parameters in the procedure, first, we need to alter the procedure for which we can use ALTER procedure statement as follows: 

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

To Execute the above stored procedure, we have to declare a variable for output parameter and specify the parameter as out

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


Just like this, we can also set multiple parameters by separating each parameter and the data type with a comma 


#### Drop a stored procedure

To drop a stored procedure, use the DROP statement as follows:

DROP PROCEDURE usp_proc;


Thank you!! Feel free to comment on any type of feedback or error you have 😄✌
Z Library: Largest Free eBook Library
Tags: zlibrary, zlib
Published: 2021-10-27 06:53:52

Whether it’s for research papers or a pleasure read, everyone wishes there should be a book available in an eBook format that they could access at any time. It’s tough to locate an eBook version of the writers who haven’t created one, and if you discover one through a third-party source, it’ll cost you money.

What Is Z Library?
Z library is the world’s largest and most comprehensive free eBook library, with thousands of PDF files of published books, papers, and journals. Previously, it was known as BookFinder. Z-lib or <a href="https://techabu.co/edu/z-library/">Z Library</a> is a virtual library with a database of academic, general interest, and scholarly books and periodicals.

It is a well-known shadow library that includes Library Genesis and Sci-hub. They’ve been running the website since 2009, and it’s classified as piracy. These three ebooks have been featured on piracy websites because they have posted ebooks of every book they can locate, including some without the authors’ authorization. There isn’t much information available regarding the management, operations, mission, or other aspects of this library.
Happy Hacktoberfest! 🎃 - Part 2
Tags: opensource, javascript, github
Published: 2021-10-27 06:34:16

## Introduction
This week, I continued to work on my contribution to Hacktoberfest. While I was looking for an issue, a friend messaged me on Slack and suggested checking out Medusa's [repo](https://github.com/medusajs/medusa) as she was working on a pull request there. With my curiosity and a bit of exhaustion due to hours of searching on GitHub, I decided to give it a shot.

## The issue
The issue I chose was to [help a given module pass linting](https://github.com/medusajs/medusa/issues/530). To recap: linting is a process to identify stylistic and programmatic errors in your codebase, thus reducing potential errors and improving code quality. After looking at the setup and contribution instructions, I began cloning the project to my local machine to see what I should do. Following the given guide, I managed to identify the linting errors and started working my way through the modules to get to where the errors were. Once I located the file, changing the code was a simple task. I then ran the linting test one last time to ensure everything was working as intended and opened a [pull request](https://github.com/medusajs/medusa/pull/534#event-5458335301).

To my surprise, it was easy to get in touch with the devs and have my code reviewed. I managed to reach out to one of the developers through Medusa's Discord channel, and my pull request was accepted and merged in less than a day.

## Conclusion
Working on something I didn't know about was an interesting experience. I was able to learn how to utilize VS Code to traverse through large projects and gained a better understanding of linting. With Hacktoberfest slowly reaching its end, I'm interested to see where this journey will take me.

Happy coding!
Vk api 
Tags: vk, php, api, class
Published: 2021-10-27 06:25:31

### Warning
VK has a ready-made api, I found out about it later, after I started writing my own!

# Start

![Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2fk2s4nkvq5gy56n7gol.png)

You can immediately [look at the github](https://github.com/Damfler/VKapi/)!

If we analyze here, then this is a class with ready-made functions, for working with the Vk api, there are most functions available to the ordinary user (without groups, communities, ...).

So far, everything remains in beta, since after the news about the ready-made class from the Vk itself, I temporarily stopped the development of the api
Cool Features Of Next JS 12
Tags: javascript, webdev, react, nextjs
Published: 2021-10-27 06:16:24

Today at [Next.js conf](https://nextjs.org/conf), [Vercel](https://vercel.com/) the company behind next.js announced the public availability of next.js 12 which brings a lot of cool features into action

### Rust Compiler Makes build and Refreshes more faster
Next.js 12 includes a brand new Rust compiler that takes advantage of native compilation which gives **3x faster refresh** locally and **5x faster builds** for production which can reduce your CI/CD build time drastically. To turn on the Rust minify feature add `swcMinify: true` to your next.config.js file

### URL Module Imports 😍
Next.js 12 supports CDN module imports which means you can import any HTTP(S) dependencies as a local module. To import any HTTP(S) module just add the following lines to your next.config.js file

```
module.exports = {
	experimental: {
		urlImports: ['https://cdn.skypack.dev', 'https://cdn.anymodule.site']
	}
}
```
Now you can import the module by
`import confetti from 'https://cdn.skypack.dev/canvas-confetti'`

I think it's time to say goodbye to hefty node_modules 🤔. What do you guys think do let me know in the comments below
### Middleware supports
If your app has a common logic for all the server-side rendering this is an amazing feature that lets you share logic between different pages
```
// pages/_middleware.js
// pages/_middleware.js
export function middleware(req, ev) {
	return new Response('Hello, world!')
}

```
### AVIF support 😍
Out of the box Next.js 12 supports [AVIF](https://netflixtechblog.com/avif-for-next-generation-image-coding-b1d75675fe4) image optimization, Reducing your image size by 20% than [WebP](https://developers.google.com/speed/webp)
To enable this feature just add the following to your next.config.js file
```
images: {
	formats: ['image/avif', 'image/webp']
}
```

### Notes

- There were more features that were introduced on Next.js 12 which were not listed here as it contains only some of the cool features that I personally like. To know about all the features kindly read their [blog post](https://nextjs.org/blog/next-12)
- Run `yarn add next@12.0.1` or `npm i next@12.0.1` to install Next.js 12
- Support me on [Patreon](https://patreon.com/gogamic)
Glassmorphism Loading Animation
Tags: css, webdev, beginners, tutorial
Published: 2021-10-27 06:16:15

In this article we are gonna build a loading spinner with the glassmorphism, stay tuned for that first let's look what are we building -

![preview](https://i.imgur.com/3qp2yPz.gif)

We just need simple `div` to create this animation. For this animation we have used pseudo classes and a normal keyframe in which we just `translate` the `::before` and `::after`

**HTML**

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

**CSS**

```css
/* Main Loader */
.loader {
  position: relative;
  width: 180px;
  height: 180px;
}

.loader::before,
.loader::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

/* Loader Blue Circle */
.loader::before {
  background: #5989ff;
  animation: animate 2s ease-in-out infinite;
}

/* Loader Glassmorphism */
.loader::after {
  background: rgba(56, 109, 241, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  animation: animate 2s ease-in-out infinite;
  z-index: 1;
  animation-delay: -1s;
}

/* Animation */
@keyframes animate {
  0%,
  100% {
    transform: translateX(-80px);
  }
  50% {
    transform: translateX(80px);
  }
}
```


**Codepen -**
{% codepen https://codepen.io/j471n/pen/LYjybwJ %}

### Conclusion

So after that, you can use it anywhere in your project. And let me know what do you think about it. If you like it then consider a follow, because I am gonna build more things like this.

<blockquote>
<p>You can now extend your support by buying me a Coffee.😊👇</p>
</blockquote>
<a href="https://www.buymeacoffee.com/j471n"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" loading="lazy" width="545" height="153"></a>


#### Also Read
- [10 CSS Resources that you should bookmark](https://dev.to/j471n/10-css-resources-that-you-should-bookmark-46l6)
- [Some Strange Concept of JavaScript](https://dev.to/j471n/some-strange-concept-of-javascript-4icc)
- [Some Javascript Methods you should know](https://dev.to/j471n/some-javascript-methods-you-should-know-i15)
What are the benefits of the Applicant Tracking System?

Published: 2021-10-27 06:09:31

An ATS tracking system is not only just about tracking, filtering, and ranking. Listed below includes some of the eye-opening benefits of an applicant tracking system that you must check out if you want to optimize your hiring process!





* Pulls out the best fit 

As said earlier, an ATS recruitment tracker automatically sorts resumes based on recruiters’ criteria using ML algorithms. Hence, HRs no longer need to spend their time cross-checking thousands of resumes in their mailboxes. Since job applicant tracking software automatically completes the process with accuracy and perfection!



* Hiring process automation

Starting from developing JDs to replying to selected candidates and other administrative tasks, HR teams no longer need to put their precious time behind time-consuming operations. Since an HR ATS recruitment tracker accomplishes all these tasks with the power of automation. 



* Time-to-hire increment

According to a GetApp report, 86% of ATS software users have seen an increment in the speed they take to hire candidates. This also helps to reduce hiring costs!



* Easy resume tracking 

Rather than congesting mailboxes, recruiters can store and access categorized candidate information from the secured cloud servers. Moreover, these cloud servers protect candidate and organizational data from data breaches, hacking, and other cybercriminal activities. Hence, recruiters can easily select the resume they are looking for using the filter option on the applicant tracking system software. 



* Performance and data analytics

ATS applicant tracking system also provides actionable predictive performance insights using data analytics. Hence, recruiters can identify loopholes in the recruitment process and take action against it in real-time. 



* Intensified communication 

Recruiters can easily share their feedback on an interview with other members of the recruiting team using an ATS applicant tracking system. An applicant management software offers the option to make and share notes and ratings manually for enhanced communication. 



* Enhanced applicant experience 

With elevated branding career pages, an online professional page-based application process, and automated instruction and support, applicants get an enhanced experience. Moreover, candidates can appear for their interviews right from their phones. Since applicant tracking system software is mobile-friendly. Moreover, many HR ATS recruitment trackers support multiple languages for effective understanding and a streamlined recruitment process. 



* Reduces hiring costs 

Organizations usually spend around $1857 to hire someone new for this job. Due to the reduction of hiring time using automation, job applicant tracking software recruiters can save this and above!

Hence, automate your job <a href=”https://www.cronj.com/birbal/how-applicant-tracking-system-is-innovating-the-recruitment-scenario” rel=”nofollow”>applicant tracking software</a> to enhance recruitment workflows and cut down costs with Birbal! Ring us up today for having an advanced experience.
Weekly web development resources #93
Tags: weekly, webdev
Published: 2021-10-27 05:55:49



______

##[Analyze CSS](https://www.projectwallace.com/analyze-css)
[![Analyze CSS](https://wweb.dev/weekly/content/93/css-analyzer.jpg)](https://www.projectwallace.com/analyze-css)
A website to analyze your website's CSS, by entering the URL or pasting the CSS.

______

##[useAwsui](https://www.npmjs.com/package/use-awsui)
[![useAwsui](https://wweb.dev/weekly/content/93/aws-ui.jpg)](https://www.npmjs.com/package/use-awsui)
A collection of React hooks for the AWS UI components.

______

##[We Analyzed 425,909 Favicons](https://iconmap.io/blog)
[![We Analyzed 425,909 Favicons](https://wweb.dev/weekly/content/93/favicons.jpg)](https://iconmap.io/blog)
An article about some insights on favicons of various websites.

______

##[Linaria](https://linaria.dev/)
[![Linaria](https://wweb.dev/weekly/content/93/linaria.jpg)](https://linaria.dev/)
A library to write CSS in JS, but with zero runtime.

______

##[Water.css](https://watercss.kognise.dev/)
[![Water.css](https://wweb.dev/weekly/content/93/watercss.jpg)](https://watercss.kognise.dev/)
A CSS library to add styles to simple static websites with semantic html. 

______

##[136 facts every web dev should know](https://www.baldurbjarnason.com/2021/100-things-every-web-developer-should-know/)
[![136 facts every web dev should know](https://wweb.dev/weekly/content/93/webdev-facts.jpg)](https://www.baldurbjarnason.com/2021/100-things-every-web-developer-should-know/)
An interesting list by Baldur Bjarnason.

______

##[Magit](https://magit.vc/)
[![Magit](https://wweb.dev/weekly/content/93/magit.jpg)](https://magit.vc/)
A text-based user interface to Git, which looks similar to the output of git itself.

______

##[Image Optimization Test](https://images.cloudflare.com/)
[![Image Optimization Test](https://wweb.dev/weekly/content/93/image-test.jpg)](https://images.cloudflare.com/)
A nice tool by Cloudflare, to test how well your images are optimized.

______

##[Optimizing resource loading with Priority Hints](https://web.dev/priority-hints/)
[![Optimizing resource loading with Priority Hints](https://wweb.dev/weekly/content/93/prio-hints.jpg)](https://web.dev/priority-hints/)
An article on how to use priority hints to enable optimal loading.

______

##[Lorem.space](https://lorem.space/)
[![Lorem.space](https://wweb.dev/weekly/content/93/lorem-space.jpg)](https://lorem.space/)
A placeholder image generator for various categories.

______

##[HTML with Superpowers](https://daverupert.com/2021/10/html-with-superpowers)
[![HTML with Superpowers](https://wweb.dev/weekly/content/93/HTML-with-superpowers.jpg)](https://daverupert.com/2021/10/html-with-superpowers)
A nice talk by Dave Rupert about Web Components.

______

##[Hotkey](https://github.com/github/hotkey)
[![Hotkey](https://wweb.dev/weekly/content/93/hotkey.jpg)](https://github.com/github/hotkey)
A tool to trigger an action on an element with a keyboard shortcut. 

______

To see all the weeklies check: [wweb.dev/weekly](https://wweb.dev/weekly)
1300+ Linux commands manuals
Tags: linux, ubuntu, webdev, programming
Published: 2021-10-27 05:38:44

When I jump Operating System from Windows to Linux, I don't have ideas to using it smoothly. After 4 years, I have knowledge base about Linux Operating System.
So, what is my experiences? I starting with basic commands in Linux like: cat, grep, mkdir, chmod, awk, sed, mv, find, .. and so much more.

Today, I share with you Bookmark Linux commands I often use for looking for Commands manuals.

[https://manualsrepo.com/brands/linux/commands](https://manualsrepo.com/brands/linux/commands)

Thank you so much for reading my post :heart:
Deploying a Static Website In a Container and  Ship it any Anywhere 
Tags: docker, devops, webdev
Published: 2021-10-27 05:15:21

What is Docker?

Ans: Docker is a set of platform as a service products that use virtualization to deliver software in packages called containers. Containers are isolated from one another and bundle their own software, libraries and configuration files.

Steps that we are going to perform:
1. Creating Docker file
2. Create an image of our static website with use of Docker file
3. Push that image to Docker Hub
4. Run that container on Server


**Creating Docker File:**
```
FROM nginx:latest
COPY . /usr/share/nginx/html
EXPOSE 80
CMD [“nginx”,”-g”,”daemon off;”]
```

FROM — is where we are pulling our official image from nginx is an official image provided by Docker

COPY — is taking our all file from out local directory were are working in and moves it into the /usr/share/nginx/html directory(of NGINX) in our container.

EXPOSE- is a instruction letting the container know we are exposing the port 80 (TCP)

CMD- provide defaults for an executing container



**Create an image of our static website with use of Docker file:**

For that we have to execute command and that is:

```
docker build -t "<name of image you have to put>" .
```

This command means :

-t = Tag
"<name of image you have to put>" = your image name 
. = it will take dockerfile form present location.

So in my case, I am going to give image name as nipun2020/docker-community-rajkot

command will be for me :)
```
docker build -t nipun2020/docker-community-rajkot .
```


**Push that image to Docker Hub**

To push our image in docker hub for that we will use this command

docker push <image name>

in my case it will be -> ```
docker push nipun2020/docker-community-rajkot
```



**Run that container on Server**

Login into your server and make sure docker is installed on your server.

and just hit this command and your container will be running on your server.

```
docker run -p 80:80 nipun2020/docker-community-rajkot
```

So by use of this command your static website will be running with the use of Docker.

Demo of static site is hosted:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z3rudnw7sdkcekc0vdth.png)

Thank you for reading this blog, hope you learned some new thing.

If, you have any doubt you can contact me on LinkedIn
LinkedIn: https://www.linkedin.com/in/nipun-parekh-6006a0152/
iRead - Product Hunt
Tags: python, webdev, django, javascript
Published: 2021-10-27 05:15:03

Hi Bloggers,

iRead is an open platform where readers find dynamic thinking, and where expert and undiscovered voices can share their writing on any topic.

Currently it has the following features :

- Authentication and Authorization with OTP Verification
- Social Login with Google OAuth2
- CRUD on User's Profile and Blog Posts
- Rich Text Editor(using CKEditor) with Media Files Storage(using Cloudinary)
- Search Blogs
- Categories and Tags Filters
- Like/Dislike/Comment/Reply/Share on Blog Posts
- Follow/Unfollow Users
- Notifications on new followers/likes/comments
- [Twitter Bot](https://twitter.com/iReadBot) to tweet about posts published on website as well as retweet and like user's post (if they share it on Twitter)
- Bulletins(Newsletter) Subscription/Unsubscription
- Payment Integration using Paytm and Razorpay

Tech Stack : HTML, CSS, Javascript, Django

The blog is not only for technical blogs only, it can feature posts from any categories.

Website Link : https://iread.ga
Product Hunt Link : https://www.producthunt.com/posts/iread
Github Link : https://github.com/ashutoshkrris/iRead
Demo Video : https://youtu.be/jLdJnVgpV8U
Facebook : https://facebook.com/ireadblog
Twitter : https://twitter.com/iReadBot

Thank you!
How to integrate TailwindCSS with ReactJS ? (In 9 easy steps)
Tags: javascript, tailwindcss, react
Published: 2021-10-27 05:13:56

1) Create a react application(with a name of your choice):
```create-react-app tailwind-react```
2) Install the following dev dependencies:
```npm i -D tailwindcss postcss-cli autoprefixer```
3) Generate the tailwind config file (has a list of all the classes):
```npx tailwind init tailwind.js -full```
4) Create a postcss.config.js file:
```touch postcss.config.js```
5) Write the following code in postcss.config.js:
```javascript
const tailwind = require("tailwindcss");
module.exports = {
	plugins: {
    	tailwindcss("./tailwind.js)
    	require("autoprefixer)
	}
}
```
6) In the src folder create a new folder 'assets' and create 2 new files "tailwind.css" and "main.css"
```cd src```
```mkdir assets && cd assets```
```touch tailwind.css main.css```

7) In tailwind.css write the following piece of code:
```javascript
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utility";
```
8)Now, in package.json add follwing to ``` "scripts":{} ```

```javascript
"start": "npm run watch:css && react-scripts start",
"build": "npm build build:css && react-scripts build",
"build:css":"postcss src/assets/tailwind.css -o src/assets/main.css",
"watch:css":"postcss src/assets/tailwind.css -o src/assets/main.css",
```
Your scripts object should look something like this:
```javascript
"scripts": {
    "start": "npm run watch:css && react-scripts start",
    "build": "npm run build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/assets/tailwind.css -o src/assets/main.css",
    "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css"
  },
```
9) Finally, run your react app:
``` npm run start ```
or 
``` npm start ```
For a video demonstration of this entire process, please refer to @traversymedia  's video
https://www.youtube.com/watch?v=FiGmAI5e91M&t=488s