teleren/devto huggingface dataset:
The Disappearing Line (a CSS Mystery)
Tags: css
Published: 2020-03-07 17:11:54

---
title: The Disappearing Line (a CSS Mystery)
published: true
description: The mystery of the missing HR that was there but it couldn't be seen.
tags: CSS
---

We are working on a component library with React, and recently we had an interesting issue related to the most basic component that you could imagine: a horizontal line that works as a divider.

It all happened when a user contacted us about a problem with the Divider component. A simplified version of it would look like this:

```javascript
const Divider = props => {
  const { dataTest, type } = props;
  const className = type === 'thick' ? 'thick' : undefined;
 
  return (
    <hr
      className={className}
      data-test={dataTest}
    />
  );
}
```

Which generates the following code once rendered (without props):

```html
<hr />
```

As you can see, it is a single `<hr />` tag that displays as a horizontal line. It is plain old HTML... so what could go wrong with it?

According to the user, the line was not displayed even when they had verified that it was there and that they had imported everything correctly. 

And the code was fairly simple overall:

```html
<div class="container">
  <p>Some text here</p>
  <hr />
  <p>More text here</p>
</div>
```

We were puzzled. After verifying the version of the library, making sure the imports were correct and that the component was used in the right way, and double-checking that no additional CSS was been applied to the HR. Everything seemed fine... but when the user showed us their page the horizontal line was not there.

It took us a few minutes too many before we realized what was happening. Here is some space in case you want to think about it before jumping to the _mystery_ solution.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

The issue was that the user was wrapping all the content in a `<div>` with the following styles (among others):

```scss
.container {
  display: flex;
  flex-direction: column;
}
```

When using FlexBox, the elements inside the flex container behave differently than how they are originally defined. Some properties like `float`, `clear`, or `display` do not apply in the same way.

Browsers display `<hr>` as an empty block element with automatic horizontal margins (that will center it if a `width` is specified). But when the `<hr>` becomes a flex item, the automatic width is pushed to 0. Disappearing from the view.

Here is a demo of the issue on [CodePen](https://codepen.io/alvaromontoro/pen/gOpXvqW):

{% codepen https://codepen.io/alvaromontoro/pen/gOpXvqW %}

There are two possible solutions for this issue:

1. Specify a width for the `<hr>` tag
2. Do not use FlexBox in this case

FlexBox is a powerful tool –and an amazing one, probably the best to come to CSS in a long time–, but as with any other tool, it is important to understand it and only use it when it is needed. This particular example showcases a time in which it is not needed and causes unexpected side effects.
Draw with code - Introducing kids to coding using simple type-in JavaScript programs
Tags: codenewbie, javascript, 100daysofcode
Published: 2020-03-07 17:10:49


# Introduction

Let’s make a journey in time and remember those early home computers of 80s that started the entire IT revolution. Perhaps you can still remember the ZX-Spectrum, the Commodore 64 or the BBC Micro. 

Although very primitive by current standards, those early computers were perfect platforms for learning to code.They provided everything a user needed to make the jump into programming: a language (BASIC), a library of friendly commands and a code editor.

A whole generation of today’s professional developers started their careers by learning to code as kids on those early computers. 

Back in those days there were plenty of books and magazines containing code listings - the so called "type-in programs". A beginner would just pick up a magazine and start typing. 

# Modern times

The entry path to coding is no longer as simple at is was back then. Modern computing devices are friendlier and easier to use than ever, but their advanced design makes them very difficult to program them.

In this article I'm proposing a solution that tries to bring back the benefits of the 80s with the advantages of modern times computing.

Introducing [codeguppy.com](https://codeguppy.com) - this is a simple JavaScript environment that allows kids and beginners to play with graphical JavaScript programs.

# Draw with code

"Drawing with code" is a very well received way to introduced kids to coding. It consists in providing kids with small JavaScript programs printed on a piece of paper and asking them to type them in.

Using the [codeguppy.com](https://codeguppy.com) code editor and a few printed programs, kids can begin to code in a real text based language (e.g. JavaScript) from the very first moment.

After the program is typed in, kids can have a lot of fun trying to customize it. E.g. change colors, add new shapes, etc.


# Examples

Below are a few example of that exemplify this method. They contain real working code.

Please go ahead and try them ... but remember: first print the image and then try to type-in the program.

If it works for you, then try to use this methods when teach others to code.

Example 1
![](https://dev-to-uploads.s3.amazonaws.com/i/i2kv9n29w52jdy79f7zs.PNG)

Example 2
![](https://dev-to-uploads.s3.amazonaws.com/i/s38ulke62t36c0763nur.PNG)

Example 3
![](https://dev-to-uploads.s3.amazonaws.com/i/zlgnf0tsq3gxdaod8zps.PNG)


Happy coding!

Please leave your feedback in the comments. I can also provide much more type-in code examples if you are interested to use them with a larger group.
Which Operating System Are You Using?
Tags: programming, beginners, productivity, discuss
Published: 2020-03-07 17:03:20

---
title: Which Operating System Are You Using?
published: true
description: Which OS are you using to write code? Windows? Mac? Linux? I want to know!
tags: programming, beginners, productivity, discuss 
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/8rjdrznkh2y67rn8ketu.jpg
---

I [asked folks on Twitter](https://twitter.com/JeremyCMorgan/status/1235266632596905984) what operating system they use to write code and was a bit surprised. (The poll is still going on if you want to see the current results). 

It looks like a dead heat between Windows and Linux. I expected much of my audience to be front end developers and web developers, who primarily use OSX. Most developers I talk to regularly use OSX, so I was surprised to not see it above and beyond the rest. 

So what are YOU using as a "daily driver"? I'm curious to know. Whether you're a professional developer or a hobbyist tinkering around. 

![What OS are you using?](https://dev-to-uploads.s3.amazonaws.com/i/66c7og5hox3lnw2z62ot.jpg)

It wasn't long ago people would say things like "If you want to develop with {language / platform} then you must use {Operating System}. But it seems these days you can do whatever kind of development you want in each operating system. 

Windows was the laggard for many years. If you wanted to do any kind of scripting or run applications only built for Linux you were out of luck. But [WSL has changed that](https://dev.to/pluralsight/getting-started-with-wsl-1abp). So I'm not too surprised to see the increase in Windows usage. 

### So What Are You Using to Write Code??

Let me know in the comments what you're using and why. Work or play. You can [still vote](https://twitter.com/JeremyCMorgan/status/1235266632596905984) on this poll for a couple days too. I'm curious.
I'm Glenn, and I support women devs.
Tags: wecoded
Published: 2020-03-07 17:00:58

I find it a real shame that women are still treated differently in the tech sector (or in any sector). There have been more than enough women in our history that proved that this masculinity is useless.
I made a blog post about a couple of them last year but there are a lot more that should be mentioned: {% link https://dev.to/glennmen/tech-created-by-women-1f6g %}

We work in a creative sector where we as developers and designers need to solve lots of problems, technical, UX or others, and by bundeling lots of different people together you can get different solutions that you might not have thought about yourself.

At our office we already had a pretty much all female design team and recently I noticed that we are getting more young female developers. I love this movement and hope to see many more female developers join our different teams.

I will never judge someone based on their gender, race, age, ... In my opinion you can only judge someone on their work and even then you should give feedback and point out what could have been done better. Or you should get to know them first on a more personal level before you make an opinion.

---

One of my favourite devs is @marinamosti! She is an excellent writer and I especially enjoyed her beginners series about Vue: {% link https://dev.to/marinamosti/hands-on-vuejs-for-beginners-part-1-2j2g %}
I built simple API for others to learn working with APIs
Tags: showdev, django, python
Published: 2020-03-07 17:00:12

As I wrote in my blog post about three areas I wish I had known better prior starting my iOS developer job, one of them was networking and more specifically doing POST requests to server.

{% link https://dev.to/nemecek_f/three-areas-i-wish-i-d-known-better-prior-starting-ios-developer-job-52j5 %}

I decided to help others who are learning and built super simple API for tasks along with documentation.

Users can get their token with single click and use it to “authenticate” with the api.

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

I tried to make the docs as accessible as possible. And even made the API as friendly as I could. I am by no means an expert at creating APIs. I am mostly using them.

![ApiThing docs](https://dev-to-uploads.s3.amazonaws.com/i/9j9h3ww8jszohqryef6k.png)

For example while updating task (I chose POST request because it is easier in many languages and frameworks than PUT) you can send only properties you wish to update and it will go through.

For example:

```json
{
        "is_completed": true
}
```

Similarly the API works with either form encoded data or just raw JSON.

PS: Just yesterday I reconfigured CORS so folks can use the API in frontend JavaScript with no problems. 🙂

You can find it over at [ApiThing.net](https://apithing.net/). 

_Thanks for reading._

If you have any tips to make the API better for learners. Please do let me know.
Nevertheless, Faith Kilonzi Coded
Tags: wecoded, globalcodess, equality, womeninetech
Published: 2020-03-07 16:55:41

✨✨
<h1>Equality in Tech </h1>
I envision a tech industry where everybody is treated equally regardless of their gender. I would like to see everyone being given equal chances and paid what they are worth.
More specifically, I would like to see ZERO gender discrimination which usually comes off as: 
* Negative or sexist jokes being passed in the workplace
* Less support for women from their senior leaders than a man who was doing the same job
* Women in tech jobs are being paid less than a man doing the same job
* Someone treating a women in tech as if they are not competent because of their gender
* The gender biases in recruitment processes and the assumption that women are not technical enough

<h1>My expertise</h1>
I am passionate about problem-solving through implementation of high-quality software products especially back-end and web-applications using a variety of programming languages and technologies.I hold a bachelor’s degree in computer science from Ashesi University. I have experience working in academia, fin-tech, healthcare, research, technology and consultancy industries both in Kenya and Ghana. 
Driven by intellectual curiosity, I combine my passion for tutoring,software development, data science and technical writing to create digital content through my online blog. I am also fascinated by community development through problem-solving to make the world a better place.

<h1>My advice</h1> 

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

>"There is a danger in letting people misname you; if you are a fire, do not answer when they call you a spark"
                 -Upile Chisala


Dear codess, give up the self-doubt, show up and do what you do best. It is time! Happy international Women's Day!
Paired down programming
Tags: recruitment, pairprogramming, javascript
Published: 2020-03-07 16:52:55

---
title: Paired down programming
published: true
description: Optimising code with a colleague is an excellent way to see how their mind works.
tags: recruitment, pairprogramming, JavaScript
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/xe8483nfrs4gf6rfda2t.jpg
---

<blockquote>How many bytes does a character take up?</blockquote>

My colleague <a href="https://dev.to/nickwattonnickwatton">Nick</a> asked me this question because he wanted the JavaScript in <a href="https://codepen.io/2Mogs/pen/yLNPywz" target="_blank">his tiny Solar system</a> to be under 1k in size. We never bothered finding out the answer, but instead both stared at the minified code, looking for ways to save a few characters.

Unwittingly, I think Nick created a pretty good recruitment tool: show a candidate some code and pair-program ways to shrink it down. It won't lead to the most maintainable code, or the best practice, but it should give you an idea of how that candidate's mind works.

Pretty soon, I found myself saying stuff I had no business poking my nose into, such as <q>could that be an arrow function?</q> Just to be clear, I regard arrow functions as a form of street-slang and witnessing a man of my advanced age using them would be about as elegant as watching me beatboxing. Turns out I was right, though: we saved a few bytes by converting one function into an arrow function. Nick went through the rest of the code, but it wasn't possible to repeat this trick.

Nick also found some optimisations by removing some accuracy of some of the numbers. Pretty soon, he'd reached a size which he was happy with. Then I spotted one more optimisation. <q>You're not going to like it</q>, I said, by way of introduction, before pointing to the final character of the JavaScript: a line terminator.

Nick deleted it without a moment's pause.

What surprised me about this was that I feel that any of Nick's colleagues could have helped him with this task. Sometimes making suggestions is not even required. Asking what <code>E</code> is can be enough to trigger a thought in the original programmer's mind.
🌴🍹 Chill networking for ranting hackers
Tags: sideprojects, go, vue, graphql
Published: 2020-03-07 16:13:14

...Because they say that complaining about the same things connects people.

Hi everyone!

TLDR: Would you use my networking side project? https://www.frenl.com

As a developer and person that doesn't like to go out that much, I don't have a lot of product/design/business people in my network. It has often been a problem for me when working on side projects and trying to learn things outside of my dev bubble.

I've been working for a while on a tool to help with that and my biggest problem has been so far to get the users to talk to each other. It's actually hard to get two strangers to talk.

I am now experimenting with two new concepts to help with that: 

- Adding some "hot takes" as a core of the user profiles to give them a more clickbaity flavor (they tend to be a bit bland right now).

- Adding self-interviews to user profiles to create empathy and spark more interest.

The one that I'm the least convinced about is actually the "hot takes" because I'm not sure that people will open up easily.
That's what I wanted to know your opinion about today hehe.

Thank you and have a great weekend all!

Fabien
Mini social network that I made as my first web app project.
Tags: javascript, react, redux, node
Published: 2020-03-07 16:08:08

# social-network

Mini social network that I made as my first web app project.

## Demo

[social-network](http://46.101.189.55/login)

## Repository

[link to repository](https://github.com/misa-j/social-network)

## Link to a full video

[Video](https://streamable.com/5srsv)

## Screenshots

![](https://raw.githubusercontent.com/misa-j/social-network/master/screenshots/Screenshot%20from%202020-02-29%2019-07-06.png)
![](https://raw.githubusercontent.com/misa-j/social-network/master/screenshots/Screenshot%20from%202020-02-29%2019-26-42.png)
![](https://raw.githubusercontent.com/misa-j/social-network/master/screenshots/Screenshot%20from%202020-02-29%2019-07-23.png)
Tips to create a constants file in Javascript
Tags: javascript, const
Published: 2020-03-07 16:06:53

It shouldn't be difficult to just create a constants file and keep all your value in one place, so the tips how to define the const value is something I want to share about. 

Let's see the example

```javascript
// constants.js

const paymentMethods = [
  {
    key: 'STRIPE',
    value: 1,
    title: 'Stripe Payment', 
  },
  {
    key: 'PAYPAL',
    value: 2,
    title: 'Paypal Payment',    
  },
  {
    key: 'AMAZON_PAYMENT',
    value: 3,
    title: 'Amazon Payment',    
  }
]

const shippingMethods = [
  'SKYNET',
  'GDEX',
  'DHL',
  'UPS',
]
```

Nothing is wrong with the example approach. It works fine and most of the developer will do the same like this. However, it can be a little bit hard to access particular value you want e.g access the amazon payment method object.

I believe you probably will do something like this.
```javascript
paymentMethods.find(method => method.key === 'AMAZON_PAYMENT')
```

Actually, there is a another way...
### Store in key value object instead of array

```javascript
// constants.js

const paymentMethods = {
  STRIPE: {
    key: 'STRIPE',
    value: 1,
    title: 'Stripe Payment', 
  },
  PAYPAL: {
    key: 'PAYPAL',
    value: 2,
    title: 'Paypal Payment',    
  },
  AMAZON_PAYMENT: {
    key: 'AMAZON_PAYMENT',
    value: 3,
    title: 'Amazon Payment',    
  }
}

const shippingMethods = {
  SKYNET: 'SKYNET',
  GDEX: 'GDEX',
  DHL: 'DHL',
  UPS: 'UPS',
}
```

Store it as object is good for direct access particular value you need. Sometimes you just need list few options rather than all. 

```javascript
paymentMethods.AMAZON_PAYMENT

// {
//    key: 'AMAZON_PAYMENT',
//    value: 3,
//    title: 'Amazon Payment',    
// }

```

For loop through the object
```javascript
Object.keys(paymentMethods).map(key => {
  console.log(paymentMethods[key])
})
```

That's it! Feel free to comment if there is better way~ 
#### Thanks you!
WTF? Google Cloud Platform has a Cloud Service that Uses ML to help you find a job. How more meta can you get?
Tags: gcp, career, webdev, cloud
Published: 2020-03-07 15:42:14

---
title: WTF? Google Cloud Platform has a Cloud Service that Uses ML to help you find a job. How more meta can you get?
published: true
description: 
tags: gcp, career, webdev, cloud
---

You know me DEV, I'm _**AWS Obsessed**_. That doesn't mean I never use GCP or Azure. I was refreshing my GCP knowledge today and saw a service I never noticed before called **Cloud Talent Solutions API**


So I'm reading and it looks like it is just for companies to post, update and delete job postings en-masse. That kind of makes sense a Business Application that _could be_ on a Cloud Service Provider.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/d3up3a01bpbgeworb63h.png)

I dig a bit into the documentation and now its tell me it does the opposite.

So now its telling me that its for job seekers, to use Machine Learning to help you search the internet for job.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uly2n62ds300449s435r.png)

So it's for **job posters** and **job seekers**

It also claims to do:
* Spelling correction
* company jargon recognition
* job enrichment
* and more.

This service from as far as I can tell doesn't have easy-to-use console. You have to write code to use this service.

This is a service that has been around since 2016 but I never noticed it before.

### 🤔 The future of job search?

I don't know what it says the fact that Google thought people needed this service. Is it so hard to find a job we need to use ML.

Is the future of job searching you spending 4-8 hours to identify jobs.

When you want to apply for a job will GCP create a Cloud Job Application API which will use ML learning, and you have to hyper tune your machine to outcome other candidates to get a job?

Should I make a video tutorial on how to use this thing? Is there any appetite to see what this thing can do?
Let's talk about Linux
Tags: linux, freedom, discuss
Published: 2020-03-07 15:27:08

---
title: Let's talk about Linux 
published: true
description: a tiny comic about Linux
tags: Linux, freedom
---

I wanted to share this with you guys. What do you love the most about Linux and freedom of the software? 



![](https://dostatic.cybre.space/media_attachments/files/007/487/277/original/e21e81a54959d3a7.png)
The Mapper/Packer Communication Barrier
Tags: programmersstone, reciprocality
Published: 2020-03-07 14:38:44

---
title: The Mapper/Packer Communication Barrier
published: true
description: Programmer's Stone, Thinking about Thinking
tags: #programmersstone, #reciprocality
---


It's worth reiterating some key points here:

   + Mapping and packing are very different strategies
   + Packing is the strongly enforced social norm
   + The world is set up for packers
   + Business language is packer language
   + The results of mapping are called `common sense'
   + Common sense isn't so common
   + Mappers think packers are cynical or lazy
   + Packers think mappers are irrational
   + Packers spend much of their time playing politics
   + The last thing that counts in politics is Reason
   + Mappers are often wrong about packer psychology
   + Packers are usually right about packer psychology
   + Mappers are often wrong about mapper psychology
   + Packers are always wrong about mapper psychology.
   + Mappers do not have a culture to guide them
   + Most mappers teach themselves, like Mowgli
   + Mappers can teach themselves!
   + Mappers can learn from others
   + Mappers often face significant social challenges
   + Mappers currently rarely fulfil their potential
   + Once a situation is understood, it can be addressed. 

Copyright (c) Alan G Carter and Colston Sanger 1997