teleren/devto huggingface dataset:
Weekly web development resources #111
Tags: weekly, webdev
Published: 2022-03-02 06:23:48



______

##[Flowbite](https://flowbite.com/)
[![Flowbite](https://wweb.dev/weekly/content/111/flowbite.jpg)](https://flowbite.com/)
An open-source library of over 400+ web components and interactive elements built with Tailwind CSS.

______

##[SuperShields](https://supershields.io/)
[![SuperShields](https://wweb.dev/weekly/content/111/supershield.jpg)](https://supershields.io/)
Supercharged SVG status badges/shields for your Github repository.

______

##[awesome-tunneling](https://github.com/anderspitman/awesome-tunneling)
[![awesome-tunneling](https://wweb.dev/weekly/content/111/awesome-tunneling.jpg)](https://github.com/anderspitman/awesome-tunneling)
List of ngrok alternatives and other ngrok-like tunneling software and services.

______

##[shell.how](https://www.shell.how/)
[![shell.how](https://wweb.dev/weekly/content/111/shell.jpg)](https://www.shell.how/)
A website that explains how your shell command works by using open-source data from Fig.

______

##[v8n](https://github.com/imbrn/v8n)
[![v8n](https://wweb.dev/weekly/content/111/v8n.jpg)](https://github.com/imbrn/v8n)
A simple validation library for use in any context.

______

##[SPCSS](https://github.com/susam/spcss/)
[![SPCSS](https://wweb.dev/weekly/content/111/spcss.jpg)](https://github.com/susam/spcss/)
A simple and plain stylesheet for simple text-based websites.

______

##[React Shimmer](https://github.com/gokcan/react-shimmer)
[![React Shimmer](https://wweb.dev/weekly/content/111/react-shimmer.jpg)](https://github.com/gokcan/react-shimmer)
A Suspense-like img component that (optionally) simulates a shimmer effect while loading. 

______

##[Eesings](https://easings.net/)
[![Eesings](https://wweb.dev/weekly/content/111/easings.jpg)](https://easings.net/)
A page that helps you choose the right easing function.

______

##[free-programming-books](https://ebookfoundation.github.io/free-programming-books/)
[![free-programming-books](https://wweb.dev/weekly/content/111/free-books.jpg)](https://ebookfoundation.github.io/free-programming-books/)
A huge list of free programming books in various languages.

______

##[Hoppscotch](https://hoppscotch.io/)
[![Hoppscotch](https://wweb.dev/weekly/content/111/hoppscotch.jpg)](https://hoppscotch.io/)
An open-source alternative for Postman.

______

To see all the weeklies check: [wweb.dev/weekly](https://wweb.dev/weekly)
Most Efficient Way to Create a Django Project and Django App
Tags: django, beginners, python
Published: 2022-03-02 06:06:46

In this blog, I will explain and illustrate with pictures/commands the most effective ways to create a Django project from scratch.

Source- [Django Documentation](https://docs.djangoproject.com/en/)

First things first, because of the various dependencies in Python version and OS restrictions, I feel that the best way to start a Django project is using the virtual environment. Some of the problems that I faced while installing Django are 

1. pip is not supported in the latest macOS instead we need to use **pip3**
2. New macOS has inbuilt Python version 2.7.18 and if we try to install any later versions there are a lot of changes to be made in the path(.zshrc file for macOS) 

Anaconda is also an option to solve the python versioning problem but again we have to install Anaconda  for that purpose. Thus, creating a virtual environment to start the project is the best way to it. 

<aside>
💡 I am using **Python version 3.8.9** with **Django version 2.2.26.**

</aside>

### Steps to create a Django project:

- Set up the virtual environment

```python
python3 -m venv django-env
```

- Activate the virtual environment:

```python
source django-env/bin/activate
```

- Install Django in the virtual environment:

```python
python -m pip install django
```

This will create the root directory with the same name as the project name with [manage.py](http://manage.py) file that is required for running all further commands while working models and Django server. It will also create another folder with the project name that is the actual Python package for your project which contains the __init__.py, settings.py, urls.py, asgi.py, wsgi.py.

<aside>
💡 You can check the project structure by going to /Users/<username>/django-env

</aside>

Alright then, lets check if the project works on localhost. To do the same run the following command-

```python
python manage.py runserver
```

If you have completed the above steps, you can run the following command to start an application which will contain the models, templates folder and views for building the webapp.

### Steps to create a Django App

```python
python manage.py startapp myapp
```

This will create a directory structure as shown below-

```
myapp/
    __init__.py
    admin.py
    apps.py
    migrations/
        __init__.py
    models.py
    tests.py
    views.py
```

<aside>
💡 All apps that are created will be listed under the root directory of the Django **project**

</aside>

You can check the entire project on [GitHub](https://github.com/shlokabhalgat/DjangoProjectVenv.git) or start building your application on top of it directly.
Getting Started with Docker
Tags: docker, github
Published: 2022-03-01 02:57:52

## Why is Docker so Powerful?

- Docker is essential for developers in building, deploying, running, updating, and stopping containers. A container is an executable package of software. Docker makes it easier and safer to create containers than without it.

## How to Start

- First, you will need to create an account [Here](https://www.docker.com/). 

- Then you go to the terminal, click `New Instance` and run `git clone https://github.com/heyMP/news-api-workshop && cd news-api-workshop` in the terminal.

- Then, you run `cp dot.env.example dot.env` in order to get a new copy of environment settings. 

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

- This creates a file `dot.env`. Then you click `Editor` and find the `dot.env` file. You will need to get an API key and public url.

- Go to [API KEY](newsapi.org), create an account, and it will  generate your personal key. 

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

- You take your personal API key and replace it in the `dot.env` and SAVE.

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

- Now you click `PORT` and enter `4000` and click ok.

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

- It should show page isn't working.

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

- You can take the url and and put it here `NEWS_ENDPOINT= ` in `dot.env`.

- Finally, you can run `docker-compose up`. Ports 80 and 4000 pop up and you can click `4000` to see the application.

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

**[Here](https://github.com/heyMP/ist402-docker/tree/master/labs/7-news-api-microservice) is the link I followed.**
FREE WEBSITE HOSTING FOR DEVELOPERS
Tags: webhosting, developers, web, webdev
Published: 2022-03-02 05:53:41



## **1.GitHub Pages**

(pages.github.com)

Keeping your projects together and hosting them ? A win-win.


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


## **2.Heroku**

(heroku.com)

The free version is pretty slow but it's worth hosting backend related stuff.


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



## **3.Firebase Hosting**

(firebase.google.com/docs/hosting)

A personal favorite of mine! Pretty easy to setup with its CLI.



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

## **4.Vercel**

(vercel.com)

Vercel is starting to become my favorite. Provide analytics (free to some extent ). Nextjs works really well with Vercel too!


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

## **5.Netlify**

(netfliy.com)

Netlify is a pretty powerful hosting service. Well known for its JAMStack Architecture. They do great with team workflow too!



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


## **6.Surge**

(surge.sh)

Surge comes in handy when it comes to static site publishing. Public your HTML,CSS and JS files with ease !


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f9aog262eqpr30pxnrqh.png)
Coming to Web3 from Web2
Tags: web3, blockgames, blockchain, firestarter
Published: 2022-03-02 05:53:00

As a backend developer that's curious about **web3**, I have, so far learnt that the two webs differ in the following very basic and simple ways.

- In the very ancient world of web2 that we're coming from, where we still use usernames and passwords to authenticate, We store all data, including user data, pertaining to an application centrally(in one place), usually controlled by a single entity.

This is not the case in the very progressive and futuristic world of web3 that you are about to enter. in our bright new world, data is stored on the blockchain, this means it's not stored at just a single place, yeah, i know what your'e thinking, **Database?!**

well, it's pretty easy to explain my friend,  there's no single database. it's all distributed across different nodes on the blockchain. Think of it this way, if you were to write your name on a single piece of paper and keep it inside a locker at home, then you know exactly where your paper is, and if someone where to break your locker and take it away, then it's gone. That's basically how it works in web2.

Now, imagine if you wrote your name on a piece of paper, and then thousands of little copies of that paper are made and distributed and registered across the world. Now, your paper is everywhere. No one can steal it and deny your the pleasure of reading your name on your paper, because you can just easily get it from another source that registered it. No one person or entity controls or can take it down. This means there is no single point of failure. 
And that, my very dear old friend, is how web3 works!

In a summarised one sentence, Web3 is basically a database on a blockchain! 

- Oh, yeah. authentication is also pretty simple, you just connect your wallet and it's done. No need to input any usernames and passwords. this means you get to keep your own data yourself and only present them where you want to. Imagine using the same credentials for every application or website that you want to visit and interact with. This is actually possible in web3, in fact, that's how it's done.

This isn't the case with web2 where you have to send in your details to every new app or platform that you want to register on.

That's all folks.

ps, I just enrolled in a cool new web3 internship organised by [Blockgames](https://blockgames.gg/), [Nestcoin](https://nestcoin.com/), and [Zuriteam](https://zuri.team/) it's pretty fascinating so far. wagmi
Nevertheless, Miriam Has Coded since 2003!
Tags: wecoded, womenintech
Published: 2022-03-02 05:50:46

## I pledge to break the bias in tech by supporting and lifting other women and minorities and bringing more diverse role models

## Throughout my career (as a software developer, in tech, etc), I have overcome impostor syndrome, demotivation, lack of opportunities, self-doubt, low wages

## I’m excited about D&I, feminism, equality, travel, dance & arts, music, rock climbing, yoga and of course, coding
The Popular VS Code Homescreen is Now Open Source
Tags: vscode, webdev, tooling, productivity
Published: 2022-03-02 05:47:20

We are excited to release a major update to the popular [Marquee VS Code Extension](https://marketplace.visualstudio.com/items?itemName=stateful.marquee). Most notably, we’ve fully open-sourced the repository (under the MIT License) to encourage community participation in Marquee's roadmap in the form of discussions, feedback, and code contributions through public channels on GitHub.

> [Install Marquee](https://marketplace.visualstudio.com/items?itemName=stateful.marquee) from the Marketplace or search for "**marquee**" inside VS Code's extension tab

[![Marquee Website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lbrj89cvubdm9j0hs6i7.png)](https://marquee.stateful.com/)

A lot has changed under the hood to boost Marquee's performance in this open source release (v2). It also includes a handful of improvements:

- A revamped project website at https://marquee.stateful.com/
- Ability to change feed channels in the Hacker News widget
- A badge as notification that a widget has a filter of some sort enabled
- A input field now allows to attach tags to your todos at creation time
- A configuration toggle that modifies the default setting whether projects open in a new or same window
- Various bug fixes that were reported, including widgets not loading remote content inside of GitHub Codespaces or Gitpod.io

Come find us either on [GitHub](https://github.com/stateful/vscode-marquee), our community channels on [Discord](https://discord.com/channels/878764303052865537/900787619728871484) & [Gitter](https://gitter.im/vscode-marquee/community), or through the in-Marquee feedback channels. Also take a look at [the roadmap](https://github.com/stateful/vscode-marquee/issues) to see what's on Marquee's horizon.

Happy coding!
Sebastian, Christian, and the Marquee Team
Python Exercise - Q1
Tags: programming, python, practice, beginners
Published: 2022-03-02 05:45:46

#Intro
Hello everyone, it's been a long time since my last post, sorry for not posting the content as my account got suspended because in my last post of Desktop Wallpapers I unknowingly violated Dev community's terms and conditions. But now I am back. So as you have read the title this post is related to python exercise in this I will give you one question and now this is my new and first series of python exercises .

#Question 1 :-
**Write a python program to accept input from user and then it prints is square root, square and cube**

**This was today's question please comment down your answers to let me know and I will provide it solution in next post** .

I hope you enjoyed,
Thanks for reading meet you soon in the next post.
Till then stay safe and do take very good care of yourselves .
JOBPkdo- A Platform to find Intern, Jobs that comes through Twitter daily
Tags: javascript, jobs, webdev, nextjs
Published: 2022-03-02 05:45:41

## Overview
[JOBPkdo](https://jobpkdo.netlify.app/) is a platform where a person can find interns, freelance projects, remote jobs, and much more that comes through Twitter daily. You can share jobs with your friends and save them for later.

## Why JOBPkdo is Developed?
We all know Linkedin is a platform where people get internships, remote jobs but opportunities are everywhere. I have seen a lot of people who got their first job or intern into startup companies through just Twitter DMs or cold emails. Don't you think this is awesome?

It's obvious we can't follow everyone but there are still a lot of jobs related to a particular field such as full-stack, marketing; are out of our reach. So through this platform, I tried to build a space where a person can search for a specific job, share it with friends & save it for later.

Guys, if you wish to contribute to the project then freely send a pull request to the [GitHub Repo](https://github.com/Gulshanaggarwal/jobpkdo)😎
Some less known features in Chrome Devtools
Tags: browser, css, javascript
Published: 2022-03-02 05:18:00

Here we will be exploring some less known features which I recently came to know about chrome devtools and I thought about sharing them. 

[Currently, I am using Chrome 98, to check your version go to **chrome://settings/help**].

#### If you come across some more features, please add them in the comments. 

- **More devices**
![More devices](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xzfb8zvdrsmawbohj4it.png)

![ More devices](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1be42xeipi5wzc018qy2.png)
Chrome gives us ability to add more devices to test our webpage on.
Go to Settings -> Devices -> check/uncheck to add/remove devices.

- **Web accessibilty**  

Accessibility of a particular element (e.g: h1,p etc.) can be known by clicking on the "Accessibilty" tab on the elements tab.

![Web accessibilty](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gwkuktf59ibrbqp02wjs.png)

- **Network tab** 
![Network tab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/synuoud6dmssaohffsld.png)
Preserve Logs - To save requests across page loads, check the Preserve log.

Disable cache - By checking this box, we can more accurately emulate a first-time user's experience, because requests are served from the browser cache on repeat visits.

--------------------
That's it. Ciao!
Creating my first ethereum dApp with ethersjs
Tags: blockchain, web3, html, css
Published: 2022-03-02 05:05:56

A wise man once said "Learning is fun but people don't see that way". Working on this project was interesting because I get to pull out of my comfort zone and grind hard. let's get to business enough of talking.

You will need to know about 

- html

- solidity smart contract

- interacting the webpage with ethersjs

create your html and css code
![html should look something like this](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/16eqdnak12jcy853gs5z.png)

while the css code

![css 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/373x9htm4eb99ir07yq7.png)
![css 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/znnictyp7f3zn0fuqf34.png)
![css 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mg76l4b4cm4fdsinxnra.png)

You can render the webpage on lite server

Create a Basic Smart Contract


![solidity code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/am30faxarxf9pgc7o7r6.png)

•Make sure your Metamask is connected to the Ropsten Testnet.

Make sure you select the right compiler version to match the solidity contract. (In the compile tab)

•Compile the code using the "Solidity Compiler" tab. Note that it may take a moment to load the compiler

•Deploy the contract under the "Deploy and Run Transactions" tab

•Under the Deployed Contracts section, you can test out your 
functions on the Remix Run tab to make sure your contract works as expected!

Connect your webpage to smart contract


![ethersjs code 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7frmxsltveemdtvdee6m.png)
![etherjs code 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7xbf5i3924pqs55s4e56.png)
![etherjs code 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dwruco214zdr5xfpbbbs.png)
**
Test Your Work Out!**
1.Got your webserver up? Go to http://127.0.0.1:1337/ in your browser to see your page!

2.Test your functions and approve the transactions as needed through Metamask. Note block times are ~15 seconds... so wait a bit to read the state of the blockchain

3.See your contract and transaction info via https://ropsten.etherscan.io/

4.Open a console (Ctrl + Shift + i) in the browser to see see the magic happen as you press those buttons

Output of the code
![interacting with the smart contract](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ci5r10ssp9owug3osowl.png)

![pending transaction](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a84sh27xankljdk0q6ls.png)

![transaction confirmed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s8auz6ar2vzv7lm5mke9.png)

if you have any question drop it in the comment session
Extract wifi password 
Tags: ethicalhacking, cybersecurity
Published: 2022-03-02 04:54:42

Hello, folks I have created a tutorial on how to extract password of wifi using CLI with simple 4 commands.
check this out ✨ 
https://lnkd.in/ePWtQJJz
 [](https://lnkd.in/ePWtQJJz)
Difference between Web 2.0 and Web 3.0
Tags: web3, web2, blockchain
Published: 2022-03-02 04:51:22


Today, the term web 3.0 is been heard on almost all tech platform and this keeps some newbies wondering, hmmmm!
In this article we will be highlighting the main difference between web 2.0 and web 3.0.

Web 2.0 refers to a version of the internet dominated by companies that offer services in exchange for users' personal data. These companies act as central bodies who own services causing users to trust them with their data before being able to consume these services. This means that data and services are centralized and owned by the big companies that provide these service who can temper with data as they want.

Web 3.0 comes in to solve this problem of centralization of data by implementing a blockchain where data is decentralized. Here, applications are collectively owned by multiple people and no individual has the power to change data (or a transaction) on the blockchain.

Do well to checkout [Blockgames](https://blockgames.gg/), [Nestcoin](https://nestcoin.com/) and [Zuriteam](https://zuri.team/) for amazing web 3.0 contents and training programs.
APIs we integrate as a part of our Solidity Development Service
Tags: javascript, webdev, beginners, programming
Published: 2022-03-02 04:30:14

For amazing experience and extended convenience,ours solidity developers integrates APIs that are renowned for their functionality.


**Analytics API
**
We integrate one of the best APIs powered by Google to help you receive the most accurate analytical insights at your fingertips.

Google Analytics


**Mail and Chat APIs
**
Our Solidity Engineers ensure that you receive an absolute communication experience and remain connected.

Twilio, Gmail and SendGrid


**Geo-location APIs
**
Our Solidity Development Company makes tracking, locating, and moving easier by integrating the top two Geolocation APIs.

Mapbox and Google Maps


**Payment APIs
**
Payments should always be smooth and secure. Hence, [hire solidity developers](https://www.cronj.com/solidity-developers) integrate the best Payment APIs.

Stripe, Paypal, and Razorpay


**Social Media APIs
**
To expand your name on the digital arena, our Solidity Programmers infuse the most popular Social Media APIs.

Facebook, Twitter, YouTube, and LinkedIn