teleren/devto huggingface dataset:
Top 3 GitHub repositories to improve your coding skills.
Tags: webdev, programming, github, tutorial
Published: 2022-02-09 13:52:36

For programmers and aspiring developers eager to explore and master new technology, GitHub is always the best option. Here are some of the most interesting and really well repos on GitHub.

-  [Developer roadmap](
https://github.com/kamranahmedse/developer-roadmap)
with over 180k stars, you can find allthe needed resources for different career paths such as front-end, back-end, and DevOps. Each of these routes necessitates a unique collection of skills and technology, all of which are detailed in the repository. It also gives a strategy for systematically developing these skills.

- [Javascript algorithms](https://github.com/trekhleb/javascript-algorithms)
This is a great collection of JavaScript-based examples of many common algorithms and data structures is a must-have. For each algorithm and data structure, there are also linked definitions and YouTube URLs for more reading.

- [Coding interview university](https://github.com/jwasham/coding-interview-university)
This repo was created by an Amazon systems engineer and will allow you to work for any of the FAANG firms. It's a comprehensive guide to preparing for the most difficult interviews. It also contains links to flashcards so you can refresh your knowledge and stay up to date.
 

If you know other interesting repositories for starter developers please share in the comments.
🎬Login & Registration Form Using HTML & CSS & JS✨
Tags: html, css, javascript, login
Published: 2022-02-09 13:45:19

Hey Devs, today we're going to make an awesome **login and registration form** with  sliding animation just by using HTML and CSS and little bit of JavaScript.

---
{% youtube I5_T547tHf0 %}
---

📚Resources:
🖥️ **Souce Code** => https://bit.ly/3rPNmFL
⚙️ **Icons:** https://cdnjs.com/libraries/font-awesome
🖼️ **Pic used on this project:**
https://undraw.co/illustrations

---
**🏆 Recommended Projects 🏆**
🎬 Neumorphism Login Form | HTML & CSS 
➤https://youtu.be/QWh0S-3D7uY
🎬 Animated Sidebar Menu with HTML & CSS 
➤ Watch: https://youtu.be/QPZrQ_xPVs4 
🎬 Amazing Social Media Buttons Hover Effects | HTML & CSS 
➤ https://youtu.be/P9pi4hq7BBA 
🎬 Animated Login Form | HTML, CSS & JavaScript 
➤ Watch: https://youtu.be/ogNwc45qHKo 
🎬 Slider Sign In / Sign Up Form | HTML CSS Vanilla JS 
➤ Watch: https://youtu.be/Wz5THk0-Y1s 

---

🛴 Follow me on: 
👉https://bit.ly/3oBQbc0

---
You don't need to know it all
Tags: beginners, webdev, career, productivity
Published: 2022-02-09 12:17:22

As I continue to keep developing and building in different, new technologies this realization of not needing to know it all as a developer has become quite an important part to fighting off imposter syndrome for me.

Being a fullstack developer, it can be **so** overwhelming to try and be on top of every new dotnet version, node version, react version etc etc. _You get the message..._

But something that I have come to the realization in myself whilst working on new builds recently is that:

## It's okay not to know everything.

You will come across specialists in areas that know the complex, and make it simple. That's fine! They have chosen to be an absolute master at that specific area of development. Don't compare yourself, you'll never win. Trust me.

But what can you do to make sure that you keep up to date whilst not falling behind?

## Build in your own time with new technologies.

This to me has been so beneficial throughout my career as a developer so far. Never stop building. I find that when I want to use a new technology, I will build a new app with it. Specifically a copy of an existing application that you can use to experiment with technologies and integrations. 

For example: 

_I want to play with react native and brush up on my styling as I feel I am so behind on the trends._

Brilliant! Go build a copy of Instagram in react native, this will cover building in a new technology and experimenting with styles.

## Take exams from technology providers.

This has been a great way for me to learn new things and squash that feeling of being an imposter. This is because the gratification of being certified by a provider allows you to know that the hard work you put in is recognized officially. Rather than relying upon yourself to validate this.

For example:

_I want to learn more about Azure as a developer so that I don't feel I am behind with the trend when developing in their cloud._

Brilliant! Go take an exam such as Azure Developer Associate to learn more and validate your knowledge.

These are two great things that you can do to bolster your knowledge and have helped me. They may or may not work for you but take the personal time to figure this out. I understand life can be difficult and things get in the way and that's fine. As GaryVee well says:

_Macro patience, micro speed._

Aim for the long term, becoming the best developer you possibly can be. Unrealistic timelines and expectations are going to set you up for disappointment. But make sure you push yourself :)
Lessons learned from my first project
Tags: python, beginners, gamedev, programming
Published: 2022-02-09 13:42:30

Hi, I've been coding for about one month now. I've been learning primarily on the educational platform Codecademy, and as part of my education, I was sent off platform to design a terminal game. I created a choose your own adventure game called "BoneTown", that takes place in a western frontier town in a post apocalyptic future. It relies off a lot of dialogue, boolean statements, and functions. It was a lot of fun to create; in truth, at a certain point I felt I was dumping too much time into it, and the value I received (coding-wise) was decreasing as I went on. So large portions of my original story is unfinished but it's all functional. Here is a link to my git repository containing the game. Check it out!

https://github.com/scottgarsson382/BoneTown.git
Python get input from user
Tags: beginners, tutorial, python, programming
Published: 2022-02-09 13:36:08

> [Sign up to my newsletter!](https://baransel.dev/newsletter/).

## `input()`

Let's show the use of the `input()` function simply by taking the name from the user.

```python
name = input("Enter your name: ")
print(name)
```

Output:

```
Enter your name: Baransel
Baransel
```

As seen above, we received a name information from the user. We printed the information we received with the `print()` function, which we processed in our [previous lesson](https://baransel.dev/post/python-print-function/).

For example, let's take two numbers from the user and add them

```python
number1 = input("Enter the first number: ")
number2 = input("Enter the second number: ")
 
sum = number1 + number2
print("Total: ", sum)
```

Output:

```
Enter the first number: 52
Enter the second number: 45
Total: 5245
```

As you can see, we got the result of **1225**, it actually gave the numbers 12 and 25 written side by side, not the sum of these two numbers.

> With the `input()` function, we can only get String (text) data types from the user.

In other words, it took numbers in String type, so how do we import data of Integer (integer) type?

```python
number1 = input("Enter the first number: ")
number2 = input("Enter the second number: ")
 
sum = int(number1) + int(number2)
print("Total: ", sum)
```


### `format()` method:
Continue this post on my blog! [Python get input from user](https://baransel.dev/post/python-get-input-from-user/).


[Sign up to my newsletter!](https://baransel.dev/newsletter/).
React.useCallback()
Tags: react, performance, hook
Published: 2022-02-09 13:32:41

Before diving into `useCallback()` usage, let's distinguish the problem `useCallback()` solves — the functions equality check. 

Functions in JavaScript are first-class citizens, meaning that a function is a regular object. The function object can be returned by other functions, be compared, etc.: anything you can do with an object.

Let's write a function `factory()` that returns functions that sum numbers:

```
function factory() {
  return (a, b) => a + b;
}
const sum1 = factory();
const sum2 = factory();
sum1(1, 2); // => 3
sum2(1, 2); // => 3
sum1 === sum2; // => false
sum1 === sum1; // => true`
```

`sum1` and `sum2` are functions that sum two numbers. They've been created by the `factory()` function.

The functions `sum1` and `sum2` share the same code source but they are different function objects. Comparing them `sum1 === sum2 `evaluates to `false`.

## The purpose of `useCallback()`

Different function objects sharing the same code are often created inside React components:

```
function MyComponent() {
  // handleClick is re-created on each render
  const handleClick = () => {
    console.log('Clicked!');
  };
  // ...
}
```
`handleClick` is a different function object on every rendering of `MyComponent`.

Because inline functions are cheap, the re-creation of functions on each rendering is not a problem. A few inline functions per component are acceptable.

But in some cases you need to maintain a single function instance between renderings:

1. A functional component wrapped inside `React.memo()` accepts a function object prop
2. When the function object is a dependency to other hooks, e.g. `useEffect(..., [callback])`
3. When the function has some internal state, e.g. when the function is debounced or throttled.

That's when `useCallback(callbackFun, deps)` is helpful: given the same dependency values `deps`, the hook returns the same function instance between renderings (aka memoization):

```
import { useCallback } from 'react';
function MyComponent() {
  // handleClick is the same function object
  const handleClick = useCallback(() => {
    console.log('Clicked!');
  }, []);
  // ...
}
```
`handleClick` variable has always the same callback function object between renderings of `MyComponent`.
Tired of 3D Printing plastic?. Support this 3D Metal Printer project here
Published: 2022-02-09 13:09:19

This is a software and hardware project. Written in different platforms and languages.

You can see the project here:
https://www.patreon.com/3dmetalprinter

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jkd1fgae9q0jwtohgcao.jpg)
Cross Browser Testing With LambdaTest Jenkins Plugin | Jenkins Tutorial | Part IX
Tags: javascript, beginners, tutorial, jenkins
Published: 2022-02-09 13:08:31

{% youtube x5cyrE9ecis %}

In this video, we will talk about performing cross browser testing with LambdaTest Jenkins Plugin. Explore -: http://https://accounts.lambdatest.co...

This video is Part IX of the Jenkins LambdaTest Tutorial series wherein Moss(@tech_with_moss), a DevOps engineer, will show you how to do cross-browser testing with the LambdaTest Jenkins Plugin. The prerequisites are creating a LambdaTest account, installing Python 3 on the Jenkins server, and installing the Python Selenium Webdriver module.


By the end of this video, you will learn 🎫 -:
🔸 How to launch the browser in Jenkins?
🔸 Create Jenkins freestyle job to run the test scripts on the LambdaTest platform
🔸 Perform parallel cross-browser testing with LambdaTest Jenkins Plugins
Adding downloaded fonts in your React app
Tags: css, react, webdev, beginners
Published: 2022-02-09 12:57:57

Hola amigos👋,

There exist **fonts** which can't be found on _Google Fonts_.
And now you're left with no other option but to download and import them in the code on your own.

_Lucky You🍀 It's not that difficult to add downloaded fonts in the React App._

You just need to follow these 4 steps:

<span>1.</span> Create a **`fonts`** folder in the `src` folder of your React app.

<span>2.</span> Add the **downloaded fonts** in the `fonts` folder created.

The Folder Structure would look something like this:

![Folder Structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sr322431p8uxqqsx8pjp.jpg)

<span>3.</span> In the `index.css` file, write the following lines of code:

```css
/* In index.css */

@font-face {
  font-family: "GilroyRegular";
  src: local("GilroyRegular"),
    url("./fonts/Gilroy-Regular.otf") format("opentype");
  font-weight: normal;
}

/* Other font formats include:
'woff2', 'truetype, 'woff', 'embedded-opentype', and 'svg' */
```

<span>4.</span> Import the `index.css` file in the `index.js` file.

```javascript
// In index.js

import "./index.css";
```

***Now to use it, you just need to add the following css:***

```css
/* In any .css file */

.selector {
font-family: "GilroyRegular";
font-style: italic;
}
```

**😃Whoa!**
_We have successfully integrated the downloaded font in our webapp🔥_

![Task Completed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pikkb51kvvgukqce2idd.jpg)
How to check if a youtube video is shorts or not using nodejs?
Published: 2022-02-09 12:57:47

What if I gave you a youtube video id and asked you to tell Me wether the video is shorts or not without opening it?
How Would You do that?
Simple - 
_**Introducing [identify-youtube-shorts](https://www.npmjs.com/package/identify-youtube-shorts) npm package**_
It allows you to easily check if a youtube video is youtube shorts or not

## Example

```javascript
const checkIfYoutubeShorts = require('identify-youtube-shorts');
const videoID = "dQw4w9WgXcQ";
async function example(videoID){
    const ifShorts = await checkIfYoutubeShorts(videoID);
    console.log(ifShorts);
}
example(videoID)
```
It will print whether the youtube video with the id - `dQw4w9WgXcQ` is a youtube short or not.

## Installation
Easy Just use `npm i identify-youtube-shorts`

*Read more about it here - [https://www.npmjs.com/package/identify-youtube-shorts](https://www.npmjs.com/package/identify-youtube-shorts)*
Wednesday Links - Edition 2022-02-09
Tags: java, jvm, performance, kotlin
Published: 2022-02-09 12:54:27

JEP draft: Sequenced Collections (12 min)💎
https://openjdk.java.net/jeps/8280836

Thread Pool awareness (30 sec read)👀
https://twitter.com/jnabrdalik/status/1491086220201701376

JMH + Java 17 (30 sec read)⚫
https://twitter.com/ijuma/status/1490442965059207174

Lies, Damned Lies, and Microbenchmarks (4 min)🐟
https://horstmann.com/unblog/2022-01-06/index.html

Measuring ForkJoinPool Parallelism (10 min)🔀
https://www.javaspecialists.eu/archive/Issue297-Measuring-ForkJoinPool-Parallelism.html

Kotlin 1.6.20 Preview (7 min)🎉
https://blog.jetbrains.com/kotlin/2022/02/kotlin-1-6-20-m1-released/

High performance with idiomatic Kotlin (15 min)🚄
https://magdamiu.medium.com/high-performance-with-idiomatic-kotlin-d52e099d0df0

Understanding Java Compilation: From Bytecodes to Machine Code in the JVM (7 min)🦾
https://www.azul.com/blog/understanding-java-compilation-from-bytecodes-to-machine-code

An Introduction to Annotations and Annotation Processing in Java (15 min)🏷️
https://reflectoring.io/java-annotation-processing/
Part-0: Learn devops from scratch!
Published: 2022-02-09 12:51:01

## Introduction
In this series of posts, I will share my journey of learning DevOps. Moreover, together, we will build some dummy microservices and also deploy them. On the way, we will explore important cloud-native tools.

## How is this guide/tutorial different?
Right now, I'm struggling to learn DevOps and to get into a cloud-native ecosystem. There are a ton of tools, and also a ton of great resources put up by amazing people. The only thing that I found missing was, no tutorial explains how everything works together. That's the problem I want to solve with this tutorial. Below is a rough draft of topics I might cover, more items and steps might get added in the future.

## Things we will cover:
Note: Don't worry if you don't understand anything below. We will learn each one of them.
- Build simple dummy microservices
  - Write some API's
  - Write some tests
  - Implement simple logging
  - Best practices
- Containerize the application built above
  - Learn and use docker
  - Use docker-compose
  - Best practices
- Build continuous integration pipeline
  - Learn and use Jenkins or GitHub actions.
  - Setup continuous integration for our apps
  - Best practices
- Provisioning
  - Learn Terraform
  - Provision resources on cloud providers
  - Best practices
- Orchestration
  - Learn Kubernetes
  - Setup Kubernetes on the cloud provider
  - Deploy our apps to Kubernetes
  - Best practices
- Packaging 
  - Learn helm
  - Use helm
  - Best practices
- Environments
  - Setup different environments like Dev, QA, Production
  - Best practices
- More things
  - I may not be able to cover the below items, but I will try!
  - Ansible
  - Secret management
  - Centralized configuration
  - Centralized Log management
  - Metrics
  - Tracing
  - Security aspects
  - ... more? maybe!

Oops, looks like a big commitment, lol!

**Note:** I won't go into much details about each and every tool as I feel there are ton of good resources to learn tools. I will point to good resources in each section.

## The challenge
It is going to take time to publish the whole playlist, and some blogs will contain a lot of information which might consume more time to write. 

Moreover, people tend to lose interest in incomplete blog playlists causing less retention and loss of interest in more interesting and important topics in the later parts. Keep this in mind, and try to read all the blogs to get the complete picture!


If you think I have missed any topics, made some mistakes then please comment and share your views!

If you want to motivate me more to sit and complete this series and help others find this resource, please leave a reaction. Thanks!

twitter: https://twitter.com/rahil_rehan
personal blog: https://rahilrehan.github.io/
How to Develop an App with Ionic
Published: 2022-02-09 12:42:51

Ionic is one of the most popular and powerful HTML5 mobile application development frameworks. Ionic is an open-source project, built on top of AngularJS and Apache Cordova.  

The Ionic framework comes with a bundle of capabilities that make app development incredibly easy, saving developers a lot of time and effort. For instance, directives and services are available to create native-like mobile components. By leveraging JavaScript on both the front and backend, development can be more consistent and designed within the same system.  

The major advantage of an Ionic framework for which developers prefer is that the look, feel, and UI interaction of your application is consistent across all devices.

Now to develop an Ionic app to leverage the above-mentioned benefits needs an expert developer/development company for the development. Now deciding on the right expert to hire for developing an Ionic app is a little tricky process but the simple and responsible agencies have come forward to solve this question.

One such agency is **WebClues Infotech.** With its presence across 5 continents the agency has a huge network along with the expert team for developing different mobile apps. Also, the agency offers a flexible working and pricing model that benefits businesses looking to hire a dedicated Ionic Developer. For more information, you can visit the link given above.
Find Value at Key 
Tags: javascript, discuss, programming, algo
Published: 2022-02-09 12:39:17

#### Problem Statement: 
- Write method findPath
- Should take two params:
    - object
    - keys separated by dots as string
- Return value if it exists at that path inside the object, else return undefined

#### My Approach: 
- Initialise answerObject as the original Object.
- Split the string with `.`.
- Traverse the spitted array.
    - Update answerObject with the value read from iterated key.
    - If answerObject is not undefined, then continue.
    - Else break.
- Return answerObject.

#### CODE:
```javascript
var obj = {
    a: {
        b: {
            c: 12,
            j: false
        },
        k: null
    }
};

function findPath(obj, str=''){
    var ansObj = JSON.parse(JSON.stringify(obj));
    var attributes = str.split('.');
    if(!attributes.length){
        return undefined;
    }
    let index = 0;
    while(attributes[index]){
        if(ansObj[attributes[index]]!== undefined){
            ansObj = ansObj[attributes[index]];
        } else {
            ansObj = undefined;
            break;
        }
        index++;
    }
    return ansObj;
}
//Output: 
console.log(findPath(obj, 'a.b.c')); // 12
console.log(findPath(obj, 'a.b')); // {c: 12, j: false}
console.log(findPath(obj, 'a.b.d')); // undefined
```
    

Let's discuss your approach in the discussion box or you can hit me up at aastha.talwaria29@gmail.com.

Thanks for reading.
Building Website from Scratch - Part 2
Tags: webdev, shriekdj, devlog, codewithshriekdj
Published: 2022-02-09 12:20:39

So As A Start I Added The `index.html` file in the root repository of the github repo.

With Nearly No SEO And Just an Hello World Program In Pure HTML.

## Pull Request
{% github https://github.com/shriekdj/site-from-scratch/pull/2 %}

## GitHub Repo
{% github shriekdj/site-from-scratch %}
Front-end developer 🤓 Challenge🚀
Tags: javascript, react, webdev, programming
Published: 2022-02-09 12:06:54

Web Development is one of the most coveted fields in today’s tech world. As the internet spreads its roots in every corner of the world, the need for highly interactive and responsive websites is ever-increasing.

## Challenge for Front-end Developers 🤓

Create a **Text Compression Application** (either Web-App or Native App, it's all up to you) using Rapid API. The application should have all features that are provided by the Rapid API, like-

- Setting Passcode
- Saving JSON Data
- Time To Live or ttl functionality
- One Time Read

Read the [Rapid API Documentation](https://rapidapi.com/joshirajesh448@gmail.com/api/text-compression) here.

---

## API Usage Example

Once you have Successfully Subscribed for the Free Plan, you can try it out on the API Playground.

Following is an example in JavaScript.

### Saving Data

```javascript
var axios = require("axios").default;

var options = {
  method: 'POST',
  url: 'https://text-compression.p.rapidapi.com/',
  headers: {
    'content-type': 'application/json',
    'x-rapidapi-host': 'text-compression.p.rapidapi.com',
    'x-rapidapi-key': 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
  },
  data: {
    passcode: 'SECURE_PASSCODE',
    data: {text: 'Hello, World!'},
    ttl: 120,
    one_time_view: false
  }
};

axios.request(options).then(function (response) {
	console.log(response.data);
}).catch(function (error) {
	console.error(error);
});
```

> response

```javascript
{
   "detail": true
}
```

### Fetching Data

```javascript
var axios = require("axios").default;

var options = {
  method: 'GET',
  url: 'https://text-compression.p.rapidapi.com/SECURE_PASSCODE',
  headers: {
    'x-rapidapi-host': 'text-compression.p.rapidapi.com',
    'x-rapidapi-key': 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
  }
};

axios.request(options).then(function (response) {
	console.log(response.data);
}).catch(function (error) {
	console.error(error);
});
```

> response

```javascript
{
   "passcode": "SECURE_PASSCODE",
   "data":{
      "text": "Hello, World!",
      "one_time_view": false
   }
}
```

---

## Future Scope 🚀

You may use the Rapid API Service for FREE initially. Host your front-end application freely on [netlify](http://netlify.com/), once you have traffic on your application, go for **Pro** or **Ultra** plans 💪🏻 on Rapid API and monetize 🤑 your application.

---

## Challenge Accepted?

Drop a Comment, saying **Challenge Accepted 😏**. Once you finish the application, share the Link in the same thread.

All the Participation will be listed below.

---

## Participation

- 
-
-
-

---

Happy Coding 🤓

Cheers!