teleren/devto huggingface dataset:
Github helped me learn JS surprisingly better. Find Out How. 🤯
Tags: interactivelearning, javascript, github
Published: 2022-10-18 12:27:08

---
title: Github helped me learn JS surprisingly better. Find Out How. 🤯
published: true
description: Lately I started learning JS and Github helped me learn JS in a surprisingly better way. 😲
tags: interactiveLearning, javaScript, github
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8krr10dxtwenmlzvsryb.png
---

Hello guys 👋! Since this is my first post in `dev.to`, let me introduce myself to you. I am a teenager who is playing with new technology just as a hobby. I love to learn new things everyday 🚀. Currently, I am focusing on JavaScript as I have a dream to make this hobby a job in near future. So, to make this process of learning JavaScript quite consistent I've made a Github repository named as [Learning JS](https://github.com/TheCoolGDev/learning-js). If I can remain consistent in this repository for a bit of time then I can learn JS in a surprisingly better way than to learn JS through a series of videos which rather puts me into [Tutorial Hell](https://www.wbscodingschool.com/blog/what-is-tutorial-hell-how-to-get-out/) 👊.

{% embed https://github.com/TheCoolGDev/learning-js %}

So I've made this Github repo to track my progress of learning JavaScript by making new **interactive projects** 🎉 every week and also pushing the project files along with my learning in the form of `README.md` to the github repo every week. In this way, I can learn JavaScript in a more interactive way plus I can become consistent in learning JavaScript 👊.

This is my mid-2nd week on learning JavaScript and I am consistent on it 👍. On the first week of learning JavaScript I learnt the most basic parts of JavaScript which include Variables, Data Types, Comments, Operators, Conditionals and Functions and I have made a [Guess the Number](https://github.com/TheCoolGDev/learning-js/tree/main/Week%201/Guess%20the%20number) project as my first project on this repository. I have also added a [Discussions](https://github.com/TheCoolGDev/learning-js/discussions) page on this repository so that many beginners plus advanced JavaScript Developers out there can help to solve each others' problems related to JavaScript by asking their doubts in the discussions page 😃.

![Guess the Number Proj1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cxgezb8755h6d9sx9uys.png)


So, now talking about my future plans for this repo. I have thought to make a **website** for this repository where people can see all my projects and my learning in the form of a website so that it can be a motivation for them to start learning JavaScript in an interactive plus consistent way like this. Last but not the least, I've got a question to ask you guys. So, 
> Do you guys think that this is a good way to learn ❎? 🤔 

.. in which **❎** may be any programming languages or anything related to technology.

And, I will be writing a new post after a month on my progress on 
learning JavaScript so that I can check my consistency and track my progress simultaneously 😉. Till, then **Happy coding 👨‍💻** and **Be cool** 😎!
Migrate from `old way of fetching data` to react-query..
Tags: react, javascript, webdev, frontend
Published: 2022-10-18 12:25:45

## Introduction
Fetching data is an essential part of any product developers make nowadays, as **React developers** we've been doing so much to fetch some data from a server and we spend more time to keep this data synced with the one on the server.

But now as things are getting faster and faster the community had to think of a faster and more opinionated way to handle fetching data for us `developers`. one of the best tools is [_react-query_](https://react-query-v3.tanstack.com/).


## What is react-query?
per [the docs](https://react-query-v3.tanstack.com/overview) react-query is 

> often described as the missing data-fetching library for React, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your React applications a breeze.


## shall we stop talking and start writing some code!.
Before `react-query` we used to write all this code to fetch a piece of data from a server, keeping a state (loading,failed, succeed) of each stage of fetching these data 

![old way to fetch data without react-query](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f1ili8vcf8cm0uscwr95.png)

to compare between `old way` and `react-query`, and how it makes this simpler than before, take a look at the code below.
 
![fetch code with react-query](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bxv9ekdnsmd9ctriu3d7.png)

How beautiful/simple is this, isn't much cleaner and readable.
react-query simplifies and does everything on it's side and just returns the data/state that we are interested in.

we just pass the url we need the data from and boom we have it, no more `useEffect()`, `setState()` or `async function inside useEffect()`, and we can also track the fetching state if it still loading or failed.

## Important thing to notice..
using `useEffect()` to fetch data is somehow considered a bad practice, as per [official docs](https://reactjs.org/docs/hooks-effect.html) 

> By using useEffect() hook, you tell React that your component needs to do something after render.

which will take more time as react always seeks to finish rendering first then calls functions inside useEffect,
But _react-query_ useQuery() solves this issues by start fetching data in parallel with rendering, which of course time saver.
 

## Last but not least
`react-query` does more more than just fetching data from a server,it has other methods to make our life easier, as mutate, prefetching data, invalidate cached data and of course **caching**, it even have it's built-in devTool I just wrote this article as an introduction for react-query.
You can have more information about it's capabilities by reading [the docs](https://react-query-v3.tanstack.com/overview).

I hope this gave you an overlook of this awesome tool. Feel free to leave a comment with suggestions, questions, or if you think some changes have to be done in the article.
Looking for React Material UI iOS custom theming
Tags: javascript, react, ios, mui
Published: 2022-10-18 12:21:20

Hi guys, as I see here: https://mui.com/material-ui/customization/theming/ it's possible to customize MUI.
I'm coming from framework7 (https://framework7.io/react/appbar) and really want to have an ios like theme with MUI. If anyone has it, and not for free it's not a problem. Thanks
openGauss type conversion function to_char(numeric/smallint/integer/bigint/double precision/real[, fmt])
Published: 2022-10-18 12:20:34

to_char(numeric/smallint/integer/bigint/double precision/real[, fmt])

Description: Convert an integer or floating point value to a string in the specified format.

The optional parameter fmt can be of the following categories: decimal characters, "grouping" characters, plus and minus signs and currency symbols. Each category can have different templates, and templates can be reasonably combined. Common templates are: 9, 0, , (thousand separator), . (decimal point).
Templates can have modifiers like FM, but FM does not suppress 0s specified by template 0 and output.
To convert a value of type integer to a string corresponding to the hexadecimal value, use the template X or x.
Return value type: varchar

Example:
openGauss=# SELECT to_char(1485,'9,999');
 to_char 
---------
  1,485
(1 row)

openGauss=# SELECT to_char( 1148.5,'9,999.999');
  to_char   
------------
  1,148.500
(1 row)

openGauss=# SELECT to_char(148.5,'990999.909');
   to_char   
-------------
    0148.500
(1 row)
Copy after login

openGauss=# SELECT to_char(123,'XXX');
 to_char 
---------
   7B
(1 row)
Fixing SwiftUI navigation with UIKit
Tags: ios, swift, swiftui, uikit
Published: 2022-10-18 12:20:31


You must be aware that Apple hasn’t implemented [SwiftUI](https://medium.com/canopas/swiftui-mvvm-state-management-in-a-simple-way-61efc8929b2f) from scratch, those SwiftUI views are just wrappers around UIKit views. 

While [SwiftUI](https://medium.com/canopas/animations-in-swiftui-with-examples-dfb616fe467f) makes development easy and fun, Apple did a terrible job with some of the basics like navigation and tabs.

It doesn’t have all the capabilities that UIKit had and has a few major bugs as well like
You can not do multiple operations on NavigationView/Stack (Want to pop 1 view and push a new one at the same, not possible.)
It’s not possible to observe current views in NavigationStack (How can we take decisions based on stack apple?)
Terrible animations whenever multiple views are popped off the stack.
You can not control whether push/pop operations should be animated
TabView does not have native behavior of popping stack and scrolling to the top when tapped multiple times (Really apple?)

Those are only some of the things, you will discover much more as you use SwiftUI.

In today’s article, you will see how you can wrap UIKit navigation with SwiftUI. You will be amazed at how easy and simple it is.

For detailed implementation, [visit canopas blog](https://blog.canopas.com/fixing-swiftui-navigation-with-uikit-1110df63ca0e).
openGauss type conversion function to_char(datetime/interval [, fmt])
Published: 2022-10-18 12:19:04

to_char(datetime/interval [, fmt])

Description: Convert a DATETIME or INTERVAL value of type DATE, TIMESTAMP, TIMESTAMP WITH TIME ZONE or TIMESTAMP WITH LOCAL TIME ZONE to TEXT type according to the format specified by fmt.

The optional parameter fmt can be of the following categories: date, time, week, quarter, and century. Each category can have different templates, and the templates can be reasonably combined. Common templates are: HH, MI, SS, YYYY, MM, DD.

Templates can have modifiers, a common modifier is FM, which can be used to suppress leading zeros or trailing whitespace.
Return value type: text

Example:


openGauss=# SELECT to_char(current_timestamp,'HH12:MI:SS');
 to_char  
----------
 10:19:26
(1 row)

openGauss=# SELECT to_char(current_timestamp,'FMHH12:FMMI:FMSS');
 to_char  
----------
 10:19:46
(1 row)
Web 3, BTC, the rush of gold
Published: 2022-10-18 12:15:48

When the globe realized there were issues with the current banking institutions following the 2008 crisis, bitcoin was born as a gold rush of potential. It was the first cryptocurrency created using blockchain technology, and it may have altered how people viewed money. Forbes selected Bitcoin as the top investment in 2013 Today, everyone is familiar with it.

Through Web3 technology, sellers and buyers can now interact directly. For instance, consumers can now connect with artists and creators through platforms such as Musicoin. With Musicoin, you can publish and consume music decentralized, using a cutting-edge digital currency combined with peer-to-peer file sharing

Bitcoin is peer-to-peer (P2P), which means there is no middleman (like a bank or credit card agency) and it has a low transaction fee in addition to being very secure in nature.
**Source:** [Mybitstore](https://mybitstore.com/)
Grab free Microsoft certification coupon
Tags: microsoftcloud, challenge, ignite, freecoupon
Published: 2022-10-18 12:13:21

Microsoft is offering a free certification coupon for successful completion of the challenge before the deadline.

**Microsoft Ignite**, a Cloud Skills Challenge, started on 12th October offers a different set of cloud challenges.

Each challenge falls under a certain Microsoft certification path journey. 

Below are the challenges have started as part of **Microsoft Ignite**, 


The Microsoft Learn Cloud Skills Challenge already started October 12, 2022 at 4:00 PM UTC (16:00) and will end on November 9, 2022 at 4:00 PM UTC (16:00).

After completion of any challenge, exam coupon  will be started sending to your registered email id on November 18, 2022 and the coupon will expire on February 15, 2023

1. **AZ-305**: Designing Microsoft Azure Infrastructure Solutions
**Aligning Challenge**: Microsoft Ignite: Intelligent Cloud Challenge

2. **AZ-400**: Designing and Implementing Microsoft DevOps Solutions
**Aligning Challenge**: Microsoft Ignite: Cloud Developer Challenge

3. **DP-100**: Designing and Implementing a Data Science Solution on Azure
**Aligning Challenge**: Microsoft Ignite: AI Automation Challenge

4. **MB-240**: Microsoft Dynamics 365 Field Service Functional Consultant
**Aligning Challenge**: Microsoft Ignite: Field Service Automation Challenge.

5. **MS-700**: Managing Microsoft Teams
**Aligning Challenge**: Microsoft Ignite: Modern Work Challenge

6. **MS-720**: Microsoft Teams Voice Engineer
**Aligning Challenge**: Microsoft Ignite: Modern Work Challenge

7. **PL-100**: Microsoft Power Platform App Maker
**Aligning Challenge**: Microsoft Ignite: Cloud App Maker Challenge

8. **SC-200**: Microsoft Security Operations Analyst
**Aligning Challenge**: Microsoft Ignite: Protect Everything Challenge.


If you are interested in getting a free coupon with Microsoft learn, you can use this opportunity.


- 
[Registration Link](https://www.microsoft.com/en-US/cloudskillschallenge/ignite/registration/2022?ocid=ignite22_CSC_banner_cnl)

- [Guide lines](https://www.microsoft.com/en-US/cloudskillschallenge/ignite/officialrules/2022?ocid=ignite22_CSC_banner_cnl)
Moved to new PC
Tags: hardware, computer, amd, nvidia
Published: 2022-10-18 12:11:56

## Yay, more hard work for me!
So yeah, got a new setup. My main exams are over, so liek, you know...
<Br>
### Specs
Acer swift X (model going out of fashion)<br>

- AMD Ryzen 5800U
- Nvidia GeForce RTX 3050Ti
- DTS audio
- FHD camera
- Included spam and ads
- Viruses


<br>


### Stuff
Erm. Well, I have to do some moving of files (done already), logging in of over 100 accounts that are linked via 300 roots and many standalone roots (done already), and possibly 10 days of mental torture
<br>
### What to do with my old compy?
Well simple. Install linux and MAKE IT MY INTERNET SERVER! (better than a cup of tea :))
<Br>
### Who asked?
I did. So... Yea, go away because you technically read the whole post so you Actually cared.
What is Padding Used For in CSS?
Tags: css, beginners, webdev, tutorial
Published: 2022-10-18 12:11:13

**What is Padding used for in CSS?**

The padding area of an element is the space between its content and its border. Padding adds extra space within an element. Margin, on the other hand, adds extra space around an element.

## How to Work with Padding in CSS

CSS padding properties are used to provide space around an element’s content while staying within any established borders.

Remember:

- margin adds space outside an element border
- padding adds space inside an element border

## Padding – Individual Sides

CSS allows you to specify padding for each side of an element:

- padding-top
- padding-right
- padding-bottom
- padding-left

Example:

```css
div {
  padding-top: 50px;
  padding-right: 20px;
  padding-bottom: 50px;
  padding-left: 20px;
}
```

## Padding – Shorthand Property

To simplify the code, all of the padding properties can be specified in a single property.

The padding property is a shorthand for the individual padding properties listed below:

- padding-top
- padding-right
- padding-bottom
- padding-left

So, here is how it works:
If the padding property has four values:
padding: 50px 25px 50px 25px;

- top padding is 50px
- right padding is 25px
- bottom padding is 50px
- left padding is 25px

## 4 values

Using 4 values applies the first to top, the second to right, the third to bottom, the fourth to left.

```css
div {
  padding: 50px 25px 50px 25px;
}
```

## 3 values

Using 3 values applies the first to top, the second to left & right, the third to bottom.

```css
div {
  padding: 25px 50px 75px;
}
```

## 2 values

Using 2 values applies the first to bottom & top, and the second to left & right.

```css
div {
  padding: 20px 10px;
}
```

## 1 value

Using a single value applies that to all the paddings: top, right, bottom, left.

```css
div {
  padding: 25px;
}
```

## Values accepted

The following values can be assigned to all padding properties:

length – defines padding in px, pt, cm, and so on.
% – specifies padding as a percentage of the width of the containing element.
inherit – indicates that the padding should be passed down from the parent element.

### Further reading

Want to dive deeper into this topic? Here you will find out more about 
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding" target="_blank">CSS Padding | MDN</a>.

Thank you for reading, and keep on coding.
Why you should hire junior developers
Tags: webdev, beginners, career
Published: 2022-10-18 12:06:13

A junior is someone with less than 2 years of experience. Someone fresh from school, Bootcamp, self-taught or just changed careers. Someone who is probably still trying to figure out if this whole “software development” thing is for them.

So, here's the thing. When you are a junior dev, it is really complicated to get a decent job or any job to start. I know it first-hand, I'm still on that journey.

_Hiring junior devs comes with its share of benefits:_

**1. Mentoring is rewarding for everyone**

Having some junior developers mentored by your seniors keeps both sets on their toes. It encourages pair programming and joint problem solving where juniors will ask questions resulting in the seniors reinforcing their own knowledge.

It demonstrates to your seniors that you have confidence in them and their abilities whilst simultaneously developing their leadership skills.

**2. They bring passion and fresh ideas into your company.**

Bringing new developers on board will provide your company with a fresh crop of new ideas. Coding best practices change quickly, and junior developers may bring new ways of thinking and problem solving to the table. Plus, junior developers are excited to be entering the field and testing out their skills for the first time, and their passion often helps reignite others’ enthusiasm for old projects.

**3. Avoids butting heads**

One of the main problems with having a company built of people at the same level, is everyone thinking they know best. If a problem crops up there is no hierarchy for difficult decision making. It is common for egos to get in the way of coming to the right solution.

Having a team comprised of varied weights means there is always someone to defer to when this situation arises.

**4. Upskilling**

Upskilling is when companies offer training programs and continuous learning opportunities to help employees develop new abilities and close the skills gap in your workforce. Upskilling allows employers to promote from within their organization and invest in their junior developers to mold them into the senior developers of your dreams.

In conclusion,these are some compelling reasons to add junior developers to your team make up. I believe a well balanced team is the cornerstone of a successful tech business and hope this post inspires you to make some junior hires this year.
Hacktoberfest 2022 done!!
Tags: hacktoberfest
Published: 2022-10-18 12:04:07

First of all, thanks to Hacktoberfest (2020) for making me aware of this platform. In past two years, its been a roller coaster. I learnt a LOT from here, things which I won't realize they existed. From "Hello World" to Real World Programs :D

I have successfully completed my Hacktoberfest 2022 challange 🥳 YAY!

I loved the Holopin Badges they added this year.

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

Thank You Hacktoberfest once again!!
Hacktoberfest: Contributing to Hacking project
Tags: hacktoberfest, hacking, opensource, cybersecurity
Published: 2022-10-18 11:56:03


![gif](https://media.giphy.com/media/KmHueA88mFABT9GkkR/giphy.gif)
Hello everybody, I'm starting a new project about hacking. With basics scripts in python and bash. Would be a pleasure to have your help and suggestions. 
[Github repo](https://github.com/gabriel-q7/hacking_tools)
5 Tips on How To Create The Perfect Freelancer Profile
Tags: javascript, webdev, beginners, programming
Published: 2022-10-18 11:43:45

UpWork, Freelancer.com, People Per Hour, Guru.com, are all great freelance platforms you can use as a starting point for your freelance career. However, just registering an account and filling it up with some random text is not going to work out well for you. 

If you’re serious about making a career as a freelancer, the first thing you need to do is create a complete and attractive freelancer profile.

So, here’s what you should include in your freelancer profile.

### 1. Use Your Real Name 
Even though it’s common sense to use a real name when doing business, a lot of freelancers are still using fake names on their freelancer profiles.

### 2. Upload A Professional Photo
Don’t even think about using a selfie or a really weird close-up webcam photo as your profile picture. That’s a mistake most amateur freelancers make.

Get cleaned up. Dress well. And ask someone else to take your picture. Make sure not to give too much attention to the background. More importantly, SMILE!

### 3. Craft A Specific Headline
Your headline should describe your job title. So, try to be as specific as possible to make it easier for your client to understand what you do.
No, not like that.

This is not Twitter. Use a more professional headline

For example, if you’re skilled in writing eBooks then describe yourself as an “eBook Writer”, instead of just “Writer”. Or “WordPress Plugin Developer”, instead of “Web Developer”.

Narrow it down to a niche and you’ll have a better chance at getting discovered on a big platform like Upwork.

### 4. Write Your Bio In First-Person
Don’t describe yourself in the third person like you’re narrating a movie and avoid writing your freelancer profile as if it’s a page on a corporate website.

5. Describe Your Qualifications And Experience
It’s best to include a sentence or two about your qualifications and experience in your bio. But, try not to brag too much. Don’t be like this guy.

Also, use the “Employment History,” “Education,” and the “Other Experiences” sections to add more personality to your profile.
Animated Python: For Each Loops and Palindromes
Tags: python, beginners, programming, tutorial
Published: 2022-10-18 11:24:28

---
title: Animated Python: For Each Loops and Palindromes 
published: true
description: An animation showing how to use Python code to detect palindromes.
tags: python, beginners, programming, tutorial
---

Loops are one of the trickiest concepts for beginning programmers.

To help, I've started a series of animations that walk through how Python code executes for loops (and conditionals, variables, and functions).

The [first animation features code that detects palindromes](https://www.youtube.com/watch?v=BpsEvli1OfI), a sample of which is available below.

![Preview of Animated Python Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qqyn6wzgb23auscnqnlu.gif)

The [full animation, along with some commentary explaining the various steps](https://www.youtube.com/watch?v=BpsEvli1OfI), is available for free on YouTube [8 minute watch].

The animation was created using [Manim](https://manim.community), which allowed me to write Python code to explain Python code. I find that amusing (and also very helpful).