teleren/devto huggingface dataset:
Some idle (and probably cynical) thoughts about silos, people and power.
Tags: watercooler, career, leadership
Published: 2021-03-15 01:11:11

(unedited thoughts on a Sunday night staring down the barrel of another upcoming Monday. Not sure where I'm going with any of this.)

I read a tweet earlier. 

!["And I just want to throw into discussion, that there is a politics-layer to silos“ in hierarchy. In this sense, silos are a way of balancing power in an org." -@oliverschwarz](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/37gq1n18bdhl1upiqxfc.png)

I've long been skeptical of discussions and modes of thinking that promote "breaking down silos", partially because lived experience has shown me the people who want the silos broken down often don't know what to do with the mess of grains and wheat that now lay on the field before them--beyond ordering the salaried digital farmhands to clean up their mess.

Whereas the 'rank and file' prefer the silos. Arguably, for them it means predictability, reliability and continuity. I haven't yet figured out what's in it for the people with such destructive tendencies. 

Said another way: breaking down silos probably isn't the *worst* thing, but it's probably not as great as it is held up to be either. At least I haven't been convinced that it is. Yet.

Greg Satell's [admonition](https://www.inc.com/greg-satell/breaking-down-silos-is-a-myth-do-this-instead.html) to instead build networks logically resonated with me when I first read it many years ago. It made practical sense-to me an engineering leader who probably spends too much time reading Sartre and not enough O'Riley; the challenges to delivery shouldn't be so empirically focused with endless opinions on how to deconstruct functional establishments of work-but instead how to maximize the throughput of productivity and output from those establishments. Yet Satell's conceit, as much as it resonated with me always felt a bit incomplete. Never could figure out why.

Oliver's commentary may have given me that answer. Silos represent an inherent, almost [Conwayrian](https://en.wikipedia.org/wiki/Conway%27s_law) simulacrum of organizational power. Power to do what? Many things, I suppose. Those reasons are worth looking for. This will probably be the next discovery after digging further into this axiom, but I think that power is important. Worth preserving in some part, reforming in others, but made more wholly democratic in favor of the operators and engineers and...you know, *people doing the work*.

This probably takes some power away from me as a leader. 

I think I'm fine with that though.
A web game built with Vue.js, Airtable, and Netlify. 
Tags: vue, css, game, airtable
Published: 2021-03-15 01:05:09

---
title: A web game built with Vue.js, Airtable, and Netlify. 
published: true
description: Publicly launching a free side project.
tags: vue, css, game, airtable
//cover_image: https://direct_url_to_image.jpg
---

Hey devs! 

I recently created this game called https://www.poppalock.xyz after being inspired by a visit to Dave & Busters. They had an arcade game called "Pop the Lock" which also happened to remind me of an old Chuck E Cheese game where a light goes around in a circle. 

I reverse engineered the core game mechanic and built it using Vue.js and just HTML/CSS. I used the Airtable API to store data for the leaderboard, so there is no backend for this web game. 

If enough people are interested I can make the github repo public, and perhaps create a tutorial on how I made this.

Best,
Andrew

P.S.
You can find more stuff I've built on my website
https://www.akinhwan.com
I also write a weekly newsletter curating 1 song, 1 podcast, 1 link, and 1 book.
How to add a link to the image in HTML
Tags: html, link, image, howto
Published: 2021-03-15 00:18:49

Do you ever wondering how to add a link to your already 
HTML image tag ??

**Awesome, let us get into that** 🔥

---

The following example is the usual stuff we do to display image in `<img>` tag.
```html
<img src="https://www.thecoderpedia.com/wp-content/uploads/2020/06/Programming-Memes-Programmer-while-sleeping.jpg" 
     alt="cannot sleep">
```

<img src="https://www.thecoderpedia.com/wp-content/uploads/2020/06/Programming-Memes-Programmer-while-sleeping.jpg">

When you click the image above, it will zoom in, instead of open the image link. This is the expected result 😅.

## But how to add a link to the image ?? 

Easy peasy 😉

This example builds upon the previous one, showing how to **turn the image into a link**. To do so, nest the `<img>` tag inside the `<a>`. 
You should make the alternative text describe the resource the link is pointing to as if you were using a text link instead.

```html
<a href="https://www.thecoderpedia.com/blog/programming-memes/">
  <img src="https://www.thecoderpedia.com/wp-content/uploads/2020/06/Programming-Memes-Programmer-while-sleeping.jpg"
       alt="Visit Meme site">
</a>
```
<a href="https://www.thecoderpedia.com/blog/programming-memes/">
  <img src="https://www.thecoderpedia.com/wp-content/uploads/2020/06/Programming-Memes-Programmer-while-sleeping.jpg">
</a>

Try to click the above image and you will direct to the source link.

The End ;p

---
resources;
[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#image_link)
Using emotionJs with Vite
Tags: vite, emotionjs, react
Published: 2021-03-15 00:02:58

> Disclaimer: the post is now quite old. Vite has a dedicated react plugin which you can easily configure now to get the intended outcome. The comment section has better snippets to help you :)

[**Vite**](https://vitejs.dev/) is the next cool thing everyone's talking about. For the uninitiated, it's a tool that provides a dev server with a blazingly fast refresh(HMR) speed and comes loaded with the Rollup module bundler for generating highly optimized builds.

{% post https://dev.to/yyx990803/announcing-vite-2-0-2f0a %}



Most of you would already be familiar with [**EmotionJs**](https://github.com/emotion-js/emotion) - a very popular CSS-in-JS library. It comes with a react flavor which provides a `css` prop that greatly enhances the overall developer experience of writing styles in your react component. 

![emotion's css prop official doc example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gyftj2lb4pyf39btuqqs.png)
 _An example from the official [docs](https://emotion.sh/docs/css-prop)_ 

However, every time we need to use this very convenient CSS prop, we would need to add emotion's custom JSX pragma on the very top of our `jsx` component.  

```
/** @jsx jsx */
import { jsx } from '@emotion/react'
```

If you are planning to give Vite a shot - The good news is that you don't need to do any additional tinkering. Emotion will work without any break when using the above approach. But, there is a far better way, with which we can simply avoid importing this chunk of import in all our JSX files. 

To do that - you'd need to update the `esbuild` options in your project's `vite.config` file.



```
import { defineConfig } from 'vite';


// https://vitejs.dev/config/

export default defineConfig({
   plugins: [...],
   esbuild: {
     jsxFactory: `jsx`,
     jsxInject: `import { jsx } from '@emotion/react'`,
   }
   ...
});

```

Vite uses [_esbuild_](https://esbuild.github.io/) under the hood for compilation. 

- `jsxInject` simply set esbuild's `--inject` transformation option and auto imports the provided module in all `.jsx` files.

- `jsxFactory` overrides the default `React.creatElement` with emotion`s `jsx` factory function.

And, that's it. You can now use emotion in all your jsx components by default. 

_If you want you can also import the `css` function along with `jsx` to avoid it importing later in your components to construct serialized style objects._

    jsxInject: `import {jsx, css} from '@emotion/react'`
When you can skip the version number
Tags: version, release, devops
Published: 2021-03-16 13:29:03

---
title: When you can skip the version number
published: true
date: 2021-03-15 00:00:00 UTC
tags: version, release, devops
canonical_url: https://jhall.io/archive/2021/03/15/when-you-can-skip-the-version-number/
---

Yesterday I talked about [three reasons we use versions](https://jhall.io/archive/2021/03/14/why-do-we-have-version-numbers) in our software.

Now I’m going to try to convince you that you may not even need version numbers at all! Or more accurately, that you can just use your version control commit ID as a version number.

Why would you even _want_ this? Well, simply put: Managing version numbers can be a pain. In the simplest case, a version number usually corresponds to a tag in a git repository. That tag has to be created and managed somehow.

In more complicated cases, a version may need to live in actual files in a repository. A simple example can be the `package.json` file found in most JavaScript packages. Updating this automatically is a major pain, as it requires actually adding commits to the repository, which is widely considered bad practice.

So when can you skip this toil? There are basically two rules I use:

1. **The software represents some sort of end-product.** That is to say, it’s not a shared-library, and doesn’t need to be a versioned dependency of any other software.

    A monolithic web app, a single microservice, or a mobile/desktop app are typical examples of this.

2. **No end-user ever needs to read the version number.** By end user, I mean someone not working at your company.

    Web apps and microservices are good examples. Mobile and desktop apps probably are not.

If your project meets these rules, you have a good candidate for simply using the VCS commit ID for your versions. This is because the only thing you need a version number for is to identify which build of your software produced some behavior (probably a bug, or an error log). For this, `version dfc8a9a3` is just as good as `version 1.3.6`.

Of course, some build systems require a version of a specific format. For example, `package.json`, used in JavaScript projects, uses [semantic versioning](https://docs.npmjs.com/about-semantic-versioning). But if no other software depends on your package as a dependency, nothing will ever actually care about this version number. Set it to some token value, like `1.0.0`, then ignore it!
GitHub rebase and squash considered harmful
Published: 2021-04-29 16:02:28

---
title: GitHub rebase and squash considered harmful
published: true
date: 2021-03-15 00:00:00 UTC
tags: 
canonical_url: https://timwise.co.uk/2021/03/15/github-rebase-and-squash-considered-harmful/
---

## Rebase and Squash: bad

(Not to be confused with local `git rebase` which is a whole other flamewar.)

Personally I dislike the “ **rebase** ” and “ **squash** ” buttons on GitHub because:

- GitHub generates brand new commits at the point of merge to mainline with no chance to review first.
- The generated commits lose the true commit metadata generated locally (authorship, timestamps, sha-1).
- They alter your original commit message to retro-fit PR numbers.
- There is no record of which commit you based your branch on, so if there’s a new incompatibility because `main` has moved on you look like you just can’t code.

## GitHub flow: good

My preferred workflow is to use the normal “merge” button every time. This is sometimes know as “[Git Flow](https://guides.github.com/introduction/flow/)”.

In my view you should generate your commits, sha-1 and all, exactly as they will be merged into `main`, and then as a separate merge commit those should be combined into `main`.

To avoid many “tramlines” do local rebases to avoid PR branches being based on very outdated `main`.

- This retains the commit exactly as you crafted it locally.
- It calls out the difference between you writing your commit and deciding it can go into `main`.
- It retains the information about which commit you based your branch on.

There’s something to be said for being able to do a `git log --first-parent origin/main` and get a consistent list of merged PR branches. It’s really quite readbale compared to a mishmash of the different styles of merge to `main`.

You can configure GitHub to disallow the other options if your team are on-board with the idea.

You could argue that single commit PRs are a lot of overhead for something trivial, but equally having to decide each time results in more time worrying about whether something justifies the special treatment of ending up directly on main (in GitHub’s modified form), and getting it wrong sometimes.

I’m aware there are counter-arguments, but in my experience on many teams this seems to end up being the cleanest balance of trade-offs. If you are an individual developer on your own project then pure mainline development can make more sense, though even then thinking of feature branches and having them explicitly merged where appropriate can neatly group related commits.
How to check if a variable is of type object in JavaScript?
Tags: javascript
Published: 2021-03-15 00:00:00

---
  title: How to check if a variable is of type object in JavaScript?
  published: true
  tags: JavaScript
  date: Mon Mar 15 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/check-if-variable-is-an-object-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-2515307794b21bde88bef6020758d881.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/check-if-variable-is-an-object-javascript)
  
To check if a variable is an `object`, you can use the `typeof` operator followed by the variable and we also need to check if the variable is not `null` value because `null` is of type `object` in JavaScript.

```js
// Check if variable is an object
const variable = {
  name: "John Doe",
  age: 23,
};

typeof variable === "object" && variable !== null; // true

/*
 Boolean true means the variable is of object type
*/
```

- If the above condition returns `true`, then the `variable` is of type `object`.
- This is a better way to check if a variable is of type `object`.

See the above code live in [JSBin](https://jsbin.com/viworelavi/3/edit?js,console).

### Feel free to share if you found this useful 😃.

---
Install nvm and Node.js for macOS 11
Tags: node, npm, tutorial, programming
Published: 2021-03-22 11:04:42

---
title: Install nvm and Node.js for macOS 11
published: true
date: 2021-03-15 00:00:00 UTC
tags: node, npm, tutorial, programming
canonical_url: https://www.goingserverless.com/blog/install-nvm-and-node-for-macos-11
---

The [Node Version Manager](https://github.com/nvm-sh/nvm) is an easy to way to run multiple versions of Node. Having upgraded to macOS 11 recently I found that I had accidentally installed a Node using Homebrew and I needed to get nvm working again.

The process was fairly simple.

Uninstall the Homebrew Node:

```sh
brew uninstall node
```

Try to install the Homebrew nvm:

```sh
brew install nvm
```

Ok, this didn't work so well:

```
######################################################################## 100.0%
Error: Your Command Line Tools (CLT) does not support macOS 11.
It is either outdated or was modified.
Please update your Command Line Tools (CLT) or delete it if no updates are available.
Update them from Software Update in System Preferences or run:
  softwareupdate --all --install --force

If that doesn't show you any updates, run:
  sudo rm -rf /Library/Developer/CommandLineTools
  sudo xcode-select --install

Alternatively, manually download them from:
  https://developer.apple.com/download/more/.

Error: An exception occurred within a child process:
  SystemExit: exit
```

I knew I was running the latest version of everything so I jumped straight to:

```sh
sudo rm -rf /Library/Developer/CommandLineTools
sudo xcode-select --install
```

With that done I could finally install nvm:

```sh
brew install nvm
```

I then cleaned out my old `.nvm` folder and created a new one:

```sh
rm -rf ~/.nvm && mkdir ~/.nvm
```

As I switched from bash to zsh when upgrading to macOS 11 I had to add some lines to my `~/.zshrc`:

```sh
export NVM_DIR="$HOME/.nvm"
[-s "/usr/local/opt/nvm/nvm.sh"] && . "/usr/local/opt/nvm/nvm.sh" # This loads nvm
[-s "/usr/local/opt/nvm/etc/bash_completion.d/nvm"] && . "/usr/local/opt/nvm/etc/bash_completion.d/nvm" # This loads nvm bash_completion
```

Before continuing I ran the `source` command but you could simply restart your shell:

```sh
source ~/.zshrc
```

It was now time to install the version of Node I required:

```sh
nvm install v14.16.0
```

Finally, check that Node is installed correctly.

```sh
node --version
```
Primeira semana - Ignite
Tags: braziliandevs, beginners, codenewbie, neverstoplearning
Published: 2021-03-14 23:33:19

Enquanto tento absorver os conselhos valiosos que escutei hoje na mentoria com [Robson Marques](https://www.linkedin.com/in/robsonmarquescode/), CEO da [Rocketseat](https://www.linkedin.com/school/rocketseat/), resolvi documentar minha experiência durante a primeira semana do Ignite.

Para contexto, estou estudando programação há 6 meses, venho da área de humanas e mesmo na minha vida pessoal, me sentia muito distante da área de tecnologia. Posso dizer que a chave virou quando entendi que as barreiras entre essas áreas estão desmoronando com velocidade a cada dia. Foi, e ainda é, um processo árduo me sentir completamente parte dessa comunidade que no meu imaginário era tão distante. Com 27 anos e estudando por conta própria, não é como se eu estivesse em uma turma de calouros na faculdade. Imagino que a sensação esteja mais próxima de saltar de paraquedas em um lugar desconhecido.

Com a missão de entender como esse ecossistema funciona e dar um passo a mais nos meus estudos, decidi me inscrever na trilha ReactJS do Ignite, um treinamento com foco em aceleração e alinhamento ao mercado de trabalho. Após uma semana especialmente conturbada na minha vida pessoal, posso sentar com calma e refletir sobre as horas de estudo que foram, inclusive, reconfortantes. 

Logo soube que tinha tomado a decisão certa ao ver que no primeiro capítulo o conteúdo atendia minhas expectativas. Eu estava em um momento onde sentia saber algumas coisas técnicas e práticas, mas precisava de mais desafios para ver crescimento. Colocar as mãos em ferramentas que me ajudam a mexer com tecnologias que não me assustam mais era o que eu precisava. 

Acredito que o treinamento ser dividido em capítulos e cada capítulo ser dividido em aulas que vão direto ao ponto da forma mais didática possível, é o que deixa a nossa organização mais fácil e o foco menos perdido. Ainda sinto uma certa timidez quando tenho alguma interação na comunidade no Discord, mas posso confirmar que assistindo aos vídeos do treinamento me senti uma colega de trabalho. 

Os vídeos, o desafio e especialmente a mentoria com o CEO me fizeram perceber, por fim, que estou no lugar certo, pelo menos por enquanto. Tenho muito a crescer, mas os próximos passos mais me animam do que assustam. Me sinto mais tranquila em ter todo o suporte dessa equipe e conhecer pessoas que estão na mesma estrada tentando alcançar a milha extra. 

Como um desafio pessoal, tentarei escrever sobre conteúdos mais técnicos durante a próxima semana.
How to Communicate with an Arduino from Docker
Tags: docker, arduino, tutorial, sideprojects
Published: 2021-03-14 23:29:58

Something I learned this weekend. Let's say you have an Arduino, and you want to communicate with it via serial from a Linux device, like a Jetson Nano. But not from that device's host operating system. No, that'd be too easy.

Instead, you want to talk with this Arduino from an application running in an unprivileged Docker container. How would you do that?

# How To Bring an Arduino inside Docker

It turns out it's actually quite simple! When connected to a Linux device via a USB cable, most Arduino's show up as a device in the form `/dev/ttyAMCx` where x is replaced with an integer counter, starting from 0. So the first Arduino you connect is `/dev/ttyAMC0`, the second is `/dev/ttyAMC1` and so on.

To access that from Docker, all you need is the docker `--device` flag. Include it in the docker run command as `docker run <other options> --device="/dev/ttyACM0" <more options, image name, etc>` and you're all set. You can access the Arduino in the container at `/dev/ttyACMx` just like you would on the host, say with the `pyserial` package in Python.

# Words of Warning

Couple quick notes:

1. You need to have the device connected before you launch your docker container with that flag. Otherwise, you'll get an error.
1. You may run into issues if the device is disconnected and reconnected while the container is running.
1. Serial over wires (for instance, with jumper cables connecting pins on the arduino to GPIO on a Jetson or Raspberry Pi) rather than via the USB port will probably have a different device file handle, but will function the same way (pass the device file handle into the container with `--devices`.
Design Patterns: Singleton
Tags: webdev, beginners, design, codenewbie
Published: 2021-03-14 23:16:27

This week I came across a Youtube video discussing the need to understand design patterns as a developer. After learning the syntax of a language, then wrapping your head around data structures and algorithms, You should next learn about design patterns to be a really effective developer. 

### What are Design Patterns? 

Design patterns are common design structures or templates that make the object-orientated design more efficient. Learning design patterns make it easy to recognize and apply these useful techniques to quickly solve common recurring problems. 

### Importance & Types

These patterns can be helpful in making you more productive by streamlining solutions to problems that have been solved and can help produce known optimized code solutions. 

There are three types of design pattern categories that include Creational, Structural, Behavioral design patterns. There are at least 23 different design patterns and they could be explained in-depth in this highly popular [design pattern book](https://amzn.to/3rOuua3). 

### Singleton Pattern 

The Singleton design pattern is a creational design pattern type that is useful to control the creation process and restrict the instantiation to only one object. 

This pattern is great for speeding up the production process and being a single source of truth or state changes. Jquery is a real-world use-case of this design pattern. 

```javascript 
var singletonPattern = (function() {
  var instance;
  function init() {
    // Singleton
    function privateMethod() {
      console.log('privateMethod');
    }
    var privateVariable = 'this is private variable';
    var privateRandomNumber = Math.random();
    return {
      publicMethod: function() {
        console.log('publicMethod');
      },
      publicProperty: 'this is public property',
      getRandomNumber: function() {
        return privateRandomNumber;
      }
    };
  }

  return {
    // Get the singleton instance if one exists
    // or create if it doesn't
    getInstance: function() {
      if (!instance) {
        instance = init();
      }
      return instance;
    }
  };
})();

// Usage:
var single = singletonPattern.getInstance();
var single2 = singletonPattern.getInstance();
console.log(single === single2) // true 
```

### Let's chat about Design Patterns
This should give you more understanding of design patterns and how to structure a Singleton Pattern. If you enjoyed this post feel free to leave a comment about your thoughts and experiences working with design patterns.

Happy Coding,
Terry Threatt