teleren/devto huggingface dataset:
Web1 vs Web2 vs Web3
Tags: web1, web2, web3
Published: 2022-07-22 14:42:49

## ✨ Web1 ✨:-

- Web1 was introduced when internet was born. At that time the main purpose of websites was to show static contents in the form of blogs, newsletters and articles.

- All the websites were internally linked using hyperlinks. 

- A user was able to only consume the information not interact with it in web1.

- HTML and CSS were used to built websites in Web1.


![Image representing an example of a website in web1:](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7cjlbftulyfzircnxpy2.png)

## ✨ Web2 🎇

- Web2 was introduced in order to bring interactiveness to websites and also user can perform certain actions.

- Big tech giants like Google, Amazon, Microsoft are currently ruling the web2 world.

- Now you may be confused that how these big tech giants are ruling the world, well let me decode it.

- Let's suppose you open instagram.com and logged in into your account.

- On the instagram home screen you see the posts of the followers which you follow.

- In the instagram feed section, you get to see the posts according to your interests.

- Now the thing here is that you are not controlling what you are seeing in your feed, its instagram who is controlling what and how to display the posts to your feed.

- So thats how our user data and activity is stored on instagram servers and based on the data, instagram is recommending the posts to us.

- So in short terms, a central entity called instagram who is controlling the user data in web2 and thats how web2 is lead by the tech giants.

- HTML, CSS, Javascript, ReactJs etc are the libraries/frameworks used to build websites in web2 world.

- And don't forget we are living in web2 world so take care of your data.

## 🎆 Web3 🎇

- Web3 is the term which is currently booming a lot.

- In web3 each user is its own boss, which means instead of a central entity ruling the data of the users, here each user can monitor the activity going on and they are highly interconnected.

- In web3 world, we mostly deal with transactions which means whatever actions we perform on the web is recorded in the public ledger as a transaction and everyone can see the transaction details.

- Web3 contains many topics like NFT, DeFi, Blockchain, Smart Contracts and we will cover this topic separately in future blogs.

So I hope you got a high level view of how web1,web2 and web3 works 🤞.
See you in the next blog 👋.
Code Smell 151 - Commented Code
Tags: javascript, webdev, beginners, programming
Published: 2022-07-22 14:42:27

*Beginners are afraid to remove code. And many seniors too.*

> TL;DR: Don't leave commented code. Remove it.

# Problems

- Readability

- Dead Code

- Lack of Coverage 

- Lack of Source Version Control

# Solutions

1. Remove commented code

2. Implement Source Version Control

# Context

When debugging code we tend to comment on code to see what happens.

As a final step, after all our tests pass, we must remove them following clean code practices.

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/ff64e843938e642edb15cc473008bdc2)
```javascript
function arabicToRoman(num) {
  var decimal = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1];
  var roman = ['M', 'CM', 'D', 'CD', 'C', 'XC', 'L', 'XL', 'X', 'IX', 'V', 'IV', 'I'];
  var result = '';
  
  for(var i = 0; i < decimal.length; i++) {
    // print(i)
    while(num >= decimal[i]) {
      result += roman[i];
      num -= decimal[i];
    }    
  }
  // if (result > 0 return ' ' += result)
  
 return result;
}
```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/4d485268c773366069213c5b915acf89)
```javascript
function arabicToRoman(arabicNumber) {
  var decimal = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1];
  var roman = ['M', 'CM', 'D', 'CD', 'C', 'XC', 'L', 'XL', 'X', 'IX', 'V', 'IV', 'I'];
  var romanString = '';
  
  for(var i = 0; i < decimal.length; i++) {
    while(arabicNumber >= decimal[i]) {
      romanString += roman[i];
      num -= decimal[i];
    }    
  }
  
 return romanString;
}
```

# Detection

[X] Semi-Automatic 

Some machine learning analyzers can detect or parse comments and guide as to remove them.

# Tags

- Comments

# Conclusion

We need to remove all commented-out code.

# Relations

{% post https://dev.to/mcsee/code-smell-75-comments-inside-a-method-2bk %}

{% post https://dev.to/mcsee/code-smell-05-comment-abusers-2ba5 %}

# Refactorings

{% post https://dev.to/mcsee/refactoring-005-replace-comment-with-function-name-4lpf %}

# Credits

Photo by [maxim bober](https://unsplash.com/@obalance) on [Unsplash](https://unsplash.com/)    

* * *

> Don’t document the problem, fix it.

_Atli Björgvin Oddsson_
 
{% post https://dev.to/mcsee/software-engineering-great-quotes-26ci %}

* * *

This article is part of the CodeSmell Series.

{% post https://dev.to/mcsee/how-to-find-the-stinky-parts-of-your-code-1dbc %}
day 1,
Tags: programming, beginners
Published: 2022-07-22 14:38:49

22.07.2022,
marking my first day of diving into programming today. On the technical part, I'm writing this blog, only with some knowledge of basic C programming stuff, & that's it. I've done nothing much except installing vscode & have been a lil confused at first, for choosing a particular language to begin with. Python, JavaScript, c++ were only the names that I've heard till now, so I really had a tough time, focusing on one thing. I was not preferring any courses at first, personally believing that building actual projects would be a better way to learn, & I still do. I consulted some of my friends, & got two recommendations, one for switching to Linux & second for starting with next.js. I created a next.js file, named it 'xyz', & played with it for a while, figuring my way around. but I can say that it surely is something that I could work with, as a beginner. bout switching onto Linux, I'm not sure if I really want to switch OS at the moment, but let's see what happens next.
p.s. I wanna share my blogs with an audience, so that I would have a platform to discuss the problems I'd face throughout the journey & personally keep a record of my progress as well.
Be A Better Web Designer..
Tags: tools, javascript, html, css
Published: 2022-07-22 14:38:00

When you start being interested in becoming a web designer, many beginners often struggle with how to master what they've already learned. 

As we all know **" practice makes perfect "**. Hence, in this blog, we'll explore some websites on which you could apply what you learned and improve your level : 

- 
www.frontendmentor.io : This site helps you to solve HTML, CSS, and JAVASCRIPT challenges. The advantage of this website is that it will give you tests based on your level.

- 
www.superherojs.com : A collection of the best articles on creating, testing and maintaining a large JavaScript code.

- www.dailyui.co/ : It's a series of daily design challenges inspiration and surprise rewards.

- 
www.adamschwartz.co/magic-of-css/ : The magic of CSS.

- 
www.maintainablecss.com/ : Write CSS without worrying that overzealous, pre-existing styles will cause problems. MaintainableCSS is an approach to writing modular, scalable and of course, maintainable CSS. 

- www.goodbrief.io/: Randomly generate smart design briefs to practice your design skills, get content for your portfolio and gain experience working off a real design brief.

- 
www.designbetter.co/ : Introducing the best practices, stories, and insights from the world’s top design leaders.

- 
www.html5up.net/ : A great resource for HTML 5 templates. You could modify the template as you wish. 

- 
www.refactoringui.com/ : Learn how to design awesome UIs by yourself using specific tactics explained from a developer's point-of-view.

---

Web design is steadily evolving. You should always keep learning and discovering new design tools and techniques. 
{ I hope that you enjoyed the list. 🦄​ }
Want to build custom configurator like "https://www.lanieri.com/en/suits/fabrics/light-grey-super-130-s-wool-4307/customise"
Published: 2022-07-22 14:22:00

#react #configurator 

Hello, We want to build one configurator like "https://www.lanieri.com/en/suits/fabrics/light-grey-super-130-s-wool-4307/customise", anyone knows any library or anyone available for development?
React Interview Q/A
Tags: javascript, webdev, beginners, react
Published: 2022-07-22 14:21:47

**What is React?**
-> React is a JavaScript library used for making UI. Used mainly for its massive ecosystem, there's a component for 
    static site :- **Gatsby**
    server-side-rendering :- **Next.js**
    animation :- **Spring**
    forums :- **Formik**
    state management :- **Redux,FLux,Mobix**
    etc 

**What is Component?**
-> Reusable pieces of UI composed together as a tree to represent complete front end application

**What are Props?**
-> Used for passing data into a component, can reference it by {} curly braces inside the UI

**What is Hook?**
-> a function which returns a value as well as a function to change the value.
    const myComponent[count,setCount] = useState(0);
    count reads, reactive state, shows the most recent value
    setCount writes, changes the state
**What is State?**
->Data which changes throughout the lifecycle of application, immutable in nature

**What is VDOM?**
-> this is what makes react powerful, when the prop data changes the library knows how to efficiently re-render each component using internal mechanism called VDOM.
It's the magic that reconciles react code with the real DOM of the browser at runtime

**What are Events?**
-> signal sent by browser that some kind of interaction has happened with the website, could be a keyboard click, button click, cursor moving


Comment more questions you think should be up here, I'll add them. 
:)
Create any kind of app with Kotlin
Tags: kotlin, mobile, webdev, javascript
Published: 2022-07-22 14:18:00

Links for different libraries/frameworks to build any kind of app using Kotlin:

- [KMM](https://kotlinlang.org/lp/mobile) for building cross platform as well as native apps using code sharing. [**See Docs**] (https://kotlinlang.org/docs/mobile/home.html).
- [Jetpack Compose](https://developer.android.com/jetpack/compose), UI framework for building android apps using kotlin DSL.
- [Compose Multiplatform](https://www.jetbrains.com/lp/compose/) UI framework for building Desktop and Web apps using Kotlin DSL, and it enables UI code sharing with android, web and desktop.
- [TornadoFX](https://tornadofx.io) for developing desktop apps, it has DSLs for making UI.
- [Ktor](https://ktor.io), to easily make any server side apps using DSLs.
- [Kotlin/JS](https://kotlinlang.org/docs/js-overview.html) for writing frontend web apps using Kotlin. As Kotlin can compile to JS too.
- [Kotlin wrappers for JS](https://github.com/JetBrains/kotlin-wrappers).
- [Html DSL in Kotlin](https://kotlinlang.org/docs/typesafe-html-dsl.html). See it on [Github](https://github.com/Kotlin/kotlinx.html).
- [Kotlin-React](https://kotlinlang.org/docs/js-get-started.html), enjoy making React app using Kotlin. [**See Tutorial**](https://play.kotlinlang.org/hands-on/Building%20Web%20Applications%20with%20React%20and%20Kotlin%20JS/01_Introduction).
- [Kotlin/Native](https://kotlinlang.org/docs/native-overview.html), as Kotlin can also compile to native binaries, that was primarily for building iOS apps but now it is supporting all other platforms.

Thanks for reading this post, and if u like it then please click on heart/unicorn/save icon.
What is Accessibility in Android?
Tags: android, beginners, tutorial, mobile
Published: 2022-07-22 14:11:00

This post is for android developers and anyone who is interested in mobile app development. 

{% embed https://youtu.be/77iIW-GvCtk %}

## What is Accessibility?

Accessibility is practice of making apps accessible by everyone, i.e., specially-enabled people should also have access to apps. It includes people with (but is not limited to):
- blindness / low vision
- deafness / impaired hearing
- confined motor hearing
- color blindness, etc.

## How are android apps made accessible?

- For people with **blindness / low vision** we have screen-reader apps like **Talkback** which basically reads out the entire screen of android apps and provides spoken feedback based on which person can also interact with the app.
- For people with **deafness / impaired hearing** there are services like **Live Transcribe**, **Sound Amplifier** which provides captions in apps or increases the volume of any audio output in app
- For people with **confined motor skills** android has services like **Magnification**, **Switch Access**, etc which makes it easy to use apps
- For people with **color blindness** android has services like **Color Inversion / Correction** which provides range of color change options.

So in short for each form of disability android provides some form of alternate so that the apps can become accessible.

## Why should we care?

- **15%** of world’s population has some type of disability
- they depend on accessibility apps/services to communicate, learn and work
- accessibility is not just for those with disabilities.  **Example **: Driver can give instructions to maps app using voice command, person doing exercise can get instructions from app by audio feedback.

## Developer Tips

- Accessibility is written as **a11y** or **A11y** or **A11Y** in short.
- "a", then 11 characters in between, and then "y"

---
## Next ?

{% embed https://dev.to/rajatt/accessibility-scanner-in-android-4mb1 %}

---

Hope this post does explain what **accessibility** means and why we should **care**. Feel free to suggestion changes or ask questions in comments.
Appwrite Community Report #15
Published: 2022-07-22 14:06:00

Hello everyone, greetings from team Appwrite 👋. 
Taking this opportunity to thank all of you for believing and thriving with the community 🙏🏽

We are excited to share with you our latest updates and announcements. 🤩

**TLDR;** This week Appwrite Community discord has a new look, we have fixed some issues and worked on new features, does this hint something? 😉

---

## 📢  What’s new 

- Read all about the new discord updates 🤩
{% embed https://dev.to/appwrite/appwrite-community-discord-30-26l %}
Join our amazing community [here](appwrite.io/discord)
- Appwrite [OSS Fund](https://appwrite.io/oss-fund) is still accepting applications, share it with your maintainer friends, who needs support. 

---

## ✅ Issues solved

This week has been about fixing existing bugs, issues, and working on community requests. 

- Implementation of new Utopia hooks
🔗[Link to PR](https://github.com/appwrite/appwrite/pull/3586)

- Addition of Disqus OAuth Provider by community member [Bishwajeet Parhi](https://github.com/2002Bishwajeet)
🔗[Link to PR](https://github.com/appwrite/appwrite/pull/3526)
- Addition of Etsy Provider
🔗[Link to PR](https://github.com/appwrite/appwrite/pull/3522)
- Implementation of stats server for usage analytics in Appwrite
🔗[Link to PR](https://github.com/appwrite/appwrite/pull/3549)

---

## ⚒️ What we’re currently working on

- Updation of sdk-generator to 0.19.6
- Implementation of Bun into Appwrite Function
- Fixed SDK response type for GET and UPDATE database call by [Ishan Vyas](https://github.com/ishanvyas22)

---

## 🗣 Discussions
Let’s talk about Appwrite’s queries
🔗[Join the discussion here](https://github.com/appwrite/appwrite/discussions/3545)

---

## 📘 Resources

- Learn about Phone Authentication with Appwrite and Twilio
{% embed https://dev.to/appwrite/phone-authentication-with-appwrite-and-twilio-26ek %}
- Build a [Realtime Chat Application With Appwrite and Angular]
(https://dev.to/appwrite/building-a-realtime-chat-application-using-angular-and-appwrite-i3o)
- Introduction to `$createdAt` and `$updatedAt`
{% embed https://dev.to/appwrite/introducing-createdat-and-updatedat-on-each-resource-5pa %}
- Take up the [30 days learning challenge](https://30days.appwrite.io/) to get started with Appwrite
Only 1 day and 9 hours left before the early bird tickets expire for DevoxxMa!!!
Tags: javascript, java, programming, techtalks
Published: 2022-07-22 13:43:00

Get your ticket now and enjoy a unique technological experience mixed with a Moroccan flavor 🇲🇦 4th,5th and 9th of October 2022!
🔥 Secure your ticket now: https://bit.ly/3RJpQaI
Web Developer Full Course - Headings, Paragraphs and Other Text Related Tags - #4
Tags: 100daysofcode, javascript, programming, codenewbie
Published: 2022-07-22 13:41:00

In this video, we will learn about the headings and paragraphs in HTML. We will also learn about the emphasis (em) and the strong elements. 

{% youtube MHEEO_gYZ24 %} 
----------------------------------------

Support my channel:
💜 Join the Discord community 👨‍👩‍👧‍👦: https://discord.gg/fgbtN2a 
💜 One time donations via PayPal
Thank you! 🙏

---
Follow me on:
👉 My Blog: https://the-nerdy-dev.com
👉 Twitter: https://twitter.com/The_Nerdy_Dev
👉 Instagram: https://instagram.com/thenerdydev
Web Developer Full Course - Introduction to HTML - #3
Tags: 100daysofcode, javascript, programming, webdev
Published: 2022-07-22 13:38:00

In this video, we will cover a brief introduction about HTML which is the markup language that we use to define the structure of our webpages. 

{% youtube McaGZ9nStmQ %}

----------------------------------------

Support my channel:
💜 Join the Discord community 👨‍👩‍👧‍👦: https://discord.gg/fgbtN2a 
💜 One time donations via PayPal
Thank you! 🙏

---
Follow me on:
👉 My Blog: https://the-nerdy-dev.com
👉 Twitter: https://twitter.com/The_Nerdy_Dev
👉 Instagram: https://instagram.com/thenerdydev
Web Developer Full Course : Client Server Architecture, Static and Dynamic Websites - #2
Tags: 100daysofcode, javascript, programming, webdev
Published: 2022-07-22 13:35:00

In this video, we will learn about the Client Server Architecture that comes into picture when you try to access a website using your browser. This video explains the entire process that goes under the hood when a client tries to access the code files from the server via a couple of requests and responses.

{% youtube woLaOzxCt8o %}
 ----------------------------------------

Support my channel:
💜 Join the Discord community 👨‍👩‍👧‍👦: https://discord.gg/fgbtN2a 
💜 One time donations via PayPal
Thank you! 🙏

---
Follow me on:
👉 My Blog: https://the-nerdy-dev.com
👉 Twitter: https://twitter.com/The_Nerdy_Dev
👉 Instagram: https://instagram.com/thenerdydev
Responsive Education Website Using Html CSS JavaScript
Tags: css, javascript, beginners, tutorial
Published: 2022-07-22 13:34:45

{% youtube dMZujoGxjRo %}

Responsive Education Website Using Html CSS JavaScript

This video will show you how to make a responsive education website using html css javascript

[Live Website](https://codewithsadee.github.io/eduhome)
[Github Repo](https://github.com/codewithsadee/eduhome)

---

HI 👋
I'm Sadee (webdev)
In this channel I make videos about Complete Responsive website.
You can checkout my channel 👇

📺 My Channel : [codewithsadee](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g)
🔔 Subscribe : [subscribe now](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g?sub_confirmation=1)

---

🔗 Essential links
-----------------------------
[If you want to practice with me, Download this starter file](https://drive.google.com/file/d/1-b59hsc3JP0XLUa1lfXXvCxFebHeyhzv/view?usp=sharing)

---

⏱️ Timestamps
-----------------------------
0:00 - Demo
4:51 - File structure
5:20 - Project initial
11:08 - Header
31:35 - Hero section
40:38 - Category section
47:46 - About section
54:38 - Course section
1:13:58 - CTA section
1:17:40 - Event section
1:26:21 - Newsletter section
1:29:58 - Footer
1:42:21 - Media queries

---

[![Become a patreon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fnjl14kdm5qf08hu5lop.png)](https://www.patreon.com/bePatron?u=62535867)
Web Developer Full Course - Evolution of the World Wide Web - #1
Tags: 100daysofcode, programming, webdev, codenewbie
Published: 2022-07-22 13:34:00

In this video, we will cover the introduction to World Wide Web and the Evolution of the World Wide Web. 

{% youtube H9snA_Ze0wU %}
 ----------------------------------------

Support my channel:
💜 Join the Discord community 👨‍👩‍👧‍👦: https://discord.gg/fgbtN2a 
💜 One time donations via PayPal
Thank you! 🙏

---
Follow me on:
👉 My Blog: https://the-nerdy-dev.com
👉 Twitter: https://twitter.com/The_Nerdy_Dev
👉 Instagram: https://instagram.com/thenerdydev
Design System as a Base of Good Frontend
Tags: frontend, design, systems, beginners
Published: 2022-07-22 13:29:07

{% youtube dGmQbXES_EQ %}

Let’s focus on Design Systems. What are they and why are they so important? When a company should define its design system? How to create such? Answers for these questions and even more details will provide Jakub, our frontend developer. Hope you will find it useful and in case of any questions, just ask our experts.

Enjoy! You can also read the article at [Frontend House](https://frontendhouse.com/experts-zone/design-system-as-a-base-of-good-frontend-experts-zone-talks-6).
Getting started with iOS Application Modularization
Tags: ios, mobile, swift, programming
Published: 2022-07-22 13:25:29

We as a developer always want **better and clear code architecture**, a project having code with **better testing**, and **a project that builds in a minimal time**, these things can be done with one magic, called **_Modularization_**.

Modularization allows us to use one created module in multiple projects or apps by **separating the app into multiple modules.**

## What is the Modularization?
You might be wondering what is a module? 
So in simple terms, it is a part of the project that can build separately and they have their own targets which are called **Frameworks**.

The process of breaking down the codebase into small and sharable parts or modules is called **modularization**.

There are 3 ways to distribute modular code for iOS:

1. Cocoa Touch Frameworks
2. Swift packages
3. Pods

The option you choose can have different implications for how your module code runs.

In this post, we are going to follow the first option. We will explore how we can divide our app into different modules like data, UI, tests, and dependencies very easily.

To read the full article, navigate to [canopas blog.](https://blog.canopas.com/getting-started-with-ios-application-modularization-98fa0e68da0b)