teleren/devto huggingface dataset:
Self-Taught Developer Journal, Day 15: TOP Landing Page Cont.
Tags: webdev, beginners, codenewbie, devjournal
Published: 2021-12-07 04:14:08

Today I learned....

## Focusing on The Odin Project and Web Development
Following some feedback and advice on what I was working on vs where I wanted to be, I realized I wasn't fully investing my time and effort to being a web developer. From now on, I'm putting a pause on CS50 and focusing my time fully on The Odin Project, HTML, CSS, JavaScript, and projects built off it. 

## Thinking Through The Odin Project Landing Page cont.
![The Odin Project Project Landing Page Full Design Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qcwlb2cle80pmz7kpksx.png) 
After positioning the hero elements and navbar in the center, I set the gray background for the hero image container so I could visually see how much space the image would take. From there, I adjusted the left hero elements width to 50% along with the right hero image container. Now both the right hero elements and left hero elements take up 50% of the hero container.

With the hero elements in the correct location, I set the font-size, font-weight, and color properties for the hero main text and hero secondary text. Next, I set the button background color, but I had trouble recalling how to round the button and elongate the button so I googled it. I used the w3schools site (https://www.w3schools.com/css/css3_buttons.asp) as a reference to round the buttons using the border-radius property and padding to change the button size. Lastly, I updated the border value to none and adjusted the spacing between the elements with margin and padding. 

The first section of the landing page is done! Time to start working on the second section.


## Resources
[The Odin Project Landing Page Project](https://www.theodinproject.com/paths/foundations/courses/foundations/lessons/landing-page)

Day 14: https://dev.to/jennifer_tieu/self-taught-developer-journal-day-14-top-landing-page-cont-and-cs50-final-55df
Please refer to [Starting My Self-Taught Developer Journey]( https://dev.to/jennifer_tieu/starting-my-self-taught-developer-journey-2dga) for context.
Progress: my contribution to the open source project
Tags: opensource, beginners, programming, github
Published: 2021-12-09 21:43:09

I planned how to contribute to an open source project last week and wrote about it in my [previous blog](https://dev.to/okimotomizuho/planning-how-to-contribute-to-an-open-source-project-48o6). In the blog, I mentioned I would write a progress blog on Monday, so here I am!

## Issue
For the last assignment(we call Release) of my open source course, I've decided to contribute to an open source project which is my college's C language course notes. The [issue](https://github.com/Seneca-ICTOER/IPC144/issues/64) I'm working on is about "Standardize frontmatter across all pages". When we contributed to the project in our last Release, we added `slug` as one of the properties for frontmatter. However, it made links broken since internal links use page names vs. slugs, so my professor told me to review some of the PRs if they included it.

## Made a PR
PR: https://github.com/Seneca-ICTOER/IPC144/pull/143
I've done the following for the standardization of Frontmatter:
- Added `id`, `title`, `sidebar_position`, and `description` for all markdown pages
- Each property of frontmatter was unified in order
- Unified format of description
- Shortened `description` to maximum 160 characters (Reason: `description` becomes the `<meta name="description" content="..."/>` inside the `<head>`tag, and Google generally truncates snippets to ~155-160 characters)
- Added "Standardize frontmatter" to the CONTRIBUTING.md file

## Getting reviews and change requests
One of my classmates reviewed my changes, and he asked me to reinsert `slug` in the root of the file, and also add a step in the Workflow in Contributing.md. Also, one of the repo's owners requested to change some `description`s in the frontmatter. When I worked on Standardizing frontmatter, the description was hard since I'm familiar with the course notes, but I wasn't very good at C language.

## Next step
The goal for this Release is for my PR to get merged by this Friday. However, I didn't change any codes in this contribution. I still need to make more PRs for my previous Releases. It would be a lot of things to do in my final exams week. I will try my best and put lots of effort into all of these Releases.
How to count newest entries created in an oracle database
Tags: oracle, sql, codever, snippets
Published: 2021-12-07 07:14:44

We will base the logic around [`sysdate`](https://docs.oracle.com/cd/B19306_01/server.102/b14200/functions172.htm) which returns the current datetime, from which we substract different units. For example for the **last day** from now use `sysdate - 1` (units default to day) and compare with the timestamp column (in this case `CREATED_AT`) :

```sql
select count(*)
from PARTNER
WHERE CREATED_AT > (sysdate - 1)

-- last 2 days would be
select count(*)
from PARTNER
WHERE CREATED_AT > (sysdate - 2)
```

From the **last hour**, respectively **last two hours** use the following commands, where `1/24` is the unit for hour:

```sql
-- last hour
select count(*)
from PARTNER
WHERE CREATED_AT > (sysdate - 1/24)

-- last 2 hours
select count(*)
from PARTNER
WHERE CREATED_AT > (sysdate - 2/24)
```

<hr>

> Shared with :heart: from [Codever](https://www.codever.dev/snippets/61a8ee5afb0221040e493f0f/details).  :point_right:  use the [**copy to mine**](https://www.codever.dev/snippets/61a8ee5afb0221040e493f0f/details) functionality to add it to your personal snippets collection.
Building a multi-architecture development environment
Tags: nuvolaris, serverless, kubernetes
Published: 2021-12-07 10:21:25

When you start a project, that is as complex as [nuvolaris](bit.ly/nuvolaris) (a new distribution of a Apache OpenWhisk), you need to be very careful in what you do, as your initial choices will be the hardest to change later.

Whatever you choose now, it will be shared by a number of people, they will learn your procedures, and they won't be happy if you change them. Also, even if you decide later to update them, your changes will disrupt the workflows and create friction in the team.

I am working hard, but for now is's a solo effort to prepare the development environment. And here I am evolving my decisions on how to develop Nuvolaris.

First I simply wrote a readme, mentioning the required components. But since there are so many, so I wrote a script `setup.source` using also the various `nodenv` `pyenv` and `goenv` to set the correct version of the programming languages to use.

Then I decided that was also wise to provide a stable environment to run everything, so I considered the option of using a virtual machine to run everything in the same way for everyone. So I spent some time tweaking with multipass to see if I could use this as a standard environment for development, as I mostly develop using VSCode with the Remote-SSH plugin and I use my server.

In the end my conclusion is that setting up multipass is complex enough to not be worth the effort. But I considered to use VSCode Remote-Container plugin, and it was a great find. I was aware of this but I haven't actually used it in the past, but it is great, as there are provisions to initialize the environments for the various programming languages!

A perfect fit for my needs. So I decided to use Remote-Containers instead and built a Dockerfile to create the perfect development environment for Nuvolaris with all the development tools inside. So you can develop on Linux, Mac or Windows, and even on the web using CodeSpaces!

My only regret was that I actually use a Mac with ARM M1. It is not a problem, as I do not develop in it. As I said, I use a remote, Intel based, server with VSCode Remote-SSH. I personally can't use the Remote-Container simply because the image I built is intel based (and please, do not talk of emulating Intel in Docker for ARM as it is considerably slower).

Then I wondered: why not support ALSO ARM? Actually, we would like to support Nuvolaris on multiple Kubernetes distributions, and yesterday we discussed of building clusters of Kubernetes with Raspberry PIs and it would be awesome to have Nuvolaris running on those!

So I decided to go with this option too, and I decided to support ALSO arm64 from day one. In the end we are going to build Nuvolaris to work on a variety of Kubernetes environments, both on Intel and ARM architectures. And I am now building the development environment to be multi-architecture so you can work on a Windows PC, on a Mac with M1 chips and even on a Raspberry PI, as long as you have Docker.

Stay tuned.
Elm's guarantees
Tags: elm, webdev, frontend, typescript
Published: 2021-12-07 22:33:59

---
title: Elm's guarantees
published: true
description: A short reminder about the guarantees of the Elm language:
tags: elm, webdev, frontend, typescript
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wj2x6pr6k9jckkhns866.png
---

A short reminder about the guarantees of the Elm language:

## ✅ No Runtime Exceptions

Thanks to the absence of null/undefined, errors treated as data, and a sound type systems, Elm guarantees that our compiled JavaScript code never throws errors at runtime.

## ✅ 100% Immutable Data

All data in Elm is immutable. So no surprises when you need to find a bug and there is a wrong value somewhere. You can easily find who created that value.

## ✅ 100% Pure Functions

All functions must be pure, otherwise, they don't compile. Pure functions have the usual benefits of being easy to read, easy to test, etc.

## ✅ All Types Are Checked

Elm is based on a provable type system so types are always correct and type annotations are always optional.

## ✅ No surprises when upgrading dependencies

Elm enforces Semantic Versioning. This means that your code is guaranteed to compile also after you upgrade your dependencies.

## 🎉 Bonus: Guarantees also apply to all dependencies!

All these guarantees apply not only to your code but also to all your dependencies!

To learn more: [elm-lang.org](https://elm-lang.org/)

❤️

*Header [photograph](https://www.pexels.com/photo/arbuckles-roasted-coffees-175747/) by [Clem Onojeghuo](https://www.pexels.com/@conojeghuo)*
Where to host your kubernetes
Tags: podcast, video, kubernetes, aws
Published: 2021-12-14 14:57:22

---
title: Where to host your kubernetes
published: true
date: 2021-12-07 00:00:00 UTC
tags: podcast,video,kubernetes,aws
canonical_url: https://jhall.io/archive/2021/12/07/where-to-host-your-kubernetes/
---

On this week’s episode of The Tiny DevOps Podcast, Andy Suderman of Fairwinds joins me to talk about the pros and cons of each of the big three cloud providers, and helps point new Kubernetes adoptors to the optimal provider for their needs.

[Listen](https://share.transistor.fm/s/e0951319),[watch](https://youtu.be/iAgDLpzbclg), or [read the transcript](https://share.transistor.fm/s/e0951319/transcript)  
[![](https://jhall.io/images/icon-podcast-512_hudba6b7b089bf867fab369dd7c8de54ef_15339_0x100_resize_q85_box_3.png)](https://share.transistor.fm/s/e0951319)  [![](https://jhall.io/images/icon-youtube-512_hu472b17e2e29474aa989a586bfaf501e7_5679_0x100_resize_q85_box_3.png)](https://youtu.be/iAgDLpzbclgs)  [![](https://jhall.io/images/icon-transcript-512_hu61121fb4158683053abb5347949e43dd_14667_0x100_resize_q85_box_3.png)](https://share.transistor.fm/s/e0951319/transcript)
* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
How to deal with client HTTP status messages
Tags: beginners, webdev, api
Published: 2021-12-08 23:19:13

---
title: How to deal with client HTTP status messages
published: true
description: Common HTTP status codes in the 400s
tags: beginners,webdev,api
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9n4ie1t4vc53pcub10px.jpg
---

When you’re talking to an HTTP API, the server returns a [status code](https://datatracker.ietf.org/doc/html/rfc7231#section-6) signaling the status of your API request. Since status codes and error messages are determined by the API provider, they are only as meaningful and accurate as the API provider makes them. But most API providers follow the established [industry standards](https://tools.ietf.org/html/rfc2616#section-10) grouping HTTP status codes into five categories according to the following scenarios:

- 100s Informational responses
- 200s Successful responses
- 300s Redirects
- 400s Client errors
- 500s Server errors

Let’s dive into status codes in the 400s indicating an issue with the client. As an API consumer, this means that you can update the API call to potentially solve the issue. Assuming the server returns reliable status messages, this is our first clue to tracking down the source of the bug. 

## Common client error codes

Here are some common client error codes in the 400s and what you can do when you encounter one of these errors: 
- [400 Bad Request](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/400) - This is the most general, catch-all status code for client errors. Look for syntax errors like typos or a malformed JSON body in your API call.
- [401 Unauthorized](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/401) - Verify that you have valid authentication credentials for the target resource and check your syntax for header values
- [403 Forbidden](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/403) - This means you do not have permission to access the resource. Check your permissions and scope to ensure you are authorized to access the resource.
- [418 I’m a Teapot](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/418) - was created as an April Fool’s joke, but may indicate the request is one the provider does not want to handle, such as automated queries
- [429 Too Many Requests](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/429) - check the documentation to understand the rate limits, or give it a break to try again later

![404 error code in Postman](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/35qxknt10e81s53a15nl.png)

There’s a number of other client errors defined in the industry standard, but it’s up to the API provider to implement status messages. If you’re unable to resolve the issue, check the API documentation for more clues as to how the provider has intended to handle those requests.

And if you want to try an interactive tutorial, check out [Learn HTTP Status Codes with HTTP Cats](https://blog.postman.com/http-cats-learn-http-status-codes/) 😺.
Vocabulary Building Day 23
Published: 2021-12-09 03:48:12

1. **boon**(noun): a thing that is helpful or beneficial.
![alt text](https://i.ytimg.com/vi/FBVU511LAys/maxresdefault.jpg)
[Checkout Pronunciation](https://www.google.com/search?q=boon+meaning&oq=boon+&aqs=chrome.1.69i57j0i433i512j0i512l2j0i433i512j0i512l3j46i175i199i512j46i199i465i512.4364j0j9&sourceid=chrome&ie=UTF-8)

2. **travail**(noun): painful or laborious effort.
![alt text](https://pbs.twimg.com/media/EITZeFwXUAIGXyc.jpg)
[Checkout Pronunciation](https://www.google.com/search?q=travail+meaning&oq=travail&aqs=chrome.0.69i59j69i57j0i271.3875j0j9&sourceid=chrome&ie=UTF-8)

3. **atavism**(noun): a reappearance of an earlier characteristic; throwback.
![alt text](http://www.wordinfo.info/words/images/atavism-1.jpg)
[Checkout Pronunciation](https://www.google.com/search?q=atavism&oq=atavism&aqs=chrome..69i57j35i39l2j0i512l7.5994j0j9&sourceid=chrome&ie=UTF-8)

4. **peruse**(verb): read (something), typically in a thorough or careful way.
![alt text](https://merriam-webster.com/assets/mw/images/article/art-global-footer-recirc/woman-reading-a-book-and-looking-mighty-perplexed-1775-5d4e1591b0e98b4e8ae253fa61e8eab2@1x.jpg)
[Checkout Pronunciation](https://www.google.com/search?q=peruse&oq=peruse&aqs=chrome..69i57j0i433i512j0i512l8.5393j0j9&sourceid=chrome&ie=UTF-8)

5. **clumsy**(adjective): awkward and without skill.
![alt text](https://www.spinfold.com/wp-content/uploads/2020/09/synonyms_of_clumsy.jpg)
[Checkout Pronunciation](https://www.google.com/search?q=awkward+meaning&oq=awkward&aqs=chrome.0.0i67i433j46i67i433j0i67i433j0i20i263i512j0i67l2j0i131i433j0i512j0i67.7276j0j7&sourceid=chrome&ie=UTF-8)
I hope this helps you if you are preparing for GRE exams.
A new visual change in GitHub 🙄
Tags: github, opensource, discuss
Published: 2021-12-09 16:53:55

I have seen a new visual change on GitHub today. As an enthusiast in Open-Source, I always surf on GitHub. As I was searching for something on my [GitHub profile](https://github.com/FahimFBA), I noticed something is missing under my `Edit profile` section. The `Stars` section is missing! After a while, I discovered that the section has been shifted to the upper part of my profile from its earlier position! Later, I noticed more visual changes on the badges and the about section of the repository also!


![The visual Change](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y8gg6gujvebl6qhwauvr.png)



![Second Change](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0i08j1o0wurzs70xi9zf.png)

The `Stars` section has a nicely listed visualization, although the feature is still on Beta right now. 

![Third Change](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4yxzrrliik3do1vwmzvo.png)

You can create your own list as well.


![List](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5tws9gli1dhemh2nywnq.png)



After sharing this experience on my Discord server, I realized that many of the users have not gotten the feature yet now. You may try to check whether you have also received the change like me or not.

Anyway, this article is just a discussion-type article. Let me know how you feel about this change. Personally, I like this change as that would help me to check the repository quickly which I have starred already. 

Also, if you want, then you can follow me on [GitHub](https://github.com/FahimFBA) as I am very active regarding open-source projects. You may also follow me on [Twitter](https://twitter.com/Fahim_FBA), [LinkedIn](https://www.linkedin.com/in/fahimfba/), [Facebook](https://www.facebook.com/iptu.fba/) as well. One more thing, I publish programming-related content on my [YouTube channel](https://www.youtube.com/c/InnovationWithIphim/) also, both in English and in the Bengali language. Make sure to check those out too if you want. 😀

Have a nice day! 😊
極簡 nvm 使用指南
Tags: node, nvm
Published: 2021-12-09 14:26:00

[nvm](https://github.com/nvm-sh/nvm) 是 [Node.js](https://nodejs.org/zh-tw/) 的多版本管理器，當你的開發環境有多個不同時代的 Node.js 專案、橫跨不同版次的 Node.js 時，nvm 就派的上用場。

Node.js 的版本管理器不只有 nvm，由於 nvm 只支援 macOS 與 Linux，在 Windows 下，改用 [NVS](https://github.com/jasongin/nvs) 是更好的選擇。（也可參閱另一篇〈[在 Windows 建置以 Visual Studio 為基礎的 Python / Node.js 開發環境](https://editor.leonh.space/2020/setting-up-python-node-js-development-environment-in-windows/)〉
nvm 的問題是，文件與說明又臭又長，其實 80% 的人只用的到 20% 的功能，所以這裡寫下個人常用到的功能與指令。

## 更新 nvm

更新 nvm 與從零安裝 nvm 是同一條命令：

```sh
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
```

這個安裝腳本會自行判斷是新裝還是更新。

要注意網址內有 nvm 的版號，更新 nvm 時要修改為最新的 nvm 版號。

## 更新 npm

[npm](https://www.npmjs.com/) 是 Node.js 的套件管理器，它也是需要更新的，nvm 有專門更新 npm 的指定：

```sh
nvm install-latest-npm
```

## 列出系統內各 Node.js 版本

```sh
nvm ls
```

以本人的環境為例，有列出下列版本：

```
       v14.18.1
->     v16.13.1
default -> 16.13.1 (-> v16.13.1)
iojs -> N/A (default)
unstable -> N/A (default)
node -> stable (-> v16.13.1) (default)
stable -> 16.13 (-> v16.13.1) (default)
lts/* -> lts/gallium (-> v16.13.1)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.17.0 (-> N/A)
lts/dubnium -> v10.24.1 (-> N/A)
lts/erbium -> v12.22.7 (-> N/A)
lts/fermium -> v14.18.1
lts/gallium -> v16.13.1
```

看似很亂，其實大部份情況下只要關注那 `default` 的版號即可。

那些 `default`、`iojs` 等等的是 alias，可以理解為標籤，`default` 標定的版號就是個人帳戶下預設的 Node.js 版號。

## 列出可安裝的 Node.js LTS 版本

```sh
nvm ls-remote --lts
```

偶數的 LTS 版本們有著更長的維護期，建議都使用 [LTS](https://nodejs.org/zh-tw/about/releases/) 版本，避免追著版號跑的窘境發生。

## 安裝 Node.js

安裝目前的 16.13.1 LTS 版，並且設為預設版次：

```sh
nvm install 16.13.1 --default
```

建議都使用 [LTS](https://nodejs.org/zh-tw/about/releases/) 版本，避免追著版號跑的窘境發生。

## 設定預設版本

同樣的以 16.13.1 LTS 版為例：

```sh
nvm alias default 16.13.1
```

## 為專案指定 Node.js 版本

在專案的資料夾內，放一個 .nvmrc 檔案，在裡面寫下該專案的 Node.js 版號，例如某專案要用 16.13：

```
16.13

```

進入該專案資料夾後，執行 `nvm use` 即會自動切換成 .nvmrc 指定的版本。

如果在安裝 nvm 時，有設定好與 shell 的整合的話，應該會自動幫我們做 `nvm use` 的動作。
Rubymine: Enable the JavaScript debugger
Tags: rubymine, javascript, ruby, rails
Published: 2021-12-09 17:31:20


 ---
title: Rubymine: Enable the JavaScript debugger
published: true
description: How to enable JavaScript
tags: #rubymine #javascript #ruby #rails
//cover_image: https://direct_url_to_image.jpg
---

### Enable the JavaScript debugger

- Open the Run/Debug Configuration by navigating from the main menu: 
  - `Run => Edit Configurations`. 
- Enable `run browser`
- Enter the start URL
- Enable Start JavaScript debugger automatically when debugging.

![Run/Debug Configuration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gfrf26g4zjn50z5ncs2g.png)
 

### Why did I write this?

This is taken from RubyMine documentation, so why write this?

I wanted to be able to enable the JavaScript debugger within RubyMine, RubyMine 2021.3, and I had no luck until I found this [RubyMine tutorial](https://www.jetbrains.com/help/ruby/debug-javascript-in-a-rails-application.html). It took me ages to Google and still can't find it straight away, so I'm leaving this note to myself.
Three lessons from my interview with @cassidoo
Tags: javascript, react, webdev, podcast
Published: 2021-12-09 21:10:09

Hey there, my name is Tiago and I am the host of [Wannabe Entrepreneur](https://wanabe-entrepreneur.com) (a podcast about what it's like to bootstrap a company).  

The great thing about having a podcast is that I have an "excuse" to ask **questions to people I admire and want to learn from!**
So far I got to interview incredible entrepreneurs of all sizes and backgrounds...

Recently I got to interview Cassidy Williams (@cassidoo) and she has more than **170K followers on Twitter!!** I won't lie, I was quite nervous... But she was super nice and the interview went really well.

Here are the **top 3 things** I learned from Cassidy:

1- **Be humble and genuine**
It might seem a bit of a cliché lesson but it does not make it less truthful... With such huge followership, most influencers would ignore small podcasters like me... Not Cassidy, she showed up and spoke openly about her experience in all the past companies she worked in. This just confirms that the real "trick" to personal branding and marketing is to truly be passionate about the topic and the community.

2- **Some companies want access to your social media**
With less than 500 followers on my Twitter account, this was never an issue personally. But in our chat, Cassidy told the Wannabe Entrepreneurs that she has to pay extra attention to the contracts and make sure that **she keeps all the control over her social media.** With more than 170K followers I guess that many companies could use it for personal marketing...

3- **Don't be afraid to experiment**
There is this tacit rule about the minimum period of time you should stay in a company before being "allowed" to leave without being judged by potential future employers... Well, **that rule is BS!** Cassity was never afraid to leave a job where she was not happy and that gave her the opportunity to experiment with different types of companies and find which ones she prefers to work at.

These are just 3 of a lot of lessons I took from my casual chat with Cassidy Williams. Would love to hear your thoughts on the interview. What questions did I miss? [You can listen to the full chat here](https://wannabe-entrepreneur.com/episodes/172/)