teleren/devto huggingface dataset:
Easy Website Editor for Developers. Drag & drop simplicity.
Tags: webdev, website, webcomponents, webeditor
Published: 2022-11-26 16:23:11

I am super excited to share EZYTOR with DEV COMMUNITY,💖🎇🎇
 
[Ezytor](https://ezytor.com/) Create, publish and manage websites without coding knowledge. Stay up to date with regular feature updates and new themes. intuitive drag & drop feature and ready-made themes  With Ezytor you can build your website in minutes with drag-and-drop simplicity.

Try EZYTOR.com

Resources:
❤️ 5 Full Business Covered Themes (Bootstrap, Tailwind)
❤️ 150+ Pre-made Templates (Bootstrap, Tailwind)
❤️ 500+ Pre-made Sections (Bootstrap, Tailwind)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v4vzguhnzv0ovwaf0ezk.png)
Upcoming Features:
*** Text Edit
*** Image Edit
*** Global Style change
*** 1000+ Templates

Any feedback/suggestions will be more than welcome.
How to improve your command line skills
Tags: shell, webdev, beginners, productivity
Published: 2022-11-26 16:13:18

The command line is a text interface for your computer. It’s often called the “shell” because it’s the outermost layer around the operating system. The command line has been around for a long time. It was the only way to interact with early computers. Today it's often not necessary to use it at all but getting familiar with it can increase your productivity and give you a whole new level of control.

If you’re new to the command line, don’t be discouraged. It can seem daunting at first, but with a little practice, you’ll be surprised at how easy it is to use. In this blog post I want to show you 5 tricks and tools that make my life easier in the command line.


**1) Search for previous commands**
Instead of searching for the command you typed 10 minutes ago by endlessly hitting the UP key you can simply search for it with the "reverse search":

![reverse search in the shell](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p9m4ffd059wjs4nj1hg5.png)

Start by pressing Ctrl and R. To find a command in your history that starts with a certain letter, type that letter. For example, typing "f" will bring up the most recent command in your history that contains "f". You can keep typing to narrow your search until you find the desired command. Then press Enter to execute the suggested command.

**2) 1-Week Shell Challenge**
For one whole week, try to do everything you usually do via the GUI with the terminal. This includes moving (`mv`) & copying (`cp`) files around, git interaction etc. If you don't know how to do something just google it. After this challenge you might not go back to the GUI for some of the tasks, promised!

**3) https://explainshell.com**
![Screenshot of explainshell.com](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pddgdrbaoascxv00cpu5.png)

A neat website where you can paste commands and it will unwrap all the arguments and show what they mean and how to use them.

**4) https://getaido.app/**

A free command line tool I built myself :)
{% embed https://twitter.com/fullstuckdevv/status/1590792391866585088 %}
Aido is an ai-powered shell command generator. Type `aido` followed by a description of what you want to do in the command line and it will generate the shell command. You can also have it explain commands for you by passing the `--explain`flag in the beginning like:
`aido --explain 'mv *.jpg pictures'` This helps to avoid context switching and is faster than googling.


 
**5) Clean up your terminal**
After running a few commands the terminal can get messy with all the output it produces. A simple `CTRL + L` will get rid of all output and you can continue with a fresh window.



That's it! What is your favourite terminal trick and command? Let me know in the comments!
REACT VS ANGULAR
Tags: react, angular, javascript, programming
Published: 2022-11-22 08:08:40

## 1. What is?

React is a JavaScript library for building user interfaces. React.js, more commonly known as React, is a free, open-source JavaScript library. It works best to build user interfaces by combining sections of code (components) into full websites. Originally built by Facebook, Meta and the open-source community now maintain it. One of the good things about React is that you can use it as much or as little as you want! For example, you can build your entire site in React or just use one single React component on one page.
VS
Angular is A component-based framework for building scalable web applications · A collection of well-integrated libraries that cover a wide variety of features, including routing, forms management, client-server communication, and more
A suite of developer tools to help you develop, build, test, and update your code

---
## 2. Language?
React is written in javascript language.
VS
Angular is written in typscript (superset of javascript) language.

##3. Introduced and maintained by?
React is introduced by Facebook and maintained by open source community.
VS
Angular is introduced by Google inc. while it maintained by google community 

---
## 3. Originally released on?
React: 2009
VS
Angular: 2013

---
## 4. Data Binding ?
React has one way data binding but with some usefull code, it allows us two way data binding.
VS
Angular has two way data binding.

---
## 5. Popular Apps.
React: Facebook Skype Instagram
VS
Angular: IBM Paypal Freelance Upwork
Coding Contest✨
Tags: programming, computerscience
Published: 2022-11-26 16:06:58

##Google Developer Students Club in Collaboration with Newton School✨⚡
Newton School is celebrating 𝟯 𝘆𝗲𝗮𝗿 𝗔𝗻𝗻𝗶𝘃𝗲𝗿𝘀𝗮𝗿𝘆 of our Coding Contest this November, we bring to you 𝗡𝗼𝘁 𝗷𝘂𝘀𝘁 𝗮 𝗿𝗲𝗴𝘂𝗹𝗮𝗿 Coding Contest but,

- 𝟯𝘅 𝗟𝗲𝗮𝗿𝗻𝗶𝗻𝗴
- 𝟯𝘅 𝗢𝗽𝗽𝗼𝗿𝘁𝘂𝗻𝗶𝘁𝘆
- 𝟯𝘅 𝗥𝗲𝘄𝗮𝗿𝗱𝘀


**| 𝐏𝐫𝐢𝐳𝐞 𝐌𝐨𝐧𝐞𝐲 & 𝐆𝐢𝐟𝐭 𝐕𝐨𝐮𝐜𝐡𝐞𝐫𝐬 𝐰𝐨𝐫𝐭𝐡- ₹ 90,000/- 💰|**
**| 𝐅𝐫𝐞𝐞 𝐑𝐞𝐠𝐢𝐬𝐭𝐫𝐚𝐭𝐢𝐨𝐧 |**

💡  **REGISTER NOW** - [Strictly use the following Registration Link](https://bit.ly/Coding-Contest3-MET)

Exclusive **𝗙𝗿𝗲𝗲 𝗕𝗲𝗴𝗶𝗻𝗻𝗲𝗿 𝗳𝗿𝗶𝗲𝗻𝗱𝗹𝘆** Coding Course & Certificates for Participants 
**Language Used**: c/ c++/ Java/ Javascript/ Python.

**_𝗗𝗮𝘁𝗲 𝗼𝗳 𝗖𝗼𝗻𝘁𝗲𝘀𝘁: 𝟯𝟬𝘁𝗵 𝗡𝗼𝘃𝗲𝗺𝗯𝗲𝗿 𝟮𝟬𝟮𝟮 𝗮𝘁 𝟮𝟭:𝟬𝟬 - 𝟮𝟯:𝟯𝟬_**
Eligibility- _Open to All_

❗❗𝗣𝗦: Non-coders can be coding-ready by taking free exclusive online coding courses designed by **IIT Alumni💻** and **ICPC 
finalists**.


_Comment Below and Let me know if you have registered or not: I have to keep Database updated 😄_

**Thank You In Advance if you register**


And please support this post by sharing with your friends and ask them to register by following the above link!✨🤞
Counter App
Published: 2022-11-26 15:43:18

First I created a account on GitHub and also on Netlify then create a simple repository only for how it will work or what is process of deploy the site then open the file in Vs Code and create HTML and CSS file. After that downloaded the GitHub desktop app it makes process easy to deploy sites.
Then I created new repository as counter app on GitHub desktop by giving description to it then publish repository. Then open repository in Vs code then create HTML, CSS, JS files. Then code in those files then link CSS and JS file with HTML file. At the last commit and push three files with message. Then import a file from GitHub and deploy the counter app on Netlify.
JavaScript-
a. getElementById-By using getElementById we can select that element and make changes on it like delete, style etc.
b. innerHTML-By using innerHTML we can change the value of that element which we selected by id or class.
c. queryselector- We can select Element having 'id' and make changes on it or if we want select multiple elements having same 'class' then we can use querySelectorAll and make changes on it.

HTML-
a.button- tag is clickable button that allows user to click that particular button and go for next window or for next step.
b.onclick- we can add onclick in different different tags in HTML it performs Javascript oprations after click that button, onclick is mainly used in button tag. 
c.table- table tag is use to make tables, it contains different different types of data. We can assign table heading by th, table row by tr, table data by td. We can use colspan and rowspan it defines how many rows or columns should span. 

CSS-
a. @media query- We can use media query, where we want give specific CSS for given width.
b. margin-margin is space between browser border and border of element.
  padding-padding is space between border of element and element.
What is the Fastest Loop Type in JavaScript?
Tags: javascript, typescript, webdev, programming
Published: 2022-11-26 13:09:43

###Array Methods
JavaScript has multiple array methods built-in, almost all of them has loops inside them. First I will run the benchmark with 4 most common JS methods use for loop:

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

As you can see, `forEach` has the best performance out of the 4.

The reason why `forEach `is faster than `map `and `filter `is because it won’t return anything after it finished, just `undefined `but `map `and `filter` will return a new array. `reduce `is almost as fast as `forEach`, it is because it will return an `initialValue `( if provided ) or return the value after calculation in the reducer function finished.

Built-in array methods are easy to use and have different use-cases, and the performance isn’t that significant when compare those function, they are beautiful to look at, to read, to write, and declarative. But when performance actually matters, other imperative approaches are multiple times faster.

###For loops
First, take a look at this:

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

You can see that `for `loops are 3 time faster than array methods like `forEach` `map `and `reduce`. Upon receiving an array element, array methods execute a callback function for each element.

Now take an in-depth look in other traditional loops:

####For loop, length uncached:

```
for (var x = 0; x < arr.length; x++) {
 dosmth = arr[x];
}
```


####For loop, length cached:

```
var len = arr.length;
for (var x = 0; x < len; x++) {
    dosmth = arr[x];
}
```

####For…of loop:

```
for (let val of arr) {
    dosmth = val;
}
```

####While loop, ++x:

```
var x = 0, l = arr.length;
while (x < l) {
    dosmth = arr[x];
   ++x;
}
```

####While loop, x++:

```
var x = 0, l = arr.length;
while (x < l) {
    dosmth = arr[x];
   x++;
}
```

Now I will run the benchmarks, the results are:


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

In common cases, `for...of` works great, but in large datasets, like the benchmark above, it’s relatively slower ( still faster than array methods )


###Conclusion
If you prefer declarative programming, just go with array methods, they are easier to read, to write in general, and better in 99% cases in JavaScript.
But if you prefer performance, just use other imperative approaches.
In other words, just pick the loop type that suits your style and your situation.

###Last Words
Although my content is free for everyone, but if you find this article helpful, [you can buy me a coffee here](https://www.buymeacoffee.com/kylele19)
UI post 2 😃
Tags: programming, python, agile, showdev
Published: 2022-11-26 15:11:06

## Hey welcome to another uppdatteeee
if you had seen the cover image, the logo has been redesigned. Due to extremely horrible community feedback (*clears throat*) it was messy 🤪
<br>
### And yes UI structure is there!
Alright fun fact I took the time to make an obs studio, edit it, and make it into a gif and realized I couldn't upload it so: click on link
https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eqn5yphcofjiiyry07du.gif
<br>
### More socials?
Yay I have a tweeter too (imagine joining when tweeter dieded). You can find quick thoughts that I decided to post about Hot Web there and other posts.
https://twitter.com/wjplatformer
<br>
#### Credits to Custom Tkinter! https://github.com/TomSchimansky/CustomTkinter
Singly Linked List Series: Creating push() and pop() methods with JavaScript
Published: 2022-11-26 14:46:40

Adding a node to the end of a Singly Linked List and removing a node from the end of a Singly Linked List is less difficult once you visually map out what needs to happen.  Here is my visualization for creating a push() method that adds a node to the end of a Singly Linked List:

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

Edge case: you can account for an empty list.  If it is not empty then follow the steps mentioned above.

Here is an example of code for a push() method:

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

Here is my visualization for creating a pop() method that removes a node from the end of a Singly Linked List:

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

Edge case: you can account for the list becoming empty.  If it becomes empty then follow the steps in the example code below.
Here is an example of code for a pop() method:

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

Mapping out these visualizations helped increase my understanding of creating push() and pop() methods for Singly Linked Lists.  Hopefully, others will find this helpful too.  Feel free to share your corrections if I got anything wrong.😀
Skeleton Loading React (Native) JS Code
Tags: javascript, webdev, react, reactnative
Published: 2022-11-26 14:33:41

## Edit: just "steal" it from material-ui here:
https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Skeleton/Skeleton.js

---

No, this is not because of a [not-invented-here](https://en.wikipedia.org/wiki/Not_invented_here) syndrome. A promising library is [react-loading-skeleton](https://github.com/dvtng/react-loading-skeleton), among many others.

The reasons for internal implementation:
1. open-source solutions had too many input variables & thus complexity, internal use case is quite rigid and would do fine with less flexibility,
2. introducing new libraries is always a risk. There was insufficient time to analyze if the library could introduce malicious code.

## codesandbox example
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oz255csy8tsgmox3qwgm.gif)
https://codesandbox.io/s/red-meadow-n7ufzx?file=/src/App.js

## Actual Code
```
const fadeAni = useRef(new Animated.Value(0.3)).current;

  useEffect(() => {
    Animated.loop(
      Animated.sequence([
        Animated.timing(fadeAni, {
          toValue: 0.8,
          duration: 1000,
          useNativeDriver: true
        }),
        Animated.timing(fadeAni, {
          toValue: 0.3,
          duration: 1000,
          useNativeDriver: true
        })
      ])
    ).start();
  }, [fadeAni]);

return (
    <View style={{ flexDirection: "row" }}>
        <Animated.View
          style={{
            width: diameter,
            height: diameter,
            borderRadius: diameter / 2,
            backgroundColor: "grey",
            opacity: fadeAni,
            marginRight: marginRight,
          }}
        />
        <Animated.View
          style={{
            width: width,
            height: height,
            borderRadius: height / 5,
            backgroundColor: "grey",
            opacity: fadeAni
          }}
        />
    </View>
)
```

## Wave Animation
Would you like to see that? I can add that later if you would like!
How I should continue my learning journey?
Published: 2022-11-26 14:29:55

Hi 
Like most of programmers I started learning front end 
I watched colt Steele course, web developer bootcamp. 
I learned HTML and CSS, try one of the css framework and completed some of https://www.frontendmentor.io/ challenges. 
After that I started learning JavaScript, I tried other resource like https://javascript.info/ and I got deeper in JS. 
Today I checked colt course and I found out I learned JS more than what Colt taught in his course and I kinda like what I learned 
Here is when things get messy! 
I always heard from professionals that you should learn one languages then start another one or don't try to learn more than one language at the same specially if you are beginner 
In Colt web developer bootcamp, he teaches a bit about JS a bit about React and Angular, a bit about node.js, about about PHP and... 
I asked myself how I should continue my learning journey? 
I should stick to learn JS to an expert level or I should stick to colt course so I could learn a bit about more than one language? 
I want to learn programming as a second career so I could make some money out of it so I want to know what I should do to achieve this goal sooner
Difference Between UI Designer and UX Designer
Tags: ux, webdev, uiweekly, webcomponents
Published: 2022-11-26 14:11:52

UI Design Stands for "User Interface". It is the visual part of an application or device that compose how a user interacts with it and how information is displayed on the screen. In other words, the user interface is the graphical layout of an application. Learn More: https://itianworld.com/difference-between-ui-designer-and-vs-ux-designer.php
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d61z5vakz3cvqr802n9r.png)
Ionic
Tags: cheatsheet, ionic, cli, quickstart
Published: 2022-11-26 14:09:33

# Quick Start
For full documentation, please visit to the official website: 
##### CLI
https://ionicframework.com/docs/cli/
##### Capacitor
https://capacitor.ionicframework.com/docs/
##### Native
https://ionicframework.com/docs/native

## CLI
Install/Update Ionic as global CLI
```bash
npm install -g ionic
```

New project
```bash
ionic start myApp
```

Link project to Ionic AppFlow
```bash
ionic link
```

Preview in web browser
```bash
ionic serve
```

Build web assets and prepare your app for any platform targets
```bash
ionic build
```

Add a native platform to your Ionic project
```bash
ionic capacitor add android
ionic capacitor add ios
```

Open the project in Xcode
```bash
ionic capacitor open ios
```

Sync web assets folder to ios/android folder
```bash
ionic capacitor copy ios
ionic capacitor copy android
```

Live reload with capacitor
```bash
ionic capacitor run ios -l --external
ionic capacitor run android -l
```

Install native plugin
```bash
// Install Core library (once per project)
npm install @ionic-native/core --save

// Install Ionic Native TypeScript wrapper
npm install @ionic-native/barcode-scanner --save

// Install Cordova plugin
npm install phonegap-plugin-barcodescanner --save

// Update native platform project(s) to include newly added plugin
ionic cap sync
```
Difference Between HTML and SGML
Tags: html, sgml, webdev, webcomponents
Published: 2022-11-26 14:08:25

HTML stands for Hypertext Markup Language and SGML stands for Standard Generalized Markup Language. HTML is used for creating the webpage or web application design while SGML is a standard for defining generalized markup languages for the documents. HTML is a markup language means the language which is made of tags or elements so through html language we creates the webpage. Learn more: https://itianworld.com/difference-between-html-and-vs-sgml.php
Importance of Machine Learning in 5G Wireless System
Tags: machinelearning, 5g, wireless, 5glaunch
Published: 2022-11-26 14:01:26

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

The fifth generation wireless technology, simply called "5G", is 100 times faster than the current 4G technology. Learn More: https://itianworld.com/why-is-machine-learning-important-for-5G-wireless-systems.php
Cloudflare Provides Free Rate Limiter for API
Tags: cloudflare, steem, api
Published: 2022-11-26 13:49:11

Previously, the [Cloudflare](https://helloacm.com/tutorial-how-to-set-up-a-api-load-balancer-by-using-cloudflare-worker/) has a metered rate limiter, which is not cheap.  Now, the cloudflare decides to provide this for free (even for free plans):

https://blog.cloudflare.com/unmetered-ratelimiting/

Free plans has 1 rate limiter rule and Pro plans has 2.

![image.png](https://cdn.steemitimages.com/DQmQf1FifXRmHrrqnXMWapvSyTekBLDtdVzYXQoWU1jBZpe/image.png)


![image.png](https://cdn.steemitimages.com/DQmQyZ4geeTttm1zv3CYc9Sqeyk2QUggJfRa1Dzw1TJN4bf/image.png)

For free plans, the rate limit period is 10 seconds, for Pro, it can be set to 1 minute, and for Enterprise, it can be up to 10 minutes.

![image.png](https://cdn.steemitimages.com/DQmfVwjCgNxMkPGvff2WKZyEzzCGFqVQMLJ9jtmSgmqdWF4/image.png)

I have added a Rate Limiting rule to the [Proxy Node](https://steemyy.com/node/)

<hr/>

## [Steem](https://steemyy.com) to the moon!
Creating API Gateway with ACK(AWS Controllers for Kubernetes)
Tags: aws, kubernetes, devops, terraform
Published: 2022-11-26 13:41:30

To create the API Gateway with ACK we need to install the required controllers.

Terraform code to install the EKS Blueprints:
https://github.com/aws-ia/terraform-aws-eks-blueprints

```
terraform apply -target="module.eks_blueprints"
```

once the addon is installed in EKS we can use the addon to create a API Gateway in our EKS cluster using helm or kubectl apply.
https://github.com/AkhilSaiLatchireddi/eks-ack-api-gateway/blob/main/http-api-gw-v2-ack-eks.yaml

clone the repo and run:

```
kubectl apply -f http-api-gw-v2-ack-eks.yaml
```
The Benefits of Instagram Marketing [Infographic]
Tags: instagramlikes, instagramfollowers
Published: 2022-11-26 13:39:08

Instagram continues to develop and draw users, and with over 500 million active users who upload over 95 million photos and videos every day, there is no indication that its growth will slow down. With such a huge and active user base, there are several sponsored and organic marketing alternatives.

If you have a limited marketing budget or are bootstrapping your development, take the time to create a devoted following on Instagram and combine it with your more typical social advertising on Facebook and Twitter.


Utilize Instagram's self-service advertising option, which utilizes Facebook's comprehensive targeting features, if you want paid media. Video, picture, and carousel advertisements are optional.

If you haven't yet stepped into Instagram advertising and marketing, have a look at the infographic below from [Instalab.pro](https://instalab.pro/), which highlights the several benefits of utilizing Instagram as a marketing tool.