teleren/devto huggingface dataset:
Have you tried these cool CSS Games?
Tags: css, webdev, beginners, tutorial
Published: 2021-01-14 15:05:03

There are many topics in CSS which require practice to master.
Here I will be sharing some of the CSS games which I found worth trying if you want to make a strong grip on CSS.

---

### **1. CSS Battle**

**Compete** with thousands of people by playing different CSS based games and completing various challenges.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zu6n40ftgde25ohhyz7p.png)

[Click Here to Play](https://cssbattle.dev/)|
----------------------------------------------------

---

### **2. Flexbox Froggy**

Guide Froggy to the lilypad using **Flexbox** properties. This game is fantastic to visualize flexbox properties as you practice them.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2sim8qkvtv50st8mij0g.png)
 
[Click Here to Play](https://flexboxfroggy.com/)|
------------------------------------------------

---

### **3. CSS Diner**

Have you ever felt confused using CSS Selectors? Well, this game is for you. Write different **CSS Selectors** to place different objects as mentioned.

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

[Click Here to Play](https://css-diner.netlify.app/)|
----------------------------------------------------

---

### **4. Grid Garden**

CSS Grids is a must to learn and it gives a solution to the menace of aligning the content. 
Gird Garden is possibly the best way to get a good grip on **CSS Grid**.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7oyjr1q2p2e1n7mdvxmb.png)

[Click Here to Play](https://cssgridgarden.com/)|
----------------------------------------------------

---

### **5. Flexbox Defense**

Yet another way to practice **flex-box** properties.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/628lkrs5sucgneqst1js.jpg)

[Click Here to Play](http://www.flexboxdefense.com/)|
----------------------------------------------------

---

*If you got to learn something new and useful show some love by giving this post a ❤️*

If you also know other cool games then do share them in the comment section below :arrow_down:

If you like this article then do check out my other ones :sunglasses:
{% link https://dev.to/hardikchopra242/cool-extensions-for-vs-code-48jc %}
{% link https://dev.to/hardikchopra242/master-vs-code-resources-1e4b %}
{% link https://dev.to/hardikchopra242/do-you-know-markdown-2d2p %}
Fix MySQL Error on Ubuntu 
Tags: mysql
Published: 2021-01-14 15:03:35

I installed mysql on ubuntu and tried to access mysql.
```
mysql -u root -p
```
But I got the following error.
```
ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (2)
```

So I restarted mysql.
```
Sudo service mysql restart
```
Then I tried to access mysql again, but faced with a new error.
```
ERROR 1045 (28000): Access denied for user 'root'@'localhost' 
```

By googling, I read that this error appears because of the type of the password. 
So I changed it. 
Firstly, I got into mysql with sudo commend.
```
Sudo mysql -u root
``` 
Then I checked the type of the password.
```
SELECT User, plugin FROM mysql.user;
```
The password type of user 'root' was **'auth_socket'**.
I changed this to **'mysql_native_password'**.
```
UPDATE mysql.user SET plugin='mysql_native_password' WHERE User='root';

flush privileges;
```
And then I tried to access mysql.
``` 
mysql -u root -p
```
It worked well.
Small Introduction to AI 
Tags: ai, machinelearning, beginners, localhackday
Published: 2021-01-14 15:01:45

What comes in your mind when you hear this term - AI? Machines doing things like humans, or are even replacing humans. Do T-800 from terminator comes in your mind or Jarvis from Iron-Man? Well, yeah we can say it's an artificial intelligence but in reality, we are still very far from achieving T-800 like high level robot who is good in almost every task. 
An AI is a machine that acts like humans, it can be just software based or if blended with robotics then it can make a completely different masterpiece like Sophia -a humanoid robot. But there is something called Narrow AI- means machines can do things like humans or better than humans at some specific sites like detecting cancer, playing video games but only some specific tasks, they can't do other stuffs. There is General AI and these are machine that can do all things like humans instead of just one specific thing. See when we talk about AI, we generally are talking about Narrow AI as we are still very far from General AI. Google assistance, Siri, Alexa and many other are examples of this Narrow AI. 
But how we actually do it, I mean teaching machines so that they can do some work. This is done by machine learning. Many students just consider AI and ML as same but ML is a subset of AI & is an approach to try and achieve AI through systems that can find patterns in a set of data. It's getting machines to do things by providing a set of training data and then after training it, we test it using test data and then can work on real world data with it's help.
But again how we implement ML, how that much data is gathered? Well, it's not that much of a hard task for big giants like Google, Amazon, Facebook and others. They on daily basis collects a lot of user data from all over the world and hence, they are pioneers in AI and ML world. There a lot to learn in the world of machines. And if I go on writing then even a book can be written. But even I am learner who is giving you the overview of AI.

At last, the thing is that - AI and ML overlaps. ML is a step towards an AI. More preciously data science, deep learning, machine learning and artificial intelligence, these all are overlapping terms. One needs other to completely leverage its power.
Desactivar notificaciones de Laravel Mix.
Tags: laravel, php, laravelmix
Published: 2021-01-14 15:00:39

A partir del post [Configura hot reload con Laravel](https://devscamp.net/post?slug=another-post-5f3i), algunos developers solicitaron mas tips de Laravel Mix, aquí otro muy interesante y corto.

Laravel Mix nos permite desactivar las notificaciones que usa al compilar de varias formas:

#### Desactiva de forma general TODAS las notificaciones:

Agrega en tu archivo webpack.mix.js, esta línea:

```js
mix.disableNotifications();
```

Es probable que sea útil mantener las notificaciones solo cuando la compilación de Laravel mix falle, para esto podemos usar, el siguiente método:

```js
mix.disableSuccessNotifications();
```

Ok pero y si deseo agregar hot reload como en el post anterior?

También tenemos la opción de agregarle otro valor al objeto JSON que recibe el método "browserSync" de Laravel Mix:

```js
mix().browserSync({
    'proxy': 'tuapp.test',
    'open': false,
})
```

Con esto cubrimos varios escenarios usando Laravel Mix, espero les sean de utilidad y si tiene mas inquietudes por favor dejen sus impresiones en los comentarios o visiten nuestra pagína web devscamp.net (si no estas viendo este post desde ahí).
Day 13 Challenge
Tags: challenge, webdev, javascript, 365daysofcoding
Published: 2021-01-14 14:51:49

Fix this function:
```javascript
function areEqual(num1, num2, num3){
    return num1 + num2 === num3
}
```
Tests:
```javascript
      areEqual(1, 2, 3) //true
      areEqual(11, 12, 13) //false
      areEqual(10, 10, 20) //true
      areEqual(.1, .2, .3) //true
      areEqual(1.1, 1.2, 1.3) //false
      areEqual(1.1, 1.2, 2.3) //true
```
I made a job board dedicated to full remote jobs for French devs
Tags: showdev, startup
Published: 2021-01-14 14:47:58

It's called [RemoteFR](https://remotefr.com/?utm_source=devto&utm_medium=web&utm_campaign=show).

## The Problem:

I've been a (French) developer for 10 years, and I always wanted to have a remote job. But, in France, that's super hard to find. Two reasons for this:

    
- The France culture at work is very much about control. Being fully remote is hardly compatible with it
- The french devs aren't really aware of internationals opportunities (because of the language, but it's also probably cultural)

## My Solution:

I created a job board with full remote jobs only and targeted to french-speaking devs only.
I curate both french jobs and international ones and publish them on the website.

I also created a mailing list where you can subscribe to a get weekly summary of all the jobs that matched your criteria.

My main objective here is to grow the audience of Remotefr, I started to post the job offer on [Twitter](https://twitter.com/remotefr) to see if I can get some traction from it.

Once my audience will be big enough I'll monetize the job posting, so it'll remain free for developers. 

What do you think of it?
Dark/Light Mode Toggle: a Usability Issue
Tags: uidesign, ux, darkmode, frontend
Published: 2021-01-14 14:47:58

---
title: Dark/Light Mode Toggle: a Usability Issue
published: true
description: How to avoid usability issues with dark/light mode toggles
tags: uidesign, ux, darkmode, frontend
cover_image: https://francescoimprota.com/img/posts/dark-mode-toggle/dark-mode-toggle-3.jpg
---

Most of the solutions adopted for the toggle light / dark mode suffer a **usability problem**. The **status** of the toggle does not represent the current one of the interface, visible by the user. Too much minimalism isn't always a good solution in UI Design.

## Approach 1: icon only
![image](https://dev-to-uploads.s3.amazonaws.com/i/f74lghic6ecuj9hbo00m.jpeg)
*Dark mode toggle on feathericons.com*

Let's take the toggle visible on the *feathericons.com* site as an example. The toggle is located in the top-right positon of the screen. In *light mode* the user sees the moon icon, in *dark mode* that of the sun. The two symbols are used in an **exclusive and inconsistent way** because they do not represent the interface current state.

## Approach 2: icon and label
![image](https://dev-to-uploads.s3.amazonaws.com/i/vxp02qjkmubvib166h1i.jpeg) 

Similar to the previous approach but with the addition of a label. However, I get confused by seeing the “dark” word and the moon icon on a white background. The same happens for "light" and sun. 

## Visibility of system status
Norman's [first usability heuristic](https://www.nngroup.com/articles/ten-usability-heuristics/) reminds us of what is really important in user interface design:

> Communicating the current state allows users to feel in control of the system  

An interface should always keep users informed of what's happening, through appropriate feedback. Only in this way can the user feel in control of it.

## Solution: be coherent
![image](https://dev-to-uploads.s3.amazonaws.com/i/idkij0192qsjo9450g1j.jpeg)
 
*Pure CSS dark mode toggle switcher - by Demilade Olaleye*

A good solution is also the simplest one. The two options are both visible, in the example with a label but it can also be just an icon. The selected option coincides with the current state of the system and is highlighted.

See this [demo on CodePen](https://codepen.io/demilad/pen/bZRjpb).

## System prefences
Since both Windows/Mac OS have introduced the ability to choose between light and dark mode at the system level, many sites have added this feature to their design without informing the user. Probably you land to a website and see it in dark mode without choose.

![image](https://dev-to-uploads.s3.amazonaws.com/i/4p76jqslmj5wcaryh3j6.jpeg)
 
*Possibile solution with three options*

A better solution provide a third "system" option, in this example represented with a monitor icon.

- - - -

## In conclusion

> Only by knowing what the current system status is can you change it

A **lack of information** implies a **lack of control**. It's a common usability rule that we could find applied to many objects that surround us in the physical world. As designers of digital products, we just have to remember to use it.
How to build a FREE Contact form without a server
Tags: contactform, mdbstrap, formspree, html
Published: 2021-01-14 14:36:56

<h4>Formspree has a <strong>FREE</strong> plan for 50 submissions a month. Which is great, if you own a small business. So I made a YouTube tutorial to show you how to do it. It's very simple. 
Check it out 😁</h4>

{% youtube H_MUJ--iAcc %}



<h5><strong>P.S.</strong> This is my first YouTube tutorial. It's not great, but it's okay. 🤪</h5>
Android: executePendingBindings() en RecyclerViews
Tags: android, kotlin, databinding
Published: 2021-01-14 14:36:22

Como nada es perfecto, data binding tiene una desventaja con 
respecto a findViewById() en Android.

Android “pinta” los views en la pantalla cada 16ms en promedio, esta actualización de la pantalla puede suceder en menos tiempo, pero si se hacen procesos pesados en el hilo principal (Main Thread) podría causar que la actualización sea de más de 16ms y empezamos a ver lags en la pantalla. Cuando usamos binding para asignar valores a un view, por ejemplo al asignar un texto a un TextView con binding.myTextView.text = “Some text”, el binding no se ejecuta al instante, sino que espera a que pase ese tiempo de 16ms para medir cuanto el área del nuevo texto y luego pintarlo. Es como cuando juegas con tu perro a lanzar la pelota y va por ella pero luego no la suelta hasta que pasas un rato tratando de quitársela (16ms en promedio).
Esto por lo general no nos afecta, por ejemplo cuando abrimos una nueva Activity y pintamos todo con binding, 16ms no son nada. Lanzaste la pelota a tu perro una vez y se la quitas, no pasa nada.

Pero ahora imagina un recyclerView con decenas de elementos, cuando haces scroll rápidamente y viene el siguiente elemento, puede ser que todavía no hayan pasado los 16ms recomendados, pero podría suceder que cuando aparece el siguiente elemento el binding no haya alcanzado a medir y pintar el anterior, entonces podrían verse lags extraños. Es como si quisieras romper un record de lanzar pelotas y ya viene la siguiente pero tu perro todavía no suelta la anterior.
Esto es poco común, y de hecho si no implementas lo que estoy a punto de mencionarte muchas veces no tendrás problemas, pero es mejor prevenir.

La solución para prevenir esto es que después de pintar los views de tu ViewHolder, mandes llamar binding.executePendingBindings(), así:

```
inner class EqViewHolder(private val binding: ItemBinding): RecyclerView.ViewHolder(binding.root) {
    fun bind(earthquake: Earthquake) {
        binding.myTextView.text = someString
        binding.myImageView.src = someImage
        // Más cosas que hagas con tus views
        ... 
        // JUSTO AQUÍ VA 👇
        binding.executePendingBindings()
    }
}
```

De esta manera, vas a forzar al binding a que no se espere los 16ms, sino que pinte todo inmediatamente. Sencillo, es solo agregar una linea de código, aunque Android no explica mucho para qué sirve en su documentación oficial y por eso a veces es difícil de recordar.

Espero que los de Android manejen esto automáticamente en el futuro. Mientras tanto te invito a dejar tus comentarios.
Como siempre todos los comentarios y dudas son más que bienvenidos. Te invito a visitar mi blog (https://www.hackaprende.com) o [mi canal de Youtube](https://www.youtube.com/c/hackaprende) para ver más artículos y cursos sobre diseño, programación y emprendimiento tecnológico.
My First Python Package, an Auto Generator for Solved Problems in Codeforces
Published: 2021-01-14 14:29:15

I have made an python package named **[cp-tool](https://pypi.org/project/cp-tool/)** and published in [https://pypi.org](https://pypi.org/)

![](https://img.shields.io/badge/version-2.1.1-blue) ![](https://img.shields.io/badge/license-MIT-brightgreen)

**cp-tool** is an auto generator for solved problems at different online judges. It gathers all the problems you have solved at an online judge and generates a git repository for you.

Generated [Sample Git Rep](https://github.com/jspw/cp-tool-sample) by [cp-tool](https://github.com/jspw/cp-tool)

## Supported Platforms

- [Codeforces](https://codeforces.com)

## Requirments

- python >=3.6

## Instruction

- ### Installation

  - Linux :

  >     pip install cp-tool

  - Windows :

  >     python -m pip install cp-tool

**Note : Please updated version**

- ### Upgrade :

  - Linux :

  > pip install --upgrade cp-tool

  - Windows :

  > python -m pip install --upgrade cp-tool

- ### Usage

  - Using command `cp-tool` it will show the usages

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

  - Init with git repo :

    - Create a git repository first
    - Then init

      >     cp-tool -c init -j codeforces

      You will be asked for

      - handle

        - example : `shifat57`

      - repository name (A folder will be created based in repo name)

        - example : `My Cp Track`

      - repository url
        - example : `https://github.com/jspw/cp-tool-sample`

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

  - Update submissions :

    - Go to the repository folder in your local file

    - Then

      > cp-tool -c update -j codeforces

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

## License

[MIT](LICENSE)

[Check Source Code](https://github.com/jspw/cp-tool)
[Sample Repo generated by cp-tool](https://github.com/jspw/cp-tool-sample)
Underline a link in 2021
Tags: css
Published: 2021-01-14 14:15:06

Underlining a link doesn't involve a `border-bottom` anymore, as I discovered on [CSS Tricks](https://css-tricks.com/styling-links-with-real-underlines/):

```css
a {
  text-decoration-color: #f60;
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: auto; /* default */
  text-underline-offset: 1.5px;
}
```

Very handy and way more flexible!
CSS Only 3D'ish Switch
Tags: codepen, html, css, design
Published: 2021-01-14 14:06:36

<p>Pure CSS implementation of a switch (styled checkbox).</p>

<p>There is no any Javascript codes in this pen.</p>

<p>I just put too many <code>box-shadows</code> to create the 3D look of this switch.</p>

<p>The background of this switch supposed to blur its backdrop using <code>backdrop-filter</code> CSS attribute.</p>

<p>The animation of the switch is made simple, and fast (128ms).</p>

<p>The size of this checkbox may be changed by changing the <code>font-size</code> of its parent element.</p>

{% codepen https://codepen.io/takaneichinose/pen/KKgGjqb %}
Hi! I'm Joining the Forem Team 🎉
Tags: meta, career, forem
Published: 2021-01-14 13:59:56

Hi! I’m Katie and I’m so excited to announce that I am joining Forem as a Senior Software Engineer. I can’t wait to make things easier for everyone to create online communities.

**Why Forem?**

I’ve always thought dev.to represented a super special type of community on the internet. There’s so much positivity and helpfulness all over the site, and it reminds me a lot of the message boards I used to use when the internet was still kinda new. When I saw a posting for a Front-end role I applied because I really want to make the internet a nicer place for everyone, both visually and in the sense of creating safe and friendly spaces.

**About me:**

I’m a software developer who has worked all over the stack but I really, really love working on the Front-end. Before Forem I worked at a bunch of different start-ups. Most recently I was at [Shopify](https://shopify.com) making open source developer tools and a React Native app. 

When I’m not working, I’m typically outside with my dog, working on my fitness, or watching hours and hours of reality tv. Ask me anything about The Bachelor franchise.
Please, don't make the same mistake
Tags: algorithms, programming, javascript, junior
Published: 2021-01-14 13:47:22

---
title: Please, don't make the same mistake
published: true
description: Why understanding data structures and algorithms helps to build robust applications. 
tags: algorithms, programming, javascript, junior
cover_image: https://dclrlzd4gl55u.cloudfront.net/481/hero2x?1554901487
---

It may seem that when you are a beginner, you'll do simple things only. No need to learn data structures and algorithms. No need to understand Big O notation, complexity and stuff like that. 

This couldn't be further away from the truth!

In 2008, when I just started learning to program, I spent a lot of time reading books on PHP and MySQL. Months later, when I felt confident, I took my first freelance project. It was a real estate website. A simple one. I used a custom-made ORM and everything worked just fine!

When I released it, the search feature quickly became sluggish and made the website unusable. 

I was wondering what the heck had happened. I figured out that database queries became very slow when there were over 200 real estate objects added to it. 

This is it. What worked fine during testing did not work in real life.

I was a self-taught developer. I did not know how to measure if my project scaled well. I didn't even know that I had to do it.

I thought algorithms mattered only for launching a spaceship.

If I had some basic understanding of algorithms, I would have known that the more the input, the longer it takes. 

I am not saying I would have come up with a robust solution as a junior, but I would have looked for a solution because I knew there would be a problem. 

Please, don't make the same mistake!

Of course, data structures and algorithms are much more than that and they apply differently depending on what you work on. 

But a basic understanding of data structures and algorithms is a must for every software developer. 

---

I am writing about my experience of what I wish I knew when I was a beginner and I review programming courses to find those that are worth learning. 

If you are a junior or a beginner and you want to know what you need to learn, you might find my newsletter useful https://ns.comparecourses.dev