teleren/devto huggingface dataset:
A width-responsive perfect square in pure CSS
Tags: css, tutorial
Published: 2019-06-23 15:20:01

*Cover photo by Daniel McCullough via Unsplash.*

{% codepen https://codepen.io/tchaflich/pen/LKyxqY %}

## Points of interest

### Resizable block-level divs

The [`resize`](https://developer.mozilla.org/en-US/docs/Web/CSS/resize) property - I wasn't aware you could actually control this past textareas, but stumbled upon it when looking for a way to make a user-resizable div without using JavaScript.

### How the square is made

```scss
#square {
  width: 100%;
  padding-bottom: 100%;
  position: relative;
  background-color: #2980b9;
}
```

Breaking this down:

* `width: 100%` is to make sure it's defined as having the same width as its outer, resizable container.
* `padding-bottom: 100%` is based on a trick in the CSS spec. When specifying a margin or padding by percentage, it's always [based on the width](https://drafts.csswg.org/css-box-3/#propdef-margin), even if it's a -top or -bottom property. In this way we get a property that's equal to the width.
* `position: relative` is so that I can put stuff inside it without disrupting the padding; any additional content would add content to the box, which would make it a rectangle
* `background-color` is there so you can see where it is ¯\\\_(ツ)_/¯

### How the circle is made

Once you have *any* square, making a circle is easy enough. The only trick you really need is `border-radius: 50%`, but let's break down the responsive circle a bit more.

```scss
#circle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  border-width: 4px;
  border-color: #27ae60;
  border-style: solid;
  border-radius: 50%;
}
```

* `position: absolute` makes sure that this circle stays within the `position: relative` square while not adding any in-flow content to it.
* `top: 0; bottom: 0; width: 100%; height: 100%;` constrains the circle to the exact dimensions of the responsive square. At this point, what we have is a position: absolute container that is an inner copy of our square.
* The `border-*` properties are used to build the outline of the circle. We have a 4px green solid border, and it has a radius of half the edge of the square.

### Quick geometry recap

Here's an illustration of why `50%` is the magic number to make a circle from a square:

![A very pixelated drawing showing a circle inside a square with some radials. It's very geometric.](https://thepracticaldev.s3.amazonaws.com/i/tpgyjp4bqhxo5uea8o50.png)

The *radius* of the circle is equal to *half* the side of the square.
Show your own /uses page
Tags: discuss, showdev, productivity, webdev
Published: 2019-06-23 15:09:00

Do you ever post a code snippet on Twitter or other social media and immediately get barraged by inquiries about that cool font or editor theme you use? I do. Have you grown especially fond of certain tool(s) and would love to praise their glory to the whole world? I have.

Inspired by @wesbos and @aspittel, I published my own `/uses` page to explain the tools I use to survive my daily web developer life. Check out my page [**here**](https://nikoheikkila.fi/uses/).

If this is not yet a movement, let's make it one! Post your own hot `/uses` page in the comments.
Front End: Is Anything Getting Better?
Tags: javascript, frontend, healthydebate, spas
Published: 2019-06-23 15:06:34

---
title: Front End: Is Anything Getting Better?
published: true
description: 
tags: 
  - JavaScript
  - frontend
  - healthydebate
  - spas
---

It's been around nine years since Angular JS (the first one) was unleashed on the world. Nine years of single page apps (SPAs) in the browser, and constant innovation in the frameworks used to build them.

Dev.to has a great community of active, intelligent and helpful frontend developers who use a variety of frameworks to build SPAs. Perhaps some of them have been working in this area since the first Angular JS came out.

My question to anyone who's interested: is anything getting better?

Is it getting better for the users of our SPAs. What has improved for them in the last nine years - think of specific things. If you don't think it has improved, tell me -  why not?

Is it getting better for the developers of SPAs? Is it easier today to build, say, a todo app than it was nine years ago?
Video or Blog tutorials: What do you prefer?
Tags: discuss, webdev, showdev
Published: 2019-06-23 15:00:02

_Hey there!_ 😇

**It affects all of us!** We are not superhumans 👽 and therefore often have to fall back on our friend **Google**. We are simply not omniscient.

And we watch many tutorials on the internet every day. And that's exactly why I want to know which medium you prefer: Video or Blog Tutorial?

# My Opinion 🙏
I used to be a huge fan of videos. However, that has changed over time. I now see the advantage in statistics and graphics of a blog entry. And that you can choose your own speed.

**What about you?** 😎
How to use React Hook useState in React Native?
Tags: javascript, react, reactnative
Published: 2019-06-22 14:29:29

---
title: How to use React Hook useState in React Native?
published: true
description:
tags: javascript, react, react-native, js
---
Hello world,
we will discuss on how to use the useState hook in Reactjs with examples.

so let's start with an example where we are going to use old style react state management.

```javascript
import React from 'react';
import { Text, View, TextInput } from 'react-native';

export default class App extends React.Component {
  state = {
    name: '',
  }
  render() {
    return (
      <View>
        <TextInput 
          onChangeText={text => this.setState({name: text})}
          value={this.state.name}
          placeholder="enter here"
        />
      </View>
    );
  }
}
```

so here we are using state with 

```javascript
this.state.name
```

and updating it with 

```javascript
this.setState({name: text})
```

let me explain how useState works here before going further. React 's useState gives us two objects. 

```javascript
const [state, action] = useState("")
```

first is the actual state and the second is the action to update the current state and when we initialize it we provide the initial state in it, for example, here we are giving a blank string state.

```javascript
useState('');
```

now let's do the same example with React hooks

```javascript
import React, { useState } from 'react';
import { Text, View, TextInput } from 'react-native';

const App = (props) => {
  const [name, setName] = useState("")

    return (
      <View style={styles.container}>
        <TextInput 
          onChangeText={text => setName(text)}
          value={name}
          placeholder="enter here"
        />
      </View>
    );
}

export default App;
```

we can access the state without `this` keyword because in the last example we are using a functional component so the variables are accessible within the function without `this` keyword.

```javascript
// without React hooks 
value={this.state.name}

// with React hooks
value={name}
```

and to update the state we can just call the second argument by passing the new state.

```javascript
// without React hooks 
 onChangeText={text => this.setState({name: text})}

// with React hooks
onChangeText={text => setName(text)}
```

this is how we can use useState in Reactjs and React Native. I hope you liked it. if something I missed or you have questions related to it you can ask in comments.
How to save values in Chrome local storage
Tags: javascript, chromeextension, webdev, tutorial
Published: 2019-06-23 14:29:15

---
title: How to save values in Chrome local storage
published: true
description: How to save a variable locally in chrome extension.
tags: #javascript, ##chromeextension, #webdev, #tutorial
---

How to save a variable locally inside the Chrome browser's local storage? 
And this is one of the combinations that I used to search on google to get the answer. 

And guess what? Being a noob in the field of chrome extension development, I faced a hard time in understanding the concept explained in the chrome extension development documentation. Finally, I landed up in a youtube channel, that(https://www.youtube.com/watch?v=DHP2h_7mOfA) explained the process. This guy is kind of the person who explained the concept as you explain it to a 5-year-old and he is good at it. Thanks to him.

So here I am trying to explain the same thing in a simple way, so that if anyone faces the problem in the future. Just in case.


First, you need to set the value of the variable that you wish to save in order to retrieve it.

So we use the following method to save.

```

chrome.storage.sync.set({'variable_name': 'variable_value'}, function() {
  console.log("you saved me!!");
});

```

here, the 'set' method sets the value of the variable called 'variable_name' in the local storage.


In order to retrieve it, you need to use the 'get' method instead of 'set'.

```

chrome.storage.sync.get(['variable_name'], function(result) {
      if(result.variable_name == undefined) {
        console.log("I am retrieved!!");
      }
}

```

The following will retrieve the value of 'variable_name' as an object. So in order to access it, you need to use the object name followed by the variable name. (i.e)

``` 
result.variable_name
```
 and the reason why we are checking for the undefined is kind of a fail-safe. This is not covered in the documentation.

The scenario for this fail-safe would be, consider your extension is developed with the use of local storage of a variable called

```
'local_variable'
```
but when the user tries to open the extension for the first time in a browser it will throw an 
``` 
undefined - error 
```
this is because the variable is not yet defined in the user's local storage.

So this fail-safe will come in handy at that time. You can add an extra condition as this so that it won't break your code and your user's heart &#128540;.
How are technical decisions being made in your company?
Tags: discuss, career, workflow
Published: 2019-06-23 14:21:17

---
title: How are technical decisions being made in your company?
published: true
description: Just curious...
tags: #discuss, #career, #workflow
---

There are technical decisions that sometimes dictate how the company is going to move forward a few years into the future, of course for the better. We've probably heard a few big companies did that (examples: [1](https://hackernoon.com/how-netflix-and-paypal-did-product-transformation-using-node-js-22074e13caad), [2](https://about.gitlab.com/2016/10/20/why-we-chose-vue/), [3](https://softwareengineeringdaily.com/2018/09/24/show-summary-react-native-at-airbnb/)). I think you all get the idea.

When it comes to these kind of decisions, how is it being made in your company? A few questions:
- Who came up with the decision? CTO/tech lead/devs?
- Who did the research on the decision? And how long did the research take?
- What triggered the decision? Was it set on a technical roadmap, or simply the product you're developing demanded it at that time?
- How was it being executed? Was it done gradually, or in one go (production stopped, all devs refactored the code until it is finished)?
- How did the devs perceive the decision? Did they follow because they agreed, or was it something that the devs had to follow regardless?

These questions might be a lot to answer, but I'm trying to understand the processes in other companies, so that maybe I can learn a thing or two and apply it in the company I currently work in.

Thank you in advance, for your insights. Much appreciated.
Unidirectional Data Flow
Tags: flux, react, explainlikeimfive, beginners
Published: 2019-06-23 14:02:45


# Unidirectional Data Flow  

React components communicate via props and have child-­parent relationships. Parent components can safely pass immutable data down to children. While children can push data up to parents via handlers (callbacks). A perfect [flux-harmony](https://facebook.github.io/flux/docs/overview.html)
[Flux Official Documentation](https://github.com/facebook/flux/tree/master/examples/flux-concepts)

### Background
>If a component contains another component, it’s said to be the parent. A component within another component is said to be a child.
```jsx
<Parent>
    <Child />
    <Child />
</Parent>
```
Components that exist at the same level, such as two `<Child />` up above, don’t share any sort of direct relationship, even though they might be right next to each other. They only “care” about parent `<Parent />` and their own nested children.

### Here's how uni-directional data-flow is established:
- Props (downward movement)
Simplest form of passing data into `children` is via `props`

```jsx
render() {
...
  return <Link to={'https://github.com/fosteman/'}>MyGitHub</Link>;
}
```

`<Link>` gets his location descriptor (url) via property `to`
- Handlers (upward movement)
Function objects can be passed as arguments to other functions, grace to > <em>everything</em> in JS is an object. 
```jsx
const IncrementField = (props) => (
  <div>
    {props.currentCount}
    <input onChange={props.onChange} />
  </div>
);

class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = { counter: 0 };
    // because components created with classes don’t auto bind component methods, you need to bind them to `this` in the constructor.
    this.handleIncrement = this.handleIncrement.bind(this)
  }
  handleIncrement(amount = 1) {
    // note that immutable state isn't directly modified, instead .setState is used
    this.setState({ counter: this.state.counter + amount });
  }
  render() {
    return <IncrementField currentCount={this.state.counter} onChange={this.handleIncrement} />
  }
}
```

Method `handleIncrement` defined on `Parent` component is handed `onClick={this.handleIncrement}` via properties to the child component `<IncrementField />`

This way the child component can push data up without having a least idea of how parent will handle it. 

### Redux

It is a logical continuation of React `state`. Should one require to centralize his data in the application, Flux comes in handy. 

It is a pattern for managing data flow in your application. The most important concept is that data flows in one direction. 

[Read my article](https://dev.to/fosteman/redux) about Redux!
Coding languages 
Tags: programming, software, code
Published: 2019-06-23 13:38:54

---
title: Coding languages 
published: true
description: programming, tutorials
tags: programming, software, code
---
Do you want to learn programming? You may feel overwhelmed by all the information and languages out there.

Yes, There are many coding languages, Python, Ruby, Java and more. See the nice infographic below:

![](https://thepracticaldev.s3.amazonaws.com/i/a0gv3lvs0uygfdq93kuh.png)
*Source: Artilogist*

The language you need to learn, depends on the type of software you want to make. 

**Real world use case:** For software running on electronics, you'd often go with C programming. But, for web apps, you'll be using JavaScript.

<img src="https://thumbs.gfycat.com/AngelicConcreteHypsilophodon.webp">

Software developers often know many different languages. Which languages you need depends on what you make. 

Where to start?

**Learn Ruby**
* https://www.ruby-lang.org/en/
* https://www.ruby-lang.co/

**Learn JavaScript**
* https://javascript.info/
* https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics

**Learn C/C++**
* http://www.cplusplus.com/doc/tutorial/
* https://www.w3schools.com/cpp/default.asp
* https://www.javatpoint.com/cpp-tutorial

**Learn Python**
* https://pythonbasics.org
* https://www.tutorialspoint.com/python/
* https://pythonprogramminglanguage.com

**Learn Java**
* https://www.w3schools.com/java/
* https://www.javatpoint.com/java-tutorial


Start code!

<img src="https://media.giphy.com/media/5Zesu5VPNGJlm/giphy.gif">
SQL on CSV, LTSV, JSON and TBLN.
Tags: go, sql
Published: 2019-06-23 13:03:37

---
title: SQL on CSV, LTSV, JSON and TBLN.
published: true
description: golang, sql
tags: golang, sql
---
You can run SQL queries on CSV, LTSV, JSON and TBLN formats. To do that, you can use a golang program called <a href="https://github.com/noborus/trdsql">trdsql</a>

These files are just files, but using the tool the query language SQL becomes available. SQL is often used to query databases.

For example: 

    $ trdsql "SELECT * FROM test.csv"

In this case a csv file is a single database table.  It also supports ASCII outputting:

    $ trdsql -oat "SELECT * FROM test.csv"

    +----+--------+
    | C1 |   C2   |
    +----+--------+
    |  1 | Orange |
    |  2 | Melon  |
    |  3 | Apple  |
    +----+--------+

Neat right?

See the gif:

![](https://raw.githubusercontent.com/noborus/trdsql/master/doc/trdsql.gif)

Learn golang:

* https://golangr.com
* https://golang.org/doc/install
Python Utility Belt: Replacing differents chars in a String.
Tags: python, productivity, beginners
Published: 2019-06-23 13:00:43

Hi Devs,
![oi](https://media.giphy.com/media/ASd0Ukj0y3qMM/giphy.gif)
This is my first post on dev.to, and i decided talk to about Python, my main programming language, and create a series named 'Python Utility Belt' which basically will be composed of small strategies to solve common problems in a development day.
![oi](https://media.giphy.com/media/7IfFDmSbfrztS/giphy.gif)
In this post we will talk to about chars replacement.

So, lets imagine a simple example... you have the following string:

```python
music = "Stairway_to_heaven-Led_Zeppelin.mp3"
```

And you need to replace "_" with spaces, in Python it is easy, you just need run:

```python
music.replace('_',' ')
```

and you will receive:

```
Stairway to heaven-Led Zeppelin.mp3
```

Its so easy, isn't it?! But, what if you desire to replace `_`,`-` and `.` with spaces ???
A python beginner can imagine a code like this:

```python
music.replace('_',' ').replace('-',' ').replace('.',' ')

```
![oi](https://media.giphy.com/media/6RCWzHNG5mP0k/giphy.gif)
yeah... And it is a common answer in stackoverflow. Does the code above works? yep, it works, but there is another way to solve the same problem: using re lib. You just need to import `re` in you code and use the `sub` function:

```python
import re

music = "Stairway_to_heaven-Led_Zeppelin.mp3"

print(re.sub('_|-|\.', ' ', music))
```

In this example, we called the sub function that receives three parameters: ```python
re.sub(char that will be replaced,new char,string)
```

to replace multiple chars using the first parameter we used `regex`, but we will not delve into it, no. Basically each char that need to be replaced is separated by `|`, so if you need to replace just `_` and `-` you can run `re.sub('_|-', ' ', music)`. Note that `.` is accompanied by `\`, it is because in Regex, `.` has a another functionality, so we need to use `\` to specify the use of a dot.

I will finalize this post here.
Please, comment if you found any error on post (English, programming, syntax).
This helps me to improve.

Follow me for more, bye.
![falow](https://media.giphy.com/media/1AjCJU2gLaDtelBisz/giphy.gif)
Writing a Terminal emulator (in Python)
Tags: python, linux
Published: 2019-06-23 12:48:36

---
title: Writing a Terminal emulator (in Python)
published: true
description: terminal, linux
tags: python, linux
---
Writing a terminal emulator is quite challenging. Modern terminal emulators have many features, like tabs or multiple windows, zooming and others.

But, there are much features that could be added to a terminal emulator. Like image viewing functionality, playing videos and much more.

For fun, I created my own terminal emulator. It is very basic in the sense it only gets and inputs command output.

![](https://thepracticaldev.s3.amazonaws.com/i/0xve4smt7tvi76m32had.png)

At this point it fails to run some editors like nano, emacs. Which is because it only uses command output. To make that work I think it needs stdout/stdin instead.

Because using a QTextBrowser, it supports adding html into the terminal.

![](https://thepracticaldev.s3.amazonaws.com/i/i0u70sfr3pe9huf7blv8.png)

Its very experimental, but just for fun :)

Resources:
* https://github.com/petercour/terminal-emulator-example-pyqt
* https://pythonbasics.org/pyqt/
* https://pythonprogramminglanguage.com/pyqt/
Giving away some promo codes for my app
Tags: macos, utility, tool, showdev
Published: 2019-06-23 12:08:58

---
title: Giving away some promo codes for my app
published: true
description: Giveaway
tags: #macos #utility #tool #showdev
---

![](https://thepracticaldev.s3.amazonaws.com/i/ku1b7gp9aoajlrtaq7r9.png)

If you're on macOS and you need to record some small product demos or similar, Window Recorder might be a tool for you.

I built it because I wanted a recording tool, that provided the same snap-to-window feature of the built in screenshot tool. (Example: https://window-recorder.rhardih.io)

Anyway, it's got a few Premium features through an IAP, and I've got some promo codes I'd like to hand out to anyone interested. Get one here:


https://redeemco.com/p/fke427jert

And redeem it on the app store:

https://itunes.apple.com/app/apple-store/id1462766408?pt=120102514&ct=devto&mt=8

Cheers!
Introduction to Gridsome
Tags: frontend, coding, vue
Published: 2019-06-23 11:53:48

---
title: Introduction to Gridsome
published: true
description: Gridsome is a Vue.js-powered, modern site generator for building the fastest possible websites for any Headless CMS, APIs or Markdown-files. Gridsome makes it easy and fun for developers to create fast, beautiful websites without needing to become a performance expert.
tags: ['frontend', 'coding', 'vue'] 
---

> Gridsome is a Vue.js-powered, modern site generator for building the fastest possible websites for any Headless CMS, APIs or Markdown-files. Gridsome makes it easy and fun for developers to create fast, beautiful websites without needing to become a performance expert.

![gridsome](https://i.imgur.com/dExQAI0.png)

### Why Gridsome?

- **Local development with hot-reloading** - See code changes in real-time.
- **Data source plugins** - Use it for any popular Headless CMSs, APIs or Markdown-files.
- **File-based page routing** - Quickly create and manage routes with files.
- **Centralized data managment** - Pull data into a local, unified GraphQL data layer.
- **Vue.js for frontend** - A lightweight and approachable front-end framework.
- **Auto-optimized code** - Get code-splitting and asset optimization out-of-the-box.
- **Static files generation** - Deploy securely to any CDN or static web host.

![vuejs](https://i.imgur.com/ee4RxwN.png)

[Learn more about how Gridsome works](https://gridsome.org/docs/how-it-works)

### 1. Install Gridsome CLI tool

Using yarn:
`yarn global add @gridsome/cli`

Using npm:
`npm install --global @gridsome/cli`

### 2. Create a Gridsome project

1. `gridsome create my-gridsome-site` to create a new project </li>
2. `cd my-gridsome-site` to open folder
3. `gridsome develop` to start local dev server at `http://localhost:8080`
4. Happy coding 🎉🙌

### 3. Next steps

1. Create `.vue` components in the `/pages` directory to create page routes.
2. Use `gridsome build` to generate static files in a `/dist` folder

![code](https://i.imgur.com/6wM4lNE.png)

- [How it works](https://gridsome.org/docs/how-it-works)
- [How Pages work](https://gridsome.org/docs/pages)
- [How to deploy](https://gridsome.org/docs/deployment)
How to use Classic Editor on WordPress 5 without any plugins
Tags: internet, gutenberg, wordpress
Published: 2019-06-26 04:40:12

---
title: How to use Classic Editor on WordPress 5 without any plugins
published: true
tags: Internet, Gutenberg, WordPress
canonical_url: https://kevinhq.com/how-to-use-classic-editor-on-wordpress-5-without-any-plugins/
---

Here are the guides on how to use Classic Editor on WordPress 5 without any plugins. This means you can use it without disabling the Gutenberg. Precaution: this guide assumes you don’t use page builder by premium theme on your Classic Editor like Avada. If you do use that, then you probably no choice but… 

[Read More »How to use Classic Editor on WordPress 5 without any plugins](https://kevinhq.com/how-to-use-classic-editor-on-wordpress-5-without-any-plugins/)