teleren/devto huggingface dataset:
A guide for Skeletons in React.
Tags: react, composition, skeletons
Published: 2020-08-16 05:32:39

_Hi there developers! In this article, I will be sharing my experience in implementing skeletons components. Why using skeletons on loading states, how to implement them, and when and how to use them. Let's go._

##Why

Skeletons or placeholders are very powerful for loading states, it's proven that reduce the user anxiety during the application loading process, and that is because it shows to the user the upcoming content structure(at least is intended), also gives the idea that the app is working, it is almost like "We have everything ready but the text and the images just wait a sec", so the user feels the app is about to show up the final content but structurally we already delivered the UI.

##Implementation

In short, the easiest way to implement and skeleton screen is by using an SVG (using Figma for example) and add some animations to it, but if you have the time and the skills, you can create a responsive as a JSX component (using tailwindcss of course ) :)

##HOC, In-component conditional rendering or composition

Well, it depends, I think HOC are meant for auth wrapper nowadays, since functional components and hooks solved many of the problems HOC use to solve in the past, with that said if you want to keep your JSX cleaner as possible, the way to go is... Composition of course. Let's take a look at it.

Let's create a simple skeleton component that just returns "loading..." when the "on" prop is true

```javascript
function Skeletons({children, on}) {
  return on ? <p>Loading...</p> : <>{children}</>
}
```

In your component...

```javascript
import Skeletons from 'components/skeletons'

export default function App() {
  // useFetch is a custom hooks for data fetching
  const [data, loading, error] = useFetch(URL)
  return (
    <Skeletons on={loading}>
      <div className="App">
        {data.map(data => 
          <div key={data.id}>{data.name}</div>
        )}
      </div>
    </Skeletons>
  );
}
```

The above method is far better than creating the Skeleton component with no render condition on it.

```javascript
function Skeletons({children}) {
  return <p>Loading...</p>
}
```

An then handle the conditional rendering on every single component to show the Skeletons ...

```javascript
import Skeletons from 'components/skeletons'

export default function App() {
  // useFetch is a custom hooks for data fetching
  const [data, loading, error] = useFetch(URL)

  if(loading) return <Skeletons />
  return (
    <Skeletons on={loading}>
      <div className="App">
        {data.map(data => 
          <div key={data.id}>{data.name}</div>
        )}
      </div>
    </Skeletons>
  );
}
```

So compositions wins this fight, and if you ask me is the best way to implement Skeletons screens for your components loading states, it's easy to scalable and reusable.

So what's yours?
How to convert a simple blog from Gatsby to Hugo
Tags: hugo, gatsby
Published: 2020-08-16 05:13:28

---
title: How to convert a simple blog from Gatsby to Hugo
published: true
description: Changing the static site generator for my hobby blog to Hugo.
tags: #hugo, #gatsby
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/sezoo4mryy10m0j7c754.jpg
---

I updated my hobby blog to Hugo today. [Hugo](https://gohugo.io/) is a static site generator written in [Go](https://golang.org/) and it is very fast. I created that blog with Gatsby several years ago and it needed a refresh.

Switching from Gatsby to Hugo is not bad. Both use the same style of front matter and Markdown so I didn't have rewrite everything. As they are written in different programming languages, I could work on converting everything while leaving Gatsby alone.

## Adding Hugo

1. Backup everything or create a new branch.
2. Rename the `content` folder to `content1`.
3. Run the following command to generate a new Hugo site in the existing web site folder (it will not work if a `content` folder already exists).
    ```bash
    hugo new site . --force
    ```
4. Add a theme, I used [Hermit](https://themes.gohugo.io/hermit/)
    ```bash
    git clone https://github.com/Track3/hermit.git themes/hermit
    ```
5. Add the theme to the site config.
    ```bash
    echo 'theme = "hermit"' >> config.toml
    ```
6. Start the Hugo server.
    ```bash
    hugo server -D
    ```
7. Start moving content.

## Moving content

In Gatsby, all my blog post files were named like the following: `content\blog\postname\index.md`. In Hugo, the `postname` folder was not needed so I began the slog of moving and renaming my files.

1. Create the folder `posts` under `content`.
2. Copy a blog post from `content1` to the new `posts` folder.
3. Rename `index.html` to the desired slug name for the post.
4. Repeat.

## Writing new content

I was not able to move my About and Equipment pages, as they were written in JavaScript. I had to write new Markdown files for them but writing two pages in Markdown is much better than rewriting a whole site.

## Gotchas

I had to also move my static content from `src` folder to a new top level folder called `static`.

As my blog content had a lot of embedded tweets, I had to change all of the references over to a [shortcode](https://gohugo.io/content-management/shortcodes/).

## Deleting Gatsby

Once I was happy that all my content was moved over and appearing in Hugo, I began deleting all the Gatsby files.

I removed:
- gatsby-browser.js
- gatsby-config.js
- gatsby-node.js
- gatsby-ssr.js
- package-lock.json
- package.json
- src/
- yarn.lock
- content1/

Converting my blog was a bit tedious, but I think it was worth it. I was able to correct spelling mistakes that had been up for years and add tags to the posts.

It only took 8 hours, 20 commits, and 7 builds.
CI/CD Workflows for open source NPM packages
Tags: actionshackathon
Published: 2020-08-16 05:02:53

[Instructions]: # (To submit to the GitHub Actions x DEV Hackathon, please fill out all sections.)



### My Workflow
[Note]: # (Make sure to include the name of your GitHub Action and share where it's being used!)

I've created two workflows to manage an open source NPM package of mine.

### CI

This workflow runs tests and creates a test coverage report when pushing code or creating/updating pull requests.

### CD

This workflow publishes a package to NPM for you. The cool thing is that all you have to do is create a release on GitHub.

It updates the version in package.json for you automatically. The workflow also let's you publish multiple versions (Say your project is on version 2 but you still want the possibility to publish patches to version 1).

### Submission Category: 

[Note]: # (Maintainer Must-Haves, DIY Deployments, Interesting IoT, Phone Friendly, or Wacky Wildcards)

DIY Deployments

### Yaml File or Link to Code

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github link_to_your_repo %}` to share a GitHub repository)

{% github https://github.com/MZanggl/flooent %}


### Additional Resources / Info

I've posted three articles describing the set up and what I learned along the way:

- [Setting up CI](https://dev.to/michi/github-actions-setting-up-ci-for-a-js-ts-node-project-145h)
- [Setting up test coverage](https://dev.to/michi/github-actions-setting-up-test-coverage-for-a-js-ts-node-project-1baf)
- [Setting up CD](https://dev.to/michi/publish-to-npm-automatically-with-github-actions-5805)
Great Examples of Issues and Pull Requests
Tags: discuss, opensource, beginners
Published: 2020-08-16 04:29:34

Hey awesome devs! For those of you that have been contributing to open source, do you have examples of issues or pull requests (PRs) that you thought really stood out? They can be yours or someone else's from any publicly accessible code base.

The goal is to provide a list of links to great examples that new and seasoned open source enthusiasts can look to for inspiration when creating their own issues and PRs.

For example, an issue that explained a problem really well with steps to reproduce it that also provided the environment it happened in.

Maybe a PR that was crafted really well that had before and after screenshots if it was UI related and/or steps to test it, there were unit tests etc.

Alright go!

<span>Photo by <a href="https://unsplash.com/@markuswinkler?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Markus Winkler</a> on <a href="https://unsplash.com/s/photos/open-source?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
From Developer to Design Director: 40 books
Tags: design, books, leadership, ux
Published: 2020-08-26 05:15:02

---
title: From Developer to Design Director: 40 books
published: true
date: 2020-08-16 04:00:00 UTC
tags: design,books,leadership,ux
canonical_url: https://alexanderoloo.com/blog/2020/08/16/from-developer-to-design-director.html
---

Circa 2016 I started my journey into the land of experience design. The journey from frontend dev to design director has been one heck of adventure. I’ve been extremely lucky to have had some excellent mentors, managers, and sponsors along the way. This post is not about them, but rather the books that accompanied me along the way.

It all started when Phil threw down the gauntlet.

![Phil recommending some books](https://alexanderoloo.com/images/blog/reading-list.png)

Needless to say, I didn’t finish them all in a year. And I still haven’t read them all. But it was the beginning of a great reading habit. If you’re not a reader (or listener) yet, I can’t recommend it enough. Here’s a list of the books I’ve read on my journey. They’ve all been been quite value in my career and development.

One last thing before the list. It’s a long list and will take you longer to read than you expect. You won’t remember everything you read. Some will be hard to read. You’ll get tired of reading. And feel like you’re not growing. All those things are okay. In the words of Josemaria Escriva:

> _“Don’t forget that, on earth, every big thing has had a small beginning. What is born big is monstrous and dies.”_

Happy reading. Happy learning.

### The List

#### Becoming a better leader

- The Managers Path
- The Five Dysfunctions of a team
- Creativity Inc
- The Three Signs of a Miserable Job
- The Hard Thing about Hard Things
- Multipliers
- What You Do Is Who You are
- Never Split the Difference
- Non-violent communication
- The Art of War
- What to do when you become the boss

#### Expanding your thinking

- Predictably Irrational
- Thinking in Bets
- Misbehaving
- Thinking, Fast and Slow
- Algorithms to Live By
- Interior Freedom
- Originals
- How to Get People to Do Stuff
- 12 Rules for Life

#### Supercharging your UX

- About Face
- How to make Sense of any mess
- Don’t Make me think
- Lean UX

#### Designing better products

- Zero to One
- Competing Against Luck
- Inspired
- Hooked: How to Build Habit forming products
- The Lean Startup
- Lean vs Agile vs Design Thinking
- The Service Startup
- The Lean enterprise

#### Shipping quality products and software

- The Phoenix Project
- The Unicorn Project
- Accelerate: Building and Scaling High Performing Teams.
- Making work Visible

#### Telling better stories

- Ted Talks
- Story
- Creating Character Arcs
- The Silmarillion

![Harley reading and drinking espresso](https://media.giphy.com/media/Wp0ZtQjgViqR2/giphy.gif)

_May your build always pass._

_Alex_
Functions In Javascript | Javascript Crash Course
Tags: tutorial, javascript, webdev, codenewbie
Published: 2020-08-16 03:21:36

Hey YOU!
In this video, we will be learning about function in Javascript. We will learn what functions really are and then we will learn to implement functions. If you have any problem and any question regarding the topic taught in the video then feel free to ask me in the comments below.

Connect With Me:
Youtube: <a href="https://www.youtube.com/c/ShubhamSauravYT" target="_blank" rel="noopener noreferrer">ShubhamSauravYT</a>.
Twitter: <a href="https://www.twitter.com/hiShubhamSaurav" target="_blank" rel="noopener noreferrer">@hiShubhamSaurav</a>
Instagram: <a href="https://www.instagram.com/hiShubhamSaurav" target="_blank" rel="noopener noreferrer">@hiShubhamSaurav</a>
Facebook: <a href="https://facebook.com/hiShubhamSaurav" target="_blank" rel="noopener noreferrer">@hiShubhamSaurav</a>
Testando do Forestry.io
Tags: blog, online, forestryio
Published: 2020-08-17 12:19:21

---
title: Testando do Forestry.io
published: true
date: 2020-08-16 03:00:00 UTC
tags: blog,online,forestryio
canonical_url: http://gabubellon.me//blog/testando-do-forestry.io
---

## Post pelo Forestry.io !

Esse é apenas um post teste para verificar se o Forestry.io está configurado corretamente

### O que é o Forestry.io ?

Forestry.io é um criador de site estáticos que se liga a um repositório git, permitindo que se tenha uma interface de escrita online e ainda tenha um controle de versão do seu site (e podendo gerenciar ele localmente se quiser).

Isso ajuda a pode criar textos e posts de qualquer navegados e ainda deixar ter um site customizável pelo git .

Vou montar um tutoria de como configurei o meu logo mais, por enquanto isso é um teste para ver como vai ficar as informações.
Defresh - Cut your site’s link load speed time in half with 1 <script> tag
Tags: javascript
Published: 2020-08-16 01:59:43

Project URL: https://defresh.js.org
Defresh is a site that me and @derder56 have created. It’s a free-to-use software that makes your link loading time way faster.

It does this by not reloading the page when you click on a link.

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

How was this done? With a combo of AJAX and the history API, called PJAX More info here 13.

We’d love your feedback!

Thanks,

@justcoding and @derder56
Demo app made with Vue, Quasar and AdonisJS
Tags: vue, quasar, adonisjs, node
Published: 2020-08-16 01:05:01

A simple contribution to the community's work in this Single Page Application using `Vue`, `Quasar` and `AdonisJS`.

Treatment of users, roles, permissions, authentication, CRUDs, downloads and server-side table processing.

Feel free to use this code as you wish. https://github.com/alainrc2005/adonisjs-quasar-red
Another one of brain pickings
Tags: javascript, html
Published: 2020-08-16 01:03:14

I am learning to create a 2D game on html game canvas and I reached to the point where I am able to get some motion from a few elements. Yay!
But now that I have that working, I was wondering if it will be possible to host the html file on a dedicated website with a button called "play" 
If a user find the button Nd clicks on it, he gets to another page on the browser to play this game. 
I have tried to upload the file but everytime I open it I can only see the code not it's execution. 

Thanks in advance for the suggestions! :)
World of WoqlCraft - Ep.20 new branch and copy over
Tags: python, database, query, data
Published: 2020-08-16 00:54:27

---
title: World of WoqlCraft - Ep.20 new branch and copy over
published: true
description: Today we will be using the Python client to create a new branch and copying data over. We will see how the `branch` and `checkout` methods can be used and how the `node` query can copy data across branches.
tags: python, database, query, data
---
Today we will be using the Python client to create a new branch and copying data over. We will see how the `branch` and `checkout` methods can be used and how the `node` query can copy data across branches.

Find the source code from our [tutorial repo](https://github.com/terminusdb/terminus-tutorials).

Join the TerminusDB community at [Discord](https://discord.gg/Gvdqw97)
Easy field masking in Swift
Tags: swift, ios, textfield, forms
Published: 2020-08-16 00:27:18

---
title: Easy field masking in Swift
published: true
description: 
tags: Swift, iOS, textfield, forms
---

When working with forms its is very likely that you will need to do field masking.

In this short article I want to present a small and flexible library called `Veil` that allows us to do this very easily.

Veil is a pure swift library that is available through Swift Package Manager, it does not depend on UIKit and instead
is a pure string processing utility, so use on any platform with UIKit or SwiftUI.

If you're a iOS developer its very likely that you might have stumbled with this problem and might have tried solving this by implementing UITextFieldDelegate
`shouldReplaceCharacters:in range` method. This is usually a painful experience as dealing with ranges is all around not that comfortable.

Veil offers a very simple solution to masking which does not require the developer to implement UITextFieldDelegate, instead can be easily
used with target action pattern.

## Examples

Referring the documentation of the official repository, we can see a common example of formatting date input
into `mm/yy`

```swift
let dateMask = Veil(pattern: "## / ##")
let result = dateMask.mask(input: "234")
// result = "23 / 4"
```

So first we need to supply some masking pattern, Veil uses a default configuration (which can be replaced)
where `#` represent digits while `*` any character. Anything else within the pattern will be
inserted automatically into the resulting string, so typing "234" will yield "23 / 4" (including spaces).

**Usage with UITextField**

```swift
let dateMask = Veil(pattern: "## / ##")

@objc func textDidChange(_ sender: UITextField) {
    guard let currentText = sender.text else  {
        return
    }

    sender.text = dateMask.mask(input: currentText, exhaustive: false)
}
```

## How it works

Internally Veil parses the pattern string into an array of tokens where a Token is

```swift
enum Token {
	case digit, any
	case symbol(Character)
}
```

So a pattern like "## / ##" will result in the array of tokens:

```swift
[.digit, .digit, .symbol(" "), .symbol("/"), .symbol(" "), .digit, .digit]
```

It will walk through input string matching against the token pattern until either is exhausted.
This also implies you get automatic input blocking.

I encourage everyone to give this a try, and let me know you're thoughts.

Thanks!
Closer to the one-step-deploy
Tags: showdev, productivity
Published: 2020-08-16 00:23:42

---
title: Closer to the one-step-deploy
published: true
description: I turned a conventional checklist into a do-nothing script.
tags: showdev,productivity
---


I've been trying out a deployment checklist which is a bit different than usual. It's a little script which ~~helps me~~ _guides me_ through out the whole process.

So, on my current project, deploying for staging environment is performed in six(ish) steps:

1. Inform everyone deploy is about to begin.
2. On my local repository, switch to the `deploy` branch.
3. In it, execute the deploy command.
4. Turn on the VPN.
   4. Open the site and tryout a feature or two.
   4. Turn off the VPN.
5. Move cards forward.
6. Inform everyone deploy has ended.

This is too long. At most it should be steps 1 and 6, with a _Press deploy button_ in between. Depending on what "inform everyone" means—email, text, chat, yell—we can also automate that. And then we can finally make a ~~build~~ _deploy_ in one step.

My script performs steps 2, 3, 4, and 4.2 for me. 😊 But I still have to move cards about on the board, and test is the site is up and running.  😕 For now, maybe I can use a Slack command line client to inform everyone,

So, without further ado, the script. Sensitive data was replaced with King Crimson(ish) references.

```sh
#!/bin/bash
set -eu

VPNNAME="PROJEKT-X-VPN"

config_elasticbeanstalk () {
    mkdir .elasticbeanstalk
    cd .elasticbeanstalk
    cat <<EOF > config.yml
…yadda yadda yadda…
EOF
    cd ..
}

run_elastic_beanstalk () {
    echo "Running Elastic Beanstalk…"
    config_elasticbeanstalk
    eb deploy projekt-staging
}

clone_repository () {
    echo "Cloning code repository…"
    rm -rf projekt-x
    git clone -q git@github.com:projekts/projekt-x.git
}

echo "Alert in #projekt-x the deploy is about to beging:"
echo "  started \`projekt-staging\` deploy"
read -n 1 -p "Press any key to continue: "

cd /tmp && clone_repository
cd projekt-x && run_elastic_beanstalk

networksetup -connectpppoeservice "${VPNNAME}"
open https://projekt-x-staging.projekts.com
echo "Confirm if everything is okay."
read -n 1 -p "Press any key to continue: "
networksetup -connectpppoeservice "${VPNNAME}"

echo "Move cards"
open https://projekts.board.com/board/101421138
read -n 1 -p "Press any key to continue: "

echo "Inform in #projekt-x the deploy has ended:"
echo "  finished \`projekt-staging\` deploy"
read -n 1 -p "Press any key to continue: "

echo "All done"
```

---

Inspiration for this script came from [here](https://blog.danslimmon.com/2019/07/15/do-nothing-scripting-the-key-to-gradual-automation/ "Do-nothing scripting, by Dan Slimmon").

The goal of a _one build step_ was incited by [him](https://www.joelonsoftware.com/2000/08/09/the-joel-test-12-steps-to-better-code/ "Joel Spolsky")
[#ActionsHackathon] Automatic NPM deployments
Tags: actionshackathon, javascript, typescript, npm
Published: 2020-08-16 00:07:00

As part of my #ActionsHackathon submission, I'll be sharing a workflow that will be automatically deploying versions of your NPM package using a project I developed called [npm-package-deploy](https://github.com/danitseitlin/npm-package-deployer).

In a few words:
This project was originally developed because I had a project where I wanted to automate the NPM version releases on each commit to master in order to make it a bit easier and quicker.

Prerequisites (Before usage):
1. Install the `npm-package-deployer` package.
2. Add a lint script to your package.json (`"lint": "eslint ."`)
3. Add a deploy script to your package.json (`"deploy": "npm-deploy [name of your package]"`)
4. Add a script for your tests (which I called `unit-tests` in my example)
5. Define a secret called `NPM_AUTH_TOKEN` which holds the value of your NPM authentication token.
6. Define secrets for `BOT_NAME` and `BOT_EMAIL` that will hold any fake values. (Used to define GIT name and GIT email for the deployment)


### My Workflow (Named -> Deployment BOT)
```
#This is an automatic deployer flow

name: Deployment Bot
on:
  push:
    branches: [ master ]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Configurating GIT
      run: git config --global user.name $BOT_NAME && git config --global user.email $BOT_EMAIL
      env:
        BOT_NAME: ${{secrets.BOT_NAME}}
        BOT_EMAIL: ${{secrets.BOT_EMAIL}}
    - name: Creating .npmrc file
      run: echo "registry=https://registry.npmjs.org/" >> ~/.npmrc && echo "//registry.npmjs.org/:_authToken=$NPM_AUTH_TOKEN" >> ~/.npmrc
      env:
        NPM_AUTH_TOKEN: ${{secrets.NPM_AUTH}}
    - name: Installing NPM packages
      run: npm install
    - name: Running tests
      run: npm run unit-tests
    - name: Verifying linting
      run: npm run lint
    - name: Deploying version
      run: npm run build && npm run deploy
```
### Submission Category: 
Maintainer Must-Haves
### Yaml File or Link to Code:
[Yaml File](https://github.com/danitseitlin/dmock-server/blob/master/.github/workflows/auto-deployer.yml)
### Additional Resources / Info
[Link to the using repository](https://github.com/danitseitlin/dmock-server)
[Link to a GitHub Action Execution](https://github.com/danitseitlin/dmock-server/runs/989233130?check_suite_focus=true)
JavaScript Event Loop vs Node JS Event Loop
Tags: chrome, firefox, javascript, safari
Published: 2022-02-08 00:52:01

---
title: JavaScript Event Loop vs Node JS Event Loop
published: true
date: 2020-08-16 00:01:57 UTC
tags: chrome,firefox,javascript,safari
canonical_url: https://blog.insiderattack.net/javascript-event-loop-vs-node-js-event-loop-aea2b1b85f5c
---

[![](https://cdn-images-1.medium.com/max/2600/1*7okAv8x_Rg-fRzt94MGS1Q.jpeg)](https://blog.insiderattack.net/javascript-event-loop-vs-node-js-event-loop-aea2b1b85f5c?source=rss----57f0c4748c10---4)

A guide to understanding the distinction between the event loop in browser and Node

[Continue reading on Deepal’s Blog »](https://blog.insiderattack.net/javascript-event-loop-vs-node-js-event-loop-aea2b1b85f5c?source=rss----57f0c4748c10---4)