teleren/devto huggingface dataset:
The Noob CMS: Bootstrap 4
Published: 2019-08-15 10:20:31

## Question: What is a Boostrap?

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/9yfs1forg8qzc80ljtj7.png)

Bootstrap converts these type of ugly inputs and button to the flashy type of cool inputs and buttons, so that our website looks beautiful.

Bootstrap also helps to take care of all the calculations for styling our borders and frames of the websites, so when we open it on a mobile screen, it auto adjusts and we wont have to go through the hassle of managing it.

Thank You Bootstrap, We Love you for it. 

## How do I get it into our Website?

You can download bootstrap from the following link;
[https://getbootstrap.com/docs/4.3/getting-started/download/](https://getbootstrap.com/docs/4.3/getting-started/download/)

We can use a CDN, but for things to be understandable we are going to host boostrap on our server.


![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/pognkzjg662q02m8nme4.png)

You will have a file .zip

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/nlddfgfu5mxfvx4bnkee.png)

Now we need to copy the files form the bootstrap-4.3.1-dist.zip to our noob_cms folder.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/14hmisngu2is8p2w2tos.png)

This is what we should have in our noob_cms folder.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/h8so2m0r31e36dfrmzor.png)

## How Do I use it?
```
    <head>
        <meta charset="UTF-8">
        <title>Login</title>

        <link href="css/bootstrap.min.css" rel="stylesheet" />

    </head>


    <style>
        .myLoginForm label {
            margin-top: 10px;
        }

        .myLoginForm button {
            margin-top: 10px;
        }
    </style>

    <body>
        <div class="container">
            <div class="row">
                <div class="col-4 offset-4">
                    <form action="" method="POST" class="myLoginForm">
                        <label>Email Address</label>
                        <input class="form-control" name="email" type="text" placeholder="Enter Email Address..." />

                        <label>Password</label>
                        <input class="form-control" name="pass" type="password" placeholder="Password..." />

                        <button class="btn btn-success" name="btnLogin">Login</button>
                    </form>            
                </div>
            </div>
        </div>
    </body>
```

So This code has just converted our old login form to the new login form

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ow4mt341dgf775wyut6t.png)

I have Updated the New Code at the Git, please feel free to look at it

You can get the code from the following Git
{% github th3n00bc0d3r/noobcms_login %}


[Noob Index](https://dev.to/th3n00bc0d3r/noob-guides-index-4mne)
SQL job opportunities
Tags: sql, blockchain, aergo
Published: 2019-08-15 10:19:51

Did you know?

SQL is in extremely high job demand, with over 30,000 more job postings mentioning it than our top programing language, Java. If you only have time to learn one new technology in 2018, this is the one to pick.
according to: https://www.codingdojo.com/blog/7-most-in-demand-programming-languages-of-2018

Project like aergo.io, makes SQL, the most common language used by business applications to be compatible with blockchain!

I believe this year onwards will be more opportunities for SQl developers out there.
Galois: An auto-completer for code editors based on OpenAI GPT-2.
Tags: deeplearning, machinelearning, gpt, codecompletion
Published: 2019-08-15 09:40:18

Today I introduce [**Galois**]("https://github.com/iedmrc/galois-autocompleter") (/ɡælˈwɑː/) which is an open-source auto code completer based on OpenAI GPT-2 .

**Galois** is trained (finetuned) on a curated list of approximately 45K Python (~470MB) files gathered from the Github. Currently, it just works properly on Python but not bad at other languages (thanks to GPT-2's power).

![Galois demo GIF](https://raw.githubusercontent.com/iedmrc/galois-autocompleter/master/img/python1.gif)


With this project, I aim to create a **Deep Learning Based Auto-completer** such that anyone can run it on their own computer easily. I originally inspired by TabNine but wanted to make **Galois** can be run on endusers computer, freely (as in freedom). Thus anyone (especially developers) can benefit from state-of-the-art NLP technologies freely without sharing the codes (or texts) with a server. To fulfill this purpose we need to do the same what [EfficientNet](https://paperswithcode.com/paper/efficientnet-rethinking-model-scaling-for) did to achieve state-of-the-art results in many datasets. For now, **Galois** trained on GPT-2 345M without developing such an efficient deep learning model. Check the [planned works](https://github.com/iedmrc/galois-autocompleter#planned-works) here for the future of **Galois**.


You can try it on [usegalois.com](https://usegalois.com/). It is licensed under MIT, so you can find the trained model, codes and some instructions on [github.com/iedmrc/galois-autocompleter](https://github.com/iedmrc/galois-autocompleter) for **Galois**, and on [github.com/iedmrc/galois-web](https://github.com/iedmrc/galois-web) for the online editor. Check the link [here](https://gist.github.com/iedmrc/1e41197a6a2f7a9a654a0df9bd932290) for the `docker-compose` file .

Any contributions are welcome. The technology behind the **Galois** has been developed by the community for many years. So clearly we can say that it belongs to the community.

To democratize the AI, let's spread the word to the world! Have it, use it, contribute to it, share it!

With respect to [Évariste Galois](https://en.wikipedia.org/wiki/Évariste_Galois) ([evaʁist ɡalwa]).
Figma Tutorial: How (and Why) To Use It For Your Next Project
Tags: webdev, webdesign, jamstack
Published: 2019-08-15 17:18:19

---
title: Figma Tutorial: How (and Why) To Use It For Your Next Project
published: true
tags: webdev, web design, jamstack, web development
canonical_url: https://snipcart.com/blog/how-to-use-figma-tutorial
---

![Figma Tutorial: How (and Why) To Use It For Your Next Project](https://snipcart.com/media/204635/figma-og.jpg)

I love Italy. 

Everything about it from the architecture to the pizza… it’s all good. And while there’s loads to love about the Bel Paese, one marvel tends to stand out: *The leaning tower of Pisa.*

It took 199 years to build and was designed to be perfectly straight.

Oops.

But as a designer myself, I can totally relate. Working with project managers and getting requests from a team of developers can leave my projects feeling a bit lopsided, too.

That’s why, today, I wanted to share a special Figma tutorial to show developers why this tool is so much more than just another design tool… it’s an invitation to collaborate more efficiently across an entire team. This has become particularly necessary as web-based projects are increasingly fragmenting work by going the JAMstack route.

So, more specifically, in this post I will look at:

* The (long and bumpy) road that led to Figma
* How Figma is closing the gap between designers and developers
* Figma Tutorial: How (and why) to use it
* How with Figma, developers can contribute more meaningfully—and more efficiently

By the end of this post, you’ll see why Figma is the perfect tool for making sure all your projects take less than two centuries to complete and come out looking like they should!

  

→ Read the full post [here](https://snipcart.com/blog/how-to-use-figma-tutorial)
I am a professional React developer, and I recently performed a code review of a stranger's code. Here's what I got.
Tags: react, javascript, webdev, beginners
Published: 2019-08-15 09:10:38

---
title: I am a professional React developer, and I recently performed a code review of a stranger's code. Here's what I got.
published: true
description: Code review of React.js project.
tags: react, javascript, webdev, beginners
cover_image: https://thepracticaldev.s3.amazonaws.com/i/z02k9tf3qhy81dxrwht4.png
---

**Update: The entire code review series is now available on YouTube at [https://www.youtube.com/c/BetterCodingAcademy](https://www.youtube.com/c/BetterCodingAcademy)!**

I've been a professional web developer for just over 10 years now. I'm currently the lead web development instructor at [Better Coding Academy](https://codebetter.com.au), and as part of what I do, I post videos on our YouTube channel at [https://www.youtube.com/c/BetterCodingAcademy](https://www.youtube.com/c/BetterCodingAcademy).

_(Subscribe for awesome web development content!)_

I recently asked the DEV community to [provide me with code to review](https://dev.to/parkroolucas/do-you-want-me-to-review-your-code-2klf), and this is my review of one of the React.js projects. I try to make these code reviews as in-depth as possible, covering everything from coding styles, to semantics, to design patterns, to code smells, to directory structures, and much more.

The below video is part 1 in a series that will be available on the channel very soon 🙂

{% youtube ty1Ib3M6gtk %}

Happy coding!
Package name in a new Flutter project
Tags: flutter
Published: 2019-08-15 08:46:50

---
title: Package name in a new Flutter project
published: true
description: You can specify your package name while creating a new Flutter project
tags: flutter
---

If you are someone like me, who uses Visual Studio Code to work with Flutter, you would most likely be using Flutter CLI to create new flutter projects.

Flutter CLI, by default, would use `com.example.project_name` as your package name/bundle identifier. If you want to specify to change that behaviour, you can run

```flutter create --org com.my_cool_org project_name```

This would set the Android package name to `com.my_cool_org.project_name` and iOS bundle identifier to `com.myCoolOrg.projectName`
Simple tricks for map solution
Tags: map, optimization, google, mapbox
Published: 2019-08-15 08:36:42

---
title: Simple tricks for map solution
published: true
description: Price optimization for map at high scales.
tags: Map, optimization, google, mapbox
---

In the past, we used the map google map service for the map solution. As the project grew, google map began to write high amounts of cost. We looked for a few solutions here and, divided our needs into 2 parts.

1. Dynamic display of latitude and longitude data. (embed)
2. Find latitude and longitude data using street, shop and home address. (geocoding)

## Embed solution

Here are a few alternatives. (openstreetmap, google map, mapbox vs...) I will evaluate the difference between google map and mapbox.

- Legacy solution: [**Google Map: SKU: Dynamic Maps**](https://developers.google.com/maps/billing/gmp-billing#dynamic-maps)

    For more than 100,000 requests:
        
        - 5.60 USD per 1000

    Example: 500.000 (100k free) requests: **2.240 USD**

- New solution: [**Map Loads for Web**](https://www.mapbox.com/pricing/#maploads)

    For more than 50,000 requests:
        
        - (50,001 to 100,000) 5.00 USD per 1000
        - (100,001 to 200,000) 4.00 USD per 1000
        - (20,001 to 1000,000) 3.00 USD per 1000

    Example: 500.000 (50k free) requests: **1.560 USD**

**Profit** : 680 USD

### Development process
    
I was using the react-leaflet library in the front. (openstreetmap) The Leaflet library is very convenient and convenient. You can define api as Custom.

Highly recommend the `react-leaflet`. :)

```js
import { Map as LeafletMap, TileLayer } from 'react-leaflet';

<LeafletMap>
    <TileLayer url={`https://api.mapbox.com/styles/v1/{#username}/{#project}/tiles/{z}/{x}/{y}?access_token={#token}`}/>
</LeafletMap>
```

## Geocoding solution

There is no alternative to this substance at this time. The alternatives are quite inefficient. It negatively impacts user experience. I recommend using Google Map.
A Short introduction on Promise.any
Tags: javascript
Published: 2019-08-15 08:36:13

*Note*: You can see the current stage of this proposal at https://github.com/tc39/proposal-promise-any

## Description

`Promise.any` takes an unspecified number of promises that need to be executed. It returns a promise that is fulfilled by the first promise to resolve successfully and the resulting value is passed back.

If all of them fail, `Promise.any` throws an exception and executes the reject portion of the promise with a list of all the exceptions.

## Project.race can do this right?

`Project.race` operates similarly, but there is one main difference. If any of the passed in promises return an error, `Project.race` will reject, regardless of the state of other promises. A resolved promise, even if it executes first, will still result in a reject if any of the included promises return an error. 

## How do we do it before?

Prior to the introduction of `Promise.any` the pattern for accomplishing this functionality looked something like this.

```js
const p1 = new Promise(/* ... */);
const p2 = new Promise(/* ... */);
const promises = 2;
const errorList = [];
let result = null;

const thenFn = (r) => {
  if (result) return;
  result = r;
  /* do something with result */
}

const errorHandler = (err) => {
  if (errorList.length !== promises) {
    return errorList.push(err);
  }
  /* handle all errors in errorList */
}

p1.then(thenFn).catch(errorHandler);
p2.then(thenFn).catch(errorHandler);
```

## How can we do it now?

With `Promise.any` the syntax to accomplish the same thing looks like this. It is similar to using `Promise.race` or `Promise.all`.

```js
const p1 = new Promise(/* ... */);
const p2 = new Promise(/* ... */);
const promises = [ p1, p2 ];

Promise.any(promises)
  .then(firstResult => { /* do whatever */ })
  .catch(allErrors => { /* do whatever */ })

// or when using async/await

try {
  const firstResult = await Promise.any(promises);
  /* do whatever */
} catch (allErrors) {
  /* do whatever */
}
```

## In what situation would we want to use this?

Let's say you want to fetch several sources of data, including data coming from Cache API. The goal is to retrieve the data as quickly as possible, but you don't need to retrieve it more than once. 

```js
try {
  const url = 'https://example.com/api/v1/some-endpoint/data';
  const data = await Promise.any([
    fetch(url),
    fetch('https://example.com/api/v1/some-endpoint-that-hopefully-is-near/data'),
    cache.match(url)
  ]);

  /* render back to browser */
} catch (errors) {
  /* render all error or a general error  */
}
```

## Shoutout

Shoutout to <a href="https://twitter.com/laurieontech">laurieontech</a> for being the 2nd pair of eyes for this article, as well as the <a href="https://github.com/js-outreach/js-outreach-groups">JS outreach group</a> for giving me this opportunity.

## References

- https://github.com/tc39/proposal-promise-any
- https://esdiscuss.org/topic/promise-any
Magic comments in Ruby
Tags: ruby, rails
Published: 2019-08-15 08:29:43

---
title: Magic comments in Ruby
published: true
description: An exhaustive description of what are Magic comments
tags: Ruby, Ruby on Rails
---

In this article, we’re going to explore the following topics:

- comments vs magic comments
- specifications
- existing magic comments
- [SEE MORE](https://medium.com/@farsi_mehdi/magic-comments-in-ruby-81d45ff92e34)
Testing TypeScript with Mocha and Chai
Tags: javascript, testing, chai, mocha
Published: 2019-08-15 09:13:13

---
title: Testing TypeScript with Mocha and Chai
published: true
tags: JavaScript,Testing,chai,mocha
canonical_url: https://42coders.com/testing-typescript-with-mocha-and-chai/
---

## Introduction

I am a huge fan of TDD, already wrote a couple of articles in this topic. In one of my recent projects I used Angular as a fronted framework. Usually I use Jasmine for testing in JavaScript (you can find the related article [here](https://42coders.com/unit-testing-javascript-with-jasmine/)). Jasmine should also work with TypeScript, but at that time, I got some issues while setting it up, so I looked for another testing framework to work with.

I found Mocha as a good solution used together with Chai assertion library. Let’s see how to set up the testing environment for TypeScript.

## Installation

As a fist step we install the required packages with npm: **mocha** , **chai** , **ts-node** , and type definitions for both libraries:

```
npm install chai mocha ts-node @types/chai @types/mocha --save-dev
```

## Create the first test

Create a simple function for testing:

```
export const helloTest(){ return true; }
```

Let’s create our first test case, and assert that out function works as expected. Obviously in real TDD we should write the test first and the function afterwards, but for demonstration purposes it should be ok.

```
import { helloTest } from '../src/hello-test';
import { expect } from 'chai';
import 'mocha';

describe('First test', 
  () => { 
    it('should return true', () => { 
      const result = helloTest();
      expect(result).to.equal(true); 
  }); 
});
```

## Run the tests

For running the test, we’ll add a script in the **package.json** , register ts-node to run mocha and set up the path where the tests can be found, in this example it would be under tests directory:

```
"scripts": { "test": "mocha -r ts-node/register tests/**/*.spec.ts" },
```

We can now run the tests with npm:

```
npm run test
```

If everything goes well the test should run and you should see in the console output that it passes.

## Conclusion

It is a matter of taste which testing library you choose, the most important thing is to have as many tests as possible, they help us create maintainable and stable applications which is desired in software development.


### Follow me on [Twitter](https://twitter.com/vernerd) for more software development tips.


The post [Testing TypeScript with Mocha and Chai](https://42coders.com/testing-typescript-with-mocha-and-chai/) appeared first on [42 Coders](https://42coders.com).
Git 001 ~Add Alias to .gitconfig~
Tags: git, productivity
Published: 2019-08-15 03:16:04

I'm using `iTerm` and `Github Desktop` to use Git and Github since sometimes don't want to type any commands to work with Github.

However, sometimes prefer typing commands instead of clicks lol.

For example, 

When I want to rename a branch, I need to click `branch` > `rename` and rename the branch then click `Rename`. On the other hand, with `iTerm` I just need to type the following. Actually, there is the shortcut for rename, but I don't remember that 😝

```zsh
$ git branch -m <new_name>
```

The command isn't long, but people who are a software engineer, developer web engineer, web developer are basically lazy. (My first CTO told me that `engineers/developers should be lazy`)


So what we need to do is to shorten commands as much as possible 😂

In terms of git commands what we can do is the followings.

1. `git` --> `g`
2. add aliases to `.gitconfig` for `branch` --> `b`

Actually, you can add `gb` as `git branch`, but I feel using .gitconfig could be better

Step 1
Add the following to your .zshrc, .bashrc etc.
```
alias g='git
```

Step 2
Add the followings to `.gitconfig` The file is in your home folder
```zsh
[alias]
    # basic commands
    b = branch
    p = push
    c = commit
    cm = commit -m
    f = fetch
    s = status
    st = stash
    rh = reset --hard
# update
    m = merge
    l = log
    last = log -3 HEAD --decorate
```

### The last one is from @vlasales, thank you for your comment!

Now we can type the following
```
$ g b -m <new_name>
```

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/p2cxvhdsw8hlf1cvlzce.gif)

@rmnvsl thank you for your suggestion!
Slack Workspace Theme Customization
Tags: slack, productivity, webdev, colors
Published: 2019-08-15 03:41:06

---
title: Slack Workspace Theme Customization
published: true
tags: slack, productivity, webdev, colors
canonical_url: https://ajonp.com/blog/slack-workspace-theme-customization/
cover_image: https://res.cloudinary.com/ajonp/image/upload/w_1000,h_420/ajonp-ajonp-com/blog/Slack_Themes.png
---

> Original Post: https://ajonp.com/blog/slack-workspace-theme-customization/

# Slack Workspace Theme Customization

{% youtube vbtncEcoO9o %}

## How to customize your slack theme

[Official Slack Doc](https://get.slack.help/hc/en-us/articles/205166337-Customize-your-Slack-theme)

## SlackThemes.net

> AJonP is not sponsored by [Slack](https://slack.com/) , neither is slackthemes.net at time of this posting.But we both think it is a great tool!

[SlackThemes.net](https://slackthemes.net/#/myplanet)

[![SlackThemes.net](https://res.cloudinary.com/ajonp/image/upload/ajonp-ajonp-com/blog/Screen_Shot_2019-08-14_at_10.36.02_PM.png)](https://slackthemes.net/#/myplanet)
Optional Chaining in Javascript
Tags: showdev, webdev, javascript
Published: 2019-08-15 01:32:18

---
title: Optional Chaining in Javascript
published: true
description: Optional Chaining in Javascript
tags: showdev, webdev, beginner, javascript
---
![](https://thepracticaldev.s3.amazonaws.com/i/23q1qkg3utg8f2l36rhf.jpg)

What if I tell you that the following snippet is Possible in javascript?

```jsx

const hasWorld = response && response.data && response.data.msg && response.data.msg.includes('world');

const hasWorld = response?.data?.msg?.includes('world');
```

This way of checking the property of an object known as Optional Chaining.

This is currently in Stage 3 `tc39`, however with `babel` we will be able to use it in our code right now by adding the following plugin `@babel/plugin-proposal-optional-chaining` to your config file for babel v7+.

Below is the Transpiled Babel Code Example with Optional Chaining.

[Transpiled code Example](http://bit.ly/optional-chaining)
Add aws credentials in terraform
Tags: aws, terraform
Published: 2019-08-15 00:41:12

Create a terraform.tfvars file in your terraform directory 

If you give the name as mentioned above, terraform by default recognize that as a local environment file and you do not version control it.

Edit the file add these two variables 

**aws_access_key = "XXXXXXXXXXX"**
**aws_secret_key = "XXXX+XXXX"**

In this way, you do not have to specifically mention the credentials every time you want to run:
 
**terraform plan**
**terraform apply**

If you create a file with a different name, you can pass the file name while running terraform commands 

The above concept is keeping in mind AWS is the default provider and the credentials associated is the default user.
An easier way to use relative units
Tags: css, a11y
Published: 2019-08-15 13:29:03

---
title: An easier way to use relative units
published: true
tags: css, accessibility
canonical_url: https://www.mgrossklaus.de/blog/an-easier-way-to-use-relative-units
---

Browsers nowadays perfectly zoom in and out when using `cmd`-`+` and `cmd`-`-`. Because of this, developers sometimes think that using relative units is actually not necessary. But as zooming that way only affects the current website, browsers also have a setting to change the default font size of the browser. Unfortunately, this has no effect when using absolute units. That is why using relative units _is_ important.

As in the beginning of my developer career it was still completely normal to use `px` for everything and getting Photoshop layouts with pixel measurements, I still think in pixels when developing. Of course, there are tools that help you with that: you can e.g. use `px` in your code base which becomes converted to `rem` when using a post- or pre-processor.

But as it is better to not rely on tooling, I prefer to use one of my all-time favourite css tricks:

```
html {
  font-size: 62.5%;
}
```

`62.5%` equals `10px`, as the default font size of a browser is `16px` (`16 * 0.625 = 10`).

Now you can use `rem` and your values are the same as your pixel values, the decimal separator just moved one digit to the left:

```
body {
  font-size: 1.6rem; /* 16px */
}

.wrapper {
  max-width: 72rem; /* 720px */
}
```

Don’t forget to explicitely set `font-size` on the `body` now, as `10px` is too small for a default value.

Note: I sometimes see developers using `html: { font-size: 10px; }` to achieve the same, but this does not fix the zooming problem.