teleren/devto huggingface dataset:
Html Tags for frontend developers
Tags: htmlfordevelopers, html, frontend, webdeveloper
Published: 2021-04-19 04:40:52

Some web developers doesn't have enough time to check some useful html tags that can save us time in our applications.

<ol>
<li>Datalist</li>
The "datalist" html element provides an autocomplete interface for "input" elements. It contains a set of <option> elements that have an associated value. <br/>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist">datalist resource</a></p>

<li>Details</li>
The accordions are very common UI element in websites or applications when we need to show lot of data, such as a questions page.<br/> 
By using the "details" element alongside "summary", we can achieve the same effect without JavaScript. Clicking the summary will toggle the rest of the content. <br/>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details">details resource</a></p>

<li>ColorPicker</li>
When we want to add a colorPicker element, most of time we have implemented it with a Javascript library or Jquery (a little bit faster).<br/> 
In html we can use this type of input (type="color") to provide a user interface element that lets a user specify a color.<br/>
<p><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color">input color resource</a></p>

<li>Progress</li>
One of the more surprised for me is the "progress" element.<br/> 
It displays an indicator showing the completion progress of a task.<br/>
<p><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress">progress bar resource</a></p>
</ol>
Episode 4: Attack of the Fresh Fruit
Published: 2021-04-19 04:36:00



Developer advocate. Developer avocado? What is that about, anyway? Thanks to a freak emoji accident involving the unicorn and Marta's smartphone, the café is experiencing an onslaught of fresh produce.

Never to be dissuaded from a great conversation, Jason C. McDonald and Bojan Miletic don helmets and chat with @cheukting_ho about what exactly developer advocates do.

Listen now! 

{% podcast https://dev.to/bughunters/episode-4-attack-of-the-fresh-fruit %}

Also, it turns out that an avo-latte is actually a thing. Who knew?

---

Follow Cheuk on Twitter: https://twitter.com/cheukting_ho

Cheuk on Twitch: https://www.twitch.tv/cheukting_ho

Music by: https://audionautix.com

Sponsored by Softerrific: https://www.softerrific.com/
What Makes a Website's Design "Modern"?
Tags: question, webdev, design, modern
Published: 2021-04-19 04:34:13

This is an open question to the world of Webdev:

What makes a website's design "Modern"?

I've searched Google multiple times for style guides and concepts, I've looked at story-boarding for sites and different icon-sets that are used for Mobile-first sites that have all but been incorporated into the standard for what people associate with a function on a web platform.(external links, hamburger menu, etc.) 

But even still there's always so many concepts of what a Modern design is or was as this seems to change like the wind. 

It makes sense that it evolves and changes as the term Modern a decade ago often doesn't hold the same value as it does now. 

But what is "Modern" for mid 2021? Is it the newest features that run on the newest browsers? Is it fancy CSS that can do things that were unimaginable before?

If you asked a Front-end Developer, Back-end Developer, and a Web UI/UX Designer what the current concept of Modern is, what would they say?

I know this is a lot of questions but I'm absolutely curious to find out. 

If you have any concepts yourselves you are willing to share, any answers to the questions above, or general feedback on what you think is the best way to understand the "Now" factor of Modern design please do leave a comment start a discussion I would love to hear what you have to say. 

Thank you for reading and I hope this brings up a few interesting answers and allows some food for thought on the questions. 

Cheers
-A Curious Coder
I am Starting #100daysofcode !
Tags: 100daysofcode, challenge, motivation
Published: 2021-04-19 04:33:06

Hello folks,
I am starting #100daysofcode! I will be posting the daily update in dev.to. Make sure to follow me to get the update of the blog i post.
I also have a github repo of all the side projects i do in 100 days.

{% github  Codely-F/100daysofcode no-readme %}

Let the challenge begin!
Part 3 video of pair programming a Perl web app
Tags: perl, mojolicious, pairprogramming, webdev
Published: 2021-04-19 05:03:45

---
title: Part 3 video of pair programming a Perl web app
published: true
date: 2021-04-19 04:27:30 UTC
tags: Perl,Mojolicious,pairprogramming,webdev
canonical_url: https://phoenixtrap.com/2021/04/18/part-3-video-of-pair-programming-a-perl-web-app/?utm_source=rss&utm_medium=rss&utm_campaign=part-3-video-of-pair-programming-a-perl-web-app
series: Live-coding a web app in Perl and Mojolicious
---

This morning (or yesterday evening, depending on your time zone), Gábor Szabó and I embarked on another episode of Mojolicious-powered development on his course management application. [Video evidence and links are here.](https://perlmaven.com/course-management-app-in-mojolicious-3)
Get a list of follow/follower infomation of Twitter account in 4 lines
Tags: php, twitter, javascript, webdev
Published: 2021-04-19 04:23:54

Today, I will try to get the follower list in 4 lines.
 However, I only use the usual Twittroauth, but if you do not have abraham / twitteroauth, please do so from Composer.

```bash
composer require abraham/twitteroauth
```

The API limit is **5000 per user**.  If you want to get more, you can loop with "for".  Note that oauth_token and oauth_token_secret are not required and can be accessed.
 For details ↓
[TwitterDev Official Reference](https://developer.twitter.com/en/docs/twitter-api/v1/accounts-and-users/follow-search-get-users/overview)

# Get list of follower

```php
require 'vendor/autoload.php';
use Abraham\TwitterOAuth\TwitterOAuth;
$connection = new TwitterOAuth("APIKey", "APISecret");
$followers = $connection->get("followers/list",array('cursor' => '-1', 'screen_name' => 'screen_name','count'=>'100'));
```

Simply
 1. Auto loading
 2. Namespace import
 3. Credential settings & instantiation
 4. Get

 that's all.
 Information is returned as a class object

# Get list of Follow
Just change `followers/list` on the 4th line to `friends/list`.

Thanks.
[My Website](https://0115765.com)
**[Twitter@tomox0115](https://twitter.com/tomox0115)**
What is React hooks ?
Tags: react, hooks
Published: 2021-04-19 04:18:31

Hooks where added in React version 16.8 which allows you to use React without having to write a class.
Ex. State of a component.

In react version <16.8 you can only use states only within class components. With hooks you can use states in other react features without writing a class.

**Keep in mind that hooks don't work inside classes**



> Hooks are the function that hooks into React state and lifecycle features from function components

### Rules to use Hooks.
* *Can be called only on top level.*
    Never call hooks inside any condition, loops if nested 
    functions
* *Only use it in React functions*
    Hooks can be called either from custom hooks of from React function components


[![Aditya Rawas Coffee](https://www.buymeacoffee.com/assets/img/guidelines/download-assets-sm-1.svg)](https://www.buymeacoffee.com/adityarawas)
Breakthrough!
Tags: javascript, programming
Published: 2021-04-19 04:14:07

I just had a breakthrough moment, or at least it felt like it to me. I was working on a function using Ajax to retrieve data from an API when I looked up and realized I had just written the entire thing without referencing anything (AND IT WORKED!). This was an "Ah Ha" moment that I can do this. The process of learning to code can be discouraging at times, but this was a good moment. Until I start on the next function and everything goes back to shit! Ha!

Keep grinding!
Phase I Project
Published: 2021-04-19 03:44:12

I recently got a PC for school and have been able to use it to play games as well. I have been wanting a PC for a long time and gaming has always been a passion of mine so I decided to base my project on those two things. My CLI is called "Free To Play Games" and it is for gamers on the PC to find new games to tryout that they won't have to pay for and it can help them get their streaming channels started on a budget.
Animated Like Button with HTML CSS & JS
Tags: html, css, javascript, codenewbie
Published: 2021-04-19 03:38:08

***Hello, guys In this tutorial we will try to solve the mentioned query. and also we will learn Animated Like Button with HTML CSS & JS.***

###Common Query###

1. How to create a Like Button
2. How To Create Facebook Like Button
3. How To Create Animated Like Button

**See Also:-** <a href="https://blog.stackfindover.com/how-to-blink-web-browser-tab/">How to blink web browser tab</a>

###Animated Like Button Step By Step###
First, we need to create two files **index.html** and **style.css** then we need to do code for it.

###Step:#1###
***Add below code inside index.html***
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Facebook Like Button</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>
    <button id="like" onclick="liked()">
      <i class="fa fa-thumbs-up"></i>
      <span class="icon">Like</span>
    </button>

    <script>
      function liked(){
        var element = document.getElementById("like");
        element.classList.toggle("liked");
      }
    </script>
  </body>
</html>
```
###Step:#2###
**Then we need to add code for style.css which code I provide in the below screen.**
```css
* {
  padding: 0;
  margin: 0;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #f2f4f6;
}
button {
  background: #fff;
  border: unset;
  outline: 0;
  font-size: 18px;
  cursor: pointer;
  color: #65676b;
  padding: 5px 10px;
}
button.liked {
  color: #0571ed;
}
button.liked i{
  animation: anim 0.5s ease-in-out;
  -webkit-animation: anim 0.5s ease-in-out;
}

@keyframes anim {
  100% {
    transform: rotate(-15deg) scale(1.3);
    -webkit-transform: rotate(-15deg) scale(1.3);
    -moz-transform: rotate(-15deg) scale(1.3);
    -ms-transform: rotate(-15deg) scale(1.3);
    -o-transform: rotate(-15deg) scale(1.3);
    filter: blur(0.5px);
    -webkit-filter: blur(0.5px);
  }
}
```
###Animated Like Button Video Output:###
{% youtube wqIqKALBafc %}

###Animated Like Button Codepen Output:###
{% codepen https://codepen.io/stack-findover/pen/ZELPyVy %}
Ways to get user's geo location
Tags: javascript, geolocation
Published: 2021-04-19 02:54:14

There are a lot of functionalities where you have to get the user's location. 

Let's consider a simple scenario that you have to show the popup based on user's location. so you have to get the user's location to achieve the requirement. 

There are 2 ways to get the user's location. 

### Using Geo IP API

With this approach, You will have to use IP database. Get User's IP address and match that IP address in the IP database, and get related address details. Here If you don't have a backend or database you can use 3rd party API. There are many APIs available. 
Here is a list of Few IP API Providers:

1. https://ip-api.com/
2. https://ipapi.co/
3. https://ipapi.com/

All have their own limitation and different pricing so check documentation, terms and conditions before use. 

##### Usage
```
axios.get(`http://ip-api.com/json/`).then(res => {
    console.log(res.data)
}).catch(err => {
    console.error(err)
})
```

##### Pros
* User don't need user permission to get their location.
* Instant and simple user's geo location place.
* Free for limited requests

##### Cons
* Less Accuracy of user's location
* Some 3rd party APIs are paid for commercial use.

### Using Geo Location API

The Geolocation API allows the user to provide their location to web applications if they so desire. For privacy reasons, the user is asked for permission to report location information. It returns only geographical coordinates of user's location once they allow.

##### Usage
```
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(position => {
        console.log(position.coords)
    });
} else {
    x.innerHTML = "Geolocation is not supported by this browser.";
}
```
By above code, User would get the popup as per below screenshot. 
![Geo Location API](https://i.imgur.com/FQVg29O.png)

It will return geolocation data only if user allow the popup.

##### Pros
* 100% Accurate Geo location 
* Instant 
* Available for free as It is native browser API.

##### Cons
* Only return coordinates
* Require 3rd party tool to convert coordinates to geo location
* Available only in secure contexts (https)

You can use [openstreetmap](https://www.openstreetmap.org) as tool to convert coordinates to geo location. It's an open source platform.

So that's all about user's Geo location. Let me know your views by commenting on this post. 

I hope you found the article helpful. Feedbacks are greatly appreciated! 🙌

Have an amazing day!

🌎 Lets connect

* [Github](https://github.com/dhruvangg)
* [LinkedIn](https://www.linkedin.com/in/dhruvangg/)
* [Instagram](https://www.instagram.com/champdecay/)
A Beginner's Guide to Authentication
Tags: authentication, webdev
Published: 2021-04-19 02:46:41

## What is Authentication?
Authentication is the process of verifying requests to the server to find out if the user/client sending the request is a valid user. This can further be used to restrict user activities (authorization) or the resources that can be used by the particular user.

## Types of Authentication
* Server Sessions
* Authentication Tokens

### Server Sessions
As the name suggests, in this method we create a session on the server for each incoming authentication request. In other words, when a user logs in to his/her account, we create a separate state on the server that only serves responses for that particular user.
When an authentication request is received by the server, it validates the user credentials provided and creates a state on the server and provides a response to the client with a unique identifier for that state or session (usually in form of *cookies*). This identifier is sent by client along with every request.
This method of authentication is popular with MVC pattern of web development where the server serves the pages as response for user requests.

### Authentication Tokens
In this method, whenever the server receives an authentication request, it validates the user credentials, generates a *unique id* with some hashing algorithm and sends the *id* back to the client. The client will use this id with every request sent to the server. 
This "id" is not encrypted. It is just hashed to include some data that only makes sense to the server that has to validate the request using this id.
In this case, the server does not create or store a session. It is the client's responsibility to provide the proper id along with each and every request. Therefore, the server remains stateless.
This form of authentication is very popular in Single Page Applications (SPAs) and more generally with REST APIs, since these APIs donot store state.

I will discuss about how to use authentication in SPAs in my next post.
Stay tuned. Happy Coding!!
JavaScript:What is Pure Functions and What is the use?
Published: 2021-04-19 02:07:38

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rtmavncpr89rib3xhavb.jpg)

When I heard about the Pure Functions in JavaScript, I got shocked. What about the regular functions in JavaScript?. Is there any difference b/w Pure and regular functions?.

###What is Pure Function?
1)The function always returns the same result if the same arguments passed in.it doesn't depend on any state, variable, data and change in program execution.it must only depends on program execution.

```
const data = (a, b) => a + b;
data(2, 4);
```
TO
```
let a = 6;
const sum = (b) => {
  return (a += b);
};
sum(4);
```
###Pure Functions:
If you see above first code block.it is not depending on any variable or state. Based on the input data it will give output without affecting.
if You pass ` 2 ` and ` 4 ` you will get ` 6 `.

So there is no side effects in pure functions.

###ImPure Functions:

The second example returns nothing. It depends on the variable which is outside the scope.
You will get different results when you called function.the first time result is ` 10 ` and next time result is ` 12 `.

###Side Effects:
1)mutating Input Directly.
2)HTTP Calls.
3)logging.
4)Manipulating DOM.

###How to Convert Impure to Pure Functions?
 ####Impure Function.
```
const impurefunc = (name, key, mainobject) => {
  mainobject[key] = name;
};
const human = {
  name: "Jyothi Prakash",
};
let data = impurefunc("Mohan", 45, human);
console.log(data, human);
```
The variable human always changed because our function introduced as an assignment variable.

We Can purify the impurefunc as pure function with desire properties.

####Converting to Pure:
 ```
const impurefunc = (key, name, mainobject) => {
  const newObject = { ...mainobject };
  newObject[key] = name;
  return newObject;
};
const human = {
  name: "Jyothi Prakash",
};
let data = impurefunc("Mohan", 45, human);
console.log(data, human);
```
Mutating your input can be dangerous, but copy of the original object no problem.

###Summary:
1)You can clone and then mutate your input. Without touching the original one.
2)Spread Syntax `(...object)` is the easiest way for cloning shallowly objects



Thanks for reading this article.
AFK Arena Mod apk Latest Version 2021Download
Published: 2021-04-19 01:26:27

AFK Arena Mod Apk latest 2021, AFK Arena private server apk and premium unlocked, an amazing Strategy game. Are you trying to search out any manner to beg for limitless diamonds with inside the AFK Arena game? If so, you've got return to the correct space thanks to the very fact today, I'm aiming to proportion the AFK Arena Mod APK with limitless diamonds and god mode Download
Game Baking: A One-Game-A-Month Extravaganza!
Tags: gamedev, unity3d, challenge, showdev
Published: 2021-04-19 01:15:32

Hey all!

For 2021, I've decided to take on the one-game-a-month challenge.

"1GAM" is a self-imposed challenge where I have to develop a brand new game every month. And in order to help me achieve that goal each month, I've decided to use random game jams as catalysts. These game jams offer different themes, restrictions, and timelines each month, which motivate me and help me come up with creative new ideas.

And, in order to keep myself accountable, I've decided to also document each month's game in the form of a video devlog on [my YouTube channel](https://youtube.com/andrewdavidj). I've branded the devlog series "**Game Baking with Andrew-David**"!

I've produced three videos so far. The first is an introductory episode:

{% youtube KkmlUwPAww4 %}

And the other two are the first two months' episodes:

{% youtube aOxiuZ5ea6k %}

{% youtube xe4mCrZ8wbo %}

The three games I've created so far are available to play for free on itch.io and consist of:

- [Calamixty](https://andrewdavidj.itch.io/calamixty): A chaotic potion-mixing puzzle game!
- [An ExSCOURGEon Through Space & Time](https://andrewdavidj.itch.io/scourge): A puzzle adventure game where you control rats by playing tunes on your flute.
- [You CANS Do It](https://andrewdavidj.itch.io/cans): A turn-based, tile-based CCG where cans and bottle must do battle!

If you would like to participate in the 1GAM challenge as well, you're welcome to do so alongside me [on Discord](https://andrewdavid.club)! The next game jam I'm participating in is [Ludum Dare 48](https://ldjam.com/events/ludum-dare/48) on April 23rd, 2021. 

And finally, if you like the series and would like to follow along, subscribe to the channel and feel free to support me [on Patreon!](https://patreon.com/andrewdavidj)

Stay tuned for more!
KoinSaati
Tags: koinsaati
Published: 2021-04-19 00:43:09

KoinSaati
https://koinsaati.com 

KoinSaati, deneyimli ekibi, güncel haberleri ile sizinle. Hedefimiz güncel bir kripto-finans haber sitesi yaratmakla birlikte; deneyimli-deneyimsiz herkesin bilgi edineceği aktif bir kripto topluluğu oluşturmak.
Why you should learn Custom CSS?
Tags: css, html, javascript
Published: 2021-04-19 00:29:36

**Custom CSS** is not new at all, thousands of web developers are using CSS to style their websites, and when you do not have a designer to create a custom design for your site, you will have to roll up your sleeves and take over the whole design process including writing custom CSS.  

Some **developers feel writing CSS is a challenging task**, but they are wrong, with a little practice you can handle CSS with perfection, and when you do it more than once, you will feel comfortable with CSS.

There are numerous benefits of using custom CSS in blogs or for websites, but many people are not aware of them. This post will help you understand the benefits of custom CSS and how they can help you. 

Custom CSS helps you make improvements to the look and feel of your site without having to rely on third party plugins. It also allows you to make changes to the look and feel of your site quickly, without having to wait for anyone else to make the change for you.

Before moving forward:

##We just launched a brand new course at Udemy (Limited Promo Codes):

It's a practical course. Below are the concepts which you will find in this course:

* Structure and Project Organizing 

* Responsive Website with Media Queries

* Better approach to make your CSS flexbox grid

* Flexibility, reusability and components 

* Utilization of CSS utility classes

* Color Management with CSS Variables

* 5 Golden tips to master CSS

* CSS Flexbox button over form technique

###[CSS Cardio by Building a Complete Responsive Website](https://www.udemy.com/course/css-cardio-by-building-a-responsive-website-css-flexbox/?couponCode=38E053BFE615CBDE0792)###



Lets continue:

Frameworks have their own place (They help you to quickly prototype any project) but Custom CSS makes difference.

Without depending on any framework/library you will be able to:

1. Minimize code files and better speed
2. Build your own website with your desired layout
3. Create beautiful layouts using CSS
4. Create animations by defining your desired values on the fly
5. Create responsive layouts with flexbox or grids
6. Create powerful navigation menus (Get inspirations from other websites and start implementing)
7. Create a custom blog layout (Think out of the box)
8. Create a portfolio layout (Will make you shine)

Yes, you can learn Web Development From basic to advance level from our brand new YouTube Channel: [Coder Champ](https://www.youtube.com/c/CoderChamp/)

Make sure to subscribe channel, Like and share this post.

Don't forget to follow us back. So, you will never miss any update.

Good Luck
Hello
Published: 2021-04-19 00:22:08

This is my first post on dev.to. I hold two Bachelor degrees in Biology and Computer Science from UNC Greensboro and UNC Charlotte respectively. I hold two Associate of Applied Science degrees plus certificates in Java, Python, C++, and Front-End Web Development from Isothermal Community College. Finally, I hold a Master of Science in Management from Colorado Technical University. These colleges are in North Carolina, where I am from. I found out about this site from the Hanselman Minutes podcast. I have blogged for Topcoder in the past and seek to continue the process of writing as a way to strengthen my technical and programming skills.
With that being said, I will strive to do a post every day or every other day. I want to do my posts on Python and show you some demo programs and applications.