teleren/devto huggingface dataset:
Twitter accounts every Web Developer should follow
Tags: webdev, productivity, twitter, beginners
Published: 2021-01-03 13:56:05

**Twitter** is jam-packed full of web design tips and inspiration. Whether you want to learn more about CSS, HTML, JavaScript or simply get some advice, Twitter's usually a great place to start to get in touch with the experts. Here, I've picked 13 of my favourite Twitter accounts to follow in the field of web design and development.

[Join our Discord server](https://discord.gg/te2z9JMB5Y) if you are interested in Tech/Programming/Development, and chill with like-minded community!

**DO Save this post for future reference**

Here we go:

1) [Jonathan Snook](https://twitter.com/snookca)
He is a front-end developer concentrating on UX design and project management. He’s the author of Scalable and regularly shares development insights on his Twitter feed

2) [Alex Sexton](https://twitter.com/SlexAxton)
Alex is a front-end engineer with Stripe. He is an open source advocate and contributor, and previously sat on the jQuery Board of Directors. Alex’s Twitter feed provides a light-hearted look into technology and culture.

3) [Gina Trapanani](https://twitter.com/ginatrapani)
She is a partner at Postlight, where she builds web and mobile apps for some of the biggest names in the news and entertainment industries. She also founded the popular website, Lifehacker. Her twitter feed promotes some of her work at Postlight, and explores issues surrounding web development.

4) [Six Revisions](https://twitter.com/sixrevisions)
Six Revisions regularly publishes articles geared toward web developers. It’s a place to find how-to pieces, tips and resources.

5) [Tim Holman](https://twitter.com/twholman)
Tim Holman describes himself as a 'tinkerer, tuner, tamperer'. He's also a developer at CodePen. His Twitter feed is full of creative coding examples and interactive experiments – definitely worth a follow.

6) [Jeffrey Zeldman](https://twitter.com/zeldman)
Jeffrey Zeldman is one of the most influential web designers in the industry today. Formerly of Happy Cog, he's now heading up studio.zeldman. He's also the man behind A Book Apart, A List Apart and An Event Apart, and the author of the book *Designing With Web Standards.*

7) [Jen Simmons](https://twitter.com/jensimmons)
Jen Simmons is a "designer who builds stuff, too". She’s best-known as the host of The Web Ahead, a podcast about changing technologies and the future of the web. She regularly tweets inspirational content and often shares her thoughts on the industry, making for some interesting debate.

8) [Jake Archibald] (https://twitter.com/jaffathecake)
Jake Archibald is a developer advocate for Google Chrome, seasoned conference speaker and big fan of Service Workers. His bio states his aim is to help "the web to do what native does best, and fast", and he shares plenty of information and tips to that end in his Twitter feed. 

That's it for now. Let me know in the comments, if you follow some other Web developer, who deserves to be in the list.

***Adios!***
Parsing Data
Tags: python, beginners, networking
Published: 2021-01-03 13:48:45

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/u7h174tkygwpwp4f71uo.jpg)
###Yesterday I wrote about the difference between UDP and TCP. Today we will be talking about sending information that contains different data types over a network by parsing.

####A string of data can easily be sent over a network because it can easily be encoded as bytes but the same cannot be said for a large amount of data that contains different data types e.g strings, integers, float, tuples, dictionaries etc.

For example, if we have data that contains a string, date, a tuple as information we need to send over a network we might need to encompass all this data into a single message convert to bytes and send over the network. On receiving the data the server will separate the data back into its individual components and decode it.
The process of separating data back to its components is called **parsing**.

1. First step is converting other data types to string e.g 
Converting an integer to a string `str(123)`
2. Encompassing converted data into a single variable with a separator like “,” to separate the different data.
```
data1 = “hello”
data2 = 123

#convert the integer to string
data2 = str(data2)
#encompassing data into single variable
message = data1 + “,” data2
```
3. Encode the message `message.encode()` and send `socket.send(msg)`.

The server has received the message and will now parse it
```
#recieve and decode message
message = socket.recv(1024)
msg = message.decode()

#split the message using the split function in python
#remember that we used “, ” to separate data
parts = msg.split(“,”)
#data1 is a string
data1 = str(parts[0])
#data2 is an int
data2 = int(parts[1])

```
####So basically **parsing** is changing all data to be sent into a uniform data type(in our case a string) sending it as a single message and on reception separating it back to its components and returning them to there original data types.
Hopes this gives you a basic understanding of parsing. Feel free to ask questions or leave suggestions in the comment section or contact me [@black_strok3](https://twitter.com/black_strok3).

######[image](https://www.pexels.com/@jorge-jesus-137537?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels)
What max-width do you set for your websites?
Tags: discuss, css
Published: 2021-01-03 13:43:33

---
title: What max-width do you set for your websites?
published: true
description: 
tags: discuss, css
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/v77sh6itngyy2crhz79z.png
---
According to [Statcounter 2020 survey](https://gs.statcounter.com/screen-resolution-stats/desktop/worldwide), the most common desktop screen resolution sizes, starting 2021 are:

1920×1080 – 21.74%
1366×768 – 21.36%
1536×864 – 9.4%
1440×900 – 7%
1280×720 – 5.16%
1600×900 – 3.85%
1280×800 – 2.63%

What max-width do you set for your websites?
Building a personal portfolio | progress so far
Tags: dohackathon
Published: 2021-01-03 13:41:16

I have commenced coding my personal portfolio. Finally \o/. This is a project I have been planning on doing for a long time. I'm lucky to be able to do this while participating in the DigitalOcean App Platform Hackathon. Talk about killing two birds with one stone!

## Progress so far

Following up on yesterday's update, here is what has happened so far:

- I have received 50$ credit on Digital Ocean. Yay!
- I have begun coding the website. I'm more of a designer than a developer. I am spending way too much time obsessing about the layout and design, rather than doing the actual coding. Good thing I like working with CSS. I definitely will be showing off some fancy hover effects!
- I have read some documentation on how the App Platform works. I'll be ready to deploy my code anytime soon. 

## Next steps
- Finalize the design and fix some bugs with the code: For some reason, some parts of my code suddenly stopped working. I can't seem to figure out why. 
- Write some tutorials: I will be publishing some articles here that explain how I achieved some of the effects/designs in my portfolio. I hope people will value such content. 

Link to my portfolio coming soon! Stay tuned :)
Leading UI/UX Design Trends - Digi Bharata
Tags: design, ux, digibharata
Published: 2021-01-03 13:34:10

Check the latest <a href="https://digibharata.com/ui-ux-design-trends/">UI/UX Design Trends</a> for 2021 that should loved by every user. We all know user experience played an important role in business sales. So before making any design you must read the latest trends.
Creative Dashboard
Tags: codepen
Published: 2021-01-03 13:26:47

<h3>My collection of Free online tools for creative people</h3>
<p>Being bored last night, so I've gathered all the free online tools I'm using into one simple interface:</p>
<ul>
<li>Image editing, retouch, adding text and effects to photos...</li>
<li>Video creation and editing</li>
<li>Online code editors, code generators and references</li>
<li>Writing tools</li>
<li>Free SEO tools to help your site rankings</li>
<li>More tools and resources</li>
</ul>
<p>Hope you'll enjoy and boost your creativity with this collection of free online tools. No need to install anything. Just need internet connection and your idea. Tools are online and free.</p>

{% codepen https://codepen.io/colenikol/pen/mdrxpmW %}
Amazon ASIN Search for Sellers
Tags: amazon, asin, tool
Published: 2021-01-03 13:25:32

[Amazon ASIN Search](https://zonasinhunter.com/) analyzes Amazon products and their potential to become your income source. It discovers thousands of profitable products in just a few minutes, without limitation and any subscription, so there is no need to worry about paying month to month.

You can input either ASIN codes or URLs for accurate data in real-time. Unlike web apps, you can get the data immediately without third-party intervention. It gives you freedom on how you use the data without any restrictions.

Analyze multiple data that you can export to CSV and Excel. Track your competitor data, find out what best-selling products they have and copy from their best case to improve your sales. You can get their buy box prices and gauge the competitors by seeing what sellers are selling the products and their prices with the Amazon ASIN Search tool.

The Amazon ASIN Search software gives you all of this business intelligence to improve your products' success.
Random Hex Color Code Generator | HTML, CSS & JavaScript
Tags: html, css, javascript, beginners
Published: 2021-01-03 13:16:42

Hello guys in this tutorial we will create random hex color code generator Using HTML CSS and <a href="https://blog.stackfindover.com/category/javascript/" target="_blank" rel="dofollow">JavaScript</a>

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>
<head>
  <meta charset="utf-8">
  <title>Random Hex Code Generator</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
</head>
<body>
  <div class="flex-row-outer">
    <div class="flex-row">
      <span id="hexCode">#000000</span>
      <button class="colorBtn" onClick="GenerateCode()">Generate</button>
    </div>
  </div>
  <script type="text/javascript">
    let body = document.querySelector("body");
    let hexCode = document.querySelector("#hexCode");
    body.style.backgroundColor = hexCode.innerText;

    function GenerateCode() {
      let RandomColor = "";
      let Char = "0123456789abcdefghijklmnopqrstuvwxyz";

      for(i = 0; i < 6; i++) {
        RandomColor = RandomColor + Char[Math.floor(Math.random() * 16)];
      }
      hexCode.innerText = "#" + RandomColor;
      body.style.backgroundColor = "#" + RandomColor;
    }
  </script>
</body>
</html>
```
###Step:2###
Then we need to add code for **style.css** which code i provide in below screen.

```css
* {
  padding: 0;
  margin: 0;
  font-family: 'IBM Plex Sans', sans-serif;
} 
body {
    height: 100vh;
}
.flex-row-outer {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.colorBtn {
    background-color: #0f62fe;
    border: 1px solid transparent;
    color: #fff;
    cursor: pointer;
    font-size: 18px;
    width: 100%;
    text-align: left;
    outline: none;
    line-height: 25px;
    padding: calc(.875rem - 3px) 60px calc(.875rem - 3px) 20px;
}
span#hexCode {
    color: #fff;
    display: block;
    padding: calc(.875rem - 3px) 60px calc(.875rem - 3px) 20px;
}
```
###Random Hex Color Code video Output:###
{% youtube KUGqIdnDTVw %}

###Random Hex Color Code codepen Output:###
{% codepen https://codepen.io/stack-findover/pen/XWpONoN %}


> For more interesting content

<a href="http://blog.stackfindover.com/" rel="dofollow">Visit for more!</a>
Install TA-Lib Without Homebrew
Published: 2023-04-29 21:26:46

---
title: Install TA-Lib Without Homebrew
published: true
date: 2021-01-03 13:12:21 UTC
tags: 
canonical_url: https://mikestaszel.com/2021/01/03/install-talib-without.html
---

The only package I ever install using [Homebrew](https://brew.sh/) is `TA-Lib`.

Everything else I need is already available.

`TA-Lib` isn’t updated often and it’s easy to install by compiling from source.

## How-To

This guide will work on macOS 11.1 (Big Sur). It works perfectly on an M1 (or Intel) Mac.

First, download `TA-Lib` from [SourceForge](https://sourceforge.net/projects/ta-lib/).

Then run:

```
tar xf ta-lib-0.4.0-src.tar.gz
cd ta-lib
./configure --prefix=/usr/local
make
sudo make install

```

That’s all it takes.

The `--prefix` flag is important. macOS Big Sur doesn’t let you modify `/usr` even when you use sudo.

Installing the Python TA-Lib library should work fine now:

`pip install TA-Lib`
Install PHP 8 on Arch Linux | Manjaro Linux
Tags: install, php, archlinux, manjarolinux
Published: 2021-01-03 13:04:45

> deprecated article 

PHP 8 release on November 27, 2020 but Arch Linux official package didn't upgrade it in their official repository yet. It's because so many package that require PHP as their dependency didn't compatible yet with PHP 8. But as an Arch or Manjaro Linux users, we can install it via AUR. 

### 1. Install missing dependencies 
```shell
sudo pacman -S hspell nuspell libvoikko
```
as addressed in this [comment](https://aur.archlinux.org/packages/php80/#comment-783543)

### 2. Insall PHP 8 via AUR 
* using `yay`
```shell 
yay -S php80
``` 
all is well 👌
* not using aur helper 
```shell 
git clone https://aur.archlinux.org/php80.git
cd php80
makepkg -Si
```
all is well 👌

---


> FYI, we can't install xdebug for PHP 8 from package manager neither AUR. If you need xdebug follow these instruction [here](https://xdebug.org/wizard) 

when you arrive in step to run `./configure` don't forget to add `--with-php-config=/usr/bin/php-config80`. XDebug wizard doesn't warn us about it.  

🍻
Designing the Print Preview - Chrome Dev Tools
Tags: design, css
Published: 2021-01-03 13:03:10

*Have you ever wondered, how would your webpage look when printed? 🤔 And you don't have a printer? or you don't want to waste a ton of papers for development?*

#### **Chrome dev tools got you covered!**

Following are the steps to check your print preview in Chrome,

**Step 1:** Open developer Tools - Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, Chrome OS)

**Step 2:** Press Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux, Chrome OS) to open the Command Menu.

![Screen Shot 2021-01-02 at 7.25.39 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609595763299/7w4BtXIZY.png)

**Step 3:** Type `rendering`, select Show Rendering, and then press Enter.

**Step 4:** `rendering` window will be available now. Under Emulate CSS media select print.

![Screen Shot 2021-01-02 at 7.29.27 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609596030530/Elqddo2AJ.png)

### Normal View

![Screen Shot 2021-01-02 at 7.31.19 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609596185248/LWrXQAwDe.png)

### Print View

![Screen Shot 2021-01-02 at 7.31.50 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609596202444/rUiMSjHzw.png)

Let's consider, as per requirement, we don't need to show the social icons at the bottom while printing the page. For changing a particular CSS attribute while printing, we need to get the 'CSS Selector' of the elements that need to change. In our scenario, all the social icons have a class of `.social`. Adding the below media query to our styles will hide the social icons only during print.


```CSS
@media print {
    .social {
        display: none;
    }
}
``` 

And voila,

![Screen Shot 2021-01-02 at 7.41.44 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609596727289/3_VNKZh-o.png)

Hope you find this useful. Let me know if it could be improved in the comments and feel free to follow on Twitter -  [radnerus93](https://twitter.com/radnerus93)
Daily Developer Jokes - Sunday, Jan 3, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-01-03 13:00:08

---
title: "Daily Developer Jokes - Sunday, Jan 3, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Sunday%2C%20Jan%203%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e125947cfb29.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ An Agent died unexpectedly. How was the crime solved?

___A:___ By looking at the Stack Trace.
 -->
Codemotion Madrid 2020 - Taller: Crear una skill para Alexa es fácil, sencillo y para toda la familia
Tags: eventos, codemotion, taller, alexa
Published: 2021-01-05 07:17:00

---
title: Codemotion Madrid 2020 - Taller: Crear una skill para Alexa es fácil, sencillo y para toda la familia
published: true
date: 2021-01-03 12:28:18 UTC
tags: eventos,codemotion,taller,alexa
canonical_url: https://www.kinisoftware.com/codemotion-madrid-2020-taller/
---

Aquí os dejo el vídeo completo del taller que impartí en [Codemotion Madrid 2020](https://events.codemotion.com/conferences/online/2020/online-tech-conference-spanish-edition/). En poco más de hora y media repaso parte de la teoría básica y conceptos esenciales de los asistentes de voz. En la parte práctica, siguiendo el taller, cualquier persona podrá crear una Alexa skill en cuestión de minutos y tenerla publicada en poco tiempo.

{% youtube cfGr_2_krfU %}
Cartoonate: Part 2(Setting Up)
Tags: dohackathon, ai, flutter, webdev
Published: 2021-01-03 11:50:48

As mentioned earlier, I am going to be making use of flutter and  Visual Studio Code for development.

I followed the guidelines given on the flutter page for setting up to develop a web app:
[Link] (https://flutter.dev/docs/get-started/web)

After setting up, i launched the web app to make sure everything was working well before i started writing any code.
Weak References in JavaScript
Tags: javascript, programming, webperf
Published: 2021-01-03 11:29:06

ES6 introduced `WeakMaps` and `WeakSets`, which brings weak and strong references to JavaScript, a concept front-enders are not particularly used to.
If you're working on games, you have to pay very close attention to how memory and performance is managed.

I'm using `WeakMap` here as an example, but it's the same for `WeakSet` too. The main difference between `Map` and `Set` is that the latter only keeps unique values.

According to Wikipedia:

> In computer programming, a weak reference is a reference that does not protect the referenced object from collection by a garbage collector, unlike a strong reference.

That actually, surprisingly, makes a lot of sense! Wikipedia got me used to definitions like `Coroutines are computer program components that generalize subroutines for non-preemptive multitasking by allowing execution to be suspended and resumed`.

Alright, what a `WeakMap` does, compared to a good old `Map` or `{}` is each individual key element in the set can be garbage-collected when they are not referenced somewhere else:

If this is the content of a regular `Map` / `{}`:

```javascript
const bigObject = {
  id: 'spritesheet-1',
  data: [
    /* gigantic array with a lot of stuff */
  ],
  description: 'hello bla bla',
};
```

And you're only using it in the code like this

```javascript
const spritesheetID = bigObject.id;
// the gigantic array in myMap.data is in memory
```

The _whole object_ and the gigantic array will remain in memory and will _not_ be CGed until it or its references are destroyed.

Whereas if you use a weak map anything that isn't being used in your program will be garbage-collected.

```javascript
// create a WeakMap from the big object
const weakMap = new WeakMap(Object.entries(bigObject));

// gigantic array is garbage-collected
const spritesheetID = weakMap.get('id');
```

Now you could manually `delete` the keys of the object that you don't use, but this trick saves you having to keep track of your usage because this isn't C++.

People have also found other ways to use this with promises and more in [this Stackoverflow thread](http://stackoverflow.com/questions/29413222/what-are-the-actual-uses-of-es6-weakmap).

That's all for this post! It's a simple concept but needed clarification for me, so I thought I might as well share it.

Cover Photo by [Fredy Jacob](https://unsplash.com/@thefredyjacob) on [Unsplash](https://unsplash.com/).
Coding the Wikipedia's Tooltip!
Tags: ui, css, javascript, html
Published: 2021-01-03 11:24:24

Recreating UI of popular websites is **fun**, today we are going to code **the Wikipedia's tooltip !**

If you prefer to watch the video **version** it's right here : 

{%youtube UFfPFeoE1dU%}

But first ...
**What is a tooltip ?**

A Tooltip is usually **some context** displayed by hovering a link, a button or an icon.

![tooltip](https://dev-to-uploads.s3.amazonaws.com/i/8g8mcvmm2bxd2es6xivj.png)

Let's do it, *step by step.*

##1. Create the tooltip and the links.

**The links :**
```html
  <span class="tooltip"><a href="#">Tooltip1</a></span>
  <span class="tooltip"><a href="#">Tooltip2</a></span>
  <span class="tooltip"><a href="#">Tooltip3</a></span>
```

**The tooltip :**
```html    
<div class="tooltip-container">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero tenetur non laborum dolorem laboriosam quo quibusdam assumenda dolores eveniet. Ipsum?
</div>
```

**Style it,** with position absolute, to make it easyer to place.
```css
.tooltip-container {
  width: 425px;
  min-height: 200px;
  padding: 15px;
  font-size: 25px;
  background: white;
  box-shadow: 0 30px 90px -20px rgba(0,0,0,0.3);
  position: absolute;
  z-index: 100;
  display: none;
  opacity: 0;
}
.fade-in {
  display: block;
  animation: fade 0.2s linear forwards;
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
```

Notice the **lovely animation,** to display from none to block and then animate from opacity 0 to 1 ! ♥


##2 Animate with JavaScript.

Take all the links, and the tooltip container.

```js
const tooltips= Array.from(document.querySelectorAll(".tooltip"));
const tooltipContainer = document.querySelector(".tooltip-container");
```

Listen to mouseenter and mouseout on every link and place the tooltip where the mouse is.


```js
tooltips.forEach((tooltip) => {
  tooltip.addEventListener("mouseenter", (e) => {

    tooltipContainer.classList.add("fade-in");
    tooltipContainer.style.left = `${e.pageX}px`;
    tooltipContainer.style.top = `${e.pageY}px`;

  });

  tooltip.addEventListener("mouseout", () => {
    tooltipContainer.classList.remove("fade-in");
  });
});
```

*Hurray, we made it !*
If you want to **add custom text** for each link to the tooltip, I'm showing it in the video, I don't want to make too long article.

**Source code,** with all the **shiny CSS** is right here :
https://codepen.io/Ziratsu/pen/ExgEwOw

Come and take a look at **my brand new Youtube channel** :
https://www.youtube.com/c/TheWebSchool
Be the **pioneer** that follows me uh ? 😎

*See you next time for some quick and polished tutorials !*