teleren/devto huggingface dataset:
A beginner friendly guide to optional chaining in Javascript
Tags: javascript, optionalchaining, beginners, objects
Published: 2020-07-25 16:48:14

##Optional Chaining has become one of my favorite ES2020 features.

Optional chaining allows you to safely access the nested object properties without the hassle to check validity of each one of them.
**Instead of using && to check for null or undefined, directly use ?.**
When you want to use an object's property you must check if it exists otherwise you may get a type error.
Thus in ES2020 we have ?. operator which does the job for you.

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

**So when are you going to use optional chaining next?**
Landed my first software engineering job!
Tags: ruby, sinatra, javascript, vue
Published: 2020-07-25 16:42:52

So, the other day I landed my first official software engineering gig! I will be doing some work for L&M Distributions and Logistics, LLC. who is based around the Philadelphia, PA. area!

I found this job through a talent agency, similar to Toptal. They require that you take and pass some coding tests to be eligible to apply for jobs in their system.

I passed my tests and I was hired on the first and only job I applied for! Quite amazing!

I met with the talent agency and the lead tech guy from L&M on a Zoom call. If I do well on this first project they have hired me for, they will also be hiring me to help build out their API.

My first order of business is to take an HTML template they have purchased and implement it into their Sinatra application. This should be a pretty easy job for me and I'm excited to start.

Hopefully they like my work and will continue to keep me on for the API project as well.
Beautiful Responsive Cards UI Design using HTML & CSS
Tags: css, beginners, tutorial, design
Published: 2020-07-25 16:39:28

{% youtube 7aAOXcWTawc %}

In this Tutorial, we'll build a Responsive Cards UI Layout with Hover Effect using HTML & CSS. This Project-based Tutorial is suitable for all especially Beginners.

📕 Images download link:  https://drive.google.com/drive/folders/1z7xh5-myGD4p69vRfABTptI6jvLITACs?usp=sharing

🧠 Concepts covered in this video:
 - Modern Web Design
 - CSS Grid
 - Flexbox
 - CSS transitions
 - Transforms

If you are interested in more real-world **project-based tutorials** then consider checking out the [**Code League**](https://www.youtube.com/channel/UCBF2LIwr2Odb3-pRnNBRegA) Youtube channel and inspire the tech industry.

Share this [video](https://youtu.be/7aAOXcWTawc) with a friend

Let’s connect:
[Instagram](https://www.instagram.com/codeleague7)
[Twitter](https://www.twitter.com/codeleague7)
Starting a monthly newsletter for cool stuff I encounter on Rails, React and Graphql.
Tags: rails, react, graphqlruby
Published: 2020-07-25 16:16:44

Starting a monthly newsletter on Ruby on Rails, React and GraphQL developers to read about some cool stuff happening in the community.

In a month we come across a lot cool stuff happening in the community, learn new things and contribute to the open-source world and newsletters is the best way to share some of those finding/blogs/videos.

This newsletter would consist of the following things:
- Dev Joke
- My Blogs.
- Reading/watching list.
- Open-source libraries/contributions.
- Rails changelog.
- Watching/Reading/Reviews.

If you'd like to read my monthly newsletter. Please do subscribe here https://buttondown.email/abhaynikam
ผู้อาวุโส / ผู้มีอาวุโส / อาวุโส
Tags: bhante, awuso
Published: 2020-07-25 16:13:16

---
title: ผู้อาวุโส / ผู้มีอาวุโส / อาวุโส
published: true
description: Bhante, Awuso
tags: Bhante,Awuso
---
การเรียกคืนสำนวณคดีจากผู้พิพากษาในสมัยก่อน ห้วหน้าศาลสามารถกระทำได้โดยลำพังและเป็นดุลยพินิจ เรียกได้ว่าตามอำเภอใจเลยละครับ ซึ่งทำให้เกิดข้อกังขาว่าห้วหน้าศาลใช้ดุลยพินิจโดยไม่เป็นธรรม เช่น เมื่อผู้พิพากษาหัวหน้าศาลเห็นว่าผู้พิพากษาท่านที่เป็นองคณะพิจารณาดี มีความความเห็นในการทำคำพิพากษาไม่ตรงกับตน ก็จะอาจสั่งเรียกสำนวนคดีคืนแล้วสั่งโอนคดีให้ผู้พิพากษาท่านอื่นที่เห็นด้วยกับตนทำคำพิพากษาต่อไปได้

พระธรรมนูญศาลยุติธรรม จึงบัญญัติให้ การเรียกคืนสำนวนคดีจะกระทำได้ต่อเมื่อเป็นกรณีที่กระทบกระเทือนต่อความยุติธรรม**และ**ผู้พิพากษาที่มีอาวุโสสูงสุดในศาลนั้นที่มิได้เป็นองค์คณะในสำนวนคดีดังกล่าวได้เสนอความเห็นให้กระทำได้

ซึ่งผู้พิพากษาที่มีอาวุโสสูงสุดในศาลนั้น ไม่รวมถึงผู้พิพากษาอาวุโส

ผู้พิพากษาที่มีอาวุโสสูงสุด คือผู้พิพากษาที่ดำรงตำแหน่งผู้พิพากษามานานที่สุด แต่ยังไม่ครบอายุเกษียณอายุราชการ

ส่วนผู้พิพากษาอาวุโส คือผู้พิพากษาที่มีอายุครบ 60 ปีแล้ว แต่ยังมีศักยภาพในการปฏิบัติหน้าที่ผู้พิพากษา สามารถขอไปดำรงตำแหน่งผู้พิพากษาอาวุโสในศาลซึ่งไม่สูงกว่าขณะดำรงตำแหน่งได้

จะเห็นว่าในภาษาไทย "อาวุโส" หมายถึง มีอายุแก่กว่าหรือมีตำแหน่งหน้าที่การงานสูงกว่า

ซึ่งเป็นการใช้ที่เพี้ยนไปในทางตรงข้ามกันเลยกับภาษาบาลี ที่ใช้คำว่า "อาวุโส" แปลว่า ท่านผู้มีอายุ ใช้เป็นคำร้องเรียกเป็นคำขึ้นต้นที่จะต้องกล่าวก่อน  ก่อนที่จะกล่าวคำอืนๆ ต่อไป ต่อผู้ที่อ่อนพรรษากว่า

ส่วนคำที่ผู้อ่อนพรรษากว่า ใช้กล่าวกับผู้แก่พรรษากว่า จะใช้คำว่า "ภันเต" แปลว่า ข้าแต่ท่านผู้เจริญครับ
Handling multiple Git credentials the easy way
Tags: ssh, git
Published: 2020-07-25 15:42:07

In this post I'm gonna quickly go over a nice and clean setup I use to manage authenticating with different accounts on a variety of different project repositories hosted on cloud services such as GitHub, GitLab, BitBucket, etc..

### PREPARATION
As a first step, we want to make sure that **all** of our accounts use SSH keys to authenticate connections between our machines and the cloud providers. Nowadays the process doesn't require much fiddling, and can be simply done using our providers' web UIs. I won't go over this part because the specific way to set this up would be vendor-specific, and I don't consider this step to be complicated enough to require any explanation.

Let's suppose that at this point we own two different GitLab accounts, each bound to a dedicated SSH key stored on our machine:
```
user: first
email: first@myemail.com
private key: ~/.ssh/first/id_rsa
public key: ~/.ssh/first/id_rsa.pub
repository name: first-project

user: second
email: second@myemail.com
private key: ~/.ssh/second/id_rsa
public key: ~/.ssh/second/id_rsa.pub
repository name: second-project
```

### Configuring SSH
If not present, a SSH configuratio file needs to be created
```sh
cd ~/.ssh/
touch config
```

We are going to use said file to tell our machine to use different credentials depending on the host we're trying to connect it to. 


This could lead us to a question: 
> We just assumed both our accounts are gitlab.com accounts. How do we use different credentials if the host is the same?

The answer is straightforward:

ssh can be configured by using host alias names, which will basically allow us to treat the same underlying hostname as two different hosts, while still resolving the correct hostname. 

Let's see how to take advantage of this feature

```sh
# Gitlab.com - "first" account
Host gitlab.com_first   # <-- this could be any alias 
    HostName gitlab.com	
    User git
	Preferredauthentications publickey
    IdentitiesOnly yes
	IdentityFile ~/.ssh/first/id_rsa

# Gitlab.com - "second" account
Host gitlab.com_second  # <-- this could be any alias 
    HostName gitlab.com
    User git
	Preferredauthentications publickey
    IdentitiesOnly yes
	IdentityFile ~/.ssh/second/id_rsa
```

### Configuring Git
Our job is pretty simple now: we need to let git use our alias hostnames in order to provide the correct SSH credentials when trying to authenticate  (using only our "first" account for brevity):

```sh
# If the remote repo is still not cloned locally
# we just need to provide our alias hostname
# when cloning
git clone git@gitlab.com_first:first/first-project.git

# If the remote repo is already cloned locally
# we need to update the remote's hostname. Here
# we're assuming "origin" its name.
git remote remove origin
git remote add origin git@gitlab.com_first:first/first-project.git
```

----
## DONE
We're done with our configuration, now the correct credentials will be used when connecting to each remote.
Recap/ Summary of Week #30
Tags: devjournal, azure, opensource, showdev
Published: 2020-07-27 00:49:14

---
title: Recap/ Summary of Week #30
published: true
date: 2020-07-25 15:39:00 UTC
tags: devjournal,azure,opensource,showdev
canonical_url: http://www.frankysnotes.com/2020/07/recap-summary-of-week-30.html
---

Every beginning of weekend, I will share a recap of the week and at the same time a summary of my streams. Those videos are at least two hours long, so I thought a short summary to know if the topic interest you could be useful. Watch only the summary or relax and enjoy the longer version that up to you!
  
{% youtube YPslv6Zt1AE%}   

#### Useful Links:

- Let's get started why Azure static web apps (John Papa): [https://c5m.ca/aaa-ep15](https://c5m.ca/aaa-ep15) 
- Mixed Reality QnA Bot (April): [https://c5m.ca/aaa-ep16](https://c5m.ca/aaa-ep16)
- Why it's not working?! Investigating login Azure AD Token with Blazor WebAssembly: [https://c5m.ca/stream-ep113](https://c5m.ca/stream-ep113)
- ARM Series #4: Template Functions (Abel): [https://c5m.ca/learn-arm-ep4](https://c5m.ca/learn-arm-ep4)
- Learning Node js: Serializing and deserializing an object to a file: [https://c5m.ca/stream-ep114](https://c5m.ca/stream-ep114)
Data Structures and Algorithms in CPP(C++) and Python
Tags: cpp, python, computerscience
Published: 2020-07-25 15:27:18

It's a Series on Data Structure in CPP and Python Programming language.

Data structures & Algorithms are an essential part of programming. It comes under the fundamentals of computer science. It gives us the advantage of writing better and efficient code in less time. It is a key topic when it comes to Software Engineering interview questions so as developers, we must have knowledge of Data Structure and Algorithms

![Data Structure and Algorithm in CPP and Python](https://dev-to-uploads.s3.amazonaws.com/i/qgib8wydhx6h1riklvtc.jpg)

#### Data Structure

In computer science, a data structure is a data organization, management, and storage format that enables efficient access and modification.

#### Algorithms

An algorithm is a set of instructions that are used to accomplish a task, such as finding the largest number in a list, removing all the red cards from a deck of playing cards, sorting a collection of names, figuring out an average movie rating from just your friend's opinion

Algorithms are not limited to computers. They are like a set of step-by-step instructions or an even a recipe, containing things you need, steps to do, the order to do them, conditions to look for, and expected results.

#### Introduction to C++

C++ is an extension of the C programming language which supports the creation of classes, hence known as “C with classes”. It is used to create high-performance applications and provides us with a high level of control over computing resources. 

#### Introduction to Python

Python is an open-source (free) programming language that is used in web programming, data science, artificial intelligence, and many scientific applications. Learning Python allows the programmer to focus on solving problems, rather than focusing on syntax.

#### C++ for for competitive programmin

C++ is by far the most popular language of choice for competitive programmers across the world as it is usually faster than Java and Python, and most of the resources are available in C++. C++ also has a vast library called STL(Standard Template Library) which makes life a lot easier for competitive coders

#### Python for competitive programming

One of the reasons to choose python is that it radically cuts short the time you spend writing code, rather you spend time thinking about the logic that is needed for the question. Because in this kind of competition time is the key, faster the programmer able to write the solution better it is


#### **Github Repository**

{% github https://github.com/codePerfectPlus/AlgorithmsAndDataStructure no-readme %}

I hope you found this article useful as a simple introduction to data structures and Algorithms. It's a Series on Data Structure in CPP and Python Programming language.

I would love to hear your thoughts. 😇

React ❤️ to encourage Author.
Confusion as a newbie front end developer.
Tags: angular, typescript, javascript
Published: 2020-07-25 15:18:42

Hi all, I am a java developer at my current company and learning java is fun, I have a computer science degree but my interest to learn more about programming and coding increased a few months back.

Currently, I am in a dilemma. I need to learn front end along with my back end knowledge and I have complete exposure to a front end code base that is my current project but I can't decide if I can skip Javascript or not.
My project's front end is Angular 6 and so I started learning typescript and have my hands into Angular but every front end dev I have come across suggested learning Javascript before TypeScript!

I love object-oriented programming and typescript gives me that so I don't really want to learn JavaScript for that sole reason.

Can existing Angular developers help me with what should be done? Can I just carry on with typescript?
How to create a dropdown menu on hover using jQuery
Tags: javascript, css, html
Published: 2020-07-25 15:10:20

Hello fellas, in today's post I want to show you guys a cool jQuery trick I learned recently. 

When you are creating interactive web pages it is very likely you will need to have a navigation bar that has buttons or links which direct users to other webpages. In some scenarios, you need to display a couple of options for the user to choose from and an easy to use choice for this would be using a bit of jQuery to show a dropdown menu with links on hover.

For this you will need to have jQuery installed at the base of your project and linked to your HTML file as so;

`<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>`

Ok so let's hop right into adding the flesh of the project. First, let us create a wrapper that will hold all of our content. Then create a button or just a link that will drop down our options. 

`<div class="wrapper">
      <div class="button">
        <button value="Hover on me!" id="hover">Hover On Me! 
        </button>
      </div>`

The next step is to add the list of options you want to be displayed on hover. In this case, we will create links to other pages.

`<div class="dropdown">
        <ul>
          <li><a href="#">JavaScript Page</a></li>
          <li><a href="#">HTML Page</a></li>
          <li><a href="#">CSS Page</li></a>
        </ul>
      </div>
 </div>`

Now we have our HTML all set up. The next step is to set the display of the dropdown options to 'none'. This is because we only want this list of options to appear when we hover over the button and disappear when the mouse moves away. 

In your CSS file;

`.dropdown{
  display: none;
}`

Looking pretty great so far, so let us proceed to the final step and this will be creating the actual hover effect using JavaScript.

In your JS file add these five lines of code;

`$(document).ready(function(){
  $(".button").hover(function(){
    $(".dropdown").slideToggle();
  });
});`

What we are simply telling jQuery here is:
  1. Check if the document is done loading using .ready()
  2. 'Listen' to the element with the class "button" and 
      check if the user hovers on it using .hover()
  3. If the user hovers on the element, slide down the 
     dropdown menu using slideToggle()

Note: "slideToggle()" toggles between "slideDown()" and "slideUp()" depending on the element method which in this case is "hover()", hence the dropdown menu will slide down when the user hovers above the button and slide up when the user moves away from the button. 

Happy coding and feel free to leave comments down below
How to preview image before upload to server 
Tags: javascript, ticks
Published: 2020-07-25 15:03:09

---
title: How to preview image before upload to server 
published: true
description: 
tags: Javascript, Ticks
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/3x4w194sixs68jtnh3u4.jpg
---

Recently my team have case to upload image to server i just want to show progress to user image upload status. if show the user which image file upload is more graceful. so i just preview image and show the progress same time. 

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

Look at the screenshoot. before the image show the upload icons. direction current image uploading to server. i thinks it's more simple and useful.

```	javascript
// html code
<input id="input_file" type="file" multiple @change="fileChange" />

// here file agrument from html input file tag
covertInputImageToDataURL(file) {
  return new Promise((resolve, reject) => {
    const fr = new FileReader()
    fr.onload = () => {
      resolve(fr.result)
    }
    fr.readAsDataURL(file)
  })
}

// event listener to input file tag 
const files = []
fileChange() {
  const newFiles = document.getElementById('input_file')
  
  // covert all file to dataURL
  for (let i = 0; i < newFiles.length; i++) {
    const file = newFiles.item(i)
    const fileID = randomString() // random file id 
    const dataURL = await this.covertInputImageToDataURL(file)
		files[fileID] = { file, dataURL }
  }
} 
```

Here is Vue.js Template Define

```html
// use files 
<div v-for="key in Object.keys(files)" :key="key" >
  <img :src="files[key]['dataURL']" :alt="key" />
</div>
```

So far we just listener **input** file tag file change event and covert files to dataURL. when we set **img** `src` attribute with dataURL the image will shown by the tag. we can know which image uploading. 

Help it can help you :)
This is why I'm using google drive sync.
Published: 2020-07-25 14:47:26

Hello and welcome to my first post. 

I study web development for hobby at the moment, and today I want to share how I setup my new and first notebook. 

I mainly use my PC desktop but few days ago I bought a notebook for work and for get back to study and to be able to do it where I want. 

For this test I'm using Google Drive sync. I've never used for sync document in the web from my pc but this seems to be the perfect opportunity to test it. 

I'm not only using for the code, so I can work on the notebook and desktop without the use of external USB or HDD, but I'm using it for CherryTree. 

This program is like "OneNote" of Microsoft, but doens't have an online sync for using it on other device (PC). So the point is to have the database with all the notes on the google drive folder so now I can have the notes on my notebook and on my desktop. 

Same things for the code. For small projects or just for exercise I don't want to use Github (maybe in the future I will).

Andddd....done. There are few other programs that I use like "To Do" by Microsoft and "Keep" by Google, but they are sync with the accounts. 

Thanks for reading and see you next week with my Visual Studio Code config. 


>Main software: 
    Browsers: 
        - Chrome
        - Firefox 
    Editor: 
        - LibreOffice
        - Notepad++
    Sync: 
        - Google Drive Sync
    Development: 
        - Visual Studio Code (next post I will talk about my settings)
    Note editor: 
        - CherryTree
        - To Do from Microsoft
        - Keep from Google
Reload cron jobs in an Alpine linux container

Tags: docker, alpine, cron
Published: 2020-07-25 14:42:44

TL;DR

> After updating `/etc/crontabs/root` , putting an empty `cron.update` file in the `/etc/crontabs` will update directory's last modification, cron daemon will reload jobs from the files in the  `/etc/crontabs` and `cron.update` file will be deleted.


### A bit more about why and how

In a situation where container's crontabs directory (`/etc/crontabs`) is mounted from a host, just editing file that container sees as a `/etc/crontabs/root` file outside of a container will not trigger a cron daemon to reload jobs.

Looking at the [busybox source code](https://git.busybox.net/busybox/tree/miscutils/crond.c), there is a comment saying 

> The file 'cron.update' is checked to determine new cron jobs.  The directory is rescanned once an hour to deal with any screwups.

Additionally, the code is checking if the `/etc/crontabs` directory's last modification time changed which triggers a job update. To update last modification time of a directory, something should be added, removed or renamed inside that directory (excluding subdirectories).  For example, adding a random file put into the `/etc/crontabs` will update last modification time which will trigger reloading jobs in the next cycle (the next minute). This is good, since container doesn't have to be restarted for new jobs to take effect. The downside is a lack of feedback that this really happened.

So, instead of a random file, a file named `cron.update` can be used to get a confirmation that jobs have been reloaded. File is used by crontab to notify cron daemon that a cron file has been updated and a cron daemon will delete `cron.update` once it reloads the jobs, meaning that if the file is gone, jobs are reloaded. Crontab writes the changed file name into the `cron.update`  file, but since adding a file updates directory's last modification time, an empty file will do the trick.
I made a Flutter Extension Pack to pump up your productivity in VS Code.
Tags: flutter, dart, vscode, extension
Published: 2020-07-25 14:37:53

I created the Ultimate Flutter Extension Pack for the Flutter Commuinty.
You can check the blog on [Ultimate Flutter Extension Pack](https://medium.com/@maruf.hassan/the-ultimate-vs-code-extensions-for-working-with-flutter-8e75232e6f98)
Expose localhost server to internet in 1 step
Tags: webdev, tutorial, beginners, devops
Published: 2020-07-25 14:28:41

## #Whotisupeverybodyhowisitgoing

After reading this article you will be able to deploy your app in **1 command** *\*literally\** (the setup is 5 steps though). So **smash ALL** of  ❤️   🔖    🛳  on your left and let's dive right in !

### STEP 1 - Install PHP and Composer

**MAC Users:**

Just go 

```bash
brew install composer
```
Of course you need to have brew installed https://brew.sh/ - Its the best package manager of Mac OS

**If you are on Windows,**

use these links: 

PHP build for Windows download - https://php.net

Composer Installation Instructions here - https://getcomposer.org/doc/00-intro.md


### STEP 2 - Make Composer Install beyondCode/EXPOSE

```bash
composer global require beyondcode/expose
```

Now add this to your `.zshrc or .bashrc` file based on whatever terminal you are using. 

```bash
export PATH="$PATH:$HOME/.composer/vendor/bin"
```
Then restart your terminal and type `expose` to see if the command is recognized or not.

##### STEP 3 - Go and get yourself one of these 🍺 , cuz I believe you completed the hardest part of the journey 

### STEP 4 - Now create an account on https://beyondco.de/ and you will be given a token so register that with your terminal

```
expose token [YOUR-AUTH-TOKEN]
```

### STEP 5 - This is the 1 line you've been waiting for ٩(^‿^)۶!

Here you go (☞ﾟヮﾟ)☞

```
expose share https://127.0.0.1:400 --subdomain="subd" --auth="admin:123"
``` 
This will link your local dev server running at **127.0.0.1:400** to a url **subd.sharedwithexpose.com** which anybody on the internet can access with the credentials.

```
username: admin
password: 123
```

You can customize the subdomain and auth credentials to whatever pleases you for free unlike https://ngrok.com

### Resources referred 

Official docs https://beyondco.de/docs/
Google 

#### Hit the **FOLLOW** button for more awesome content