teleren/devto huggingface dataset:
Keeping your commits clean & organized, newbie edition
Tags: webdev, github, git, productivity
Published: 2020-11-02 00:13:09

WARNING: This is a quick spiel, with lots of Marie Kondo gifs incorporated..
![Alt Text](https://media.giphy.com/media/mBCTckh8N3YKfrNDqm/giphy.gif)
These are git commands I've learned along the way that I wish I would've known since day one! I hope they're helpful for anyone just getting started with git or wanting to manage their workflow a lil' better.

# Editing Commits
![Alt Text](https://media.giphy.com/media/gj61pwKFHhWqULeovI/giphy.gif)
I'd say, when trying to be more organized, and especially when you're working with a group of people, you really have to ask yourself one thing... DO MY COMMITS SPARK JOY? If that's not the case, these might be some useful commands for you:
```javascript
// add changes to last commit and keep original commit message
git add . && git commit --amend --no-edit

// edit your last commit message
git commit --amend -m "edited commit message"
```
# Git Branch
Git branch basically just allows you to make a copy of your master code, and work from that copy. When you're ready, you can merge this new branch to master.

![Alt Text](https://media.giphy.com/media/hvRoo3YcAPUheF3MxY/giphy.gif)
sidenote: Branching can been super helpful when working on a new feature or refactoring code. This way, your main branch will always have clean, working code.


```javascript
git checkout -b <branch_name> // create new branch & switch to it
git checkout <branch_name> // switch to another branch
git push origin <branch_name> // push to github
git merge <branch_name> // combine branch changes to master
```
# CHECKS and more checks
Going back to see what you've done is always super helpful, and just a way for you to be mindful of the changes that you're making.
```javascript
git log //general summary of your previous commits
git log --oneline //shows your last commit
git reflog //to see entire history i.e. any redos, rebases
```
# Resources
Git documentation:
https://git-scm.com/docs/gittutorial
Atlassian tutorials:
https://www.atlassian.com/git/tutorials/rewriting-history
a blogpost by Gabriel Abud :
https://dev.to/g_abud/advanced-git-reference-1o9j

![Alt Text](https://media.giphy.com/media/4ZkiXE2yGFCEA3Sm6V/giphy.gif)

Are there any git commands you wish you'd known about when you were just starting?
Road to SAAS launch
Published: 2020-11-02 00:07:09

#What's this all about?

In January of 2021 I intend to launch my first SAAS product. Do I plan to raise tons of VC $$ for it? No. Is is the next big thing? Maybe. Why are you building it.... well because I want to and mainly because I think it will be helpful to my fellow cannabis marketers. What is it? I like to think of it as Monday mixed with Sprout Social but for the cannabis industry. 

Currently, I work in marketing for a leading cannabis brand in WA (If you're interested in learning more about how to get into the cannabis industry or start your own business, I have a weekly newsletter you can join at newlylegal.co) and since it's illegal to advertise cannabis on the internet, you can image how digital marketing in this space can become a challenge. However, I'm a firm believer that you don't *need* to spend $$$ to build a brand.. you just have to **harness the power of the internet.** 

It can get difficult explaining to stakeholders why I spent two hours creating content for Pinterest or why "engagement" on post is a metric I care about and how that equates to **sales**. 

So my product will directly tie **social activity to business results** and demonstrate the ROI of the internet in plain English so everyone can understand. 

Okay... so what do I want to use to build my SAAS product? If you follow me on Twitter you probably guessed it.... Rails.(I'm a ROR fan) But before I get started I want to go back to the very basics of Ruby on Rails... I haven't used Rails in a while but it has always been my favorite framework to work with so this will be a refresher for me and maybe for you to.

#Let's get started.

Rails uses a MVC structure for it's application structure. MVC is three subdirectories: **models, views, and controllers.**

When interacting with a Rails application, a browser sends a request, which is received by a web server and passed on to a Rails **controller**, which is in charge of what to do next. In some cases, the controller will immediately render a **view**, which is a template that gets converted to HTML and sent back to the browser. 

More commonly for dynamic sites, the controller interacts with a **model**, which is a Ruby object that represents an element of the site (such as a user) and is in charge of communicating with the database. After invoking the model, the controller then renders the view and returns the complete web page to the browser as HTML.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zo43obe9ng17nx9655pg.png)

If this seem complex...no worries! We're just getting started. The next post we'll go through a sample app that will use all aspects of **MVC**.
How To Update A Deployed App On Heroku
Tags: codenewbie, heroku, github
Published: 2020-11-02 00:04:37

Every time I make a small update to an app I've already deployed, I find myself going back to the Heroku documentation. Here's a quick guide on how to update an app that you've already deployed. 

### 1. Clone the repository from GitHub to your local device:
```
git clone <YOUR HTTPS URL FROM GITHUB>
```

### 2. Make your changes, and commit them to GitHub:
```
git add .
git commit -m "<YOUR COMMIT MESSAGE>"
git push origin <YOUR BRANCH NAME>
```

### 3. Login to your Heroku account:
```
heroku login
```

Follow the directions on the screen to login to your account through the browser, then return to the terminal.

### 4. Set remote for your project:
```
heroku git:remote -a <YOUR PROJECT NAME>
```

### 5. Push to Heroku master to deploy updates:
```
git push heroku master
```

And that's it! 5 simple steps. Hopefully this might save you from digging through the [documentation](https://devcenter.heroku.com/articles/git) each time!
Euzinha na PyBR 2020
Tags: python, braziliandevs
Published: 2020-11-02 00:03:27

Adivinha só quem estará nessa terça-feira, 03/11, às 15:00, apresentando a palestra "Inovação e Tecnologia na Educação: Python como objeto de aprendizagem multidisciplinar"?

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

Estou com a palestra pronta, já realizei o teste de transmissão hoje. Só tô a ansiedade para chegar o dia.

#E aí, teremos outras pyladies?
Claro que teremos outras palestras maravilhosas sendo ministradas pelas pyladies, confere mais informações [aqui](http://brasil.pyladies.com/2020/10/30/mulheres-na-python-brasil-2020/)! 

E se você quiser participar do evento, ainda dar tempo, acesse [aqui](https://2020.pythonbrasil.org.br/) e faça sua inscrição. 

Em breve, irei descrever a experiência de palestrar na PyBR 2020.
Check whether a JS variable an array or not
Tags: javascript, codenewbie, webdev, showdev
Published: 2020-11-11 07:32:36

---
title: Check whether a JS variable an array or not
published: true
date: 2020-11-02 00:00:00 UTC
tags: javascript, codenewbie, webdev, showdev
canonical_url: https://jsmates.com/blog/check-whether-a-js-variable-an-array-or-not
description: isArray method will be handy for doing condition check for whether the data is an array or not
---

Let's consider a JS array,

```js
const authors = ['Param', 'Joshua'];
```

This is obviously an array, but if you need to check whether the data is an array or not. How do you do that check?

Using the `Array.isArray` method, it is easy to find out whether the value of a variable is an array or not.

```js
console.log(Array.isArray(authors)); // true
```

If you pass a non-array value to the method, then it will return `false`.

```js
console.log(Array.isArray(true)); // false
console.log(
  Array.isArray({
    firstName: 'Param',
    lastName: 'Harrison'
  })
); // false
```

{% codesandbox array-in-array-9vhst %}
Unity's Device Simulator [Part 2] - Visualizing The Google Pixel 5
Published: 2020-11-01 23:47:41

Video Link: https://youtu.be/qM4LoaAc7Mc

Will be creating a visual representation of the Google Pixel 5 on Unit's Device Simulator :).

» Unity's Device Simulator [Part 1] - Visualizing Your Own Custom Device
https://youtu.be/g1KSPtBV6eo

» Custom Device Files:
https://bitbucket.org/rehtse_studio/unitys-device-simulator-files/

====================

» Twitter = https://twitter.com/RehtseStudio

» Instagram = https://www.instagram.com/rehtse_studio

[ Want to learn more about Game Development ]
Visit GameDevHQ channel 
https://www.youtube.com/channel/UCR_3ge9-CEhA6USXMuthwDw
https://learn.gamedevhq.com/


#gamedev #gamedeveloper #mobilegame #madewithunity #unity2d #unity3d #devlog #developer #googleconsoe #googleplaystore
Unity's Device Simulator [Part 1] - Visualizing Your Own Custom Device
Published: 2020-11-01 23:46:47

Video Link: https://youtu.be/g1KSPtBV6eo

Learning how to create your own custom device on Unity's Device Simulator allows us to test our game in different devices when a particular device is not on the list.  We are going to learn and understand how to create our own custom device in the Unity's Device Simulator package and what kind of information we need in order to make it work.

» Device Simulator Manual:
https://docs.unity3d.com/Packages/com.unity.device-simulator@2.2/manual/index.html

» Unity's Device Simulator [Part 2] - Visualizing The Google Pixel 5
https://youtu.be/qM4LoaAc7Mc

====================

» Twitter = https://twitter.com/RehtseStudio

» Instagram = https://www.instagram.com/rehtse_studio

[ Want to learn more about Game Development ]
Visit GameDevHQ channel 
https://www.youtube.com/channel/UCR_3ge9-CEhA6USXMuthwDw
https://learn.gamedevhq.com/


#gamedev #gamedeveloper #mobilegame #madewithunity #unity2d #unity3d #devlog #developer #googleconsoe #googleplaystore
Object-fit cross-browser solution
Tags: javascript, css, html, beginners
Published: 2020-11-01 23:31:52

The `object-fit` CSS property is been very useful in websites nowadays, but there is still a caveat which is the need to support to Internet Explorer and/or EDGE (for some clients/projects at least).

So, with that in mind, there is a JavaScript snippet to make it cross-browser and which is simpler, lighter than the current polyfills out there.

First you'll need to add data-attributes in HTML & their respective CSS property:

HTML
```html
<img data-object-fit='cover' src='//picsum.photos/1200/600' />
<img data-object-fit='contain' src='//picsum.photos/1200/600' />
```

CSS
```css
[data-object-fit='cover'] {
  object-fit: cover
}

[data-object-fit='contain'] {
  object-fit: contain
}
```


Then with less than 10 lines of JavaScript code, you'll have a cross-browser solution.

ES6 version
```js
if ('objectFit' in document.documentElement.style === false) {
    document.addEventListener('DOMContentLoaded', () => {
        document.querySelectorAll('img[data-object-fit]').forEach(image => {
            (image.runtimeStyle || image.style).background = `url("${image.src}") no-repeat 50%/${image.currentStyle ? image.currentStyle['object-fit'] : image.getAttribute('data-object-fit')}`
            image.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${image.width}' height='${image.height}'%3E%3C/svg%3E`
        })
    })
}
```
Or if you don't use a transpiler, here's the transpiled version for ES5

```js
if ('objectFit' in document.documentElement.style === false) {
  document.addEventListener('DOMContentLoaded', function () {
    Array.prototype.forEach.call(document.querySelectorAll('img[data-object-fit]'), function (image) {
      (image.runtimeStyle || image.style).background = "url(\"".concat(image.src, "\") no-repeat 50%/").concat(image.currentStyle ? image.currentStyle['object-fit'] : image.getAttribute('data-object-fit'));
      image.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='".concat(image.width, "' height='").concat(image.height, "'%3E%3C/svg%3E");
    });
  });
}
```

### What does this code do?

It detects if the `object-fit` is not supported in the browser, if so, then replace the `img` for a `svg`

For the supported browsers it will run the CSS properties through the data-attributes
Adding Visual Studio Code debugging to Node JS projects
Tags: node, vscode, tutorial
Published: 2020-11-01 23:09:30

---
title: Adding Visual Studio Code debugging to Node JS projects
published: true
tags: #node #vscode #tutorial
canonical_url: https://darraghoriordan.com/2020/10/31/vscode-debugging-with-node-js-app/
---

I find it useful to be able to debug my node application in vscode. It saves you having to write `console.log` statements to figure out why something isn’t working. 

I sometimes use the debugger to check my tests too. 

Nothing new here for many people but this is the configuration I use to setup debugging for the main application and the tests.

<!-- end excerpt -->
## Launch.json

For vscode you need to set the various launch configurations for your project. These go in a file `.vscode/launch.json` . You might have to create this file.

## Debugging a node application using VSCode

In your package.json startup you need to add the inspector port

```
npx ts-node-dev --inspect=0.0.0.0:29033
```

Then in the startup script you can ask vscode to attach to that port when debugging

```
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach to Application",
            "port": 29033,
            "type": "node",
            "request": "attach",
            "skipFiles": ["<node_internals>/**"],
            "protocol": "inspector"
        }
        ]
  }
```

## Debugging Jest tests using VSCode

You need to add the launch scripts and tell them

1. Where your jest is located (usually in the node\_modules folder
2. Where your jest config is located (usually in the main application root folder)

```
{
    "version": "0.2.0",
    "configurations": [
  {
            "type": "node",
            "request": "launch",
            "name": "Jest All",
            "program": "${workspaceFolder}/node_modules/.bin/jest",
            "args": ["--runInBand"],
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen",
            "disableOptimisticBPs": true,
            "windows": {
                "program": "${workspaceFolder}/node_modules/jest/bin/jest"
            }
        },
        {
            "type": "node",
            "request": "launch",
            "name": "Jest Current File",
            "program": "${workspaceFolder}/node_modules/.bin/jest",
            "args": [
                "${fileBasenameNoExtension}",
                "--config",
                "jest.config.js"
            ],
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen",
            "disableOptimisticBPs": true,
            "windows": {
                "program": "${workspaceFolder}/node_modules/jest/bin/jest"
            }
        }
]}
```

To use the debugger you open the debugging menu

`SHIFT - COMMAND - D`

and select the launch configuration. Then click the green play button.

If you want to debug a jest test, you should have that file open in the editor when you click play.
Enhancing archives navigation, step 2
Published: 2023-06-15 14:28:59

---
title: Enhancing archives navigation, step 2
published: true
date: 2020-11-01 22:55:51 UTC
tags: 
canonical_url: https://nicolas-hoizey.com/articles/2020/11/02/enhancing-archives-navigation-step-2/
---

In my previous article [Enhancing archives navigation, step 1](https://nicolas-hoizey.com/articles/2020/10/26/enhancing-archives-navigation-step-1/), I promised further archives navigation enhancements. Here they are!

Remember how UX of navigation in archives by year and month where already enhanced with [a single Eleventy layout](https://github.com/nhoizey/nicolas-hoizey.com/blob/master/src/_layouts/archives.njk):

![User friendly months navigation with Eleventy only](https://nicolas-hoizey.com/articles/2020/10/26/enhancing-archives-navigation-step-1/months-pagination-after.jpg)

This new awesome layout made my build time go from 40 seconds to 300 seconds, a 650 % increase, not so awesome… 😅

Now, imagine you want to see content from two — or more — types ([articles and notes](https://nicolas-hoizey.com/archives/?type=articles&type=notes) for example), or mix not only one type and a date, but also the language, or tags, even multiple of them.

Generating all possible filter combination as static pages with one single Eleventy build would probably take more than one hour. I obviously don't want that, even if this would provide users with an even better UX.

Time to [enhance the already nice server-side rendering with awesome client-side features](https://nicolas-hoizey.com/articles/2020/05/05/jamstack-is-fast-only-if-you-make-it-so/)!

Here's what is now available for navigating the archives, [if you activated JavaScript](https://kryogenix.org/code/browser/everyonehasjs.html) in your browser:

![Navigating the archives with search and facets](https://nicolas-hoizey.com/articles/2020/11/02/enhancing-archives-navigation-step-2/archives-live-search-with-algolia.jpg)

There is a search input field, to search for any content, with live "as you type" results, and live updated filtering facets. 🤯

If you search for something specific, the results highlight why they're here in the list:

![Highlighted results](https://nicolas-hoizey.com/articles/2020/11/02/enhancing-archives-navigation-step-2/archives-live-search-with-algolia-highlight.jpg)

![Algolia logo](https://nicolas-hoizey.com/assets/logos/algolia.png)  
All of this would not be possible without [Algolia](https://nicolas-hoizey.com/tags/algolia/), the awesome search service I've been using for multiple years.

I inject all my contents in an Algolia index, and a single JavaScript script uses [Algolia's InstantSearch.js UI library](https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/js/) to build the user interface and synchronize the search term and facets values to the URL (and back).

What I really like here is that this is not the only way to browse the archives, it is "only" a (great) enhancement of what's available to anyone with the server-side rendering.

I hope you'll enjoy this new feature!
Code comprehension
Tags: computerscience, codereadability, readability, programming
Published: 2020-11-02 09:52:11

---
title: Code comprehension
published: true
date: 2020-11-01 22:39:47 UTC
tags: computerscience,codereadability,readability,programming
canonical_url: https://stereobooster.com/posts/code-comprehension/
series: "Code Comprehension"
---

I have thought that the following characteristics are important for code quality (ordered by priority):

- readability
- correctness
- performance

Note: Yes readability is more important because it would be easy to fix readable code, but it would be harder to change unreadable code.

Recently I realized that code readability is a too narrow term here - code comprehensibility is the better one. Reading is only one of the activities required for understanding the code. Code comprehension includes: reading, navigating in code, debugging, experimenting with code, etc.

If we would think more about code comprehension, we could write more understandable code and build tools for better code comprehension.

Typical questions (which drive the need for code comprehension) are:

- What this code does?
- Why this code doesn't work as expected?
- Where is the code responsible for this behavior or visual appearance?

There are scientific researches on the subject. A lot of them are focused on cognitive processes and use techniques, like MRI and eye-tracking, for example:

[Software Comprehension – A Review & Research Direction; Michael P. O’Brien](https://www.st.cs.uni-saarland.de/edu/empirical-se/2006/PDFs/brien03.pdf):

> Comprehending computer programs is one of the core software engineering activities. Software comprehension is required when a programmer maintains, reuses, migrates, reengineers, or enhances software systems. Due to this, a large amount of research has been carried out, in an attempt to guide and support software engineers in this process.

[Program Comprehension: Past, Present, and Future; Janet Siegmund](https://www.infosun.fim.uni-passau.de/publications/docs/FoSE16.pdf)

> Abstract—Program comprehension is the main activity of software developers. Although there has been substantial research to support the programmer, the high amount of time developers need to understand source code remained constant over thirty years

[brains-on-code](https://brains-on-code.github.io/)

> We conduct behavioral studies and also basic research on program comprehension, including eye-tracking and fMRI studies.

I want to write a series of articles on code comprehension and corresponding tools.

**What code comprehension tools do you use?**
3/100 days of code 
Tags: styledcomponents, react, gatsby, 100daysofcode
Published: 2020-11-01 22:15:11

---
title: 3/100 days of code 
published: true
description: styling components
tags: styledcomponents, react, Gatsby, #100daysofcode 
cover_image: https://res.cloudinary.com/studiobanauso/image/upload/v1604441162/100daysofcode/100days_03.jpg
---
Today was more productive. 

Set up the initial styling of the navigation bar, which is something that I still am hesitant about to implement from scratch. The approach is to use a list and then style it horizontally with css grid. 

I really like css grid. 

Then got started with css-in-JS, which I know is a controversial thing and I am not yet totally convinced, but I decided to go with it for this project. So I can say that I tried them and I guess it doesn’t hurt to know my way around them in case I come across another codebase that uses them.
Fuentes increíbles para tu editor
Tags: discuss, watercooler
Published: 2020-11-01 22:12:50

Mostremos esas increíbles fuentes.

A mí personalmente me fascina "Operator Mono" y es mí favorita pero hay muchas fuentes increíbles. 
Otras fuentes podrían ser:
* Dank Mono
* JetBrains Mono

Puedes encontrar más fuentes en [DevFonts](https://devfonts.gafi.dev), Algunas fuentes son de pago y otras gratis! Pero todas son geniales. 

¡¡¡¡Muestra la tuya!!!! 👇🏻
2/100 days of code
Tags: react, gatsby, 100daysofcode
Published: 2020-11-01 22:07:54

---
title: 2/100 days of code
published: true
description: implementing the navigation component
tags: react, Gatsby, #100daysofcode
cover_image: https://res.cloudinary.com/studiobanauso/image/upload/v1604441169/100daysofcode/100days_02.jpg
---
So, just the second day in and it already becomes apparent, what a challenge this will be to daily work on a personal project. 

It was Halloween today and since we’re in lockdown mode here in Hamburg, there was no going door to door for the kids, but they kept the spirit up and we just went knocking doors inside the house. 
So it was a long day and then I still wanted to get a run in tonight so after the kitchen was done and the clock was showing 1:15 a.m. I still had to sit down to write some code. 

Almost didn’t make it, but I did. 

Going by the course, I was implementing the navigation in the page. After going through the various possibilities to do this, we set the basic layout of the page in a gatsby-browser.js file which offers to wrap everything rendered, i.e. a first level wrapper.