teleren/devto huggingface dataset:
Nikema's 100 Days of Code - Day 5
Tags: 100daysofcode
Published: 2020-02-21 09:10:02

## [✨ Day 5 ✨](https://github.com/prophen/100-days-of-code/blob/master/Day-5.md)

I continued on with [Progate](https://progate.com) for day five and started the first Rails lesson.

I ran into some bugs and hiccups. Before heading over to Progate I tried to start a LinkedIn Learning course on rails 5. It required setting up `mysql2` and when I followed the installation instructions I didn't get the expected outcome. 

I've run into old tutorials that were unusable before and I didn't want to repeat that today. I decided to go back to Progate since I had already set up my environment using their instructions yesterday.

![rails lesson 1](https://raw.githubusercontent.com/prophen/100-days-of-code/master/images/ruby-on-rails-1.png)

By the end of the lesson, I had an app running on localhost. I wanted to get fancy and deploy the app even though that wasn't part of the lesson.

{% twitter 1230757477081214977 %}

So I naturally headed to Netlify and started setting up my app. I got to the part right after choosing a GitHub repo and I thought, how do I build a Rails app on Netlify?

Turns out you just don't 😃

Oh right. Then I remembered that one of the first languages I took it upon myself to learn was ruby and I used Heroku to deploy. It didn't take long to find myself there.

I haven't used Heroku as much as Netlify and GitHub so I had to look over the docs to get acquainted. Luckily, I already had the CLI installed and I've had a Heroku account since something like 2013 (when I was trying to learn ruby).

I got to pushing my code up to Heroku and I had an error. I linked to the resources I used to get everything working in [my log](https://github.com/prophen/100-days-of-code/blob/master/Day-5.md).

{% github prophen/tweet_app %}

 <h3 style='text-align:center'>
<center>
<a href="https://tweet-app-prophen.herokuapp.com/">✨See the deployed app here!✨</a>
</center>
</h3>

***

Follow along with me on GitHub

{% github prophen/100-days-of-code no-readme %}

<p style='text-align:center'> <a href="https://www.buymeacoffee.com/nikema" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" width="150px"></a></center></p>
Cheatsheet for Markdown
Tags: cheatsheet, markdown
Published: 2020-02-21 09:01:20

### HEADERS
```
# This is an <h1> tag
## This is an <h2> tag
###### This is an <h6> tag
```

### LISTS (Unordered)
```
* Item 1
* Item 2
 * Item 2a
 * Item 2b
```

### LISTS (Ordered)
```
1. Item 1
2. Item 2
3. Item 3
 * Item 3a
 * Item 3b
```

### IMAGES
```
![GitHub Logo](/images/logo.png)
Format: ![Alt Text](url)
```

### EMPHASIS
```
*This text will be italic*
_This will also be italic_
**This text will be bold**
__This will also be bold__
*You **can** combine them*
```

### LINKS
```
http://github.com - automatic!
[GitHub](http://github.com)
```

### BLOCKQUOTES
```
As Grace Hopper said:
> I’ve always been more interested
> in the future than in the past.
```
As Grace Hopper said:
> I’ve always been more interested
> in the future than in the past.

### BACKSLASH ESCAPES
```
\*literal asterisks\*
```
\*literal asterisks\*

### USERNAME @MENTIONS
Typing an @ symbol, followed by a username, will notify that person to come and view the comment. This is called an “@mention”, because you’re mentioning the individual. You can also @mention teams within an organization.

### FENCED CODE BLOCKS
Start with three backtick and follow by the language name.
```javascript
function test() {
 console.log("look ma’, no spaces");
}
```

### ISSUE REFERENCES
Any number that refers to an Issue or Pull Request will be automatically converted into a link.
```
#1
github-flavored-markdown#1
defunkt/github-flavored-markdown#1
```

### TASK LISTS
```
- [x] this is a complete item
- [ ] this is an incomplete item
- [x] @mentions, #refs, [links](), **formatting**, and <del>tags</del> supported
- [x] list syntax required (any unordered or ordered list supported)
```
- [x] this is a complete item
- [ ] this is an incomplete item
- [x] @mentions, #refs, [links](), **formatting**, and <del>tags</del> supported
- [x] list syntax required (any unordered or ordered list supported)

### TABLES
```
First Header | Second Header
------------ | -------------
Content cell 1 | Content cell 2
Content column 1 | Content column 2
```
First Header | Second Header
------------ | -------------
Content cell 1 | Content cell 2
Content column 1 | Content column 2

### EMOJI
To see a list of support emoji, check out www.emoji-cheat-sheet.com
```
GitHub supports emoji!
:+1: :sparkles: :camel: :tada:
:rocket: :metal: :octocat: 
```
GitHub supports emoji!
:+1: :sparkles: :camel: :tada:
:rocket: :metal:
Getting started with Jupyter Notebooks
Tags: python, jupyter, weekendhack, coding
Published: 2020-02-21 08:53:15

I love to explore around some technology over the weekend.
This time around I tried out [Jupyter Notebooks](https://jupyter-notebook.readthedocs.io/en/latest/) using [Python VS Code extension] (https://marketplace.visualstudio.com/items?itemName=ms-python.python).

So things you need:- 

- [Python 3.7](https://www.python.org/downloads/release/python-370/)
- [Python VS Code extension](https://marketplace.visualstudio.com/items?itemName=ms-python.python)
- [Jupyter package](https://pypi.org/project/jupyter/)


To start off with, I tried to make some make [REST API](https://restfulapi.net/http-methods/) calls using Jupyter nb in VS code so I picked up [Github Rest Apis](https://developer.github.com/v3/).

The file extension for Jupyter notebook is .ipynb

Since some of the Github Apis doesn't require to have authentication to access the data, I selected [Github users API](https://developer.github.com/v3/users/#get-all-users).

**Steps to get the API response**

1. *In the first cell, import the requests module inside the notebook*
  ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9zkeynq90kw0f94hdcaq.PNG)
   
   
2. *Declare the constants for endpoint*
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yflkvfha58zhayisidlo.PNG)


3. *Make an API call using "requests" module* 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f249ebdxgp56ftae2yhi.PNG)


4. *Get back the response and access it via response.text*
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5z18tpwf6bwef7e7s4t3.PNG)


You can see how I did this in the below example:-

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


*Hope you enjoyed this article. I will come up with new tech learning articles.*

Thanks for reading this.

Happy learning!!
rails with spring on direnv
Tags: rails
Published: 2020-02-06 21:53:48

## I like Spring
It makes up your development speed by preloading the code.

I highly recommend you to use [Spring](https://github.com/rails/spring).

## Then, I've installed "Direnv".
It's environment variables management tool by each directory.
When you change the directory, it changes environment variables immediately.

It means, you need not to type 'bin' anymore 😀

```sh
# before
bin/rspec spec/xxx_spec.rb

# after
rspec spec/xxx_spec.rb
```

## How to install and use it?
### 0. Suppose
I suppose we use 'Mac OSX'

### 1. install
```sh
brew install direnv
```

### 2. setup
Open your `~/.bash_profile` and write it.

```sh
# Direnv
eval "$(direnv hook bash)"
```

Make .envrc file at root directory of your app.

```sh
touch .envrc
echo 'PATH_add bin' > .envrc
```

Then, you'll see following message.
```sh
direnv: error /Users/your_name/your_app/.envrc is blocked. Run `direnv allow` to approve its content
```

So, Run it.

```sh
direnv allow
```

### 3. try using it
```sh
rspec spec/xxx_spec.rb
```

Finish 🎉

## Not only this
It seems more nice useful ways to use.
i.e, docker with direnv.
Berapa 8/2(2+2)
Tags: math, algoritm, javascript
Published: 2020-02-21 08:14:51

---
title: Berapa 8/2(2+2)
published: true
description: Permasalahan matematika sederhana yang membuat geger
tags: math, algoritm, javascript
series: Javascript
---

{% runkit %}
  console.log(8 / 2 * (2 + 2))
{% endrunkit %}
The only one cron entry that improves your life
Published: 2020-02-21 07:57:16

---
title: The only one cron entry that improves your life
published: true
description: 
tags: 
---

```
$ brew install terminal-notifier
$ crontab -l
0 * * *  * /usr/local/bin/terminal-notifier -title "Memento mori." -subtitle "Remember death." -message "Remember that you will die."
```

![Notification](https://dev-to-uploads.s3.amazonaws.com/i/3vao6atrlx6mcwtk8zvb.png)
Micro-interactions in Angular
Tags: angular, animations, webdev, frontend
Published: 2020-02-21 07:23:32

![Alt ng-micro-interact](https://miro.medium.com/max/1128/1*fIALx1aL1e_ObzMwDP23jw.gif)

Hey Everyone, this is actually my first post in dev.to :) 

I want to share with you a tiny library I wrote for easily adding micro-interactions into your Angular app.

[HIT THE DEMO](https://ng-micro-interact-demo.stackblitz.io/)

My lib is based on [Web Animations](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) ( experimental API ) which is one of the most performant ways of making animations for the web.

To use ng-micro-interact in your Angular project do the following:

 1. Install: `npm i ng-micro-interact`

 2. Import `NgMicroInteractModule` into your consumer module.

 3. Use the `ngMicroInteract` directive on any element you want to interact with.

Thanks for reading this post!
I will really appreciate if you'll star the [repo](https://github.com/LironHazan/ng-micro-interact).
How to: use jsonb_set function in PostgreSQL
Tags: postgres, jsonb, sql, example
Published: 2020-02-21 06:35:02

**Definition**:

**jsonb_set(target jsonb, path text[], new_value jsonb, [create_missing boolean])**
Returns `target` with the section designated by `path` replaced by `new_value`, or with `new_value` added if create_missing is true (default is true) and the item designated by path does not exist. As with the path oriented operators, negative integers that appear in path count from the end of JSON arrays.

Let's take the below data set as an example:

```json
[
  {
     "id": 1,
     "type": "Place",
     "details":'{ "name": "Taj Mahal", "url": "images/0001.jpg"}'
  },
  {
     "id": 2,
     "type": "Place",
     "details":'{ "name": "Eiffel Tower", "url": "images/0002.jpg"}'
  },
  {
     "id": 3,
     "type": "Food",
     "details":'{ "name": "Biryani", "url": "images/0003.jpg"}'
  },
  {
     "id": 4,
     "type": "Food",
     "details":'{ "name": "Pizza", "url": "images/0004.jpg"}'
  }
]
```
The model `Example` of the object in postgresql is something like this:
```json
{ 
   "id" smallint,
   "type" character varying(50),
   "details" text
}
```

Now, here are the following queries you can use in `postgres` to parse, update the object:

### 1. How to parse JSON value of text column

Let's fetch object of name `Biryani` from the above data set

```sql
SELECT * FROM "Example" WHERE "details"::json->>'name'='Biryani';
```
The above query will return:
```
-[ RECORD 1 ]---------------+---------------------------------------------
id                          | 3
type                        | Food
details                     | { "name": "Biryani", "url": "images/0003.jpg"}
```

### 2. How to update JSON value of text column

Here is the query to update `url` of `Eiffel Tower` object:

```sql
UPDATE "Example" SET "details"=jsonb_set("details"::jsonb, '{url}', '"images/0005.jpg"'
WHERE "details"::json->>'name'='Eiffel Tower';

```
now the updated object will look like:

```
-[ RECORD 1 ]---------------+---------------------------------------------
id                          | 2
type                        | Place
details                     | { "name": "Eiffel Tower", "url": "images/0005.jpg"}
```
To get the list of installed packages on python
Tags: python, modules, datascience, learning
Published: 2020-02-21 06:17:23

One of the ways to get the list of the installed packages on python is using command prompt. Here I will show you the step.

1. Open command prompt
2. Type **python** and Enter
3. It will show like the below image if you installed
   ![Python Installed](https://drive.google.com/file/d/17oiXJco90WJrUizC79oYQHZwPQ8dzFWi/view?usp=sharing/Python Installed.PNG)
4. After Type ** help("modules") and It will show the list of all installed modules on python.
Node.js Memory Management
Tags: react, node
Published: 2020-02-21 05:46:34

---
title: Node.js Memory Management
published: true
description: Node.js memory management provides means to dynamically allocate memory chunks for programs when they request them and free it when they are no longer needed, so they can be reused. Application-level memory management can be manual or automatic.
tags: react, node.js
---

![Featured Image](https://seanamarasinghe.com/static/57029020f82a0b232314d15633025743/14b42/feature.jpg)

Node.js memory management provides means to dynamically allocate memory chunks for programs when they request them and free it when they are no longer needed, so they can be reused. Application-level memory management can be manual or automatic.

##Heap
The memory space managed by Node is called Heap. Heap is divided into several different spaces called Generations.

##New Space
New Space is where objects are first created. It is designed to be small and fast to garbage collect.

Memory in a new space is managed by a pointer. When a new space is created the pointer moves to the next free spot.

When the pointer reaches the end of the space, it goes into a Scavenge operation to identify all of the objects in memory that no longer referenced.

Then it removes these, unpacks the memory and re-allocate the pointer to the next available free spot.

##Old Space

Objects that survive ~two garbage collection operations~ are promoted into the old space.

Old space is much larger than the new space, so it implements a different garbage collection algorithm - Mark-sweep

The GC marks the objects being referenced. Anything not marked is unreachable, and the sweep process will remove them.

To read more visit [Node.js Memory Management](https://seanamarasinghe.com/developer/nodejs-memory-management)
How to modify config of Create React App - without Ejecting!
Tags: todayilearned, webpack, react
Published: 2020-02-21 05:08:30

I'm using Create React App (CRA) for a couple of client projects. 
To keep things easier to maintain once the project is handed over I've not ejected. 

However today I ran into the common "Hooks + multiple instances of React" issue as I was attempting to consume a component library I had created.

Both this library and the main app were including their own copy of React.

To solve this and prevent the error I needed to do two things:

* Update the library to list React as a peer dependency and then update the bundler (rollup) to not include React in the bundle.

* Add an alias for React to the Webpack config of the main app

The first step was easy, but as you might know, it's not possible to modify the Webpack config of CRA without ejecting it.

Or so I thought...

Turns out you can by using [CRACO](https://github.com/gsoft-inc/craco) - which stands for Create React App Configuration Override. 

After installing and a quick modification of the package.json scripts, I can now use a `craco.config.js` file to override the default CRA Webpack config.

```
const path = require('path')

module.exports = {
  webpack: {
    alias: {
      react: path.resolve(__dirname, './node_modules/react'),
    },
  },
}
```

For more info on the issue itself and solutions see:
https://github.com/facebook/react/issues/13991
Eclipse “Initializing Java Tooling” hangs Freeze Debug Start
Tags: java, debug, freeze
Published: 2020-02-21 04:41:45

Sometimes using SpringSource Tool Suite (STS) e.g. which is based on Eclipse – startup hangs on various operations:Initializing Java Tooling

STS/Eclipse does not seem to respond to anything – the UI freezes and that’s it! I’ve had this on several occassions with no apparent cause on my part. Usually it has something to do with fiddling with (adding libraries to) the classpath and/or cleaning the project. Some users report Eclipse hangs at “Initializing Java Tooling” at 30% for 20-30 secs after which everything continues normally, but I don’t have that much luck 🙂

I’ve tried the most suggested actions in forum posts, such a starting STS/Eclipse with the -clean parameter which most of the times doesn’t work in my configuration. If you inspect the .log files under the workspace’s .metadata folder you might find something of interest, but quite often STS/Eclipse just hangs without anything written to the log in my case. The largeness of your project or the amount of projects quite often seem to be one of the causes. Here are a few workarounds and/or solutions that might prove succesful:

Start a new workspace and import the project back in – which is just plain tedious and annoying although it quite often works

Close all projects before you exit Eclipse after which Eclipse normally restarts.
    
Some users have reported it does seem related to a configured Tomcat server instance. If you have this configured a possible workaround instead of reimporting your projects in a new workspace, is to rename the .project file in workspace/Servers, restarting, removing and adding the Server configuration again.

The solution I found – which seems to work most of the times – is to remove or rename the .projects folder in .metadata/.plugins/org.eclipse.core.resources in the workspace folder. This doesn’t seem to affect any project and the .project folder will be recreated when Eclipse restarts.

The java-tooling implement a Java IDE supporting the development of any Java application, including Eclipse plug-ins. It adds a Java project nature and Java perspective to the Eclipse Workbench as well as a number of views, editors, wizards, builders, and code merging and refactoring tools. The Java-tooling provides a development environment to developer.

how to disable plugin at startup

you can try disabling the

java-tooling while launching the application.I am giving you a snapshot.

go find perspective as Window->Preferences->Run&Launching->java Application-> and make debug an run combobox to none value. Hope this can solve your problem

here some sample screenshot :
https://i.stack.imgur.com/F9MGc.jpg

Hopefully someone with this problem saves some time because of this. Ofcourse the real problem needs to be addressed by the guys and girls over at Eclipse.
How to Start Coding - Right Now!
Tags: beginners, tutorial, codepen
Published: 2020-02-21 03:42:12

##In this brief tutorial you'll learn how to:

- Locate a user-friendly coding environment
- Write your first lines of code
- See exactly how that code would look on a website


In order to write code, we have to have somewhere to write it. While you could simply write code in a Word document, web developers use an IDE, or integrated development environment. This is the place where code is written, stored, previewed, and much more.

Fortunately there is such a place online where you can code for free. Let me introduce you to [Codepen.io] (https://codepen.io/) This is where you will write your first lines of code!

Follow the link to Codepen and click the box that says START CODING:
![Codepen Home Screen Start Coding Button](https://dev-to-uploads.s3.amazonaws.com/i/rougckbbe0g0ver9dt8h.jpeg)


That will lead you to this screen, which is now your first IDE:
![Codepen IDE](https://dev-to-uploads.s3.amazonaws.com/i/g4v48lqcxqwehm2i7zwt.jpeg)


The left box is where you'll write HTML and the center is where you'll write CSS. That's all we'll worry about for now.

Now copy and paste the code below into your HTML box and watch what happens:

```
<html>
  <body>
    <div class="parentContainer">

      <div class="child">When my imagination exceeds my HTML skills, I visit:
        <a href="https://www.w3schools.com/html/default.asp">W3schools HTML Tutorial</a>
      </div>

      <div class="child">And when my imagination exceeds my CSS skills, I visit:
        <a href="https://www.w3schools.com/css/default.asp">W3schools CSS Tutorial</a>
      </div>

    </div>
  </body>
</html>
```


##Pretty lame! Let's give it some life using CSS.

Add these sections into the CSS box one-by-one in order to see and learn how they are connected to your HTML.


First copy and paste this CSS block that styles the "child" class:

```
.child {
  width: 45%;
  border: solid black 2px;
  border-radius: 10px;
  margin: 2.5%;
  font-size: 40px;
  font-family: sans-serif;
  justify-content: center;
  text-align:center;
  background-color: white;
  padding: 10px;
}
```


Now let's style the "parentContainer" that holds the "child":


```
.parentContainer {
  display: flex;
  flexwrap: wrap;
  background-image: linear-gradient(to bottom right, black, blue);
  border: solid black 2px;
  border-radius: 10px;
  width: 750px;
  height:auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  padding: 30px;
}
```

Now let's change how our HTML `<a>` element looks:

```
a {
  color: red;
  text-decoration: none;
}
```

Now study how each line of CSS affects the HTML style by deleting portions of the CSS code! Change the color. Resize the font. Build the next Facebook.


#You're coding!
Um conselho para quem está começando como desenvolvedor
Tags: webdev, beginners, career, programming
Published: 2020-02-21 03:10:15

---
title: Um conselho para quem está começando como desenvolvedor
published: true
description: Um texto simples e um conselho para quem está começando como desenvolvedor.
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/su7jjcs5fio8sbuquqds.jpg
tags: webdev, beginners, career, programming
---

Um conselho pra quem tá começando como desenvolvedor:
Não tenha pressa.

Eu sei, é sufocante e as vezes chega a ser desesperador pensar que a tecnologia está mudando todos os dias e, você ainda está "aprendendo o básico", mas é assim mesmo. Vai com calma.

Vai estudando, treinando, tentando, lendo, ouvindo,  fazendo e, quando você menos esperar, você pode dominar algo que antes, você nem sabia que existia.

Com o tempo as coisas vão se encaixando e fazendo mais sentido, vão ficando mais fáceis de assimilar e você começa a compreender tudo de uma forma diferente. De uma forma melhor. 

Você muda, evolui, aprende novas formas de ver e de solucionar problemas. Começa a fazer novas perguntas, busca novas abordagens e, até  as dúvidas, que nunca deixam de existir, vão mudando e evoluindo junto com você.

Aprenda a identificar e até mesmo valorizar os momentos de dificuldade, de dúvida e da falta de conhecimento. 

Parece louco falar isso agora, mas são eles que vão servir de identificadores de evolução na sua trajetória. Você vai poder olhar pra trás, lembrar do que já foi difícil de fazer e ter certeza que você evoluiu.
Sitecore PowerShellでStorefrontContext依存の処理を実行する
Tags: sitecore, commerce
Published: 2020-02-21 02:40:40

Sitecore PoewrShellはデプロイしたAPIの動作検証に大変便利なツールです。例えば、作成したコントローラリポジトリを検証するために、以下のようなスクリプトを実行することが多々あります。

```powershell
using namespace Sitecore.DependencyInjection

# リポジトリをDIコンテナから取得
$repository = [ServiceLocator]::ServiceProvider.GetService([Namespace.To.IMyRepository])

# モデルを作成し、プロパティが正しく設定されているか確認
$model = $repository.GetModel()
echo ($model.MyModelProperty)
```

しかし、リポジトリがStorefrontContextに依存している場合、このコードは期待した動作にはなりません。Sitecore PowerShellが実行されるSiteコンテキストが`shell`になっており、SitefrontContextが正しく設定されないのが原因です。  


以下のように、処理の実行前後にSiteコンテキストを切り替える処理を記述することで、Storefront依存の処理を実行することができるようになります。

```powershell
# ストアフロントのサイト名を指定
$storefront = "MyStorefront"

$siteInfo = [Sitecore.Sites.SiteContextFactory]::GetSiteInfo($storefront)
$siteswitcher = New-Object Sitecore.Sites.SiteContextSwitcher($siteInfo)
$dbswitcher = New-Object Sitecore.Data.DatabaseSwitcher($SitecoreContextItem.Database)

try {
    # StorefrontContext依存の処理
}
finally {
    $dbswitcher.Dispose()
    $siteswitcher.Dispose()
}
```