teleren/devto huggingface dataset:
Keeping your sanity with BEM CSS
Tags: css, beginners, productivity
Published: 2020-12-16 08:50:31

Hi!
So, you're working on a huge project? And you go crazy over css when it leaks? You find it hard to manage? You have come to the right place. This article is for you! :wink:


## What is BEM?
It's not a library! You don't have have to install anything to start using BEM.
BEM stands for ***Block Element Modifier***. Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development. It's basically a naming convention that makes your code more readable, scaleable, robust, and strict.

Are there any other methodologies like this? Yes! like OOCSS, SUITCSS, Atomic, etc.


## How to use BEM?
Let's go over these terms one by one.

#### Block
Any standalone entity that is meaningful on its own. For example - `header`, `hero`, `menu` and `footer` on a website. 

#### Element
A part of a block that has no standalone meaning and is semantically tied to its block. For example - `menu items` inside `menu`(Block).

#### Modifier
A flag on a block or element. Use them to change appearance or behavior. For example - `hover` state on our `menu items`(Elements) inside `menu`(Block).

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

In this image, Header and Menu are Blocks. Menu items are Elements. When you hover over menu items, you can change appearance using Modifiers. Enough talk, let's code now.

## Example

It's recommended to avoid using tag names in css and use class names instead.

The pattern followed in CSS is: `Block__Element--Modifier`.
Block (two underscores) Element (two hyphens) Modifier.

Blocks can have modifiers too. In that case class name would be - `Block--Modifier`

{% codepen https://codepen.io/thesanjeevsharma/pen/JjRNjZB %}

I know it looks a bit tedious when using CSS, but it works wonders with SASS. There's significant improvement in readability.

Let's see same example with SASS.

{% codepen https://codepen.io/thesanjeevsharma/pen/bGwWNGB %}

I recently got to use BEM in one of the open source projects I have been working on. I really love how clean and maintainable it is. I hope this urges you to try it at least once.

Thank you for reading! :pray:

You can connect with me on [Twitter](https://twitter.com/thesnjvsharma) and [LinkedIn](https://linkedin.com/in/thesanjeevsharma). :wave:
Xdebug is installed but impossible to debug in PHPStorm and homestead
Published: 2020-12-16 08:44:43

Hello , 

let me first introduce my work environment;

I use Vagrant, homestead and Laravel.

I installed the xdebug and when I `vagrant ssh` and `php -v` I see this result : 
````
vagrant@homestead:~$ php -v
PHP 7.4.10 (cli) (built: Sep  9 2020 06:36:14) ( NTS )
Copyright (c) The PHP Group
Zend Engine v3.4.0, Copyright (c) Zend Technologies
    with Xdebug v3.0.0, Copyright (c) 2002-2020, by Derick Rethans
    with Zend OPcache v7.4.10, Copyright (c), by Zend Technologies
vagrant@homestead:~$

```
also when I `phpinfo()`

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

I also installed the Xdebug on my chrome browser

The problem now is how to configure the PHPStrom? because I tried all tutorials and nothing happened ! 

my current configuration : 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0e0ipkh1umtzazaxy1rm.PNG)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/79lvtkblq8aimrjpsf1n.PNG)

Thanks.
I try different formats using Rust's Serde
Tags: rust
Published: 2020-12-16 08:26:38

---
title: I try different formats using Rust's Serde
published: true
description: 
tags: rustlang
//cover_image: https://direct_url_to_image.jpg
---

I try different to serialize my data before saving into RocksDB. #rustlang

# serde_json

## Time 

```
real    4m11.713s
user    13m32.809s
sys     1m33.887s
```

## Space

2.1GB

# bincode

## Time

```
real    2m13.772s
user    10m45.541s
sys     1m41.670s
```

## Space

1.1GB

# serde-lexpr (S-Expression)

## Time

```
real    10m54.622s
user    22m11.570s
sys     1m10.663s
```

## Space

2.2GB


# serde_cbor

## Time

```
real    2m52.010s
user    12m17.019s
sys     1m32.687s
```

## Space

1.7GB


CBOR and bincode are obviously faster than JSON and S-Expression. CBOR is a less efficient than bincode. However, more programming languages support CBOR.
What's Your Hobbies Other Than Programming?
Tags: discuss, watercooler, beginners, codenewbie
Published: 2020-12-16 08:15:30

# Introduction

![Hobbies](https://dev-to-uploads.s3.amazonaws.com/i/jyu1f9xdcfxa1xy9c5b3.gif)

We love coding software and it is our prime hobby but when we are frustrated and exhausted from coding software, we need a rest. So when you take time off from coding "What you do in that time ?". So let's discuss about our hobbies other than programming.

## My hobbies

Following are my hobbies other than programming
- Watching movies 🎥 and web series.
- Playing cricket 🏏
- Drawing 🎨
- Play some video games on PC 🎮
- Reading Romantic and thriller books 📕

## Discuss

- Your Hobbies other than programming.
DOAP Day 1
Tags: dohackathon
Published: 2020-12-16 08:12:01

First time on Dev.to here so be patient with me. I'm gonna try participating in Digital Ocean's App Platform Hackathon (Which I'll be abbreviating as DOAP from now on) and wanted to document my journey.

# My Project

I think my goal for this is to build a platform for either storing/managing [Architectural Decision Records](https://adr.github.io/) or something to do with making municipal code more accessible to constituents. So I'm sitting in either the `Program for the People` or `Built for Business` category. We'll just see where we end up in the end.

# Today's Work

So, Day 1... I started the evening just doing some quick reading about the platform, watching some tutorials and doing some maintenance on my Dev.to, DigitalOcean, and GitHub accounts. Of course I also applied for the [$50 credit for DigitalOcean](https://docs.google.com/forms/d/e/1FAIpQLSdHljGT15tIBAl6awNWh1-s3LCP3HMPPgZX5WE9LgHISp6Oiw/viewform?usp=sf_link).

The main thing I learned today is that the very first step to all this is to have a repo that already has some code ready to be deployed. I'm going to go with a node backend so I think the next step is for me to either fork the [Node Sample App](https://github.com/digitalocean/sample-nodejs), or to just start a new node project from scratch and hook it up to DO.

I'm going for a `node` + `apollo-server` + `type-graphl` backend and I happen to have repo that has most of the setup that I want. Unfortunately, it's been a year since I've touched it so it's a little the worse for wear. Additionally it is all hooked up to Postgres and I think that's more than I want at first. So, I spent the evening stripping out all DB stuff and trying to get it to build... and to no avail.

So, goal for tomorrow? Go back through the docs for all the dependencies and get it to build. Then we can actually start doing something in DO.

https://github.com/ardentink/adr-api
Accessible Color Pickers
Tags: css, a11y, javascript, codepen
Published: 2020-12-16 08:09:22

Most of the Color Pickers I've seen and used, haven't been accessible. They've been touch-friendly, but not keyboard-friendly.

So, I set out to create a Color Picker with range-sliders, which are both touch- **and** keyboard-friendly (using arrow-keys).

For that, the **hsl-format** (hue, saturation, lightness) is perfect. "Hue" is the recognisable "rainbow", also often seen as a color wheel. 

"Saturation" and "Lightness" are normally "merged" into two overlapping gradients with a single x/y-selector. 

Here, they appear as two individual sliders:

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

**Implementaion**

I recommend using an `<input type="text">`, since the `value` of this type supports any string. `<input type="color">` only supports a 7-char hex-code.

The Color Picker can be configured with some options as well:

**Output-formats**
- cmyk
- hex (default)
- hsl
- rgb

**Size**
- full (default)
- micro (no alpha-channel, use for `<input type="color">` ):

![micro](https://dev-to-uploads.s3.amazonaws.com/i/31s08uykrf1saeawzel8.png)
 
- mini:

![mini](https://dev-to-uploads.s3.amazonaws.com/i/szxccun66on1jjfhnybs.png)
 
And, if you want to use the trigger (the `<input>` itself) as preview, the value "update" will hide the preview of the Color Picker:

![mini-update](https://dev-to-uploads.s3.amazonaws.com/i/9o2lazlz1099yx6e1yca.png)
 
**Examples:**
`<input type="text" data-colorpicker="rgb mini">`
`<input type="text" data-colorpicker="hsl micro update">`

**Keyboard Shortcuts:**

`<input>`-trigger:
- `ArrowDown` : Open ColorPicker.
- `Escape` : Close ColorPicker.

ColorPicker:
- `Arrow Keys` : Change value on selected input.
- `Enter` : Close ColorPicker, set value.
- `Escape` : Close ColorPicker, do **not** set value.
- `Tab` : Go to next element.  When tabbing away from last input, the ColorPicker wll close and re-focus on the input/trigger.

And finally, here's a CodePen-demo:

{% codepen https://codepen.io/stoumann/pen/vYXmBpW default-tab=result %}

Thanks for reading!
PROGRAMMING HOMEWORK HELP
Tags: programminnghomeworkhelp, programmingassignmenthelp
Published: 2020-12-16 08:04:33

When hiring a programming coursework  help tutor who determines their availability? Are the tutors supposed to keep close contact with the students or is someone expected to communicate through the customer care number I have seen on your website? How can someone track the progress of their assignment? I am a huge fan of your programming homework help service and therefore would like to know how systems operate here. I would like to track three of my assignments that i did. I need assistance to track  my C Homework help assignment. Secondly,inform me on how i can track Java Homework help assignment. Thirdly help me track my Python Homework help assignment. Lastly help me track my C++ Homework help assignment as well.visit:https://www.programminghomeworkhelp.com/
Gitting happier with a global .gitignore
Tags: git, github, tutorial
Published: 2020-12-16 07:57:59

In most teams, we’re free to choose whatever editors and tools we want to get our work done. Everybody uses the OS and editor of their choice, and we push everything to a shared repository. Some use VS Code on macOS, others use Sublime Text on Windows, yet others kick it oldschool with vim on Linux.

All these individual choices create file noise. Operating systems add files like `.DS_Store` to keep track of folder preferences. Editors keep your workspace settings in hidden files as well. We don’t normally want to add those system-specific files to our project repositories.

Let say Josh’s config file for VS Code says he likes to use two spaces for indentation. Becky uses the same editor, but she prefers four spaces for indentation. If both were to commit their configurations, they’d run into merge conflicts all the time.

To avoid this, we can add the troublesome files and directories to our project’s `.gitignore` file. Files and directories listed in there are not committed to the repository at all. Josh and Becky can keep using VS Code, but their settings never leave their computer.

This gets tedious when every developer’s individual settings end up in a project’s `.gitignore`. The entries that really matter get lost in a sea of one-off configuration files. Instead of this approach, every person can maintain their own global `.gitignore`. It works like a regular `.gitignore` in a project, but applies to this person’s machine globally. These settings apply system-wide, without having to list those files again per project.

If you happen to use VS Code, you can add its hidden files to your global `.gitignore`. That way, they will NEVER be added to any of the repositories you contribute to. That puts developers in charge of keeping their system-specific files out of repositories.

To set this up, create a global `.gitignore` file somewhere on your system. The name doesn’t matter; I call mine `.gitignore_global` so I can tell it apart from regular `.gitignore` files. You can then set that file to be your global “excludes file” with this command:

```bash
git config --global core.excludesfile ~/.gitignore_global
```

In this snippet, replace `~/.gitignore_global` with the path to your system-wide `.gitignore`. Tada, you’re now happily ignoring everything that is listed in this file in all repositories on your entire computer!

– Dom
Migrate Ember services away from pod structure
Tags: ember, linux
Published: 2020-12-16 07:55:56

On one of my [Ember](https://emberjs.com/) projects I noticed that my [Services](https://guides.emberjs.com/release/services/) were for whatever reason using so [pod layout](https://cli.emberjs.com/release/advanced-use/project-layouts/):

```sh
❯ fd service.js
app/customers/service.js
app/preference/service.js
app/raven/service.js
...
```

Compare this to classic way to [create services](https://guides.emberjs.com/release/services/):

```sh
❯ ember g service customers --pod=false
installing service
  create app/services/customers.js
```

The former layout is not practical for several reasons:

- Those extra files are in the way when you decide that you want to change your route structure, because your `route.js`/`controller.js`/`template.hbs` files live in the same place.
- If you're looking for a service and you're not exactly sure about it's name, it's way easier to find it in one folder than multiple.

There is a neat trick to refactor all this in one go. You will just need nifty little renaming tool called [mmv](http://manpages.ubuntu.com/manpages/bionic/man1/mmv.1.html), which can use wildcards for file matching and capturing groups for renaming. If you're using [homebrew](https://brew.sh/) on OSX, it's as simple as:

```sh
❯ brew install mmv
```

And then following command should do the trick:

```sh
❯ mmv -v "app/*/service.js" "app/services/#1.js"
app/customers/service.js -> app/services/customers.js : done
app/preference/service.js -> app/services/preference.js : done
app/raven/service.js -> app/services/raven.js : done
...
```

Much better. All services are neatly organised in one place.

-----

<span>Photo by <a href="https://unsplash.com/@thematteroffood?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">The Matter of Food</a> on <a href="https://unsplash.com/s/photos/pods?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
8 Teaching Fundamentals I have learned From My Dad Who is a Teacher.
Tags: tutorial, codenewbie, teaching, learning
Published: 2020-12-16 07:51:53

## What You do as a Teacher when you teach others.

### 1- Students Learn Differently

Worksheets work well for students who absorb knowledge visually, but for a child who needs to hear the information in order to grasp it, traditional methods of teaching force him or her to use a physical sense that is not as well-developed.

A visual learner doesn’t have the same opportunity to stretch his or her other senses. If a teacher comes to the classroom with the basic knowledge that students learn differently, they will be better equipped to arrange the lessons in such a way that all senses are activated.

### 2- Use It Or Lose It

- Using information is how it becomes knowledge.

- Revising knowledge over a lifetime is how it becomes wisdom.

### 3- Make It Relevant

- Information is only stored permanently when it relates to day-to-day living. 

**For example**, math concepts must be reinforced in real-life examples or the student will have no reason to absorb the information beyond the exam.

### 4- Failure Is a Real Teacher

- People learn from failure.

- Failure teaches even better than a perfect score on a test.

### 5- Define Learning Ways

 The word “**learn**” has various definitions.

 >Memorization
 Acquiring facts or procedures
 Understanding reality
 >Making sense of the world

### 6- Care For Introverts

- It’s easy to assume that “group work” is always the best approach. That students who raise their hands are attentive. And that students who prefer to work alone are loners. All of which, are not necessarily true.

### 7- Let Them Teach

- One of the most effective methods for absorbing knowledge is to teach the knowledge back to another.

### 8- Teach How To Learn

- Learning is an abstract concept for many. By helping students understand the art of learning, the techniques of learning, as well as the different learning styles, they will be empowered by the process.

- Students who understand how to learn will have more patience with themselves and others as they grasp new material.

Hope you like this one. Please show your love in the comments.

You can follow me for more killer content on Twitter

If you need 1–1 mentorship on any issue about coding career or life or fitness as a coder then you can book a 60–90min time slot with me.

Check out my website for more info about how it works.

[Code Life Fitness By Ankur Tyagi](https://codelifefitness.com/)

I recently started blogging on theankurtyagi.com where I create free content for the community. This article is from there, you should check it out.

If you liked my recommendations, then I encourage you to sign up for my weekly newsletter

Every Friday, I share a “2-1-1” newsletter with 2 tips on coding from my exp, 1 life relationship tip from my experience & 1 fitness tip.

Sign up below 👇

[2-1-1 Friday newsletter ](https://codelifefitness.com/2-1-1/)
Top 10 Database Clients For Developers
Tags: laravel, javascript, web, node
Published: 2020-12-23 13:49:49

---
title: Top 10 Database Clients For Developers
published: true
date: 2020-12-16 07:37:51 UTC
tags: laravel,javascript,web,nodejs
canonical_url: https://medium.com/backenders-club/top-10-database-clients-for-developers-bddb48247c3b
---

[![](https://cdn-images-1.medium.com/max/1920/0*buYML1bFAjk5f_S0.jpg)](https://medium.com/backenders-club/top-10-database-clients-for-developers-bddb48247c3b?source=rss-8b0955f01559------2)

We are going to look at the top 10 Database Clients for developers and compare each of their features to spot the most and interesting ones

[Continue reading on Backend Developers »](https://medium.com/backenders-club/top-10-database-clients-for-developers-bddb48247c3b?source=rss-8b0955f01559------2)
Custom link underline with CSS box-shadow
Tags: css
Published: 2020-12-19 02:20:39

---
title: Custom link underline with CSS box-shadow
published: true
date: 2020-12-16 07:29:16 UTC
tags: css
canonical_url: https://phongduong.dev/blog/custom-link-underline-with-css-box-shadow/
---

When you create a website, you can customize the text color with `color` property. It will change the color of your text as well as the link underline color. But what if you want to set the link underline a different color from the text's color? There are various ways to do that. In this tutorial, I will show you how to use `box-shadow` property to customize the link underline.

To start, you create an anchor element.

```pug
a(href="/") This is a link
```

In CSS, you disable the `text-decoration` property with `none` value. The reason we set the text color `black` is that it won't change after the link is activated. You use `tomato` color for the underline. We need to create space between the text and the underline. We set the `padding` of the link `4px`.

```scss
a {
	text-decoration: none;
	color: black;
	padding: 4px;
	box-shadow: 0 3px tomato;
}
```

You can see that your link underline has a new color. But it doesn't give the user any feedback when they hover over the link. We will make it responds to when the user interacts with the link. 

```scss
a {
	text-decoration: none;
	color: black;
	padding: 4px;
	box-shadow: 0 3px tomato;

	&:hover {
		background: tomato;
		color: white;
		box-shadow: 0px 10px 10px 0px gray;
	}
}
```

The link will be `white` with `tomato` background. It also had a gray shadow under when you hover the link. But it's quite lagging. To make it smoother, we will use `transition` property. 

```scss
a {
  transition: background 0.1s, box-shadow 0.3s, color 0.1s;
}
```

The text color and the background will change in `0.1s` while the box-shadow is in `0.3s`. It is smoother now. You can change the transition duration to any value you want. 

Full code

{% codepen https://codepen.io/phongduong/pen/OJRRqBj %}
Advent of Code 2020 Solution Megathread - Day 16: Ticket Translation
Tags: adventofcode, challenge
Published: 2020-12-16 07:19:12

---
title: Advent of Code 2020 Solution Megathread - Day 16: Ticket Translation
published: true
description: We're validating train tickets in foreign languages with the help of some process of elimination.
tags: adventofcode, challenge
series: Advent of Code 2020
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/hkdzmq2ijzzu8nxgn3qh.png
---

How are you doing?  Making it OK?  Keeping up?  I'm starting to bog down a little, but switching to Python when I need to keep caught up has been helping.

## The Puzzle

In [today’s puzzle](https://adventofcode.com/2020/day/16), we're planning ahead for our upcoming train trip.  We've got a ticket with some numbers, and there are a bunch of fields that these numbers could belong to.  We've got to validate our neighbor's tickets to make sure we're on the right *track* (eh? ehhh?) before we can validate our own.

## The Leaderboards

As always, this is the spot where I’ll plug any leaderboard codes shared from the community.

```
Ryan's Leaderboard: 224198-25048a19
```

If you want to generate your own leaderboard and signal boost it a little bit, send it to me either in a DEV message or in a comment on one of these posts and I'll add it to the list above.

## Yesterday’s Languages

Updated 11:18PM 12/15/2020 PST.

| Language   | Count |
|------------|-------|
| Rust       |     2 |
| Haskell    |     2 |
| Python     |     1 |
| JavaScript |     1 |
| Ruby       |     1 |
| COBOL      |     1 |

Merry Coding!
Advent of code - Day 15
Tags: javascript, typescript, adventofcode
Published: 2020-12-16 07:18:07

Are you participating in the [Advent of code](http://adventofcode.com) this year?

If you don't know what the advent of code is, it's a website where you'll find a daily challenge (every day it gets harder). It's a really fun event, you should participate!

I try to solve the exercises using either JavaScript or TypeScript and will share my solutions daily (with one day delay so no one can cheat!). I only share the solution for the second part.

Ok, I'm pretty sure they decided to give us a break following the weekend that was way harder than the rest! Good for us, this one was pretty simple.

Here is my solution for day #15:
```js
const input = `14,1,17,0,3,20`.split(',')

// Pre alloc the array for performance
const record = new Array(30000000)

function process(number, index) {
  const firstSeen = record[number] === undefined
  const seen = record[number]
  record[number] = index
  return firstSeen ? 0 : index - seen
}

let lastSeenWas = 0
for (let i = 0; i < input.length; i++) lastSeenWas = process(input[i], i)

for (let i = input.length; i < 30000000 - 1; i++) {
  lastSeenWas = process(lastSeenWas, i)
}

console.log(lastSeenWas)
```

Feel free to share your solution in the comments!

________________________

Photo by [Markus Spiske](https://unsplash.com/@markusspiske?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText) on [Unsplash](https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText)