teleren/devto huggingface dataset:
CSS adding margin to all children
Tags: css
Published: 2021-02-14 21:16:19

Sometime I want to add margin to all children in case that they get stacked on mobile devices. It would be nice if I have a utility CSS that does the job and can be applied to a parent element. 

```css
.children-mb-1 > * {
  margin-bottom: 0.25rem !important;
}
.children-mb-2 > * {
  margin-bottom: 0.5rem !important;
}
.children-mb-3 > * {
  margin-bottom: 1rem !important;
}
.children-mb-4 > * {
  margin-bottom: 1.5rem !important;
}
.children-mb-5 > * {
  margin-bottom: 3rem !important;
}
```

I adopted values from [Bootstrap](https://github.com/twbs/bootstrap/blob/6b6db4fd8a9aa79d99982c6cdc9a3dc3c78e4c6d/dist/css/bootstrap-grid.css#L1708-L1726) because I like it.

That's it.
Javascript Arrow Function
Tags: es6, arrowfunction, javascript
Published: 2021-02-14 20:49:50

---
title: Javascript Arrow Function
published: true
description: How to use arrow function and its main use case
tags: ES6, arrowfunction, javascript
cover_image: http://www.local-pc-guy.com/wp-content/uploads/2019/03/arrow_function.png
---

Javascript Arrow is an alternative syntax to the old regular function.

There is two main use case of using a javascript arrow function. The first is that it makes the code shorter and concise like below. 

##### No argument
```javascript
// Regular Function
function sayHello() {
  return 'Hello'
}

// Arrow Function
const sayHello = () => 'Hello'
```

##### One argument
```javascript
// Regular Function
function addTen(number) {
  return number + 10
}

// Arrow Function
// Notice that we can remove the parenthesis around the parameter when argument is just one. It is optional.
const addTen = num => number + 10 
```

##### Two or more arguments with multiple function body statements. We have to keep the curly braces and the return keyword for multiple function body statements.
```javascript
// Regular Function
function addTen(number1, number2) {
  const ten = 10                   // function body line #1
  return number1 + number2 + 10    // function body line #2
}

// Arrow Function
const addTen = (number1, number2) => {
  const ten = 10
  return number1 + number2 + 10
}
```

The second use case of the arrow function is to handle the scope better. Let see a very simple example.

```javascript
const person = {
    myName: ‘John Doe’,
    sayName () {
        setTimeout(function() {
             console.log(`Hi, ${this.myName}`)
        }, 1000)
    } 
}
```
When we invoke 
```javascript 
person.sayName() 
``` 

We expect to see
```
Hi, John Doe
```
Unfortunately, will get below. 
It is because the function is pointing to the window object and window object doesn't have a method called sayName.
```
Hi, undefined
``` 

To fix the context issue, engineers use these workarounds
#### Fix #1:
```javascript
// Save the context and use that context
const person = {
    myName: ‘John Doe’,
    sayName () {
        const _this = this
        setTimeout(function() {
             console.log(`Hi, ${_this.myName}`)
        }, 1000)
    }  
}
```

#### Fix #2:
```javascript
// Use bind to ensure that context is set and kept
const person = {
    myName: ‘John Doe’,
    sayName () {
        setTimeout(function() {
             console.log(`Hi, ${this.myName}`)
        }.bind(this), 1000)
    }  
}
```

#### Fix #3 - Modern solution
Arrow function behaves like a variable, it establishes the value of this (context) where the arrow function is created
```javascript
// Using Arrow Function. 
const person = {
    myName: ‘John Doe’,
    sayName () {
        setTimeout(() => console.log(`Hi, ${this.myName}`), 1000)
    }  
}
```

If you prefer to watch a 5 minutes video instead, below is the link

{% youtube C-kayTLMMYQ %}

If you want to support me - [Buy Me A Coffee](https://www.buymeacoffee.com/letscode77)
Git Image Diff with iTerm2
Tags: iterm, iterm2, git, terminal
Published: 2021-02-27 00:05:51

---
title: Git Image Diff with iTerm2
published: true
date: 2021-02-14 20:37:00 UTC
tags: iterm,iterm2,git,terminal
canonical_url: https://www.codependentcodr.com/git-image-diff-with-iterm2.html
---

So iTerm2 has this neat `imgcat` command that allows you to "cat" or view an image right in the terminal. It's pretty sweet, but I had an idea: what if we used that with Git for diffing changed images in a`git diff`?

This seems like it should be possible, you can replace what git does when you do a diff of two different binary files. For example, the [spaceman-diff package by Zach Holman](https://zachholman.com/posts/command-line-image-diffs/) does this to do a diff of two images as ASCII art.

We want to do the same, but instead of seeing an ASCII art version of an image, it'd be cool to see the two versions of the image itself right in the terminal.

## Setting Git Attributes

The first thing is create a file in your home directory called `~/.config/git/attributes`. In here you can define a mapping between file types and what command Git will run when doing a diff of those filetypes. In my case I entered the following:

```
\*.png diff=image
\*.jpg diff=image
\*.gif diff=image
\*.jpeg diff=image
```

This tells git that when doing a diff of a file that ends with `png`, `jpg`,`gif`, or `jpeg` to use the `image` config.

## Set Up The Image Config

Now, in your `~/.gitconfig` file, add the following:

```
[diff "image"]
    textconv = imgcat

```

This tells Git to use iTerm's `imgcat` script for converting the binary image file to text. This seems weird, but this is actually how iTerm's imgcat command works: it converts the binary image into a textual stream that iTerm knows how to understand and then render as an actual image.

## Put imgcat In Your Path

Next is put iTerm's `imcat` script somewhere on your path. You can download it from [here](https://iterm2.com/utilities/imgcat). Save that somewhere, make sure you chmod it to be executable (`chmod +x imgcat`), and then throw it into some directory on your path. You can confirm it's there by typing `imgcat` into an iTerm window:

```
$ imgcat
Usage: imgcat [-p] filename ...
   or: cat filename | imgcat

```

Note that you have to put this script in your path, you can't just rely on the version that's inlined into your terminal with iTerm's shell integration.

## Profit

Now when you change an image in a Git repo and do a `git diff` while in iTerm you'll see a preview of the original image and the changed image. Example:

![Showing the image diffing](https://www.codependentcodr.com/static/imgs/imgcatDiff.png)

The above image is the original, the 2nd image is what I changed it to. Note that because imgcat is iTerm specific, it won't work in other terminals. If you do a `git diff` in a different terminal (ex: the integrated terminal in VS Code) you'll see just the ordinary blank output:

![Image diff in non-iTerm terminal](https://www.codependentcodr.com/static/imgs/imgcatdiffvscode.png)
What is a Makefile and how do I use them
Tags: unix, linux
Published: 2021-02-14 20:12:09

## The beauty of scripting and automation

Today is a great world to live in when it comes to scripting and automating tasks in your computing environment. Out of the box of most Unix-based systems you have several tools to write scripts.

- The Bash command line which has its own scripting language
- Perl, while maybe not the first choice for a full-blown application, is a very powerful language for command-line scripting
- Many Unix based systems may already come with some version of Ruby, Python, PHP which can also be used for scripting

Plus so many other fun scripting languages we can add to our system:

- Raku (Formerly Perl 6)
- NodeJS to write scripts in Javascript

With all these great options, I want to talk about Makefiles. Make is a utility on the Unix system for automating a series of terminal commands. These were typically used to help automate the compilation of software which in Languages like C and C++ can require a more complex chain of commands to link dependencies and source code. Although typically used for software compilation can be used to automate all sorts of things.

## The Syntax

To use Make you start by creating a file called Makefile (case sensitive)

```
express:
    npm init -y
    npm install express morgan dotenv
    touch server.js
    mkdir views models views

publish:
    git add .
    git commit -m "ready to publish"
    git push origin master
    npm publish
```

With the above make file we can run either of the chain of terminal commands like so.

```make express```

```make publish```

What if for some reason you wanted to use a different filename other than Makefile, this is doable. Take the following file.

MakeMore
```
website:
    mkdir website
    touch website/index.html
    code website
```

You can then run this file with the following command.

```make website --makefile=MakeMore```

## Conclusion

Hopefully, this helps you understand what Makefiles are how they work, they can be a pretty nifty tool.
Cubegen 3.0 - Javascript / AFrame game
Tags: javascript, gamedev, programming, webdev
Published: 2021-02-14 19:56:32

Experimental A-Frame project / game using AFrame, AFrame physics component / vanilla js to create a fun arcade style game. 
I decided to evolve the earlier version of the Cubegen project I started a few weeks ago, adding different difficulty levels, a HUD display and some more effects as well as enhancing the gameplay. I still want to enhance it some more and it's still a prototype, but happy with where it is at more.

Cubegen3 is a Procedurally generated cube collection game
Collect all the generated energy cubes before the timer runs out and avoid the negative boxes which will damage your health.

The number of cubes is randomly generated according to the difficulty

**Controls**: Keyboard: WASD - Movement Mouse: Click and drag to rotate 

**Play**: https://drnoir.itch.io/cubegen

**Video Overview on project**
{% youtube oVRHOYDJLOo %}

**GitHub repo**
{% github drnoir/find-the-boxes-gen %}
Movie comparison tool you may like (and my fresh portfolio as a bonus!)
Tags: showdev, webdev, react
Published: 2021-02-14 19:33:13

#Quickly about the bonus

You can find my portfolio at [lwolczynski.com](https://lwolczynski.com). I've been tweaking it for a long time, so if you decide to visit, please let me know how you like it.

It’s hosted on Google Firebase which I’ve found is a pain to use if you don’t have any experience with. If you don’t know why, Firebase doesn’t give you full control of the back end. Instead, it forces you to use Cloud Functions that *lets you automatically run backend code in response to events triggered by Firebase features*<sup>[1]</sup>. Long story short, this was a proprietary solution I needed to learn to make the contact form work.

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

If your next question is: *‘Why did you use Firebase, not a different platform like Heroku?’*, the answer is: Heroku would charge $7 for using the features I need (mostly Nodemailer and keeping my website active when there’s no traffic). Cloud Functions requires a Firebase subscription plan, but it’s pay-as-you-go and I don’t expect to get enough traffic to be charged (not yet, at least).

If you’re interested in learning more, I plan to write a short article on how use their database and functions, as it didn’t come easy to me. Stay tuned!

#Movie comparison tool

The main event (and something you may use more) is a web app I named Pick-A-Mov. [Pick-A-Mov](https://pickamov.com) is a movie comparison tool I created with ReactJS, Express, Semantic UI and an external API to fetch information about movies. It allows you to compare up to 4 movies, including their ratings, on IMDB, Rotten Tomatoes, and Metacritic. The idea came from the most popular JavaScript course that you may have come across on [Udemy](https://www.udemy.com/course/javascript-beginners-complete-tutorial/) (it’s a good one, thumbs up). The project in the course was built with VanillaJS, but I decided to take it a step further and use React, which seemed to be an obvious choice for this kind of website — and made it look better, too.

![Template project design](https://dev-to-uploads.s3.amazonaws.com/i/jrr1jhpr34efqvlulz6h.png)<figcaption>If you come across this, it's built step-by-step from the tutorial</figcaption>

![My project design](https://dev-to-uploads.s3.amazonaws.com/i/dylv2n8xldn6isqyh4td.png)<figcaption>My implementation. Looks better, huh?</figcaption>

If you’ve ever wanted a tool that will allow you to quickly compare top movie contenders and help you decide what to watch, here you go. Use it as much as I do and share your thoughts: good comments, bad comments, ideas, kudos, complaints, queries, I’m happy to hear them all. Let me know!

Til’ next time!

Find my code on GitHub: {% github https://github.com/lwolczynski/Movie-Comparison no-readme %}

<small>[1] [Cloud Functions docs](https://firebase.google.com/docs/functions)</small>
8 Remote Companies in Berlin, Germany - 2021
Tags: hiring, berlin, career, jobs
Published: 2021-02-14 19:28:25

Working remotely or homeoffice (as Germans like to call it) has been trending upwards in 2020 & 2021. Companies have started listing down flexible remote work as one of their benefits and this remains as an attractive proposition for employees especially for tech startups.

The following list contains 8 Remote Companies in Berlin (in no particular order) for full time & part time jobs. Most of them have English as their business language, so even if you don't speak German yet, go for it.

**Mattermost**
Mattermost is an open-source, self-hostable online chat service with file sharing, search, and integrations. It is designed as an internal chat for organisations and companies, and mostly markets itself as an open-source alternative to Slack and Microsoft Teams.

Jobs 👉 https://arbeitnow.com/companies/mattermost

**Expertlead**
Expertlead brings together the best tech freelancers and enable them to experience more than just a career

Jobs 👉 https://arbeitnow.com/companies/expertlead

**Solvemate**
Solvemate enable brands to deliver quality customer service through meaningful conversations. By empowering customer service departments with automation and insights, we are able to provide the right help at the right time for their customers. Our core aspiration is for brands to use exceptional service to exceed customer’s expectations, drive loyalty and grow lifetime customer value. 

Jobs 👉 https://arbeitnow.com/companies/solvemate


**TIER Mobility GmbH**
TIER Mobility is a vision and mission-driven company for shared micro-mobility based in Berlin. Our vision is to lead the way towards seamless and sustainable mobility joyful for everyone. We are rethinking urban transportation and reshaping our cities'​ landscapes by offering easily-accessible and affordable mobility services by partnering up with municipalities, public and private organizations as well as other transportation providers.

Jobs 👉 https://arbeitnow.com/companies/tier-mobility-gmbh

**Layer**
We are reinventing teamwork for spreadsheets by introducing a productivity layer on top of Excel and Google Sheets. In short, we are building GitHub For Spreadsheets.

Jobs 👉 https://arbeitnow.com/companies/layer-software-gmbh

**Ecosia**
Ecosia uses the ad revenue from your searches to plant trees where they are needed the most. By searching with Ecosia, you’re not only reforesting our planet, but you’re also empowering the communities around our planting projects to build a better future for themselves. 

Jobs 👉 https://arbeitnow.com/companies/ecosia

**Forto**
Forto develops groundbreaking, scalable, digital logistics technologies and services that go far beyond the transport from A to B. Our easy-to-use and intuitive platform enables our customers to optimize and manage their entire global supply chain

Jobs 👉 https://arbeitnow.com/companies/forto
Accessibility Auditing
Tags: webdev, ally, lighthouse, wave
Published: 2021-02-14 19:25:08

Accessibility is really important into ensuring that everyone has a positive experience on your website. UX Designers all over the world take this into account when creating website. Using interviews and AI can be great when you have lots of resources, but there are also a few very helpful tools the everyday user can take advantage of. Today, I'm going over how to run an audit using Lighthouse, WAVE, and Web.dev to give everyone an enjoyable experience on your website. If you would prefer to watch a detailed video on how to do this, I linked my YouTube video below, so check that out.

#Web.dev

First I pulled up the website that I wanted to audit. I chose the website of a startup in Montana dedicated to making nonbinary backpacks called [JamPacks](https://www.itsjampacks.com/). To get started paste the website link into [web.dev](https://web.dev/) under test my site. This will give you detailed feedback on Performance, Accessibility, Best Practices, and SEO (search engine optimization). JamPacks ranked really well in the last three, but struggled a lot with performance. It's really impressive that they have such high accessibility ratings, which is what major company's really want. In order to improve their performance web.dev gave a few suggestions. The most important one was that they should eliminate render-blocking JavaScript. By using this, the browser must download, parse, compile, and evaluate the script before it can do anything else to render the page. This would explain why the time to interact was so long.

#WAVE

Once you have looked through web.dev, you can add [WAVE](https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh?hl=en-US), a chrome extension to your browser. This does a good job of looking at the site and finding specific instances where accessibility can be improved. Once I'm on the site and running the extension, I see the biggest issues under the errors tab. For JamPacks, it suggests adding a language tag to the HTML. A user with a vision impairment may need to use a screen reader and the language tag allows it to read the content. 

#Lighthouse

The last chrome extension to use is [Lighthouse](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=en). Run this one just like the last to see a report on the sites Performance, Accessibility, Best Practices, and SEO, just like before. The results were very similar and gave a few extra suggestions. The fonts chosen by JamPacks were from their host, but did not include backup CSS fonts. This means when the webpage is loading, nothing is being displayed, but by choosing a simple CSS font something can be displayed before the webfont loads. This would greatly improve the performance rating.

As you can see, these tools are super easy and useful. Good luck with your accessibility and keep coding!

{% youtube lAN7TMhyX3I %}
With the help of the Custom Toolbar, we made our own tool for convenient work
Tags: unity3d, gamedev, 2d, devops
Published: 2021-02-14 19:23:26

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


More information here:
https://twitter.com/PAPERTANKS2/status/1355949167395426307
Database For New Developers
Tags: beginners, codenewbie
Published: 2021-02-14 19:22:13

[Note: This post does not include any affiliates link, just a free course link at the bottom]

Any application needs to store and retrieve data. Is actually the point of creating an application is to help people store and process the data in a meaningful way. To do so we need to have a place to store all these data. This place is the Database where we store our data and we can define relations among this data.

Some articles you might like
{% link https://dev.to/advancedsoftwareofficial/how-to-learn-a-programming-language-3k9i %}

##Database

Is the collection of tables and the related database objects that are used to store and retrieve the data. Tables are the main building block of the database. The database has some different types for example there is SQL database, NoSQL, Graph, and other types. No need to know them all we will focus on SQL Database as it is one of the well-known and widely used.

There are different vendors for SQL Databases such as Oracle, SQL Server, Postgres, and MySQL. You can choose any of them they are a lot similar.

##Tables

The tables in the SQL Database (Called Documents in NoSQL) contains columns that you create and store the data inside them. The columns have types so you can set the correct data type such as string or date.

To uniquely identify the row in the database we use a Primary Key column to uniquely identify each row. It will not be repeated and you can use it to directly access the row as it is much faster. It will be auto-generated so we don't need to insert it.

Below is a sample table created in SQL Server

![SQL Server Sample Table](https://advancedsoftware.io/student-sample-table/)

After we create the table, we can add edit, or delete the data via SQL. SQL is the language used to modify or add the data in the database. 

![SQL and the result](https://advancedsoftware.io/sql/)

##ER Diagram

Entity Relationship Diagram is a representation of all the tables inside a database. Usually, before starting to work on a database we design its tables and relations so we make sure we are creating a good database design.

![ER Diagram](https://advancedsoftware.io/er-diagram/)

If you a new software developer, join our free course to help you get started
[https://landing.advancedsoftware.io/software-developer-guide](https://landing.advancedsoftware.io/software-developer-guide)
Amazon pinpoint
Tags: aws, typescript, javascript, serverless
Published: 2021-02-14 19:21:32

Amazon Pinpoint is a flexible and awesome commercial communications service. You can connect with customers via channels such as email, SMS, Push, or voice. Amazon Pinpoint is easy to set up, easy to use, and flexible in all marketing communications situations. Divide your campaign audience into the right customer and personalize your messages with the right content. Delivery and campaign metrics on Amazon Pinpoint measure your communication success. Amazon Pinpoint can grow with you and scales around the world up to millions of messages per day on channels.

**<h2>Why Amazon Pinpoint</h2>**
You can connect with customers over channels like email, SMS, push, or voice. Amazon Pinpoint is easy to set up, easy to use and is flexible for all marketing communication scenarios. Amazon Pinpoint can grow with you and scales globally to billions of messages per day across channels.

**<h2>Links to Explore</h2>**
[AWS Pinpoint](https://aws.amazon.com/pinpoint/)
[AWS Pinpoint API reference](https://docs.aws.amazon.com/pinpoint/latest/apireference/welcome.html)
Desafio #04 - CSS 30 dias
Tags: codepen
Published: 2021-02-14 19:17:16

Este projeto utiliza HTML, CSS em keyframe.

https://lnkd.in/dKKCppr


#CSS3 #30daysofcss #30diasdeCSS #30dayscss #desafio

{% codepen https://codepen.io/LuizCorrea-dev/pen/dyONGgg %}
Learning Cloud - FAQ
Tags: cloudnative, cloudskills, discuss
Published: 2021-02-14 19:00:18

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

I wrote a quick page on my [`learning-cloud` GitHub Repo](https://github.com/lynnlangit/learning-cloud) to answer the [TOP TEN](https://github.com/lynnlangit/learning-cloud/blob/master/FAQ.md) questions I get asked about learning and working with various public cloud vendors.

I am opinionated, of course, so I welcome your thoughts on my questions and answers!  Are these the top questions you are wondering (or are being asked)?  What are you hearing?

What do you think about my answers?  What is your experience with these topics?