teleren/devto huggingface dataset:
Stop Waiting and Start Writing ✍🏻
Tags: webdev, writing
Published: 2020-05-24 15:26:31

---
title: Stop Waiting and Start Writing ✍🏻
published: true
description: 
tags: #webdev, #writing
---

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

My blogging has been quite infrequent. I used to publish a post once a year. That's it. That's not the whole, I list down around 100 ideas every year, which never come out in any form. This year, I took a resolution to break this jinx. I will be turning all my tech notes, tips, and tricks I learn every day into blog posts.

This place will be the curation of my learnings and I can get back to it anytime when I want to have a glance at the topics.

Recently, I found this interesting article ['Learning in Public'](https://www.swyx.io/writing/learn-in-public-hack/) written by [Shawn](https://twitter.com/swyx). This one post was enough to shun away my fears in writing down my thoughts. I also found [Flavio](https://twitter.com/flaviocopes)'s [blog post](https://www.freecodecamp.org/news/every-developer-should-have-a-blog-heres-why-and-how-to-stick-with-it-5fd55a247fbf/) motivating to start my blogging journey.

I have still got the rest of the year in front of me to enrich my writing experience. I will be consistently blogging and will be sharing my upcoming posts every week. 

I'm figuring out the ways to start my blogging journey actively, there are 50–50 chances of me either getting successful or dropping off the blogging midway. Either way, let's face it, three things are not gonna change - Consistent writing, planning the ideas up front, and building up a writing routine.

I'm gonna list down the upcoming posts that I've been writing and will be coming out soon. Some posts might be teeny tiny ones and some might be bigger than dumbledore's beard, but I will try my best to not bore the audience.

Upcoming Blog Posts:

1. 5 ways to center a div element in a container
2. 5 Productivity Apps  every Software Engineers should use
3. 5 chrome extensions useful for every developer
4. 7 tips I follow to write a blog post
5. How to create a Google Search Page in Neuomorphic design
6. CSS Function() -  Everything to know about linear-gradient
7. 5 tips to become a pro in searching on Google
8. How to create a responsive image using min() and max() function
9. HTML tips and tricks - Part 1 
10. Advanced Javascript Concepts - Part 1 (Notes on Andrei Neagoie's Udemy Course) 

Hopefully, I stay consistent in my writing journey. Thanks for reading! 😀

Follow me for more interesting articles. If you like this post, give me a thumbs up 🙌
Github action to publish a Nuget package to nuget.org
Tags: csharp, nuget, github
Published: 2020-05-24 15:26:02

Here is the `.github/workflows/nuget.yml` that I use to deploy my **Nuget packages to nuget.org** in Github.

Just change **YOUR_PROJECT** to the path of your **.csproj** file and create a secret called **NUGET_API_KEY** at your github project.

```yml
name: Nuget Package action name

on:
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Setup .NET Core
      uses: actions/setup-dotnet@v1
      with:
        dotnet-version: 3.1.101
    - name: Build with dotnet
      run: dotnet build --configuration Release
    - name: Test with dotnet
      run: dotnet test
    - name: Pack with dotnet
      run: dotnet pack YOUR_PROJECT.csproj --output nuget-packages --configuration Release
    - name: Push with dotnet
      run: dotnet nuget push nuget-packages/*.nupkg --api-key ${{ secrets.NUGET_API_KEY }} --source https://api.nuget.org/v3/index.json
``` 

Hope it's useful
Write Makefile Compatible with Both GNU `make` and BSD `make`
Published: 2020-05-24 15:24:07

---
title: Write Makefile Compatible with Both GNU `make` and BSD `make`
published: true
date: 
tags: 
canonical_url: https://mmap.page/dive-into/make/
---

BSD make is simple, but GNU make is more popular due to Linux’s popularity.Thus I prefer to write Makefile compatible with both versions.

## Syntax

The following syntax is valid in both GNU make and BSD make.

```
include config.mk

# variable declaration (this is a comment)
PREFIX = /usr/local

# First target is the default target which will be invoked when typing `make`.
all: this-is-a-target another-target

this-is-a-target:
        echo command
        echo `echo command substitution`
        @echo not echo the command line to screen
        -echo keep going even if command returns a nonzero status

another-target: sourcefile
        echo will only run if sourcefile timestamp is newer
        echo ${PREFIX}

```

## BSD vs. GNU

> BSD Make just knows about dependencies, targets, rules and macros.GNU Make adds built in rules to that mix to make it easier for the developer.
> 
> It turns out that details of systems are conflicting and cannot be known in advance.BSD Make deals with system dependencies by having the system define its parameters.GNU Make’s built in rules turn out to be inadequate.

– [kbw](http://www.cplusplus.com/articles/jTbCpfjN/)

> When using `bsd.*.mk`, each Makefile can build only one program or library.
> 
> …
> 
> The file `bsd.port.mk` is at the center of FreeBSD Ports,the system that builds software packages for FreeBSD.(NetBSD `pkgsrc` calls this file `bsd.pkg.mk`.)

– [George Koehler](https://stackoverflow.com/questions/2131219/merits-of-bmake/25152244)

> Most of openbsds simple Makefiles are compatible with bmakebut if it gets a little bit more complicatedthere are small differences that break the build.
> 
> … the openbsd Makefiles `/usr/share/mk` … are not really portableand use openbsd specific binaries like `lorder` and `tsort` with the openbsd specific `-q` flag.
> 
> And most software is using GNU Make,I think it would be way more work to use bsd makefiles on linux targets,they are not really written to be portable.

– [Duncaen](https://forum.voidlinux.eu/t/pitfalls-on-bmake-bsd-make/956/2)

Under debian, BSD make is available as the `bmake` package.And FreeBSD makefile templates for bmake are available as the `freebsd-mk` package.

## Bonus: Plan9 mk

`mk` in Plan9 is similar to BSD make, with fewer rules.

The main difference is templating:

- BSD Makefile supports standard templates `.include <bsd.prog.mk>` and nonstandard templates `.include "/path/to/included.mk"` or `include filename`,
- Plan9 Makefile does not support standard templates, and it uses different syntax for nonstandard templates `</path/to/included.mk`.
- Plan9 Makefile also supports including command line output (`<|cat /path/to/included.mk>`).

Plan9 also supports using different shells within a single mkfile:

```
MKSHELL=/bin/rc
use-rc:V:
    for(i in a b c) echo $i

MKSHELL=sh
use-sh:V:
    for i in a b c; do echo $i; done

```
An Optioned Guide to ESLint
Published: 2020-05-24 15:23:40

---
title: An Optioned Guide to ESLint
published: true
date: 
tags: 
canonical_url: https://mmap.page/dive-into/eslint/
---

[eslint](https://eslint.org/) is a powerful and versatile tool.I myself only use eslint for problems coming from JavaScript design.Thus I can have a short rule list:

## No Formatting Rule

Use [prettier](https://prettier.io/) instead.

I use prettier with its default options,without any configuration.

## TypeScript Can Detect Lots of Errors

[ts-check](https://mmap.page/dive-into/ts-check/) can detect a lot of problems, and it is usually faster.

For example, the `array-callback-return` rule is unnecessary,because if I accidentally forget to write `return` statement in array mapping function,it tends to trigger a type error.

TypeScript also has other helpful checks like `noFallthroughCasesInSwitch`.

```
{
  "compilerOptions": {
    "strict": true,
    "noUnusedParameters": true,
    "noUnusedLocals": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true
    // more options omitted
  }
}

```

## Only Include Obvious Rules

Do not include rules such as `no-new-object` and `no-nested-ternary`,which are merely personal choice of programming style.

So here is the seven ESLint rules I use:

```
"rules": {
    "eqeqeq": "error", // prefer `===` instead of `==`
    "prefer-arrow-callback": "error", // avoid the evil `this`
    "curly": "error", // not omit braces for statements in control flow
    "no-multi-assign": "error", // no `a = b = c = 1`
    "no-var": "error", // use `const` and `let` instead of `var`
    "prefer-const": "error", // use `const` when there is no reassignment
    "no-param-reassign": "error", // use nonreassignable function parameters
}

```
Dive into Cycle.js
Published: 2020-05-24 15:20:38

---
title: Dive into Cycle.js
published: true
date: 
tags: 
canonical_url: https://mmap.page/dive-into/cyclejs/
---

## Core Abstraction

[Cycle.js](https://cycle.js.org/) has a simple core abstraction:an application is a pure `main()` function,whose input (_sources_) and output (_sinks_) are effects of the external world,managed by plugins (_drivers_).

![dataflow](https://cycle.js.org/img/cycle-nested-frontpage.svg "source: cycle.js.org")

The primitives used inside the `main` function is reactive streams.Thus Cycle.js applications are entirely `this` free and have nothing like `setState()` or `update()`.

The separation between function and drivers allows for great extensibility (easy to swap drivers) and testability (easy to test pure functions).

This abstraction also allows for awesome composablity:the main function of every Cycle.js application is also a reusable function in main function of another Cycle.js application.Sources and sinks are not only the interface between main function and the drivers, but also the interface between a child component and its parent.

![nested-components](https://cycle.js.org/img/nested-components.svg)

## Example

The core API of Cycle.js is `run(main, drivers)`.

```
import {Stream} from "xstream";
import {run} from '@cycle/run'
import {div, label, input, hr, h1, makeDOMDriver, DOMSource, VNode} from '@cycle/dom'

interface Sources {
  Dom: DOMSource
}

interface Sinks {
  Dom: Stream<VNode>
}

function main(sources: Sources): Sinks {
  const input$ = sources.Dom.select('.field').events('input')

  const name$ = input$.map(ev => (ev.target as HTMLInputElement).value).startWith('')

  const vdom$ = name$.map(name =>
    div([
      label('Name:'),
      input('.field', {attrs: {type: 'text'}}),
      hr(),
      h1(`Hello ${name}`),
    ])
  )

  return { Dom: vdom$ }
}

run(main, { Dom: makeDOMDriver('#app-container') })

```

The above code is adapted from the JavaScript hello world sample on the frontpage of [Cycle.js](https://cycle.js.org/) official website. I use TypeScript instead.
Selected Gitmojis
Published: 2020-05-24 15:20:22

---
title: Selected Gitmojis
published: true
date: 
tags: 
canonical_url: https://mmap.page/dive-into/gitmoji/
---

## tl;tr

| emoji | code | usage | Angular Convention |
| --- | --- | --- | --- |
| 🎨 | `:art:` | refactor | refactor |
| 🐛 | `:bug:` | bug fix | fix |
| 🔥 | `:fire:` | remove feature | n/a |
| 📝 | `:memo:` | doc | docs |
| 🆕 | `:new:` | new feature | feat |
| 🔒 | `:lock:` | security fix | n/a |
| ⚡️ | `:zap:` | performance | perf |

## Intersection between gitmoji and Atom style guide

- 🎨 `:art:` when improving the format/structure of the code
- 📝 `:memo:` when writing docs
- 🐧 `:penguin:` when fixing something on Linux
- 🍎 `:apple:` when fixing something on macOS
- 🏁 `:checkered_flag:` when fixing something on Windows
- 🐛 `:bug:` when fixing a bug
- 🔥 `:fire:` when removing code or files
- 💚 `:green_heart:` when fixing the CI build
- ✅ `:white_check_mark:` when adding tests
- 🔒 `:lock:` when dealing with security
- ⬆️ `:arrow_up:` when upgrading dependencies
- ⬇️ `:arrow_down:` when downgrading dependencies

## Conflicts between gitmoji and Atom style guide

| Meaning | gitmoji | Atom |
| --- | --- | --- |
| Performance | ⚡️ | 🐎 |
| Removing linter warnings | 🚨 | 👕 |

## Comparison with Angular Convention

| [Angular](https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#type) | gitmoji |
| --- | --- |
| feat | ✨ |
| fix | 🐛 |
| docs | 📝 |
| style | 🎨 |
| refactor | ♻️ |
| perf | ⚡️ |
| test | ✅ |
| chore | 🚀 (deploy)　or 💚 (CI) |

## A reduced list of gitmoji

From the intersection, remove the following emojis:

- 

Too long:

:penguin:, :checkered\_flag:, :green\_heart:, :white\_check\_mark:, :arrow\_up:, :arrow\_down:

- 

Ambiguous:

  - :green\_heart:, I don’t know why this is related to CI.
  - :arrow\_up:, this could mean “bump version”.
  - :arrow\_down:, this could mean “regression”.
- 

Other:

:apple:, since both :penguin: and :checkered\_flag: have been removed.

And add the following:

- ⚡️ `:zap:` for performance from gitmoji.
- 🆕 `:new:` for new features (I saw someone used this).

Thus the final list is:

- 🎨 `:art:` when improving the format/structure of the code
- 🐛 `:bug:` when fixing a bug
- 🔥 `:fire:` when removing code or files
- 📝 `:memo:` when writing docs
- 🆕 `:new:` when adding a new feature
- 🔒 `:lock:` when fixing security problems
- ⚡️ `:zap:` when improving performance

Compared to Angular Convention, I removed the following types:

- `test` and `chore`: tests and build process are part of code logic.
- `style`: White-space, formatting etc. are unimportant. And most of the time, they do not deserve a separate commit.

I added the following types:

- A security issue (`:lock:`) is a special kind of bug (`:bug:`). It is so important that I use a different emoji.
- Removing a feature (`:fire:`) belongs to `refactor` by Angular Convention’s definition: “A code change that neither fixes a bug nor adds a feature”. However, it makes sense to assume a refactor dose not introduce a breaking change of API, while removing a feature always break the API.
Build a Micro Static Site With GitHub Pages
Published: 2020-05-24 15:20:04

---
title: Build a Micro Static Site With GitHub Pages
published: true
date: 
tags: 
canonical_url: https://mmap.page/dive-into/gh-pages/
---

## tl;tr

In repository settings, enable GitHub Pages for the `master` branch.

Now you can access your site at `https://your-username.github.io/your-repo-name`

Done. Period.

## How

GitHub Pages will use `README.md` as index page.And your project probably already have one.There is no need to write `index.html` or `index.md`.

Also, GitHub Pages will automatically add an “edit on GitHub” link to page footer.Nice.

## Why

Focus on content, not the site design and configuration.

We use `README.md` and `master` branch.This makes updating project site easier.Just update `README.md` without the hassles of sync documentation between `master` and `gh-pages` branches.

## Bonus

Your project may have some additional documentary pages.They are welcome by GitHub Pages.

For example:

```
README.md
...
docs/
    README.md
    quick-start.md
    install/
    linux.md
    osx.md
    bsd.md
    win.md

```

URL paths will be:

```
/index.html
/docs
/docs/quick-start.html
/docs/install/linux.html
/docs/install/osx.html
/docs/install/bsd.html
/docs/install/win.html

```

## Conclusion

Yes. You can have a site powered by GitHub Page up and runningwithout writing a single line ofyaml configuration, html template, css, javascript, etc.
Dive into JetBrains IDEs
Published: 2020-05-24 15:19:49

---
title: Dive into JetBrains IDEs
published: true
date: 
tags: 
canonical_url: https://mmap.page/dive-into/jetbrains/
---

## Appearance

- Appearance: **Darcula**
- Color Scheme: **Colorful Darcula**
- Color Scheme Font: **24** for 13-inch display

## Keymaps

- Find Action: the utilimate keyboard shortcut deserves **F1** (inspired by vscode)
- Complete Current Statement: **C-Enter**

### Fn

| Key | Default | New | Rationale |
| --- | --- | --- | --- |
| F1 | help | find action | inspired by vscode |
| F2 | next error | - | common action |
| F3 | next occurrence | - | convention |
| F4 | jump to source | - | common action |
| F5 | refactor: copy | quick documentation | I have poor memory and use this a lot. |
| F6 | refactor: move | refactor: rename | I am irresolute. |
| F7 | debug: step into | find usage (addtional) | I use this a lot, and the default three-key combo is too hard to remember. |
| F8 | debug: step out | build project (addtional) | I use this a lot. |
| F9 | debug: resume | toggle bookmark (addtional) | Inspired by Yin Wang. I also set alt/ctrl/shift + F9 to show/next/previous book. |
| F10 | menu (os) | - | - |
| F11 | toggle bookmark | toggle fullscreen | convention |
| F12 | Go back to the previous tool window | - | - |

## Plugins

- IdeaVim
Gitlab CI script to deploy a Azure Static Website
Tags: azure, gitlab, static, website
Published: 2020-05-24 15:19:20

Before using this script you must have an Azure storage account created with the **static website enabled**.

In this example I have a javascript project that I build using npm.

Variables:
- **$AZ_STORAGE_CONNECTION_STRING**

Here is the `.gitlab-ci.yml`.

```yml
stages:
  - build
  - deploy

build:
  stage: build
  image: node:10
  script:
    - npm install
    - npm run build
  only:
    - master
  artifacts:
    paths:
      - dist/

deploy:
  stage: deploy
  image: microsoft/azure-cli
  dependencies:
    - build
  script:
    - az storage blob delete-batch -s "\$web" --connection-string $AZ_STORAGE_CONNECTION_STRING
    - az storage blob upload-batch -d "\$web" -s dist --connection-string $AZ_STORAGE_CONNECTION_STRING
  only:
    - master
```

Hope it's useful!
Vaidating string for numeric, alphanumeric and alphabetic
Tags: csharp, programming, womenintech
Published: 2020-05-24 15:19:08

Hi everyone! After lots of javascript blogs let's go back to csharp. Lots of time we have to deal with data in a string form and then we have to validity the string for its numeric or alphabetic form. Let's say we want to validate form input and we have some "Code" input field which should contain only numeric value. At the backend, we are receiving just a string and we have to validate the string for a numeric value. Obviously **regular expression** will be the first thing in our mind.🤔

Mostly some of us tries to avoid using Regex as compared to available built in function, including me😬

## Checking string over numeric format

### Approach 1

Char.isDigit() method is one of the approaches to go about. In C#, Char.isDigit() is a System.Char struct method that verifies if each Unicode character is a number.

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

### Approach 2

Another way to check for numeric format is by using the TryParse() method. TryParse(string inputString, out double value) method tries to parse input string and if the value can be parsed then returns true and converts the value else it returns false.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8oir41kjot59dsuldmvi.PNG)

## Checking string over alphabetic format

### Approach 

If we want to validate a string for its alphabetic form then we can use Char.isLetter() method. Char.isLetter() is a System.Char struct method that verifies if each Unicode character is a number.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0ehsacu9yuv668w4rc8s.PNG)

## Checking string for alphanumeric format

### Approach 

If we want to validate a string over combination of alphabets and numbers then there is still an option of using Char.isLetterOrDigit() method. Char.isLetterOrDigit() is a System.Char struct method that verifies if each Unicode character is a letter or number.

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


## Conclusion

If the code do not demands pattern matching but only determining data type then we can achieve it using Char struct methods.

Happy Coding!
Express more in code
Published: 2020-05-24 15:18:40

---
title: Express more in code
published: true
date: 
tags: 
canonical_url: https://mmap.page/thoughts/express-more-in-code/
---

Code tends to be clearer and more precise.

## Math formula

The traditional math language has a lot of issues:

- Variables may be used before or without declaration.
- Variables do not have scoping.
- Prone to typos and untestable.

Instead of writing `E = mc^2`, I’d rather just write `e = m * (c ** 2)`.

## Tables

Most tables can be converted to code in a clear way. For example:

| Strength | Dexterity | Constitution |
| --- | --- | --- |
| 9 (-1) | 11 (+0) | 10 (+0) |

Via direct variable declaration:

```
strength = 9;
strength_modifier = -1;
dexterity = 11;
dexterity_modifier = 0;
constitution = 10;
constitutito_modifier = 0;

```

Or via a data structure:

```
class AbilityScore(Integer score) {
  assert(score >= 1 && score <= 30);
  shared Integer modifier => floor((score - 10) / 2.0).integer;
}
value strength = AbilityScore(9);
value dexterity = AbilityScore(11);
value constitution = AbilityScore(10);

```

In fact, the later form reveals the relationship between ability and modifier.

## Choices of language

- Avoid layout sensitive languages such as Haskell, Python, and CoffeeScript, because copying from web page may break layouts.
- Avoid low level, machine oriented languages such as C.
- Avoid dirty languages such as JavaScript, PHP, and Ruby.
- Avoid complicated languages such as C++, Scala, and Rust.
- Avoid verbose languages such as Java, C#, Objective-C.

Examples of suitable languages:

- Scheme
- TypedRacket
- Lua
- Go
- Groovy
- Swift
- Kotlin
- Ceylon

Some of the above languages have pitfalls in practical projects,such as design flaws (Go),dynamic typing (Scheme, Lua, Groovy),lack of libraries (Scheme, TypedRacket, Lua, Swift),less powerful IDE and debugging support (Scheme, TypedRacket, Lua),and restrict to certain platforms (Swift).These issue does not affect brief code samples though.

If a language with C like syntax is chosen,then it is recommended to use the Java style (opening braces on same line)and a indent level of 2 spaces.This saves space and does not harm readability for brief code samples.
Learning C# Advice.
Tags: csharp, beginners
Published: 2020-04-13 12:45:26

Hello everyone.
Due to the covid19 and the current lockdown in my country (Argentina) i finally took a further step and i'm currently learning C# (Mostly interested in BackEnd, Desktop Software and Games). Even tho i tried to start with tutorials from GameDev.tv about Unity, stopped half way and decided to get into the language itself before going to Unity (hope it was a good decision)
I took the free april trial from PluralSight and been working on the C# Path from the Website.
Even tho i'm almost finishing the Scott Allens course, which sometimes i get difficult to get into, usually go to alternative websites to get a better grasp like (https://www.tutlane.com/, https://www.tutorialspoint.com/, https://www.completecsharptutorial.com/).
My goal was to try to finish some little projects, like a calculator, which already did. I even tried a few codewars.com exercises which sometimes i found out difficult to follow along.
Do you have any other advice for a beginner on what kind of projects or what kind of path should i take on for a better understand of the fundamentals of a language?? I'm willing to pay for a learning site, something than doesn't go like crazy on price.

Regards

Hernan
Dive into Base64
Published: 2020-05-24 15:17:28

---
title: Dive into Base64
published: true
date: 
tags: 
canonical_url: https://mmap.page/dive-into/base64/
---

## Base64 index table

Upper case (26) and lower case (26) letters, with 10 digitals,contribute 62 characters.Index 63 and 64 are `+` and `/` in standard Base64,`-` and `_` in `base64url`.

## Padding

Assuming a byte has 8 bits, we have `8 **2 = 64`.Thus odd numbers of bytes would have needed padding.In fact, base64 works directly on bits, not assuming a 8-bit clean environment.For bits, we have `2** 6 = 64`.Thus bytes are grouped by 3 (`lcm(6, 8) / 8 = 18 / 8 = 3`).When encoding a 1-byte or 2-byte group, it is padded with `0`.In encoded output, a final `==`/`=` sequence indicates the last group contains only 1/2 bytes.