teleren/devto huggingface dataset:
CSS Grid: auto is greedy until it's with fr
Tags: css, cssgrid
Published: 2020-06-12 18:54:07

*Disclaimer:* this article assumes you have some understanding of CSS Grid. If not, the [CSS Grid course by Wes Bos](https://cssgrid.io/) (free) and the [CSS Grid Guide by CSS-Tricks](https://css-tricks.com/snippets/css/complete-guide-grid/) are both great resources.

***TL; DR:*** when setting a grid template, such as using `grid-template-columns`, `auto` is "greedy" for left over space except when it's used with `fr` units. When `auto` is used with `fr`, the `auto` row(s)/column(s) takes up just enough space to fit its content and any remaining space is given to the row(s)/columns(s) defined with `fr` units.

---

Note: All the examples in this post are available on [Codepen](https://codepen.io/nhuynh1/pen/bGEpZKM)

## What is the `fr` unit?

The `fr` unit represents a fraction of the available space in the grid container. For example setting `grid-template-columns: 1fr 1fr 1fr;` would create three equally sized columns that grow and shrink with the container. Also, `fr` can be greater than 1, like `grid-template-columns: 2fr 1fr;` which sets the first column to be twice as wide as the second column

## What does `auto` mean in CSS grid?

The `auto` keyword means to take up the available space to fit the content. If there's space left over then `auto` is "greedy"; it will take up space to fit the content *plus* the maximum left over space it can take (EXAMPLE 1). The exception is if `auto` is used with `fr`. If `min-width`/`min-height` is set on the grid item then the column would be at the smallest the size set by `min-width`/`min-height` (EXAMPLE 2)

![Example 1: defining three columns using auto](https://dev-to-uploads.s3.amazonaws.com/i/wsg5sdqprrbr3gq46tqc.png)

![Example 2: defining three columns using auto; the first column has one item set with a min-width](https://dev-to-uploads.s3.amazonaws.com/i/rmu99tkna73due8ujodk.png)

## When `auto` and `1fr` have the same effect

If the ***grid item's contents takes up the same amount of space*** then `auto` and `1fr` has the same effect, which is to evenly take up the available space (EXAMPLE 3)

![Example 3: when auto and 1fr have the same effect](https://dev-to-uploads.s3.amazonaws.com/i/1ldg0l38py3om6ob5zga.png)

## Using `auto` and `fr` together

If `auto` and `fr` are used together to define the grid template then `auto` will take up the space it needs for the content. And the remaining space is divided up to the column(s)/row(s) defined by `fr` units. The `auto` defined column(s)/row(s) *won't* get any more of the leftover space. (EXAMPLE 4)

![Example 4: auto is not as greedy when with fr](https://dev-to-uploads.s3.amazonaws.com/i/dhlg8d82du4rpd3hx2bh.png)

**References**

- [Basic Concepts of Grid Layout MDN Web docs](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)
- [Examples on Codepen](https://codepen.io/nhuynh1/pen/bGEpZKM)

*Cover image: by Sharon McCutcheon on Unsplash*
Signature is unknown trust - Arch Linux on VBox
Tags: linux, opensource
Published: 2020-06-12 18:40:02

## Problem

I was trying to configure an Arch Linux virtual machine with Vagrant + Virtual Box and ran the following commands:

```bash
mkdir archlinux
cd archlinux
vagrant init archlinux/archlinux
vagrant up
```

After the vagrant box was downloaded and the virtual machine was configured and up running, I logged in:

```bash
vagrant ssh
```

The first thing I did was to upgrade the system by running:

```bash
sudo pacman -Syyu
```

After all the packages were downloaded, it asked me to import some PGP keys:

```bash
:: Import PGP key 3B94A80E50A477C7, "Jan Alexander Steffens (heftig) <heftig@archlinux.org>"? [Y/n]
:: Import PGP key 3B94A80E50A477C7, "Jan Alexander Steffens (heftig) <heftig@archlinux.org>"? [Y/n]
```

and it gave me the following error with every single package:

```bash
error: archlinux-keyring: signature from "Christian Hesse <eworm@archlinux.org>" is unknown trust
:: File /var/cache/pacman/pkg/archlinux-keyring-20200603-1-any.pkg.tar.zst is corrupted (invalid or corrupted package (PGP signature)).
Do you want to delete it? [Y/n]
```

The latest version of the Arch Linux box was released on June 3rd and this error also occurred with some previous versions released this year, even when I was trying to install any package.

## Solution
There's an answer to a [post](https://forum.manjaro.org/t/invalid-or-corrupted-package-pgp-signature/324/4) in the Manjaro Linux Forum suggesting that the error can be fixed by running the following commands:

```bash
sudo rm -r /etc/pacman.d/gnupg
sudo pacman -Sy gnupg archlinux-keyring manjaro-keyring
sudo pacman-key --init
sudo pacman-key --populate archlinux manjaro 
sudo pacman-key --refresh-keys 
sudo pacman -Sc
```

But running `sudo pacman -Sy gnupg archlinux-keyring manjaro-keyring` will give the same error and the `manjaro-keyring` package is not necessary as well as `manjaro` in `sudo pacman-key --populate archlinux manjaro`, as we're running Arch Linux. So the steps to follow are:

```bash
sudo rm -r /etc/pacman.d/gnupg
sudo pacman-key --init
sudo pacman-key --populate archlinux 
sudo pacman-key --refresh-keys
sudo pacman -Sy gnupg archlinux-keyring 
sudo pacman -Sc
```

After that we can upgrade the system or install a package as usual.
7 important concepts in JavaScript - JavaScript Basics - Lesson 001
Tags: javascript
Published: 2020-06-12 18:36:24

In this lesson, you will learn about seven important concepts in JavaScript programming language.

These concepts are important to understand JavaScript in a clear way and to understand how to write better source codes. 

## Concept 01) Host Facilities
JavaScript has Core Language Resources and Host Facilities.

The Core Language Resources are features like as: arithmetic operators, logic operators, for-loop statements, etc. They are resources of language itself.

The Host Facilities are resources from where your code is being interpreted (Host Environment), like as console.log, console.error, console.info, etc.

## Concept 02) Prototype-Based
JavaScript is prototype-based, rather than class-based like Java.

In class-based languages, the objects use a class as a static template. You cannot change the class in runtime, and the class is not an object ready-to-use itself.

In prototype-based JavaScript, the objects use a prototype as a dynamic template. You can change the prototype in runtime, and the prototype is an object ready-to-use itself.

## Concept 03) Garbage Collected
JavaScript automatically allocates and releases the memory according is needed by your source code.

The memory is allocated when you create an object. And is released when the object is not being used.

## Concept 04) Hoisting
JavaScript allows declared variables (using var) and declared functions to be accessed anytime.

## Concept 05) Multi-Paradigm
JavaScript supports different programming paradigms (programming techniques), combined or not.

## Concept 06) Object-Based
In JavaScript, all things are within an object. Including variables in the global variables.

## Concept 07) General Purpose
Using JavaScript you can make applications for different platforms, not only to the web and not only to the client-side.

For example: using NodeJS you can write code to the server-side, and using React Native you can write code to the Smartphones.

## References
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain﻿

## Important
My native language is Portuguese, you can help me improve the Grammar and Vocabulary commenting to the article or sending me a private message. Thanks!

## Buy me a coffe
https://www.buymeacoffee.com/correatech
🎹🎶 I drew a vintage keyboard using only HTML & CSS 
Tags: codepen, css, html
Published: 2020-06-12 18:30:57

I've been making drawings like this on a semi-regular basis, it's incredibly fun and relaxing. When I came across an image of this old Casio keyboard, I just knew I had to draw it as well.

{% codepen https://codepen.io/fossheim/pen/VweaNYW %}

You can check out all my drawings on [CodePen](https://codepen.io/collection/nwzQJq) or [GitHub](https://github.com/sarahfossheim/art.css).
Explore: Next.js Incremental Builds Support
Tags: nextjs, react, javascript
Published: 2020-06-12 18:12:44

Next.js recently made some excellent improvements to Static Site Generation (SSG) functionality. Now you create static apps and get all the benefits while you can build them faster and re-generate pages on the server.

So, it's like taking all the great things from Server Side Rendering (SSR) and static site generation(SSG) and create something powerful.

{% youtube lR4xVy-jqgo %}

Read more about [Next.js Incremental Builds](https://arunoda.me/blog/what-is-nextjs-issg).
Uri
Published: 2020-06-12 18:10:32

require 'net/http'
require 'uri'

INSTANCE_URL = 'http://try.discourse.org/t/online-learning/108.json'
API_USERNAME = 'YOUR_USERNAME'
API_KEY = 'YOUR_API_KEY'

def send_request

    url = URI.parse(INSTANCE_URL)
    request = Net::HTTP::Put.new(url.path)
    request.set_form_data({'api_username' => API_USERNAME, 'api_key' => API_KEY, 'category_id' => 5})
    http = Net::HTTP.new(url.host, url.port)
    response = http.request(request)

    if response.code == '200'
      puts "Success!"
    else
      puts "Error"
    end
end

send_request
Run Function after useEffect to Manipulate Data?
Tags: react, help, javascript
Published: 2020-06-12 16:45:36

I'm using the OpenWeather REST API which comes in JSON format. I know I have to make my fetch,(Axios in my case) call inside the useEffect because the component needs to render first, then calls the REST endpoint.

I can log out the information, only the temperature comes in Kelvin. In this case, I need to create another function that does the conversion. The only thing I am stuck on is how to transfer the API object info to my temperature conversion function. Any thoughts on how to do this? I assume props are involved.

My Code:
```
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import {KelvinConvert} from './MathConversions';

const LocalWeather = () => {
    const [openWeather, setWeather] = useState({});

    useEffect(() => {
        axiosGet();
    }, []); //  Run once on load

    const axiosGet = () => {
        axios.get(`https://api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=${process.env.REACT_APP_WEATHER_KEY}`)
        .then(data => setWeather(data.data));
    }

    return (
        <ul id="weather-container">
            <KelvinConvert />  // Trying to add converted temperature here
            <li>{openWeather.main && openWeather.main.temp}&deg;F</li>
            <li>{openWeather.weather && openWeather.weather[0].main}</li>
            <li>{openWeather.name}</li>
        </ul>
    );
}

export default LocalWeather;
```
Then there's my method to do the conversion.
```
import React, {useState, useEffect} from 'react';

export const KelvinConvert = props => {
  const [temperature, setTemperature] = useState({props});

  useEffect(() => {
    convertKelvinToFahrenheit();
  }, []);

  const convertKelvinToFahrenheit = props => {
    setTemperature(((props - 273.15) * 9/5) + 32);
  }

  return {temperature};

}
```
Not actually properly passing data to the convertKelvinToFahrenheit method.

Getting the following errors:
```
./src/components/MathConversions.js
  Line 1:8: 'React' is defined but never used
no-unused-vars
  Line 4:10: 'temperature' is assigned a value but never used                                                     
no-unused-vars
Compiled with warnings.
```

Not sure where to go from this point.
LoadError: cannot load such file -- aws-sdk-core/plugins/http_checksum.rb
Tags: ruby, aws
Published: 2020-06-12 18:01:02

AWS Comprehend is in its early stages. The dev world is slowly seeing its potential. It's a struggle getting it set up with your Rails environment. The following resolved my problems. I hope it solves yours, too!

```ruby
# app/models/clients/aws_comprehend.rb
class Clients::AwsComprehend
  def self.call
    Aws::Comprehend::Client.new(
      region: ENV.fetch("AWS_REGION"),
      access_key_id: ENV.fetch("AWS_ACCESS_KEY"),
      secret_access_key: ENV.fetch("AWS_SECRET_ACCESS_KEY")
    )
  end
end
```

```irb
> Clients::AwsComprehend.()
=> NameError (uninitialized constant Aws::Comprehend::Client)
cannot load such file -- aws-sdk-core/plugins/http_checksum.rb
LoadError: cannot load such file -- aws-sdk-core/plugins/http_checksum.rb
```

### Solution

After digging online, this Github issue comment did the trick: https://github.com/aws/aws-sdk-ruby/issues/1872#issuecomment-461634704

```irb
> bundle update aws-sdk-s3
```

```irb
> Clients::AwsComprehend.()
=> KeyError (key not found: "AWS_ACCESS_KEY")
```

Obviously this is returns a different problem. However, updating `aws-sdk-core` to the latest will get you past the load error.
Angular Libraries : Refactor Existing Components into a Shared Module
Tags: angular, typescript
Published: 2020-06-12 17:44:19

When we read Angular's documentation on refactoring components into libraries, we find that it's short on theory and [long on warnings](https://angular.io/guide/creating-libraries#refactoring-parts-of-an-app-into-a-library). 

The reason is that creating our own custom modules is more simple than refactoring existing code. 

Even though we know better, our code is laced with outside dependencies that were caused by [close coupling concerns.](https://en.m.wikipedia.org/wiki/Coupling_)

This problem is not unique to Angular, Typescript or JavaScript. It's a problem in every framework and every language.  

If we have not started with reusable components and then attempt to refactor into that architecture, we are in for a major effort in getting it done. 

Its not hard to do, it's just time consuming. We will let the compiler guide us. 

>
Don't forget to bring the tests along!

Consider this:

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

In the folder 
```
  project/angular-library/src/lib/components
``` 
We copied existing angular components (to be reused) and pasted them here.

Then we compiled from the "projects" folder with
```
ng build angularLibrary 
```
The name angularLibrary was in our angular.json already.

**Bad news**

The compile failed miserably. 

🍋🍋🍋🍋🍋 

As expected we had major dependency issues. 

**The Real Work Starts**

- The first thing we found was that there were no necessary NPM packages in the library solution. 

- Because the app.module of the real app is not in our library, none of the dependencies are in full view. It's better to solve dependency issues based on compiler errors, than to just copy the app.module file over.

- We installed only necessary node packages and went through the typical painful NPM install process for each of them. We found that even imported packages don't fully list their own dependencies and sometimes even npm audit fix wouldn't work etc.

- We kept asking, which package.json does the library use as there are two. The outer package.json is for the build and the inner one is for the consumer who can run a npm install.

- The inner package.json is an extension of the outer one. Don't add packages to the inner one until we get the build running. We'll discuss the inner package.json file in a npm publishing article.

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

Does this folder structure look more familiar?

**Summary** 

So far the Angular documentation was correct but poorly introduced. Their example showed how to create a library which doesn't experience dependency issues at first compile.

They didn't tell us how to add existing components in. 
 
Next: Part 2 of the "Why is this so difficult to do series"

JWP 2020 Angular Libraries "Adding new components via copy and paste"
Select any open tab in Sublime, VS Code, and Eclipse with ease
Tags: sublime, vscode, eclipse, tab
Published: 2020-06-12 17:43:44

---
title:  Select any open tab in Sublime, VS Code, and Eclipse with ease
published : true
description : 
tags: #sublime #vscode #eclipse #tab
---

When working in text editors and IDEs, it's natural to have several tabs open. To work efficiently with the tabs, it is good to be acquainted with the commands we can use to quickly move between the tabs.

I use Eclipse extensively as I do development in Java and IBM ESQL. I have been using Sublime for quite some time, and I've recently started using VS Code. The first thing I did was to opt for Sublime key-bindings in VS Code. So the actual key-bindings of the commands I mention below may be different.

Now coming to the topic of the post, first and basic way to work with tabs is to be able to cycle between the tabs.

In Eclipse, I can cycle between the open tabs using `cntrl-F6`. In Sublime (and VS Code), I can use `ctrl-tab` and `ctrl-shift-tab`.

The next level up would be to get a list of all the open tabs and select the one I want. In Eclipse, I can press `ctrl-e` to get a list of open tabs and then I can type a few characters to filter the list, and select the tab I want.

Today, I discovered that I can use the same key combination `ctrl-e` in Sublime and it works exactly as in Eclipse. 

So, I suddenly began missing this in Sublime :). I searched and found this helpful [Stack Overflow link](https://stackoverflow.com/questions/38561302/is-there-a-shortcut-for-sublime-text-to-find-an-open-file-eclipse-ctrl-e). I implemented the suggestion and now I can use `ctrl-e` in Sublime as well and do the same thing.

Only thing is that `ctrl-e` in Sublime actually does something called `slurp_find_string` which basically selects the word under cursor as the string to search for in a find command. I won't be able to use it now unless I map it to a new key. I resist using new key combinations.  I never really use this command in that much in Sublime. So, I'll leave it for now. I remember that I used to like a similar feature in Vim, where I could press '*' and the cursor moves to next occurrence of the word under cursor.

Sometimes using a new tool teaches us something that makes us look at familiar tools in a new light. So, although I know that all editors more or less do the same thing, I still play around with new ones to learn new things.
Unexpected Kindness
Tags: codenewbie, firstyearincode
Published: 2020-06-12 17:41:42

Ever been on the receiving end of unexpected kindness? Then you know it's worth talking about!

I'm a recent career changer (former educator turned software engineer) and am job hunting. During this complicated time in our world.

Which you'd think would be Really Terrible Timing.

You'd mostly be right. But then the unexpected happened.

##The Unexpected

It's typical these days to get on the phone with a technical recruiter and talk shop. What's the role? Salary expectations? Are you a real human?

That was my expectation getting on a call with Steve Levy.

Buckle up, folks, that's not what happened.

He declared up front that he didn't take this call to talk about jobs at that company - but rather to help me successfully present myself as a strong person (and candidate) moving forward.

Not sure if that's sunk in for you yet. 

###He took the call purely to help me.

That alone is a jaw-dropper, and I'm not even done yet.

For 45 minutes, I was taught (*taught*, folks, taught!):

**1) How to turn my resume into a love letter to any employer.**

**2) How to use my decades of prior work experience as an asset.**

**3) How to get connected in all the right places.** 

It's also worth mentioning, Steve was *only* able to teach like this because he took the time to study my resume and LinkedIn profile ahead of time.

##Why This is A Big Deal

I am here to tell you, this is not usual. This is not the norm. This is beyond anything I could have expected, dreamed of, imagined.

A person who doesn't owe me a thing, took extra time and effort to help me.

If you ask him, Steve would tell you that this is completely normal - it's just what he does.

While that may be true, for someone in my shoes, it felt extraordinary. That kindness won't be forgotten.

If you know me, even a little bit, you know that when folks give to me, I like to reciprocate. And if I can't, I pay it forward.

##And Now

I'm paying it forward the best way I know how. 

Sharing what this experience meant to me, hoping it can you teach you something new, and most importantly, showing my gratitude.

Steve Levy, you keep doing what you're doing, and you're going to change the world. Heck, you already have.

To other folks out there following suit, the world is awfully lucky you're here.
Javascript Hoisting | Sketch-notes PART2
Tags: javascript, sketchnotes, webdev, tutorial
Published: 2020-06-12 17:18:30

Hey Folks, 🙌🏾

In this week's notes, we look into **Javascript hoisting**.

Hoisting is the phenomenon wherein a variable declared with a **var** keyword appears to be *hoisted* to the top of that scope. Here are my **sketchnotes** on the same:
{% twitter 1269968569539805185 %}

If you need a more detailed explanation of the concept, I have a video on my YouTube channel explaining the same:
{% youtube ncq_PE3T0WI %}

Hope you liked it, See you in the next one.👋🏽 
Cheers!
FlaskCon - The Last Call
Tags: flask, flaskcon
Published: 2020-06-12 17:09:21

---
title: FlaskCon - The Last Call
published: true
description: FlaskCon's extended deadline closes this weekend
tags: flask, flaskcon
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/5vjbac9g96ngz9f74s1m.png
---

[FlaskCon](https://flaskcon.com)'s deadline was recently pushed back.

{% twitter 1269950178359865345 %}

It's an awesome opportunity to submit something, even for later edits.

## What is FlaskCon?

FlaskCon is ... a conference about Flask, yes 100% Flask dedicated. Talks will be reviewed by awesome Flask people

## What can i talk about?

What you built using Flask, Flask extensions dev and usage, how your company uses Flask and of course about Flask core.

## What if i have questions?

Mail flaskcon@gmail.com and for talk proposals refinement:

{% twitter 1270387299046416384 %}
If you could add one new instruction to mainstream hardware what would it be?
Tags: discuss
Published: 2020-06-12 17:01:05

Similar to Agner Fog's idea of a new instruction set architecture but much less limited in scope https://www.agner.org/optimize/blog/read.php?i=421 if you could add one entirely new instruction to mainstream hardware what would add? I'll write some of my own thoughts below as a comment but I'm interested in what the rest of the developer community would want. Are there things you just can't do without adding a dedicated instruction or things that are just too slow? Or perhaps it is more of a convenience thing or some other factor I have not considered?