teleren/devto huggingface dataset:
SEO Made Simple: How to Rank Better and Faster
Tags: webdev, beginners, watercooler, devops
Published: 2021-11-06 16:16:48


SEO is an important aspect of marketing any business online but it is often misunderstood. This article will go over why you need to do SEO and how to optimize your website to rank higher on search engines.
### What is SEO?
- SEO stands for **Search Engine Optimization**
- It is the process of taking your website or piece of content to rank higher on search engines
- The better visibility your pages have in search results, the more likely you are to gather attention and attract prospective and existing customers to your business.

### How does SEO works?
- Search Engines like **Google**, uses bots to crawl websites and pages, and collects information and put them in index. 
- It is just like library where librarian helps to find out your required book from a huge library.

### Is SEO important for marketing?
![SEO](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/omkjngyxe1hxdyzlo741.jpg)
- Yes, it is a **fundamental part of digital marketing**, because there are **billions of searches conducted** every year.
- Therefore, we can say that **search** can be often the primary source of digital marketing.
- In total, SEO is the foundation of a **holistic marketing ecosystem**.

### Some good tips to optimize SEO
- Be more **descriptive**, use perfect and accurate title for your website or pages. 
- Express precise about your product to have better search results
- Keep your site **up-to-date**.
- **Use text** - Please use more text in pages. Avoid keeping all the information in **images, videos and animations**. As the search engines don't easily understand this formats as easily as **text**

### How Google finds your page
![Google search](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/csenfg86x1ay5bfjc5o5.png)
- Google discovers your page with the help of automated bots called **crawlers**.
- They look for new page or check for updated pages.
- Google visits the page that it has learned from crawling and tires to analyse the each page.
- Google analyses videos, images, attached files in the page.
- This information is stored in the *Google Index*. This process is known as **Indexing**
- When a user searches on Google, Google tries to serve the highest quality results to the user.

### Conclusion
This article should give you a basic overview of what SEO is. It should also give you some actionable steps to take to start optimizing your site for search engines. If you have any comments or questions, please leave them below in the comment section



###### Image credit: [Merakist](https://unsplash.com/@merakist)
Day 52/100 Summarizing with reduce
Tags: 100daysofcode, programming, challenge, motivation
Published: 2021-11-06 16:12:20

"There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies."

– C.A.R. Hoare, 1980 ACM Turing Award Lecture

![reduce](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z90fyjepoemcj7ojgqgi.png)
Music Player
Tags: javascript, webdev, programming
Published: 2021-11-06 15:55:21

Hi everyone I created a music player app and I want to share it with you, you can find it here:
https://oliwier965.github.io/Audio-Player/ 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yaagst1ax9azq46ly4tf.png)
Your feedback is very appreciated :)
Questions for CSV Users
Tags: ruby, csv, testing
Published: 2021-11-06 15:55:17

---
title: Questions for CSV Users
published: true
description: 
tags: ruby, csv, testing
---
A while back I learned from the good folks over at [ruby/csv](https://github.com/ruby/csv) that for performance reasons, CSV methods do not type-check their arguments.  Therefore an invalid argument will eventually cause an error somewhere downstream.  The original cause of the error may or may not be obvious.

---
[Added, for clarity.]

For example, in the method call <code>CSV.new(s)</code>, `s` must be [String-convertible](https://docs.ruby-lang.org/en/3.0.0/doc/implicit_conversion_rdoc.html#label-String-Convertible+Objects) or an IO stream open for reading, but this is not checked when the call is executed.  An invalid `s` is discovered only later, when there's an attempt to read from it.

---

I'm considering creating a gem (possibly called <code>csv_debug</code>) such that:
- <code>require 'csv_debug'</code> would transparently perform type checking, raising an exception on violation.
- Changing to <code>require 'csv'</code> would return things to normal.

For example, <code>CSV.new(data, **options)</code> takes 24 options, most of which are not used immediately.  The gem would type-check each option (as well as <code>data</code>) as soon as the method is called.

Using the gem would allow an application that uses CSV to have type checking in development, but no type checking in production.

Questions:
- Would this gem be useful?
- Is there a better name for the gem?  (There's already a gem called <code>csv_safe</code> that guards against dangerous CSV data.)
Animated characters brought to life
Tags: react, machinelearning, showdev
Published: 2021-11-06 15:32:43

Hey guys, I haven't posted  for a month partly due to work and also a bit of laziness😓, so I'm thinking of coming back with a new series called **Bored Builds**, where I'll talk about stuff I create for whatever reason.

Anyway, for today I present to you [animatd](https://animatd.netlify.app/), which is more or less a proof of concept, The general idea is to take the selfie image be it an animated character or sketch and make it photorealistic as  can be seen below: 

![Sterling Archer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d6r5txc0qszhy0xoux3s.png)

Here's another for good measure: 
![Cheryl](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gbzecgrtxto77hcatuo3.png)
  
If you haven't guessed by now all this is done by AI, The model used is E4E + StyleClip.

Essentially, what it does is take the image supplied and look for the facial landmarks, which are the features that make a face i.e.: eyes, nose, lips, jawline, brows etc. With those features, it tries to use what it has learnt previously as to how a face should look and attempts to match with the detected features in the provided image and resultant is what is seen above.

It was something really cool I found while on YT and thought I'd make some practical use for it. Anyway, to see a collage of my favorite archer and game characters brought to life using this, visit [animatd](https://animatd.netlify.app/).

The plan going forward is to take this a step further by making it an API, let me know your thoughts down in the comments, whether it is worth the effort or whatever. 

Stay safe guys ✌.

P.S Old Kratos is my favorite 😁:
![kratos](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8pnkz1waufwae8gnwt7x.png)
how to fix this error - Delete 'CR' Prettier/Prettier
Published: 2021-11-06 15:02:49

run this command in Terminal

<pre>
yarn run lint --fix!
</pre>


 
or

add this line in eslintrc - "prettier/prettier": ["warn",  {"endOfLine": "auto"}],
<pre>
{
  "extends": [
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "react-app",
    "react-app/jest",
    "prettier"
  ],
  "plugins": ["@typescript-eslint", "prettier"],
  "parser": "@typescript-eslint/parser",
  "rules": {
    "prettier/prettier": ["warn",  {"endOfLine": "auto"}], 
    "testing-library/prefer-screen-queries": "error",
    "testing-library/no-manual-cleanup": "error",
    "testing-library/prefer-wait-for": "error",
    "testing-library/no-await-sync-events": "error",
  }
}
</pre>

or

you can add this line to your .prettierrc

<pre>
"endOfLine": "auto"
</pre>
Sinatra Assessment
Published: 2021-09-28 23:43:09

I just got a new puppy, so I was inspired to create the Pupdate Blog to create posts about my puppy's training progress. However, anyone can sign up, log in, and create their own Pupdates about their own dog.

First, I used the corneal-new gem to create boilerplate code. I added views, models, and controllers. 

Users sign up using an email and password. I used the bcrypt gem to ensure the user's password is protected. 

Then I set up the UsersController and PupdatesController files and mounted them in config.ru. I also added "user Rack::MethodOverride" to give access to Rack middleware so my app will have access to HTTP verbs other than GET and POST, such as PATCH and DELETE.

I created two migrations with rake db:create_migration: one for the users table and one for the pupdates table. The users table has 3 columns: name, email, password_digest. The pupdates table has a title, content, and a user_id. 

Next, I created a seed file to fill the table with some dummy data to play with and test the app's functionality.

Back in the controllers, I created the routes needed for the UsersController to sign up, log in, and log out. I also added in the PupdatesController the ability to create a new post, edit a post, and delete a post. I also authenticated the user to ensure that a user can't edit or delete other users' posts. Helper methods were useful for that!

Since all of the functions are behaving well, I added some UX features. I used the flash gem to flash messages at users to give them information. For example, when you delete a post, "Pupdate deleted" appears on the screen. Users also see a flash message when they enter invalid login credentials.
Props and State in React Components
Tags: react, javascript, webdev, 100daysofcode
Published: 2021-11-06 14:57:03

It is essential you have a good understanding of props and States in both functional and class components. props influences what is rendered in the screen. props are optional input that your components can accept and allows the components to be dynamic.
Props and State holds information that influences the UI in your browser.
Props is just an object that contains the attributes and their values which has been passed from their parent components.
Props are immutable. Since they are immutable how do we maintain components data that might change over time? The answer lies in using State.

Components States. 
Another way to influence what is rendered on the screen is the state of the components.

✓Props get passed to the components while state is managed within the component.
✓Props are functions parameters whereas the state are variables declared in the function body.
✓Props immutable Warehouse States can be changed.
✓In functional components props are assessed using the "props" parameter and in-class components using "this.props", where is estate they are assessed using the useState Hook in functional components and "this.state" in class components.
factorial_2_4_4.java
Tags: java, beginners, programming, tutorial
Published: 2021-11-06 14:54:53

```java
//problem 2.4.3
		// factorial_2_4_3.java: write a program tha takes an integer n and calculate n! 
import java.util.Scanner;
class factorial_2_4_4
{
	public static void main(String args[])
	{
		Scanner sc = new Scanner(System.in);
		int num = sc.nextInt();
		int  fact = 1;
		if(num<1)
			System.out.println("Enter a valid number...");
		else if(num == 1)
			System.out.println("Factorial value of "+num+" 1");
		else
		{
			while(num>0)
			{
				fact = fact*num;
				num--;
			}
		}
		System.out.println("factorial value if"+fact);
	}
}

```
b_t_d_and_d_t_b_2_4_3.java
Tags: java, beginners, programming, tutorial
Published: 2021-11-06 14:54:12

```java
//problelm 2.4.2
		//b_t_d_and_d_t_b_2_4_3.java: write a program that dose binary to decimal and decimal to binary 
import java.util.Scanner;
class b_t_d_and_d_t_b_2_4_3
{
	public static void main(String args[])
	{
		Scanner sc = new Scanner(System.in);
		System.out.println("Enter the binary number: ");
		 int binar = sc.nextInt();
		// System.out.println("Enter the decimal number: ");
		// int decimal = sc.nextInt();
		int bino = binar;
		int base = 1, num,rem, decino =0;
		while(bino > 0)
		{
			rem = bino % 10;
			decino = decino + rem*base ;
			bino = bino/10;
			base =  base *2;
		}
		System.out.println("Binary number is "+binar+"and \n Decimal number is "+decino);
		
	// decimal to binary
		System.out.println("\n\nEnter the decimal number: ");
		int decimal = sc.nextInt();
		int i =0 , deci;
		int binary[] = new int[16];
		deci = decimal;
		while(deci > 0)
		{
			binary[i++] = deci%2;
			deci = deci/2;
		}
		System.out.println("Decimal number is "+decimal+"and \n Binary number is ");
		for( i = i-1 ; i >= 0; i-- )
		{
			System.out.print(binary[i]);
		}
			
	}
}
```
Hacktoberfest 2021 Experience
Tags: hacktoberfest, experience, opensource, challenge
Published: 2021-11-06 12:14:01

I got all my 4 pull request accepted in this year's hacktoberfest. I am quite happy to complete the challenge.

Actually, this was my first time participating in Hacktoberfest. Although I had heard about it previous year, I didn't complete the challenge.

But this year, I was determined to complete it.
So first thing I did was signing up in the [hacktoberfest site](https://hacktoberfest.digitalocean.com/) (github account is required to sign in). If you don't have then you can create account in [github.com](https://github.com/)

After signing up, the search for open-source project started. 
As this was my first time contributing to open-source projects. I was quite in dilemma for which projects to find. My prefered tech stack is python. So I started to google for open-source project related to python programming language.

Many list of projects appeared. There were also some of other sites like [awesome open source](https://awesomeopensource.com/) that helped to filter the  projects. So with many list of projects appeared on my screen, made me overwhelmed. But, there is nothing to worry about. I said to myself, "there is still 26 days remaining, I will figure it out".

So I started to look for beginner friendly github repos. And I found a repo for DSA learning. The repo was called "Algorithms". I looked into this repo and found repo was about dsa and algorithms. And it had choice of programming language to do as well.

So I followed the steps of contribution file in the repo.
***forked the repo, cloned the repo on the local machine, and started to write code in python and pushed it to github.
After that I created pull request.*** 
And it also got merged. At that time I felt glad to contribute to opensource project.

Also the the hacktoberfest team had the merged PR held for 14 days as maturity time for pull request. All 4 PR passed the maturity time. And here I am happy with my ownself for contributing to opensource projects & completing hacktoberfest 2021 challenge.

The challenge worth the shot.
time_2_4_1.java
Tags: java, beginners, programming, tutorial
Published: 2021-11-06 14:53:14

```java
//problem 2.4.1
		// time_2_4_1.java: write a program to calculate current time in hrs,min,sec.(usign finction System.curretTimeMillis();)

class time_2_4_1
{
	public static void main(String args[])
	{
		// System.out.println("Giving the current time in seconds: ");
		System.out.println((System.currentTimeMillis()));
		System.out.println("Time in hour "+(System.currentTimeMillis()/3600)+" : minute "+(System.currentTimeMillis()/60)+" : seconds "+System.currentTimeMillis());
	}
}
```
Angular : RxJS concatMap operator
Tags: javascript, webdev, angular, typescript
Published: 2021-11-06 14:41:41

* In Angular, we use HTTP to get data from backend,HTTP methods always return an observable.Generally we subscribe to that observable and assign response data to class variables to use it in our component.
* But using RxJS operators we can compose multiple observables(data streams) or process  observable data  before subscribing to it.

**RxJS concatMap operator**
It is a High-order Mapping operator an operator that takes value from an outer observable and maps it into inner observable instead of plain values(**Observable emits observable**).

**concatMap operator**
1. Takes each value from the outer observable and maps that value  to observable(called as inner observable) 
2. Concat all inner observables into a single observable in order  and subscribe to inner observables and emit data of each inner observable into output observable in sequential manner.
3. concatMap never subscribes to the next inner observable until the previous one completes.

Example:
Display first 3 toppers of the computer department on UI with ROLL NUMBER & MARKS.
![toppers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qofhfkxmgt9ffcmxa1t0.png)

[Run live](https://57dhr.csb.app/)

Here we have 2 API’s
1.First API to get roll numbers of first 3 toppers.
2.Second API to get marks of topper taking roll number as input.

In the above case we need to take all roll numbers from the first API  and pass it to the second API.
Normally in such scenarios developers use a nested subscription approach.
![Nested](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hsmq81ny79m0e3umm3ge.png)
Here due to nested subscription approach output may vary,because we are hitting HTTP requests for each roll number,but here HTTP requests are not completing in sequential manner,depending upon which request completes first that request response data gets pushed in toppersList_1. 

So solution to this problem is use concatMap RxJS operator instead of nested subscription.
For given use-case,we need to use two concatMap operator.
![concat](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/twlmz1i1soc73lx2pgd2.png)

**First contactMap operator -**
*getToppers_rollNum()* this method returns an Observable of type number[] , conactMap  maps `Observable<number[]>` to `Observable <number>`(inner observable) then subscribes to inner observable and emit data into output observable(top_3_rollNum$).

**Second  concatMap operator -**
Let's consider **top_3_rollNum$** as outer observable.concatMap takes each roll number from the outer observable and **hits http request sequentially**(here we have 3 inner observables return by 3 http requests) & emits http response data into output observable(topper_marks$).

*concatMap never hits the next http request until the previous one completes.*

Shorthand syntax for above code
![Shorthand ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7x84zt0xszzv3a45pxfs.png)

So,concatMap is used where sequence of execution matters.

Thanks for reading! If you found this helpful please share!
Questions that we all have before learning Data structures and Algorithms.
Tags: beginners, programming, tutorial, productivity
Published: 2021-11-06 14:11:54

![Data-structures-and-algorithms](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/inz078b2zk9g7meyp3g4.jpg)

<b>Why learn data structures?</b>

So data structures are the core and most basic subject for programmers, Any application you build, you have to use data structures in order to optimize the app and deliver the best version of it, without DS it’s not possible to develop applications.
You should learn data structures until you know how to code them and you can develop your own data structures.

<b>Which programming language is suitable?</b>

You can choose any language but the most popular is C & C++. C language does not have any built-in data structures so you can learn DS from the base. I would prefer you to start with C lang. after that you can switch to C++ for competitive coding.

<b>What are Algorithms?</b>

Algorithms are those that are used on data structures. Algorithms is a very vast topic. some popular algorithms are face recognition algorithm (used by our smartphones), location tracking (algorithms used by Google maps), and many more. You can find them on the internet.
Installing Jellyfin on LG webOS
Tags: jellyfin, webos, lg
Published: 2021-11-06 13:49:10

**UPDATE 2022-11-29**: Jellyfin has added their app to LG's WebOS store for newer TVs (2021+). For older ones (WebOS < 6), the following instructions should still apply.

---

1. Clone https://github.com/jellyfin/jellyfin-webos
2. Open WebOS TV SDK
3. cd into directory
4. Run `ares-package org.jellyfin.webos`
5. Open the Developer Mode app on the TV and login
  - [Get the Developer Mode app](https://webostv.developer.lge.com/develop/app-test/using-devmode-app/#installDevModeApp)
  - [Get a developer account](https://webostv.developer.lge.com/develop/app-test/preparing-account/)
6. Turn on Dev Mode, TV will reboot
7. Re-open the Developer Mode app
8. Turn on Key Server
9. Run `ares-novacom --device tv --getkey`, passphrase is found on screen
10. Run `ares-install --device tv --list`, a blank line means everything works
11. Run `ares-install --device tv ./org.jellyfin.webos_X.X.X_all.ipk` replacing the Xs with the requisite version number
12. Done!

## If you need to re-add tv to the device list

1. Run `ares-setup-device` and remove tv
2. Run `ares-setup-device` and choose add
3. Use the following settings:
    - Device Name: tv
    - Device IP address: IP found on screen
    - Device Port: 9922
    - SSH user: prisoner
    - Description: optional
    - Select authentication: password
    - Password: leave blank
Frontend Mentor Challenge #2
Published: 2021-11-06 13:36:31

![stats preview card component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/upflusq0vdqqptcwxg61.png)

## Responsive Stats Preview Card Component built with HTML & CSS

This is the second frontend project I've completed from Frontend Mentors. [Frontend Mentors](https://www.frontendmentor.io/home) is a online platform that provide front-end challenges that include professional web designs. 

### **What I learned**

1. Mixing CSS Grid and Flexbox to style a UI
2. Tweaking an image with CSS to have a purple hue layered on top it.
3. UI design aspects such as highlighting a single key word with the purple accent color, shading the image with the same accent color, and compacting the message in short form.

### Resources I used

- [CSSGrid Generator](https://cssgrid-generator.netlify.app/): auto generate CSS Grid styles
- [CSS Grid Guide](https://css-tricks.com/snippets/css/complete-guide-grid/): quick recap of CSS-grid
- [CSS background image example](https://www.freecodecamp.org/news/css-background-image-with-html-example-code/): quick recap of background image styles

You can view the live solution [here](https://jcsmileyjr.github.io/stats-preview-card-component/)
React Native Football App UI
Tags: reactnative, javascript, programming, mobile
Published: 2021-11-06 13:26:53

Hi guys!👋🏻👋🏻 Today I will share with you a nice and clean Football app UI by using #ReactNative and #Expo. Hopefully you can learned something from it. 

Detail please check it out https://youtu.be/LOJdbySUA9U 

Happy Coding!!! 
Thank you for watching! Make sure to like + Subscribe For More!