teleren/devto huggingface dataset:
Flexbox Cheat Sheets
Tags: css
Published: 2019-08-15 13:53:16

In [our first CSS episode](https://ladybug.dev/episode/css-part-1/), we discussed the foundations. In this [special bonus episode](https://ladybug.dev/episode/css-part-2/), we continued the conversation by covering some more in-depth areas of CSS, like layouts with Grid and Flexbox, animations, media queries, naming conventions, pre-processors, and frameworks.

Here are some Flexbox cheat sheets to go along with the episode! 🐞

Shoutout to Emma for making these!

{% user emmawedekind %}

# Align Items

![align-items: 4 different graphics showing the values align-items can take. flex-start has all the items at the top of the container. flex-end has all the items at the bottom of the container. center has all the items at the vertically aligned in the container. stretch has all the items stretched vertically in the container.](https://thepracticaldev.s3.amazonaws.com/i/zeq4pr7vtjuz4vqliutn.png)

# Flex Direction and Flex Wrap

![flex-direction: showing the row value where all items are going in a horizontal direction, row-reverse where it's also in a horizontal direction but in the opposite direction. showing the column value where all items are going in a vertical direction, column-reverse where it's also in a vertical direction but in the opposite direction.
flex-wrap: 3 different graphics showing the 3 potential values. nowrap where the children all stay on the same line, adapting to size of the container. wrap where the children keep their width and float onto the next line. and wrap-reverse where they wrap but going in the opposite direction.](https://thepracticaldev.s3.amazonaws.com/i/d5k4y3tviwfr1ryrluui.png)

# Flex Items

![Flexbox item properties order: the order in which your flex items are laid out within your flex container. Default order: 0, where all items are in the order they are in the html. Explicit order value allows you to change the order of the items in css. Flex-grow: gives your flex items the ability to grow within your container. Default flex-grow: 1, all items are the same size. Explicit flex-grow value: certain items fill the surrounding space. align-self: lets your flex items override align-items. align-self: flex-end; puts the item at the end of the flex container.](https://thepracticaldev.s3.amazonaws.com/i/8b3cw7h1wa7ucxfv1qi5.png)

# Justify Content

![justify-content: 4 different graphics showing the values justify-content can take. flex-start has all the items at the left side of the container. flex-end has all the items at the right side of the container. center has all the items at the horizontally aligned in the container. space-between has all the items evenly spaced. space-around has all the items evenly spaced, with margins on the sides.](https://thepracticaldev.s3.amazonaws.com/i/qyr8lztu2lxdcm5ali2i.png)

You can also check out our CSS cheat sheets here:

{% link https://dev.to/ladybug/css-cheat-sheets-3ee0 %}

You can listen to the full episode wherever you listen to podcasts!

{% spotify spotify:episode:6tLgCcSMRoomOpDju5jxDE %}
A VS Code Snippet for Generating Gatsby Components with Static Query
Tags: vscode, gatsby, react, productivity
Published: 2019-08-15 13:37:42

Having to re-write the same boilerplate code for a React component with `StaticQuery` from Gatsby can get tiresome. Which is why I recently made a small snippet for VS Code in order to automate the process.

Go to `File > Preferences > User Snippets` (Or  Code > Preferences > User Snippets` on MacOS), choose JavaScript, and paste the following snippet inside of the curly braces:

```JSON
"Gatsby Static Query": {
		"prefix": "gatstaq",
		"body": [
			"import React from 'react'",
			"import { StaticQuery, graphql } from 'gatsby'\n",
			"const ${1/(.*)/${1:/capitalize}/} = ({ data }) => (\n\t$0\n)\n",
			"const ${1:page}Query = graphql`\n\t\n`\n",
			"export default () => (\n\t<StaticQuery query={${1:page}Query} render={data => <${1/(.*)/${1:/capitalize}/} data={data} />} />\n)\n"
		]
	}
```

_Originally posted on my blog: [Gatsby StaticQuery Snippet for VS Code](https://imedadel.me/gatsby-staticquery-vs-code-snippet)_
How to use commitlint with yorkie & vue-cli@3.x
Tags: codequality, vue, devops, javascript
Published: 2019-08-15 13:31:04


__TLDR: `"commit-msg": "commitlint -e -V"` instead of `"commitlint -E HUSKY_GIT_PARAMS"`__

During the last year, I became extremely fond of `[commitlint](https://commitlint.js.org)` and the related ecosystem. The ability to enforce a specific commit message format is the cornerstone of my automated releases. Yes, in a perfect world, there would be no need for linters etc. But mistakes happen, especially during crunchtime. A modern front-end development workflow should automate as much chores as possible to relieve the developer form those micro-tasks.

When you followed the [commitlint guide](https://commitlint.js.org/#/guides-local-setup), your `package.json` implements the `git-hook` with this lines:

```JSON
"husky": {
  "hooks": {
    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
  }
}
```

Let's break it down. As soon as a you create a new commit message, the `commit-msg git-hook` calls the `commitlint` executable. The `-E flag` takes husky's own environment variable `HUSKY_GIT_PARAMS` and passes it to the executable. `HUSKY_GIT_PARAMS` contains the commit message you just created.

A few weeks ago, I used `vue-cli` for a small `PWA`. While browsing through the setup guide, I stumbled across this line:

>@vue/cli-service also installs yorkie, (....) yorkie is a fork of husky and __is not compatible with the latter__.

I wanted to keep my workflow, so I needed to find a way to pass the latest git commit message to the `commitlint` executable without the proprietary `HUSKY_GIT_PARAMS`.

Luckily, [commitlint cli](https://commitlint.js.org/#/reference-examples) has another flag, which is exactly what I needed:
> --edit, -e             read last commit message from the specified file or fallbacks to ./.git/COMMIT_EDITMSG

So, to use `yorkie` with `commitlint`, I replaced the `"husky"`-property with the following `"gitHooks"`-property at the `package.json`:

```JSON
"gitHooks": {
  "commit-msg": "commitlint -e -V ",
}
```

---

Follow me on [Twitter: @martinkr](http://twitter.com/_martinkr) and consider to [buy me a coffee](https://www.buymeacoffee.com/martinkr)
How to backup AWS Security Groups settings
Tags: aws, securitygroups, cli
Published: 2019-08-15 13:21:48

If, like me, you have to manage several Security Groups on your AWS account, you can make use of the `describe-security-groups` AWS CLI command for download them as a .json file for backup.


## TL;DR
You can jump to the [official AWS documentation] for the `describe-security-groups` AWS CLI command on this link: https://docs.aws.amazon.com/cli/latest/reference/ec2/describe-security-groups.html


## Prerequisites

You will need to have the AWS CLI command line tool [installed] and [configured] on your system.

You can find the necessary information on this two links:
- https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-install.html 
- https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-configure.html

## How to use

1. Open a terminal window on a local folder and run this command:

    ```bash
    aws ec2 describe-security-groups --group-ids sg-123abcd4
 
    ```
    > You will need the ID of the Security Group you want the backup (in this example 'sg-123abcd4').

2. Done! You can now backup the newly created .json file with GIT or in any other way you want.


## About the .json file

As a quick reference here is how the .json file looks:

```json
{
    "SecurityGroups": [
        {
            "IpPermissionsEgress": [],
            "Description": "My security group",
            "IpPermissions": [
                {
                    "PrefixListIds": [],
                    "FromPort": 22,
                    "IpRanges": [
                        {
                            "CidrIp": "203.0.113.0/24"
                        }
                    ],
                    "ToPort": 22,
                    "IpProtocol": "tcp",
                    "UserIdGroupPairs": []
                }
            ],
            "GroupName": "MySecurityGroup",
            "OwnerId": "123456789012",
            "GroupId": "sg-903004f8",
        }
    ]
}

```









[installed]: https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-install.html
[configured]: https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-configure.html
[official AWS documentation]: https://docs.aws.amazon.com/cli/latest/reference/ec2/describe-security-groups.html
Criando uma Expressão Regular (Regular Expression ou RegEx)
Tags: javascript, node, react
Published: 2019-08-15 13:15:39

![Criando uma Expressão Regular (Regular Expression ou RegEx)](https://thepracticaldev.s3.amazonaws.com/i/3aftd73vgia197h1du40.jpg)


Para criar uma expressão regular no JavaScript, você pode criar da forma literal
colocando sua expressão entre barras e atribuindo à uma variável 

```const urlSlug = /^[a-z0-9-]+$/;```

Uma outra forma de criar uma regex é usando o construtor do objeto RegExp:

```const urlSlug = new RegExp(/^[a-z0-9-]+$/);```

Perceba que ao criar a sua regex usando o construtor, você não precisa de colocar entre barras.

Uma recomendação é de se usar o construtor quando por exemplo você estiver pegando a sua regex de uma fonte externa, como o vinda de um usuário.

Espero que tenham gostado!

Não deixe de visitar o repositório do github com todas as dicas em emersonbrogadev/social-media-snippets.

[➜ Participe da nossa lista de desenvolvedores](https://emersonbroga.com/e/participe/)
[➜ Aprenda ES6](https://amzn.to/2J4XnLg)
[➜ Veja as dicas no Instagram](https://www.instagram.com/emersonbrogadev/)
[➜ Assita nosso canal no YouTube](https://www.youtube.com/c/emersonbroga/)
[➜ Curta nossa página no Facebook](https://www.facebook.com/emersonbrogadev/)
[➜ Não perca as atualizações no Twitter](https://www.twitter.com/emersonbrogadev/)
[➜ Veja os repositórios no Github](https://www.github.com/emersonbrogadev/)

=)
Daily Challenge #41 - Greed is Good
Tags: challenge
Published: 2019-08-15 13:01:47

---
title: Daily Challenge #41 - Greed is Good
published: true
series: Daily Challenge
description: Recreate the classic dice game, Greed.
tags: challenge
---
Greed is a dice game played with five six-sided dice. Using an array containing five six-sided dice values, write a function that will score a throw according to the following rules:

> Three 1's => 1000 points
 Three 6's =>  600 points
 Three 5's =>  500 points
 Three 4's =>  400 points
 Three 3's =>  300 points
 Three 2's =>  200 points
 One   1   =>  100 points
 One   5   =>   50 point

A single die can only be counted once in each roll. For example, a "5" can only count as part of a triplet (contributing to the 500 points) or alone (as 50 points), but not both in the same roll. 

**Example Scoring**

 5 1 3 4 1  =>  50 + 2 * 100 = 250
 1 1 1 3 1  =>  1000 + 100 = 1100
 2 4 4 5 4  =>  400 + 50 = 450

You can try to fill the array with random values. If you have extra time, you can also try to keep track of the player's score over several throws. 

***
_This [challenge](https://www.codewars.com/kata/5270d0d18625160ada0000e4) comes from user JulianNicholls. Thank you to [CodeWars](<https://codewars.com/>), who has licensed redistribution of this challenge under the [2-Clause BSD License](<https://opensource.org/licenses/BSD-2-Clause>)!_

*Want to propose a challenge for a future post? Email __[yo+challenge@dev.to](yo+challenge@dev.to)__ with your suggestions!*
Inductive specification using a bottom-up definition
Tags: eopl, elm, math
Published: 2019-08-15 13:00:02

---
title: Inductive specification using a bottom-up definition
published: true
description: 
tags: eopl, elm, math
---

**Psst**: *The paper, [Inductive Graphs and Functional Graph Algorithms](http://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.28.9377&rank=1), I shared near the end of this post illustrates why inductive specification is so useful to functional programming.*

Another way to write an inductive specification is by using a **bottom-up definition**.

For e.g. the set `S` from [here](https://dev.to/dwayne/inductive-specification-using-a-top-down-definition-63p) can be defined using a bottom-up inductive specification as follows:

`S` is the smallest set contained in `ℕ` that satisfies the following properties:

1. `0 ∊ S`, and
2. If `n ∊ S` then `n + 5 ∊ S`.

We have to say that "`S` is the smallest" to ensure that `S` is uniquely defined.

We can use this definition to generate natural numbers that are in `S`. By definition, `0 ∊ S` and by condition 2 it follows that `0 + 5 = 5 ∊ S`. By repeatedly applying condition 2 we can see that all multiples of 5 are in `S`.

## Why bother?

For the same reasons as [before](https://dev.to/dwayne/inductive-specification-using-a-top-down-definition-63p).

Also, bottom-up definitions in particular can be used to generate the values of the set.

As another example, here's a bottom-up inductive specification for the set, `L`, of all lists of natural numbers:

1. `[] ∊ L`,
2. If `n ∊ ℕ` and `l ∊ L` then `n :: l ∊ L`,
3. Nothing else is in `L`.

**N.B.** *Condition 3 is another way of saying that `L` is the smallest such set.*

What's neat about this is that from a bottom-up definition we can use an algebraic data type to represent the values of the set.

```elm
type List a
  = Empty           -- condition 1
  | Cons a (List a) -- condition 2
  -- condition 3 is implicit
```

Then, many functions on lists can be succinctly given by recursive function definitions.

In [Inductive Graphs and Functional Graph Algorithms](http://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.28.9377&rank=1), Martin Erwig views graphs as inductively defined data types and then proceeds to show how the graphs can be implemented efficiently and how graph algorithms can be succinctly given by recursive function definitions.

## Challenge

Write a bottom-up inductive specification for the set `S = {2n + 3m + 1 | n, m ∊ ℕ}`.

**N.B.** *This post is based on my [EoPL notes for Chapter 1](https://github.com/dwayne/eopl3/blob/master/03-ch1.md).*
How you can get started with Cloud, Learn Deployment and Serverless
Tags: webdev, tutorial, serverless, showdev
Published: 2019-08-15 12:59:47

---
title: How you can get started with Cloud, Learn Deployment and Serverless
published: true
description: A collection of articles on the Cloud
tags: webdev, tutorial, serverless, showdev
cover_image: https://thepracticaldev.s3.amazonaws.com/i/rgpviu79y3l5sa9mmnuf.jpg
---
Follow me on [Twitter](https://twitter.com/chris_noring), happy to take your suggestions on topics or improvements /Chris

- [Deploy your Docker containers to the Cloud](https://dev.to/azure/all-your-containers-are-belong-to-usdeploying-to-microsoft-azure-7dm)
This article takes you through setting up a private container registry in the Cloud and how to tag your containers properly. Then we push the containers to the Cloud and finally creating service endpoints that your users can reach.
- [Deploy to the Cloud using Git](https://dev.to/azure/commit-push-deploygit-in-the-microsoft-azure-cloud-297l)
There are so many ways to deploy your code to the Cloud, Git is another flavor.
- [Learn how to create your first Serverless function in the Cloud](https://dev.to/azure/serverless-from-the-beginning-using-azure-functions-azure-portal-part-i-28o1)
There are so many ways to create a Serverless function. In this article, we look at creating in the Portal. We go through all the fundamentals and ends up building an app
- [More Serverless functions](https://dev.to/azure/serverless-from-the-beginning-part-ii-getting-to-know-your-portal-ide-101k)
In this part, we learn how to utilize more of the capabilities in the Cloud and learn how to split up our code in different modules and use HTTP requests and more
- [Author Serverless functions in VS Code](https://dev.to/azure/serverless-from-the-beginning-using-azure-functions-vs-code-part-iii-50j7)
In this part, we learn about all the amazing extensions for VS Code that makes not only authoring but deploying a very nice experience
- [Serverless GraphQL API - part I](https://dev.to/azure/learn-how-you-can-build-a-serverless-graphql-api-on-top-of-a-microservice-architecture-233g)
In this article, we learn how to create microservices and a GraphQL and prepare it for deployment in the Cloud 
- [Serverless GraphQL API - part II](https://dev.to/azure/learn-how-you-can-build-a-serverless-graphql-api-on-top-of-a-microservice-architecture-part-ii-deploy-it-to-the-cloud-26b6)
In this second part, we take our GraphQL API, host it in a Serverless function and deploy it to the Cloud. We also take our Microservices and deploy that to the Cloud as well
- [Durable functions](https://dev.to/azure/durable-functions-stateful-long-running-functions-in-serverless-part-i-5bm)
*Durable functions* is a framework that enables you to schedule your Serverless functions as a long-running workflow. This is just the first part in which we get familiar with concepts such as orchestration function and activity functions.
You should stop using Thing
Tags: webdev, beginners, react
Published: 2019-08-15 12:57:28

I'm not a big fan of Thing.

I find that it is too restrictive, and I find the thing process to be painful, with resulting configuration being far to complex to easily tinker.

On the other hand, I'm a huge fan of NewThing.

I do NOT believe that NewThing is the solution to all problems, and that anyone who uses OtherThing instead of NewThing is wasting their time (I personally still use OtherThing for all professional projects), but I definitely believe that NewThing is appropriate for the large majority of hobbyist and small-scale front-end web applications out there.

I recently asked the DEV community to provide me with code to review, and whilst reviewing one of the Thing.js projects (created using Thing) I decided that in order to properly implement import aliases, I was going to replace Thing with NewThing.

And so I did, and it was a relatively short and pain-free process, completed in under 5 minutes!
Thinking about GitHub Learning Lab
Tags: discuss, github, microsoft, education
Published: 2019-08-15 12:39:09

---
title: Thinking about GitHub Learning Lab
published: true
description: What's next in GitHub Learning Lab?
tags: discuss, github, microsoft, education
cover_image: https://lab.github.com/public/card.png
---

So today GitHub posted about how [they are improving the author's experience in GitHub Learning Lab](https://github.blog/2019-08-14-a-new-experience-for-learning-lab-authors), and I more and more interested in creating guided courses to teach programming, or even game development with Unity3D or Godot engines...

I'm curious about your experiencie, dev.to community. Have you tried to create some courses? How it was for your students? Is the creation of courses growing with this tool?

If you want to know more about the initiative, you can start from [this post](https://github.blog/2018-04-19-introducing-github-learning-lab/), where this project was announced.

Let knowledge spread!
What happened to Medium?
Tags: discuss, design, help
Published: 2019-08-15 12:19:47

Just resubscribe to Medium and it suddenly harder to use now.

Why is my interest topic get replaced by publication? I have to scroll down just to find the design tag.

Find old articles is so hard.

Non-interested articles just pop up everywhere in my homepage, they got promote or something?

The " Based on your reading history " seemed to be broken, doesn't relate to my interest at all.
Globex IT Solutions: Full-featured Web and IT Solutions Company
Tags: globex
Published: 2019-08-15 12:19:38

<a href="https://www.globexitsolutions.com/">Globex IT Solutions</a> is a full featured web and IT solutions company based in New York City. We offer wide range of services including SEO Packages, PPC Services, Graphic Design and Web Development services.

At Globex IT Solutions, we offer the Cheap SEO Packages as part of our core services. We help brands with low cost search engine optimization solutions.
We take money after delivering results.

Our <a href="https://www.globexitsolutions.com/seo-services/seo-packages/">SEO Packages</a> starts from $249 with attractive features like manual blogger outreach, Infographic Creation and Page Speed optimization all included in this package.
svelte-tabs: Tabs component for Svelte apps!
Tags: showdev, svelte, javascript, webdev
Published: 2019-08-15 11:28:41



I am working on a Svelte component, and needed tabs. 

I found [this code](https://svelte.dev/repl/8e68120858e5322272dc9136c4bb79cc?version=3.7.0) written by Rich Harris and used that as a starting point, and made some modifications and enhancements on top of it.

Most of the hard work was done by Rich in the initial implementation.

It supports switching tabs with the mouse or with the arrow keys.

I am posting this in the hopes that some may find it useful.

You can find the library here: https://www.npmjs.com/package/svelte-tabs

And, you can find a simple demo here: [https://joeattardi.github.io/svelte-tabs/](https://joeattardi.github.io/svelte-tabs/)
Why you should use uBlock Origin just like me?
Tags: internet, adblock, security
Published: 2019-08-16 02:21:21

---
title: Why you should use uBlock Origin just like me?
published: true
tags: Internet,ad block,security
canonical_url: https://kevinhq.com/why-you-should-use-ublock-origin/
---

Browsing websites with intrusive ads is the worst experience. It’s even worse if those annoying ads are interfering you to read the content. All of us deserve a better browsing experience. This is where the ad-block software comes in-handy. The problem is there are many of them today. For a Chrome or Firefox, there are… [Continue reading »Why you should use uBlock Origin just like me?](https://kevinhq.com/why-you-should-use-ublock-origin/) ![](http://feeds.feedburner.com/~r/kevinhq/~4/52WRmz21lBI)
How can i generate report in a micro service project
Tags: microservices, dotnet
Published: 2019-08-15 10:54:39

Hi all,I am creating a micro service project. now i am creating a report service to generate daily,monthly and yearly sells and profit information for a vendor(from vendor service).
So i need to get the  data from vendor service to report service(in vendor service data can change time to time).i am planing to use elastic search to keep the real data in kibana. is it a recommended way ?
please give me idea. thanks in advance.
How can I prepare for getting hit by a bus?
Tags: discuss, career, explainlikeimfive, productivity
Published: 2019-08-15 10:40:29

**Question**: *I'm a member of a small team - and by small, I mean there are three of us. I'm often the only engineer working on technical aspects of our projects.*

*This actually happens more times than I want to admit. Sometimes, I'm the sole-coder, sometimes I'm analysing or compiling technical information, sometimes I'm preparing technical data and presentations.* 

*When you work on cross-functional teams, it's hard to keep the rest informed about the details of what you are doing.* 

*But what if I get 'hit by a bus'? How should I work in a team where I'm the only technical contributor to avoid problems from a sudden departure?*

**You can read our answer [on our blog](https://www.client-server.com/blog/2019/08/the-big-q-how-can-i-prepare-for-getting-hit-by-a-bus?), but what do you think?**