teleren/devto huggingface dataset:
Animation -3 : CSS push pop loaders
Tags: css, webdev, animation, design
Published: 2023-03-13 14:30:00

Are you looking for animations to enhance your website? We've got you covered with our wide selection of creative and engaging #animations. Say goodbye to endless searching and hello to seamless integration on your website!

#### We're excited to introduce our latest YouTube series, which features diverse creative and inspiring website animations.

---

In our short videos, you'll find a variety of #animations that can be easily implemented on your website to enhance user experience.


---

### CSS push pop loaders 

---

{% youtube CZcEDsdrkI4 %}

 ---
### [Source code](https://codepen.io/jh3y/pen/ZEEEGWr)


---
## 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/)
- Sudoku Game And API
[https://sudoku-game-and-api.netlify.app/](https://sudoku-game-and-api.netlify.app/)

---
---
Start use chrome extension of The Marvellous Suspender
Tags: development
Published: 2023-03-13 13:26:09

---
title: Start use chrome extension of The Marvellous Suspender
published: true
description: 
tags: development
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-03-13 07:28 +0000
---


Start use chrome extension of The Marvellous Suspender
Everyday do development and investigation in work and hobby.
At such time I using chrome. Open many web site in tab. 
So my mac to be heavy. I have think  this reason is javascript that are processing while no access the pages. That process are polling etc...
This extension suspend tab which long time no access, and display snapshot image each pages.



[The Marvellous Suspender - Chrome ウェブストア](https://chrome.google.com/webstore/detail/the-marvellous-suspender/noogafoofpebimajpfpamcfhoaifemoa)
Confused coder life !!
Published: 2023-03-13 12:54:29

confused question is :
I'm a code lover, i have very good basics in most of programming languages such as C++, JS, Golang, Perl
But i didn't find my passion yet, sometimes i learn web dev for while i find myself learning networking and a moment again i find myself in game dev, but my soul is in love something call hacking, 
how to access inside systems and networks 
that's why i decide to invest my programming knowledge in cyber security especially in malware programming , i want one day to make a tool like wireshark or metasploit or a strong malware,
 but i see a lot of people talking about certifications 
and for me i don't have money to pass certifications , I can just study them and gain knowledge is that good to work as an ethical hacker in freelance or with a company without certifications but with skills ?
My first post!
Tags: beginners, webdev, bootcamp, career
Published: 2023-03-13 16:43:18

Hey guys, i am new here. I started my journey about 5 weeks ago. 
Joined a bootcamp, and currently struggle with #javascirpt...

Hope to find new friend here :)

https://www.youtube.com/watch?v=IN-Pz12TUdI&ab_channel=AkzMedia
Cors problem
Tags: javascript, beginners, node
Published: 2023-03-13 19:22:39

Cross-Origin resource sharing or also known as 'cors':

When we set up a nodejs server is really important to add two lines of code that will keep you out of this kind of trouble.

At the nodejs server we will go and we will import 'cors'

```js
const cors = require('cors')
```

And then we will have to call cors in our app in order to use it as follows.

```js
app.use(cors());
```

Remember to install cors in your nodejs project as follows.

`npm i cors`

This will solve you headaches.

Hope someone found it useful.

Lautaro.
Db login
Published: 2023-03-14 02:09:35

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.Scanner;
import java.util.logging.Level;
import java.util.logging.Logger;




/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

/**
 *
 * @author A
 */
public class Practical1 {
    public static void main(String args[]){
        try {
            Class.forName("com.mysql.jdbc.Driver");
            Connection Con = DriverManager.getConnection("jdbc:mysql://localhost:3306/javapoint","root","");
             Statement stmt = Con.createStatement();   
           Scanner sc= new Scanner(System.in); 
           
           String name= sc.next();
           stmt = Con.createStatement();
           stmt.executeUpdate("INSERT INTO login ('username', 'password') VALUES ('a',13);");
           System.out.println(name + " is added successfully");
           stmt.executeQuery(name);
                ResultSet rs = stmt.executeQuery("select * from login");
                while(rs.next()){
                    System.out.println(rs.getString(1)+" "+rs.getInt(2));
                }
            }
        } catch (ClassNotFoundException | SQLException ex) {
//            Logger.getLogger(Practical1.class.getName().log()Level.SEVERE,null,ex);
            System.out.println(ex);
        }
    }
}
Build your first data pipeline with Aiven for Apache Flink®
Tags: apacheflink, streaming, datapipeline
Published: 2023-03-14 07:35:48

Learn to start working with Aiven for Apache Flink® from creating the service, exploring integrations provided by the Aiven Console and creating a streaming data pipeline to filter messages from an Apache Kafka topic.

{% embed https://youtu.be/RT5zjEWc1mg %}

Check out these resources to learn more: 
(links to any tools or resources you used in the video, our docs/trial if appropriate)

https://docs.aiven.io/docs/products/flink

Contact me for any questions!
Devkeys 😊keycaps
Tags: devkeys, javascript, github, keycaps
Published: 2023-03-14 15:00:50


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mgmes7m0lpnizwwd7tgc.png)With our love and passion for keycaps, we started making the first keycaps according to our wishes 😊.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6z1fcd4z7in5wxmejybx.png)
Avocado
Tags: react, redux, javascript, tailwindcss
Published: 2023-03-14 21:11:32

Concept:

Our group decided early on that we liked the idea of doing a food related app, an ordering, back of house, reporting tool that could be used by a customer to order food, but also by the restaurant to get the food ready, and the owner to review revenue and edit menu information. Our idea was to create an app similar to Toast, so we decided to call our app "Avocado". 

Team Roles:

Corey set up our Supabase schema, our initial routes and multiple table backend routes, connecting our backend and frontend servers and creating the reporting system for the back-of-house operation page.

Peter designed our brand identity and styling, creating the restaurant logos and layout with Adobe Illustrator, and implementing the menu, cart, and order confirmation pages as well as their frontend Supabase routes. 

Jaye was our project manager and styling TailwindCSS specialist, leading our multiple daily standups, acting as our instructor liaison, creating our mockup flow chart in Figma and database schema in DB designer, as well as managing our Github project tracking page, setting up our Supabase storage, and deploying our project front and back ends on Render. 

Meg designed the login, signup, and dashboard logic as well as the reducers slice for our Redux state, implementing state persist, our front-end routes and state logic queries, and creating our reporting in Plotly to showcase database statistics.

Blockers:

Although choosing to use Supabase allowed us to easily authenticate and grab our token to set into state, we later discovered Supabase automatically set user emails to lowercase when they were put in the authentication table, which caused an issue when we tried to query them. Other blockers were how Supabase handled image storage, and its timing delay of returning data that generated the need to conditionally render many of our designs.

Final Thoughts:

In total, our project included React, Redux, JavaScript, Supabase, Plotly, Toastify, TailwindCSS, and State Persist - many of which were used for the first time by at least one person in our group. Overall, our project definitely pushed us to learn new tools and technologies and we are proud to present our food service app, Avocado!

[Project Repo - Frontend](https://github.com/Lasseignejk/Avocado-frontend)
[Project Repo - Backend](https://github.com/Lasseignejk/Avocado-backend)
[Project Site](https://avocado-frontend.onrender.com/)
[Project Walkthrough](https://youtu.be/wsLZCA090U4)
how to install Miniconda on a Linux Notebook?
Tags: conda, anaconda, vscode, python
Published: 2023-03-15 01:04:19



You can install Miniconda on a Linux notebook by following these steps:

Download the appropriate Miniconda installation script for your Linux distribution from the official Miniconda website. Choose the version that matches your operating system and architecture (e.g., Linux 64-bit or 32-bit).

Open a terminal window and navigate to the directory where the Miniconda installation script was downloaded.

Make the installation script executable by running the following command:


`chmod +x Miniconda3-latest-Linux-x86_64.sh
`
Replace Miniconda3-latest-Linux-x86_64.sh with the actual name of the installation script that you downloaded.

Run the installation script by running the following command:

`./Miniconda3-latest-Linux-x86_64.sh`

Again, replace Miniconda3-latest-Linux-x86_64.sh with the actual name of the installation script.

Follow the prompts in the installation script to complete the installation. You will be asked to accept the license agreement, choose the installation location, and specify whether you want Miniconda to be added to your system path.

Once the installation is complete, close the terminal window and open a new one to ensure that the changes to your system path are recognized.

Verify that Miniconda is installed correctly by running the following command:

`conda --version
`
This should display the version number of the Miniconda package manager.

That's it! You can now use Miniconda to create Python environments and install packages on your Linux notebook.
NoodleShop: Revolutionizing Transactions with Decentralized Escrow Services
Tags: gamedev, webdev, career, hiring
Published: 2023-03-15 03:54:05


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ips8xgh689k4zzpbtc8o.png)
As the gig economy and remote work continue to expand, the need for secure and efficient methods to conduct transactions becomes more critical. That's where NoodleShop comes in – a decentralized platform designed to revolutionize the way individuals and businesses conduct transactions with verified funds and agreements.

In this post, we'll explore the key features of NoodleShop, how it's set to transform the staffing industry, and its potential applications across various sectors.

NoodleShop: A Blockchain-based Escrow Solution

NoodleShop is a smart contract escrow service built on blockchain technology. It provides a secure and user-friendly platform for individuals and businesses to conduct transactions, eliminating the fear of scams and non-payment. Key features include:

Decentralized platform: NoodleShop's blockchain-based system ensures secure and transparent transactions, reducing the reliance on centralized intermediaries.
Smart contracts: NoodleShop uses smart contracts to verify agreements and securely hold funds in escrow until the completion of agreed-upon deliverables.
Wide range of applications: The platform is not limited to staffing positions and can accommodate various industries and services with customizable agreements.
The Impact on the Staffing Industry

NoodleShop aims to tap into the growing $500 billion global staffing industry by providing a unique approach to staffing services. Its decentralized nature, combined with the use of smart contracts, brings a much-needed solution to the challenges faced by freelancers, gig workers, and businesses. NoodleShop allows users to find and hire help quickly and easily, ensuring secure transactions and verified agreements.

Potential Uses for NoodleShop:

While NoodleShop's primary focus is on the staffing industry, its potential extends to various sectors and use cases. Examples include:

Freelance services
Consulting and coaching
Content creation and marketing
Web and app development
**Gaming development** (We have big plans for game devs that join)

Conclusion:

NoodleShop is poised to make a significant impact on the staffing industry and beyond by leveraging blockchain technology and smart contracts to provide a secure and easy-to-use platform for transactions. As the gig economy and remote work continue to grow, NoodleShop's innovative approach to decentralized escrow services will undoubtedly benefit both service providers and clients alike.

Get involved and learn more about NoodleShop by visiting [https://www.noodleshop.xyz/]
(https://www.noodleshop.xyz/) 
Follow us on Twitter:
[https://twitter.com/NoodleshopMkt](https://twitter.com/NoodleshopMkt)
Join the Tokyo Rebels Discord for any and all questions:
[https://discord.gg/tokyorebels](https://discord.gg/tokyorebels)
A new Go web framework inspired by FastAPI
Published: 2023-03-15 09:59:03

My two main programming languages are Python and Go. When it comes to building APIs, I've always leaned towards Python due to its simplicity. However, Python can be quite slow. That's why I've developed an easy-to-use and efficient Go web framework for crafting simple and speedy APIs. Enjoy!

https://github.com/hvuhsg/GoAPI
Introducing Myself
Tags: webdev, javascript, beginners, frontend
Published: 2023-03-15 13:43:58

Hello, my name is _**Adremy**_, and I am a frontend web developer currently learning JavaScript. Before getting into tech, I started out as a content writer, but I've always been interested in technology and its limitless possibilities. So, I decided to make the switch and become a front-end developer. It has been an exciting journey so far, and I am determined to make the most of it.

As with any journey, there have been challenges along the way. One of the biggest challenges I faced was learning how to code from scratch. I had no prior knowledge of HTML, CSS, or any programming language. However, with a lot of determination and dedication, I was able to learn HTML5, CSS3, and Tailwind CSS in just seven months. It was a huge achievement for me, and it gave me the confidence to keep going.

Currently, I am learning JavaScript. I have learned about the basics so far, which include data types, variables, arrays, and an introduction to objects. I started my learning journey from freeCodeCamp, but I later switched to a video course by Bro Code. I found that I work better with video tutorials, and it has helped me to understand the concepts better.

Over the next 30-45 days, I will be focusing on tutorial-based JavaScript projects. I aim to build a bit of muscle memory around JavaScript while understanding the whys and logic of each process. I made a promise to become a React developer before the end of 2023, and I am proud of the progress I’ve made so far.

As I continue on my journey to becoming a React developer, I hope to connect with fellow developers. I believe that collaboration and networking are essential to success, and I am excited to be a part of this vibrant community. There is still a lot for me to learn, but I am excited about the possibilities and look forward to what the future holds.
How I Built a Website That Generated 7,000 Articles in One Week with ChatGPT
Published: 2023-03-15 14:01:44

 I wanted to share with you a unique project I recently completed, which I believe could be of interest to your readers.

In just one week, I was able to generate over 7,000 articles, each with approximately 800 to 1000 words, using the GPT 3.5 Turbo API in a fully automated manner. I achieved this through a Python script (also generated by GPT), where I fed a list of topics, and it generated the content and automatically posted it on WordPress. Additionally, I integrated the Google Images API to capture the image and post it automatically, allowing me to create around 10 posts per minute. What's more, I accomplished all this with a budget of only $40.

However, I'm still uncertain about how Google or Bing will handle this AI-generated content and whether it will impact SEO, but I'm here to investigate further.

What makes this project particularly unique is that I have very little programming knowledge. Using GPT, I was able to create a python algorithm that generated content through an API, something I had never done before and didn't even know how an API worked. Furthermore, GPT helped me learn how to integrate the API with WordPress, and I also used it to create an algorithm for providing a thumbnail for each post. Lastly, I combined all of these algorithms into one, creating something that I never thought I could do. Though I can't say whether it's useful or not, the project gave me a great sense of inner peace and satisfaction.

I believe this project could inspire others who may not have considered AI as a tool for learning and creating before. If you're interested in sharing my story and experience with your readers, I would be honored to discuss this further with you.

I invite you to check out my website, https://www.tigove.com, to see the project in action.
How to find PostgreSQL DB growth rate?
Tags: postgres, database, devops
Published: 2023-03-15 21:23:14

Approach #1

```
with
a as (select table_name, pg_total_relation_size(table_name) table_size_b from (SELECT ('"' || table_schema || '"."' || table_name || '"') AS table_name FROM information_schema.tables where table_schema='public') M),
b as (select table_name, pg_total_relation_size(table_name) table_size_b from (SELECT ('"' || table_schema || '"."' || table_name || '"') AS table_name FROM information_schema.tables where table_schema='public') M, pg_sleep(10))
select
a.table_name, sum(b.table_size_b-a.table_size_b) as growth_rate_bytes
from a,b
where a.table_name= b.table_name 
group by 1
order by 2 desc;
```

Approach #2

```
drop table if exists temp_storage_growth_trend_a;

drop table if exists temp_storage_growth_trend_b;

create table temp_storage_growth_trend_a
as
 select
    datname,
    round(sum(pg_database_size(pg_database.datname))/1024/1024, 2) AS size_in_MB,
    round(sum(pg_database_size(pg_database.datname))/1024/1024/1024, 2) AS size_in_GB
from pg_database
group by datname;

-- wait some time

create table temp_storage_growth_trend_b
as
 select
    datname,
    round(sum(pg_database_size(pg_database.datname))/1024/1024, 2) AS size_in_MB,
    round(sum(pg_database_size(pg_database.datname))/1024/1024/1024, 2) AS size_in_GB
from pg_database
group by datname;

select a.datname, b.size_in_MB - a.size_in_MB the_growth_rate_in_MB
from temp_storage_growth_trend_a a, temp_storage_growth_trend_b b
where a.datname = b.datname
order by 2 desc;
```
Parallel Query in PostgreSQL
Tags: postgresq, apacheage
Published: 2023-03-15 22:50:11

## Introduction
Nowadays, CPUs have a vast amount of cores available. For a long time, applications have been able to send queries in parallel to databases. When it comes to reporting queries that work with a vast number of table rows, the ability of a query to utilize multiple CPUs can significantly enhance the speed of its execution. In essence, parallel query execution is a powerful tool that enables faster processing of large data sets.

![PSQL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v1au4ifwtajd2njxc8vs.png)

## Parallel Query
_Parallel query_ is a very useful feature, improving performance especially for queries that involve large data sets or complex calculations, by executing a query in parallel across multiple CPUs or servers to execute a single query, the system resources can be utilized more efficiently. This can lead to better overall system performance and increased throughput.

## Example
Supose that we are using a Car Database. Assuming we want to make a query that returns all "Ford" brand cars with a price above 30,000, sorted by year of manufacture. We can use parallelism to speed up the execution of this query as follows:
**Table**
![Table](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ctu5aep10mvzp5t8foq9.png)

_Query example_:
`SET max_parallel_workers_per_gather = 4;
      SELECT *
      FROM cars
      WHERE make = 'Ford' AND price > 30000
      ORDER BY year;`

The function `SET max_parallel_workers_per_gather = 4;` sets the maximum number of parallel workers that can be used by a single Gather or Gather Merge node in a query plan. By setting this parameter to 4, as in the given function, a single Gather or Gather Merge node can use up to 4 parallel workers, which can increase the overall performance of the query by utilizing more system resources. 


![Result of query](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4c5z5hx4eyz1ac3xjghb.png)

## Conclusion
I'm on my personal computer, but doing this in a very huge system that contains a big database, you can improve the performance to use queries that needs to running through in a lot of data.

References: [PostgreSQL - How Parallel Query Works](https://www.postgresql.org/docs/current/how-parallel-query-works.html
)