teleren/devto huggingface dataset:
5 Most Helpful Checklists for Web Developers & Designers
Tags: webdev, checklist, design
Published: 2022-04-24 16:54:55

## Table of Contents
1. [Design System Checklist](#design-system-checklist)
2. [UX Project Checklist](#ux-project-checklist)
3. [Checklist Design](#checklist-design)
4. [Web Developer Checklist](https://www.toptal.com/developers/webdevchecklist)
5. [Front End Checklist](#front-end-checklist)
6. [Conclusion](#conclusion)

### [Design System Checklist](https://www.designsystemchecklist.com/category/design-language)

This checklist comes with five different sub-checklists: design language, design tokens, core components, tooling, and project management.

![design checklist](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5qrte9oikeajhwjkp5w6.png)

### [UX Project Checklist](https://uxchecklist.github.io/)

Do you ever forget steps in your user experience research? Whether it's during the researching phase, making sure you include the IA, UI elements, waiting times, completed actions, etc., this checklist has everything covered!

![ux checklist](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fs2v66s7diemx4hfevsm.png)

### [Checklist Design](https://www.checklist.design/)

This absolutely beautiful site reminds you which elements needs to go on which pages, which elements needs what components, and so on. For example, an avatar needs a visualizer, a placeholder image, acceptable file types, etc. while a login page needs a title, account identification, password, a link to reset the password, a link to sign up, etc.

![design checklist](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j910idhfo90mdvk7wkfq.png)
 

### [Web Developer Checklist](https://www.toptal.com/developers/webdevchecklist)

This checklist will make sure you're including required XML sitemaps, HTML validation, running CSS lint, using friendly URLs, making your site mobile-friendly, using traffic analysis, and much more!

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


### [Front End Checklist](https://frontendchecklist.io/)

The Front-End Checklist can be split up between HTML, CSS, JavaScript, Accessibility, Performance, SEO, Images, Head, and Webfonts. You're also able to filter by best practices, testing, security, requests, meta tag, and much more.

![front end checklist](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/30h3gml0xg5s1ul2kgl2.png)


### Conclusion
Checklists are so useful to have around to make sure you include everything necessary! Which checklist system do you use?

Happy coding!
How to Install Python 3.10 in windows
Tags: python, codenewbie, programming, beginners
Published: 2022-04-24 16:46:34


Before installing Python, check if Python is already installed on your computer. Steps to check if Python is already installed or not:

1. Open Windows Powershell.
2. Type "python --version" and press enter


If an error message shown in then, Python is not installed on your computer. There is a chance that an older version of Python is already installed on your computer. In this case, you need to uninstall the older version and install the latest version.

Follow the steps given below to install the latest version of Python in Windows:

**Step 1:** Click here and download the latest version of Python available. At the time of writing this article, the latest version is Python 3.10.3.

**Step 2:** Install the .exe file as soon as the downloading process completes. All you need to do is to keep pressing next until python installs!

Note: Do not forget to check the “Add Python 3.10 to path” checkbox

**Step 3:** This is all you need to do to install Python in Windows operating system. Verify the installation by typing “python –version” in Windows Powershell.

Congratulations! You have successfully installed the latest version of Python on your computer.


[Python cheat sheet-1](https://dev.to/sandeepk27/python-cheat-sheet-for-beginners-part-1-5baj)

[Top Websites to learn Python](https://dev.to/sandeepk27/top-websites-to-learn-python-for-free-1j1l)

[How to install python in windows 10](https://dev.to/sandeepk27/how-to-install-python-310-2dik)

[Best IDE's for Python](https://dev.to/sandeepk27/best-ides-for-python-362k)
Upload React project on github repository from VS Code
Tags: github, react, upload, project
Published: 2022-04-24 16:46:08

Open your project folder on VS Code.
Install **gh-pages**, this module requires Git >=1.9.
```
npm i gh-pages --save-dev
```
Create repository on your Github account
Copy repository url

```
git remote add origin {gitRepositoryUrl}
```

Add 

```
{
  "homepage": "{gitRepositoryUrl}",
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  }
}
```
 to `package.json` and code

```
npm run deploy
```

on terminal.
Take me back, please!
Tags: webdev, github, git, programming
Published: 2022-04-24 16:28:46

Not your best day. You made changes you shouldn’t have and now everything is broken… Is there a way to undo those commits?

**Git keeps track of updates to the tip of branches using a mechanism called reference** `logs`, or`reflogs`Many Git commands accept a parameter for specifying a reference or “ref”, which is a pointer to a commit. Common examples include `git checkout`or `git reset`.

    git reflog

you can get the record of all the commits done in Git.


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

Now you just need to find the commit prior to the one that caused all the hassle. `HEAD@{index}` represents the specified commit, so just replace the index with the correct number and run:

    git reset HEAD@{index}

The default action for git reset is `git reset --mixed`. It means that the changes in your working directory will be preserved but not staged (since the index was modified to match the chosen commit, the changes are not in the index anymore).

Other options are:

```
# Doesn’t modify the index or the working tree, leaving your changes staged for commit.
git reset --soft

# Use with caution, as it resets both the index and working tree. Uncommitted changes and all commits after will be removed.

git reset --hard

```

And now, you can start over from the point when everything in your repository worked like a charm. Remember to use it only locally, as modifying a shared repository is considered a serious crime.

If you found this post useful please share it with your friends 😍

Let’s connect on [LinkedIn](https://www.linkedin.com/in/abdlrahmansaber/), [Twitter](https://twitter.com/Abdlrahmansabe4)
Give me recommendation of Advanced project
Tags: javascript, webdev, css, html
Published: 2022-04-24 15:48:26

I learn most of the basic. I wana go to the direct advanced project so I get experieced.
Then afterward I go to intermediate project
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fgfhimmir5i89vlofhwy.png)
I think I am having an "aha" moment about React, please confirm
Tags: react, webdev, beginners, javascript
Published: 2022-04-24 15:31:40

It was not long ago that I struggled terribly over React. Then I gave up on it because it seemed too hard, way over my head and much overkill. I opted for Plain JS.

Someone used the term Spaghetti Code and told me that if I have many pages in my app that React would be useful. Then I read about reusable components in React. I have a Java background. It now seems that React is much like Java where we do subclassing. The next page inherits the behavior from a previous page.

Am I having an aha moment?

I think, for example, I can put some css or a listener in a component, then reuse the same on all my subsequent pages so I don't have to rewrite this code on each page (the spaghetti).

aha !!

PS: I also wrote a Dev article about my React Struggles here
https://dev.to/rickdelpo1/react-vs-plain-js-3cpk
My experience building a cryptocurrency news site - CryptoHut
Tags: javascript, webdev, cryptocurrency, api
Published: 2022-04-24 15:30:31

My project this week at [Moringa School](https://moringaschool.com/) was to build a Single Page Application using HTML and CSS for the frontend and JavaScript to communicate with a public API of our choice. The learning goals of this assignment were;

- Design and architect features across a frontend
- communicate and collaborate in a technical environment
- Integrate JavaScript and an external API
- build and iterate on a project MVP

## The Development Process

**Research**
Since we had to come up with our own project ideas, I had to brainstorm for an existing problem in the society that could be solved. During this stage I also have to to consider a couple of factors like the kind of API I was going to use for the project.
Eventually I came up with a problem statement and settled on a Crypto-News website.
I decided I was going to use the [Crypto-news API](https://cryptonews-api.com/) for my project, only to find out I needed to give my credit card information for me to use the API, so a few days to my presentation I had to change that to [The Rapid API](https://rapidapi.com/) for the news data and [CoinRanking API](https://developers.coinranking.com/api/documentation) for the real-time Crypto prices of the top coins.

**UI Design and Building**
I outlined the features of my MVP , so I could design around it and the user Journey. The MVP included;

- A landing page
- Display of the top currencies section
- Display of the top  and general stories
- A feature for the users to star their favorite coin
- A contact section

Now normally, I would do a hi-fi design before I start the actual coding, but this time, the low fidelity design was enough to get me started.
I wanted to get the logic right first, then focus on the UI details. Honestly, looking back, I don't think that's the best approach. At least for me its not. I drew some of my UI inspirations from [Cointelegraph](https://cointelegraph.com/) seeing as it is a crypto-news website, and [Dribble](https://dribbble.com/) - a very useful site to share and also get design inspiration. 

So I start coding and interacting with the APIs, and I can confidently say it was not a walk in the park. Although some of the blockers could have been avoided if i did some more research on the APIs, this was definitely a challenging yet interesting task.
I learnt so much from this assignment, I feel like I grew ad a developer and generally as person.
The most important all-round lessons I learnt were;

- Do a lot of research on a product you intend to use.
- Be patient with yourself especially when learning.

**Testing and Deployment**
This stage was not very difficult, as I was using GitHub's gh-pages to host my site.

 **Conclusion**
I really enjoyed working on this project, and I learnt a lot of things I wouldn't have by just reading. 
Practice is always the best way to understand a new concept and what better way to grow as a developer than take up new project often.

You can interact more with this project on [GitHub](https://github.com/CKawara/Cryptohut)
What's Svelte?
Published: 2022-04-24 15:27:42

it's like wherever I look nowadays everyone's using svelt and telling that's one of the best frameworks they used, so is it true? is svelte truly the best framwork?

let's take a look at this in todays blog and see which is truly better

**Introduction**
The first thing that we need to understand is that svelte is not a _framework_ nor a _library_ but it's a compiler.

In svelte you write svelte code which compiles and converts into vanilla JavaScript code

this code is then executed in the browsers,so no library like react or react-dom is not needed

**Advantages Of Svelt**

Svelt has many advantages but one of the best is small bundle size since you don't have a bunch of libraries to slow down your application

Svelts learning curve is really really small as it uses html and javascript with a few added features

Svelt does not use the virtual dom as it feels like its not worh it if you want to read about this

Check Out This Article by svelt https://svelte.dev/blog/virtual-dom-is-pure-overhead

Svelt is truly reactive you dont need something like recoil or redux

**Svelt echosysystem**
The svelte ecosystem is fairly new but has a great community and lots of libraries and code we can use 

lots of developers such as myself love svelt for its simplicity and its syntax

**Ok lets talk about the bad**
alright lets talk about somethings you may or may not like

svelts syntax can be a bit confusing if you are a beginner
thought its unlikely that you will find their syntax odd some developers do complain its a little hard for them to adjust but personally if would say svelts sytax is not hard but its different than something like react or svelt

svelt is not popular?

unfortunately frameworks are kind of a popularity contest and thats why people love frameworks like react and vue and i personally svelt is going under the rader for a lot of people
this might cause some people to to use svelt at all as somepeople are really worried about the frameworks they use and learn 


**Conclusion**
In conclusion svelt is great but is it the best framework? well no really... every framework has its ups and down but the way svelt is doing is amazing. Its has become one of my favourite things to talk about

**Want more? content**
hey there do you want more of this good content?well you can visit my YouTube channel and subscribe there if you want to support me

MyChannel - https://www.youtube.com/channel/UCVN9qpxbrJ9qMPjpZf3ywpA
The Weekly Dev - 202217
Published: 2022-04-24 15:07:34

---
title: The Weekly Dev - 202217
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
canonical_url: 'https://kevwe.com/weekly/202217'
---
Command Line Security Checks


Everyone seems lo like shiny GUIs, but they often come with a cost: you typically have no idea what happens behind the scenes.


Web GUIs, you will eventually have to figure out what they do when they break.


They depend on software that depends on other software that depends... you get me.


Also shiny clients come and go: it's the command line that stay for good, let us make them good friends of ours:


https://kevwe.com/weekly/202217
Activity and Fragment Lifecycle - Android
Tags: android, kotlin, jetpack, lifecycle
Published: 2022-04-24 15:00:58

Activities are one of the most crucial app components in #Android #Development. They serve as the basic entry points into our app and contains our user interface.

Activities have their own life-cycle, which is a set of callbacks initiated at a particular activity state.

To know them better, I have made a repository which helps to understand the flow of these life-cycle callbacks. I have placed block comments over each callback function explaining their initiating state/condition and what sort of code should be placed in them. This also covers the life-cycle of fragments as well.

Just clone, run, perform flows and observe your callback in the logcat. Don't forget to star it is you like it.

NOTE: #Jetpack #Compose version coming soon...
LINK: https://github.com/Shobu95/Lifecycle-ActivitiesAndFragments
password strength indicator in JavaScript
Tags: codepen, javascript, tutorial, webdev
Published: 2022-04-24 14:59:51

{% codepen https://codepen.io/CODER_ASIF/pen/powMvqe %}

##Wrapping Up
I hope you enjoyed the article, if yes then don't forget to press ❤️ and Subscribe. You can also bookmark it for later use. It was fun to create this article and If you have any queries or suggestions don't hesitate to drop them. See you.
You can extend your support by giving me stars on GitHub Profile.😊👇
[G i t h u b](https://github.com/Mohammad-Asif-Web)
[P o r t f o l i o](https://muhammadasif10.blogspot.com/)
[L i n k e d i n](https://www.linkedin.com/in/mohammadasif10/)

##Support

[Buy me a Coffee](https://www.buymeacoffee.com/muhammadasif10)
Getting started with WDM(WebDriverManager)
Tags: testing, selenium, testautomation, browserautomation
Published: 2022-04-24 14:49:50

Hello Readers,

Whenever we talk about Automation Testing(Browser Automation) we should have a few things in place:
1. Browser (Should be on the system path).
2. Driver Executable (Should be on the system path), Driver Executable version should be the same as Browser Version.
3. Automation Library(In our case Selenium).

The **second part** of Point 2 is **tedious**. Nowadays we get at least one browser update every month or two, so we have to download the driver executable which is released for that particular browser version.

---

![Chrome release channel information - source:wikipedia](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0as43y13e3wqz0re5bf8.png)

_As shown in fig, chrome releases multiple browsers update each month in stable/beta/developer channels._

---

### So, How can we make our test project in such a way that there should be no manual intervention required in getting the correct driver executables for different browsers?

WDM(WebDriverManager) utility which is created by [bonigarcia](https://github.com/bonigarcia) could help us in automatically downloading driver version based on different browsers, browser version and OS's .

---

### WebDriverManager

WebDriverManager is an open-source Java library that carries out the management (i.e., download, setup, and maintenance) of the drivers required by Selenium WebDriver (e.g., chromedriver, geckodriver, msedgedriver, etc.) in a fully automated manner. In addition, as of version 5, WebDriverManager provides other relevant features, such as the capability to discover browsers installed in the local system, building WebDriver objects (such as ChromeDriver, FirefoxDriver, EdgeDriver, etc.), and running browsers in Docker containers seamlessly.

---
### _Maven dependency:_

```
<dependency>
 <groupId>io.github.bonigarcia</groupId>
 <artifactId>webdrivermanager</artifactId>
 <version>5.1.1</version>
</dependency>
```
---
### _Pom.xml:_
minimal pom.xml dependency list for browser automation with WDM and selenium.
![pom.xml](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0g2hjbrnnnkox3kcd96x.png)
---

### _Script (java):_
I’ve used java language to use with selenium.
![script](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vix3b3ae337t5u1tewjv.png)

---
Examples of how to set up driver executable for different browsers.
`WebDriverManager.chromedriver().setup();`
`WebDriverManager.edgedriver().setup();`
`WebDriverManager.firefoxdriver().setup();`
How to specify which driver executable we want (Explicit specification, Optional)
`WebDriverManager.firefoxdriver().browserVersion("100").setup();`

---
### _Console print:_
![Console print](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k513odvbs06w4o48hcx4.png)

---
#### _Useful URL's_

[bonigarcia's github page](https://github.com/bonigarcia)

[WebDriverManager website](https://bonigarcia.dev/webdrivermanager)

[WebDriverManager repository](https://github.com/bonigarcia/webdrivermanager)
Peer to peer messaging to defeat censorship
Published: 2022-04-24 14:44:32

I recently read [this article](https://www.howtogeek.com/790612/why-you-should-use-peer-to-peer-messaging-apps/) on peer-to-peer messaging, and it got me thinking about the centralized, proprietary messaging silos that we have today. I'm talking about Discord, Snapchat, Telegram, WhatsApp, and WeChat.

## What's the problem?
Lets say you're talking about something that your government doesn't like, such as Hong Kong independence in the case of China, or calling out BLM as a racist movement. Or, even plotting to overthrow the government right before getting kicked out of office.

These are all real cases that have happened in the 2020's and all valid use cases for peer-to-peer networks and end-to-end encryption.

Through corporate, government, or other pressures, you could be banned from platforms vital to your communication. This is exactly what [happens frequently on WeChat](https://www.theverge.com/2019/11/25/20976964/chinese-americans-censorship-wechat-hong-kong-elections-tiktok) and other platforms.

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

A quick search on Google, or DuckDuckGo for the multiple privacy violations of big tech companies reveals the truth.

## Why peer-to-peer?
Imagine a place... like Discord where you can't get banned for basic things, such as [joking about being underage](https://www.reddit.com/r/discordapp/comments/kmbv16/banned_for_being_underaged/) or [not aligning with their political views](https://www.npr.org/2021/04/05/983855753/group-chat-app-discord-says-it-banned-more-than-2-000-extremist-communities).

In a peer-to-peer network, when you send a message, you can be sure that it will actually go to the intended recipient, without passing through an intermediary. This allows users to have confidence in who they are messaging, as well as ensure that there are no third parties snooping in on your communications.
Your messages never pass through a server which could scan them for unwanted content, and instead go directly to your recipient.

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

## That's great, what options exist?
* [Status Private Messenger](https://status.im) is an open-source, peer-to-peer, and end-to-end encrypted chat app, which also has a privacy focused web browser, social feed, and cryptocurrency trading built in. (Works on Android, iOS, Windows, Linux, and MacOS)
* [Briar](https://briarproject.org) is also open-source, utilizes peer-to-peer connections, and is most notably known as the app to take to a protest. (Android Only)
* [Berty](https://berty.tech) is an in-development open-source option that uses Bluetooth Low Energy (BLE) to communicate when LAN isn't available.