teleren/devto huggingface dataset:
Made sound effects for when I have an error
Tags: webdev, testing, javascript, showdev
Published: 2021-01-15 01:24:59

I recently added some tests to my javascript code for a frontend project.
Here is one of them for example,
~~~js
test('Eval Template', EvalTemplate('let result = "hola"; return result;'), 'hola');
~~~
I thought it would be cool to play some sounds when they passed or failed.  
Its actually quite simple, you just wrap your main script in a function like start and use try and catch to check if there was an error and play sound.
~~~js
function start(){
  error
}
// in test.js
try{
  start();
}
catch(e){
  consoleLogStuff(e);
  playSound();
} // Thats the idea
~~~

All you do to to play a sound is
~~~js
new Audio('path/to/sucsess.mp3').play();
~~~
And I didn't forget to make fancy console log stuff.
~~~js
console.log('%cSUCSESS',
  'color:#111;background:#6e6;padding:16px;font-size:40px;\
  font-weight: bold;display:block;text-align:center;border-radius:16px;');
~~~
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/p8078difaidy9ekk4avm.png)

Now I hear a chime or error sound when testing which is actually quite helpful. If you do this, you should use VS live server or Atom live server extension for best experience.
Quickly Move Code in VS Code w/ Mac Shortcuts

Tags: vscode, writing
Published: 2021-01-15 01:13:47


### CMD X - place the full line into memory & clear it simultaneously 

*What It Does:* This is similar to the classic CMD X cut of text but without the need to select the text. This shortcut automatically moves text into memory and deletes the line. Use CMD V to paste the same line (if needed)

*Best For:* removing 1 line and moving it to a new position. At the new position, CMD V and the text will bump down the current line text and insert at the location.  

<img width="75%" style="width:75%" src="https://j.gifs.com/D1X2VY.gif">

_____________________________________________

### CMD Enter - insert a new line from the middle of the line above

*What It Does:* On your cursor position, CMD Enter inserts a new line break, shifting the current line 1 lower and moving your cursor to the start of the empty line. 

*Best For:* Spacing out code blocks or need a new line for new text

<img width="75%" style="width:75%" src="https://j.gifs.com/wVoA6m.gif">
_____________________________________________

### CMD D -  select identical items and replace 

*What It Does:* Finds identical text and selects it for simultaneous delete, or re-write

*Best For:* Renaming a variable/text which is used in multiple locations in one file.

*Note:* Move your cursor to the word/phrase and CMD D to select all adjoining characters. No need to highlight the whole word or number. CMD D multiple times to select each instance below the cursor.  ESC to remove focus.

<img width="75%" style="width:75%" src="https://j.gifs.com/P7n9qy.gif">
_____________________________________________

### Option Up or Down Arrows - move line(s)

*What It Does:* Easily move a full line of code (or lines of code) up or down as many lines as needed.  Similar to cut and paste or CMD X but visually see code move

*Best For:* Refactoring code. Moving one function above or below another. 

*Note:* From anywhere on a single line, Option up or down to move the line. To move multiple lines, highlight at least 1 part of each line to move them as a block. 

<img width="75%" style="width:75%" src="https://j.gifs.com/ANR2L7.gif">
_____________________________________________

### OPTION CMD [  or OPTION CMD ]  - collapse/uncollapse code blocks

*What It Does* Quickly collapse or uncollapse blocks of code according to scope

*Best For:* condensing code that you don’t need to see or deal with at the moment. 

*Note:* This command works per scope. So you can collapse while loops, if statements, etc, and not the complete function. To collapse the function, invoke the shortcut in the functional scope.  

<img width="75%" style="width:75%" src="https://j.gifs.com/wVoAzg.gif">
My 3️⃣✅ AWS Knowledge Center articles published to help customers on "AWS Lightsail" ☁️🔍⏳👨‍💻👩‍💻
Tags: aws, devops, linux, cloud
Published: 2021-01-15 01:12:26

<b>Thought of sharing these with you</b> 😊
<h4><i>"➜ As you might be aware that due to some new features Amazon Web Services (AWS) Lighsail Customers begin to run more complex environments and these articles can be handy.👨‍💻👩‍💻<h4></i>

<u><b>I've written below two Articles on AWS Knowledge Center which you may find useful to manage your Lightsail Instances in your AWS account in a programmatic way using AWS CLI</b></u>
>
<ol>
<b><li><a href="https://aws.amazon.com/premiumsupport/knowledge-center/lightsail-aws-cli-commands/"> How can I manage my Lightsail instance using AWS CLI commands?</a></b></li>
<b><li><a href="https://aws.amazon.com/premiumsupport/knowledge-center/lightsail-aws-cli-static-ips/"> How can I manage static IP addresses on my Lightsail instances using AWS CLI commands?</a></b></li>
<b><li><a href="https://aws.amazon.com/premiumsupport/knowledge-center/lightsail-aws-cli-snapshots-backups/"> How can I manage my snapshots and create backups for my Lightsail instances using AWS CLI commands? </a></b></li>
</ol>
>




                     😇 Happy learning 😇

![Happy Learning](https://media.giphy.com/media/D0EjguuQzYr9m/giphy.gif)
Top 5 DEV Comments from the Past Week
Tags: bestofdev
Published: 2021-01-15 01:04:16

---
title: Top 5 DEV Comments from the Past Week
published: true
description: Highlighting some of the best DEV comments from the past week.
tags: bestofdev
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--7VrAA2ln--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://thepracticaldev.s3.amazonaws.com/i/qmb5wkoeywj06pd7p8ku.png
---

This is a weekly roundup of awesome DEV comments that you may have missed.  You are welcome and encouraged to boost posts and comments yourself using the **[#bestofdev](/t/bestofdev)** tag.

---

Job announcements in our **[weekly wins](https://dev.to/devteam/what-was-your-win-this-week-1m13)** posts, make me happy @dana94

{% devcomment 1a7b4 %}

Around these parts, we think Rails is as alive as ever (DEV is a Rails app, after all). Your comment on [this post](https://dev.to/remy29/on-death-and-dying-ruby-on-rails-5d7f) stuck with us, @andrewmcodes. We are _definitely_ better than telling our mentees "x language/framework/technology isn't an option even if you're interested in it." — especially when it comes to Rails!

{% devcomment 1a934 %}

Lana tears and coding tears are an underrated combo, @bogdaaamn 😭 

{% devcomment 1ab87 %}

I think small habits are the right approach when it comes to [New Year resolutions](https://dev.to/sarthology/what-s-your-new-year-resolution-345i), @monika_roy1!

{% devcomment 1a9he %}

Not gonna lie, @danielmmellop, I shared this incredibly kind comment you left [here](https://dev.to/albertwalicki/how-to-fall-in-love-with-single-div-illustrations-1a5) with the rest of the Forem team — to great fanfare!


{% devcomment 1a6o8 %}

See you next week for more great comments ✌
อธิบาย .vimrc setting ที่ใช้อยู่ในปัจจุบัน
Tags: vim, programming
Published: 2021-01-15 01:01:28

setting .vimrc ไม่เยอะ เพราะใช้ไม่บ่อย เลยมาสรุปไว้หน่อยเพราะส่วนใหญ่จะค้นแล้วก็อปมาใช้ไม่ได้ทำความเข้าใจว่ามันเป็นอะไร

ตอนนี้ config ที่มีเป็นแบบนี้

```
set expandtab
set tabstop=2
set softtabstop=2
set shiftwidth=2
set autoindent
set backspace=indent,eol,start
```

ไล่ทีละบรรทัดเลย

## บรรทัดที่ 1
```
set expandtab
```
ใช้เพื่อ เปลี่ยน tab ให้กลายเป็น space

## บรรทัดที่ 2
```
set tabstop=2
```
ใช้เพื่อ กำหนดจำนวน space ที่จะใช้แทน tab เช่นกำหนดเป็น 2 ก็เมื่อกด tab จะใช้ 2 spaces แทน

## บรรทัดที่ 3
```
set softtabstop=2
```
ใช้เพื่อ กำหนดจำนวน space ที่จะใช้แทน tab เมื่อกด tab และเมื่อลบ tab ด้วย backspace ก็จะลบ space เท่ากับที่กำหนดในนี้ด้วยเพื่อให้สะดวกไม่ต้องลบ space ที่ละค่า

## บรรทัดที่ 4
```
set shiftwidth=2
```
ใช้เพื่อ กำหนดค่า space ที่จะเลื่อนไปมาเมื่อเราสั่งให้ VIM indent ให้ด้วยคำสั่ง `>> ` หรือ `<<`

## บรรทัดที่ 5
```
set autoindent
```
ใช้เพื่อ กำหนดให้ VIM auto indent ให้เมื่อเรากด enter แล้วจะเลื่อน cursor ไปให้ตรงกับ indent บรรทัดก่อนหน้าให้เอง

## บรรทัดที่ 6
```
set backspace=indent,eol,start
```
setting อันนี้ค่อนข้างเข้าใจยาก แต่ใช้เพื่อ เปิดเพื่อให้ใช้งาน backspace ลบตัวอักษรที่เกิดจาก autoindent ได้, ลบ eol character เพื่อทำให้สองบรรทัดรวมกันได้ และ ลบ character ของการ insert ใดๆได้ ตอนอยู่ใน insert mode ไม่ใช่แค่จาก อักษรที่เกิดจาก insert mode ล่าสุด

<a href="https://www.buymeacoffee.com/weerasak" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
Working in the new CSS Framework 
Tags: css, news, beginners
Published: 2021-01-15 00:55:40

Hello everyone, I'm **Avalojandro**
I am a FrontEnd Developer who every day I am learning more and happy to know this great world of programming, this is my first post and I am very happy to announce this notice.

I've been working on a new project for six months, this started as a hobby and as a simple idea, but while working on it, I realized the potential the project had, so I started working on it.

#**Context**
At the beginning of 2020 i published my first open source development project to GitHub, his name was Catto-CSS Library, that was a library of CSS animations that i created when i started to learn about the CSS animations and I was surprised by everything that could be done with the CSS, so i decided to start with something great.

  ![Alt Text](https://community.codenewbie.org/remoteimages/i/j4etlxha079e1u3r0dq6.png)

The project was published on GitHub and on a website, for months the project received a fairly modest number of visits but remained constant.
But one day I Google "Catto-CSS" to see if someone had talked about the project, and to my surprise I found a blog that talks about the best CSS animation libraries of 2020, and there I found my project, it was very satisfactory for me , having seen that at least all the hours that I spent working to publish the project were worth it.


![Alt Text](https://community.codenewbie.org/remoteimages/i/e3sp1sx38su2yc1yvb3c.png)

Thanks to this, my repository on GitHub began to receive more weekly visits :D 

#**The new idea**
At the end of the 2020 i decided to convert Catto-CSS Library in something more than a simple CSS animation Library, i decided to create a CSS Framework, so i changed the name **"Catto-CSS Library"** to **"CattoCSS Framework"** with CSS components, templates and more!.

![Alt Text](https://community.codenewbie.org/remoteimages/i/6ewpzcfdnz7qopjec9no.png)

I have been working in the new project for three months, It is not finished yet because I have had to focus on the university and other things, but I hope to finish the documentation and the web this year, because it is the only thing missing.

![Alt Text](https://community.codenewbie.org/remoteimages/i/sewawmeq60xaa3ulo97m.png)

The Framework will keep the animation library that started it all 😺, the project is still an animation library, but when the framework is ready it will be updated

You can visit the current Catto-CSS repository by visiting my GitHub profile, there is the official Catto-CSS website. **Remember that CattoCSS is an Open Source project**.

###Thanks for read, and i hope publish more about the project.

Regards, **Avalojandro** (https://github.com/Avalojandro)
https://cattocss.com/

![Alt Text](https://community.codenewbie.org/remoteimages/i/lrbndhd1pz0jq8bmpbv5.jpg)
My experience in LHD Build 2021
Tags: majorleaguehacking, localhackday, microclub, mlh
Published: 2021-01-15 00:49:48

Hi,
 
My name is CHIKHI Sofiane 21 yo undergraduate Computer Science student at University of Science and Technology Houari Boumediene.

I'm here to share with you my own experience as a first participation in hackathon ever and specially in Local Hack Day Build 2021 with Micro Club guild.

But before that you may ask what is LHD build ?

First , Local Hack Day is a week-long celebration event, of creating hacks revolving around technology , that brings together students from around the world in the name of competition, community-building , commuter science skill-building and to contribute to open source projects ect… 
So whether you are skilled in coding or you are a beginner there are challenges for all skill levels. Each time you conquer a challenge you'll earn more points... and points get you cool swag of course ! 

-Before the event : 
Personally i was stressed about how the challenges will be and my lack of knowledge in IT field but my guild mates comfort me because we will all team up to deal with daily challenges and specially weekly ones and as our guild master said : "Local Hack Day is the easiest way to participate and learn and contribute with projects to a worldwide community soo just join don't worry the force is by your side"

Day 1 :
We did a livestream from discord in our guild server and watched it all together it was funny specially when we raid the twitch chat with #Micro club but just after we started working seriously on challenges i attended all the workshops and lives and did all the daily challenges except one because i ran out of time sadly.
at the end of the day 1 LHD updated the leaderboard and... surprise i was on 8th rank worldwide i was shocked and happy at the same time all my friends and guildmembers spammed me on discord to congratulate me.

Day 2 : 
I was on fire literally i did all i could do to submit challenges on time with the help of our elders in the guild but what i knew LHD isn't only for coding and submitting challenges but it's also mini events and activity to chill share good moment with hackers community i participated in the !Light challenge at 3Am xD.
at the end of the day i didn't maitain my position in the leaderboard but i still satisfied because the main reason to participate is to gain experience not to compete.

Day 3 : 
sadly i was exhausted and i only attended the lives and workshops but couldn't submit any challenge sadly.
Creating localhost using Node.js and Express
Tags: javascript, codenewbie, node
Published: 2021-01-15 00:36:14

# What is Node.js?
 Node.js uses to create a backend using javascript. In a simple way, Node.js is a javascript complier/interpreter which is used to run javascript outside of the browser.We can use Node.js to create Server-side applications(API, Web server) and Desktop applications like Atom.
 If Node is not installed in your computer, check this link to [download](https://nodejs.org/en/).
 The most useful feature of Node is that it comes pre-installed with package manager called NPM(Node Package Manager). There are thousands of packages in Node and NPM gives access to all of the packages. One of the package we need for setting up localhost is Express.

To install a package using the command line:
```
npm install package-name
```

Steps to create a localhost:
* Create a server.js file in your root directory.
* Install Express using the command
```
npm install express
```
* In server.js file,
   ```
// Express to run server and routes
const express = require('express');
// set up an instance of app
const app = express();
  
// Initialize the main project folder(remember to save all html,css,js files into this folder)
app.use(express.static("folder_name"));

// Initialize the route with callback function
app.get("/", sendData);
 
// Callback function
function sendData(request,response) {
    response.sendFile(path.join(__dirname + '/index.html'));
}

// Initialize port
 const port = 3000;

// Spin up the server
  const server = app.listen(port,listening);
  function listening() {
  console.log(`running in localhost: ${port}`);
}
```

require() function is used to import the express module.
To learn more about Express:
[Express](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction)
How To Display Read Time On WordPress Articles
Tags: php, wordpress, webdev
Published: 2021-01-15 00:22:18

Time is important to all of us yet we can never seem to find enough time in the day! When you’re browsing the web, you’ll probably read articles that won’t take up as much of your time at that moment. Displaying read time can be helpful to your visitors and even make them stay on your site longer. Let’s learn how to display read time!

## Find The Loop

You need to find the [WordPress loop](https://codex.wordpress.org/The_Loop) code in each of the theme files you’d like to display your read time. Every theme is different, but you should be able to find something similar to the examples below:

```php
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  
<?php endwhile; else : ?>
      
<?php endif; ?>
```

```php
<?php 
  if ( have_posts() ) {
    while ( have_posts() ) {
      the_post(); 
  
    } 
  } 
?>
```

Here are some common theme files where you may want to display the read time in the WordPress loop:

* category.php
* index.php
* search.php
* single.php
* tag.php

## Read Time

Let’s get the content of the article first. Because you’re in the WordPress loop, you can grab the content from the **$post** variable using the **post_content** property.

```php
$content = $post->post_content;
```

Remove any HTML and PHP tags using the [strip_tags](https://www.php.net/manual/en/function.strip-tags.php) function. Count how many words there are using the [str_word_count](https://www.php.net/manual/en/function.str-word-count.php) function.

```php
$words = str_word_count( strip_tags( $content ) );
```

Now the calculation for the read time in minutes. An average read time is 200 words per minute. Divide the number of words by 200 and then round up using the [ceil](https://www.php.net/manual/en/function.ceil.php) function.

```php
$minutes = ceil( $words / 200 );
```

All that’s left to do is output the read time!

```
echo $minutes . ' minute read';
```

## Conditional Display

What if you didn’t want to display the read time for specific categories. You can wrap the code in an IF statement checking against the category using functions like [is_category](https://developer.wordpress.org/reference/functions/is_category/) and [in_category](https://developer.wordpress.org/reference/functions/in_category/).

For example, if you’re in the **index.php** template, you can use the following to only display the read time if the category is NOT projects:

```
<?php 
  if ( !is_category( 'projects' ) &amp;&amp; !in_category( 'projects' ) ) { 
    READ TIME CODE HERE...
  }
?>
```

---
#### Visit our website at [https://nightwolf.dev](https://nightwolf.dev) and follow us on [Facebook](https://www.facebook.com/NightWolfDevelopment) and [Twitter](https://twitter.com/nightwolfdev)!
---
First Unique Character in a String
Tags: javascript, webdev, vanillajs
Published: 2021-01-15 12:38:41

---
title: First Unique Character in a String
published: true
date: 2021-01-15 00:00:00 UTC
tags: javascript,webdev,vanillajs
canonical_url: https://hiltonmeyer.com/articles/first-unique-char.html
---

## The problem [#](https://hiltonmeyer.com/articles/first-unique-char.html#the-problem)

The definition for [First Unique Character in a String](https://leetcode.com/problems/first-unique-character-in-a-string/) is _Given a string, find the first non-repeating character in it and return its index. If it doesn't exist, return -1_. This has an easy rating on [Leetcode](https://leetcode.com/problems/first-unique-character-in-a-string/) although I must say I as usual complicated things before finding a cool solution from [Terrible Whiteboard](https://youtu.be/21LDcomZ1as) on YouTube. My original thought was to convert to an array and then remove each found character in the array. This led me into loops of trying to find matching and non matching values and eventually a deadend. I knew that I was missing something simple and this is where the video showed me I was thinking about is in the opposite direction. Instead of removing I should be creating a map of each character and the number of times they occurred. The return should be the first character which a occurrence of 1.

```
/**
 * @param {string} s
 * @return {number}
 */
var firstUniqChar = function (s) {
  const occurrence = {};
  
  for (let char of s) {
    if (occurrence[char] === undefined) {
      occurrence[char] = 1;
    } else {
      occurrence[char]++;
    }
  }
  for(let i=0;i<s.length;i++){
    const char = s.charAt(i);
    if (occurrence[char]===1) return i;
  }
  return -1;
};

```

## What I learnt [#](https://hiltonmeyer.com/articles/first-unique-char.html#what-i-learnt)

1. I can create a mapping of the characters and add to them. A cool use of an object and actually I have heard about Maps in Javascript and wondering whether they couldn't be used here.
2. I can loop through a string using `for (let char of s)`. I was unaware of this cool little String trick. Another reason why doing these short problems can lead to learning a small trick to add to the quiver of js arrows.
3. Another cool String trick (I really should go over the API) is `charAt`. So I can actually extract and extract a character using the same sort of index like an Array.
Netlify - Client Side Routing
Tags: netlify, react, javascript
Published: 2021-01-15 22:22:17

---
title: Netlify - Client Side Routing
published: true
date: 2021-01-15 00:00:00 UTC
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/miyouzamiofm0ekn8f4w.jpg
tags: netlify,react,javascript
canonical_url: https://chrisotto.dev/react-netlify-client-side-routing/
---

I have a nice little [side project](https://library.chrisotto.dev/) based on the Goodreads API (yes, my key is still active). I had it up for a while and whenever I would refresh a page while it was deployed it would lose context to the page. This is because Netlify didn’t know how to handle the state I had gotten myself into because the routing in `create-react-app` that I was using was `react-router`.

Luckily enough this is an easy fix, so if you also have the following:

- Create React App client-side routing through `react-router`
- Deploy your site on Netlify

…then you will be able to make the same change and have your page context persist after refreshes!

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#creating-a-redirects-file-)Creating a Redirects File 💻

In your `public` directory create a new `__redirects` file with the following code:

```
/* /index.html 200
```

Now when the project gets built by Netlify, Create-React-App will place the contents of the `public` directory into the build output. Allowing Netlify to handle `pushState` from within your application. That’s it!