teleren/devto huggingface dataset:
24 days of #Javascriptmas solutions
Tags: javascript
Published: 2020-12-25 01:01:22

Hello everyone! My name is Angel. I'm a Full-Stack Software Engineering following Leon Noel's bootcamp called 100Devs; it's a huge pleasure being involved with him and all the other lovely bootcampers.

I found Javascriptmas a bit late, started taking shots at the challenges starting at day 11 and it was a whole lot of fun. I gotta admit that sometimes I stayed up late into the night because I really wanted to solve that day's challenge.  

I want to give a big thank you to Dylan, Danny, Carla, Alex, Leanne and everyone else involved in this project. I definitely learned a lot!

Here are my solutions for the challenges

1 [Candies](https://scrimba.com/scrim/co624475f9a588f1657ad3095)
2 [Deposit Profit](https://scrimba.com/scrim/cocf144a098fbb72356b332ee)
3 [Chunky Monkey](https://scrimba.com/scrim/co7d64664af8fae8b328d3e7b)
4 [Century From Year](https://scrimba.com/scrim/co9834e0cbcc4bf0804ed1410)
5 [Reverse a String](https://scrimba.com/scrim/co6d04fea88ad7d38f82d10b5)
6 [Sort by Length](https://scrimba.com/scrim/co2154c90a434c64f32d4128e)
7 [Count Vowel Consonant](https://scrimba.com/scrim/co97b410791c065613653413b)
8 [The Rolling Dice](https://scrimba.com/scrim/co4fd4255aa14e5eea319c7a5)
9 [Sum Odd Fibonacci](https://scrimba.com/scrim/co5944a1f96c859d85c8ddf9c)
10 [Adjacent Elements Product](https://scrimba.com/scrim/co1d04002a876297aba44aa06)
11 [Avoid Obstacles](https://scrimba.com/scrim/co15b414d9ca9c154934b2450)
12 [Valid Time](https://scrimba.com/scrim/code24a87ba0a9538b0e25123)
13 [Extract Each Kth](https://scrimba.com/scrim/cob51474b95ea164964f15a85)
14 [Maximal Adjacent Difference](https://scrimba.com/scrim/co665449d9cf36f936d429467)
15 [Carousel](https://scrimba.com/scrim/cofd346d1a97901ea3a880113)
16 [Insert Dashes](https://scrimba.com/scrim/coc304df2b1999b7e30c175bb)
17 [Different Symbols Naive - using Set](https://scrimba.com/scrim/co36f4c66addae12d4aa0da26)
18 [Array Previous Less](https://scrimba.com/scrim/co4074f46b8481c69748e65f3)
19 [Alphabet Subsequence](https://scrimba.com/scrim/cobf848b6b3f7663c118de73e)
20 [Domain Type](https://scrimba.com/scrim/co15b4f498f1f6d8c7f564c7a)
21 [Sum of 2](https://scrimba.com/scrim/co5dc4975a87fa32cd9762134)
22 [Extract Matrix Column](https://scrimba.com/scrim/coe7249a09bbacaa8385598cd)
23 [Social Media Input](https://scrimba.com/scrim/co39b4803b32a172185ff288c)
24 [Test Your Agility](https://scrimba.com/scrim/cocb24879bccdb9d839320804)

My favorites were the carousel, social media input and test your agility; found them very fun and educating to do. I struggled with the dice roll and fibonacci sequence, broke my head a little but I got them done. 

Cheers and happy holidays!
Wipe Windows Directory
Tags: ruby, security, wipe, windows
Published: 2020-12-25 01:00:49

I am currently working on some wipe+backup project in free time, and during my tests I've created this small demo program. It start with double-click, and clean all files in directory with 9 overwrites. 

Source is taken from [AFINUS](https://github.com/cybersecrs/afinus), And compiled with **OCRA** gem, for fun, but could be useful for fast/secure folder clean.

---

##WinWiper  

---

[Github](https://github.com/cybersecrs/winwiper)  
[Download](https://github.com/cybersecrs/winwiper/winwiper.exe)
RCT007 React Hooks
Tags: react
Published: 2020-12-25 00:58:09

# React Hooks

Hooks主要用于解决函数式组件无状态、无生命周期的问题。

本篇主要介绍以下几个Hooks：

- useState 状态
- useEffect 类似生命周期中的 didMount 和 didUpdate  
- useParam 获取参数（内部封装）
- useHistory 通过js api操作路由跳转

## useState 与 useEffect

现在我们实现一个点赞的函数组件，其中有一个点赞数的状态`count`，以及两个按钮：赞和踩，它们的效果分别是点赞数+1和-1。每次点赞数改变，浏览器都会在控制台中打印一段话。

使用useState让组件拥有state状态，使用useEffect来监听某个状态的改变。

### useState语法：

```javascript
const [count, setCount] = useState(0);
```

其中，`count`是状态名，`setCount`是设置这个状态的方法，它会调用`render`函数，`useState(0)`是将这个状态的初始值设为0。

### useEffect语法：

```javascript
useEffect(()=>{
  console.log('count updated, current count: ' + count);
}, [count])
```

其中，第一个参数是一个箭头函数，代表要执行的内容，第二个参数是一个列表，你面的内容就是要监听的内容，如果列表为空，则监听所有。也就是说，`useEffect()`里面第二个参数变了，就会执行第一个参数里面的代码。

### 实例代码

```javascript
import React, {useState,useEffect} from 'react'

export default function Count() {
  const [count, setCount] = useState(0);
  useEffect(()=>{
    console.log('count updated, current count: ' + count);
  }, [count])
  return (
    <div>
      <h1>Like or Dislike ?</h1>
      <p>current likes: {count}</p>
      <button onClick={()=>{setCount(count + 1)}}>Like</button>
      <button onClick={()=>{setCount(count - 1)}}>Dis</button>
    </div>
  )
}
```

## useParam 与 useHistory

### useParam语法：

声明：
```javascript
const params = useParams();
```

此时，`params`就是一个json数据，可以直接使用`params.xxx`来获取参数的值。

### useHistory语法：

声明：
```javascript
const history = useHistory();
```

跳转：
```javascript
<button onClick={()=>{
  history.push('/')
}}>Home</button>
```

### 实例代码

```javascript
import React from 'react'
import {useParams,useHistory} from "react-router-dom";

export default function Profile() {
  const params = useParams();
  const history = useHistory();
  return (
    <div>
      <p>The params: {JSON.stringify(params)}</p>
      <p>The user ID is: {params.userId}</p>
        <button onClick={()=>{
            history.push('/')
        }}>Home</button>
    </div>
  )
}

// 之前使用class组件时的版本，相比之下函数组件更加简单明了
// export default class Profile extends React.Component {
//   jumpHome = () => {
//     this.props.history.push('/')
//   }
//
//   render() {
//     return <div>
//       <h1>this is detail</h1>
//       {/* 获取路由参数 */}
//       <p>当前的参数值为：{this.props.match.params.userId}</p>
//       <button onClick={this.jumpHome}>Home</button>
//     </div>
//   }
// }

```
100 Days of Code ~ Day 2
Tags: 100daysofcode, javascript, webdev, challenge
Published: 2020-12-25 00:08:03

Day 2 in the books, today I completed the second day of [JavaScript30](https://javascript30.com/) which was making
a working analog clock with CSS and JavaScript which gave me a great review on the basic CSS animation options as well as setInterval with JavaScript.

Finished off my time working on my version of one of the homework assignments our students had to do, a CLI app made with Node.js that generates a README for your GitHub repo. Have it mostly done, it generates a README just have to tweak it properly so it properly generates the links and
"styling" with markdown which I hope to wrap up tomrrow. The repo for it can be found [here](https://github.com/tonythetiger323/README-generator/).
How to add data to the end of a file in Node.js?
Tags: node
Published: 2020-12-25 00:00:00

---
  title: How to add data to the end of a file in Node.js?
  published: true
  tags: Nodejs
  date: Fri Dec 25 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/add-data-to-end-of-file-nodejs
  cover_image: https://melvingeorge.me/_next/static/images/main-366849437d272dff65f444056c3a5d0e.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/add-data-to-end-of-file-nodejs)
  
To add to the end or append data to a file in Node.js, you can use the `appendFile()` asynchronous function from the `fs` (filesystem) module.

```js
/*🔥 Append data to a file 🔥 */
fs.appendFile("file.txt", "Hello World!", "utf-8");
```

For example, Consider a file called `logs.txt` in which we have some log data and we want to add additional data to the end of the file.

```js
// name of file
const file = "logs.txt";

// logs
const logData = "Request status: 200 OK";
```

Now let's use the `appendFile()` asynchronous function and pass:

- the `path of the file` to append data as the first argument
- the `data` as the second argument
- the `encoding` as the third argument
- and a `callback function` to execute after the data is successfully added to the file.

It can be done like this,

```js
// require fs module
const fs = require("fs");

// name of file
const file = "logs.txt";

// logs
const logData = "\nRequest status: 200 OK";

// add logData to end of logs.txt file
// using fs.appendFile() asynchronous function
fs.appendFile(file, logData, "utf-8", () => {
  console.log("Log data added!");
});
```

And we have successfully added data to the end of the file! 🔥.

See this example live in [repl.it](https://repl.it/@melvin2016/append-data-to-file-nodejs#index.js).

### Feel free to share if you found this useful 😃.
Webpacker 6: Image Asset Guide
Tags: rails, webpacker, tutorial, svg
Published: 2020-12-24 22:55:39

In order to use your images and SVG files with Webpacker 6, you need to put them in the correct place and import them into your context.

## Install

We should be good here.

## Usage

### Add Assets

```sh
mkdir -p app/javascript/media/images
```

### Require Context

```diff
// app/javascript/packs/application.js
+
+ function importAll(r) {
+  r.keys().forEach(r);
+ }
+ // Add relevant file extensions as needed below.
+ // I'm sure there is a better way :shrug:
+ importAll(require.context('../media/images/', true, /\.(svg|jpg)$/));
```

## Verify

> Note: Restart the dev server for good luck!

Add an SVG and PNG into `app/javascript/media/images`

In one of your views, add two image tags:

```erb
<img src="<%= asset_pack_path 'media/images/icon.svg' %>" />
<img src="<%= asset_pack_path 'media/images/surf.jpg' %>" />
```

Reload your browser and you should see your images.

Note that `<%= asset_pack_path 'media/images/icon.svg' %>` only returns a string, so if you would rather inline your SVG files you will need to refer to the [Webpack Asset Modules documentation][1] and merge your changes into your Webpack context, as explained in [these Webpacker docs][2].

[1]:	https://webpack.js.org/guides/asset-modules/#inlining-assets
[2]:	https://github.com/rails/webpacker#webpack-configuration
Index-naming-hell, what is it and how to avoid it
Tags: javascript, react, node
Published: 2021-02-17 18:34:53

---
title: Index-naming-hell, what is it and how to avoid it
published: true
date: 2020-12-24 22:55:00 UTC
tags: JavaScript,React,Nodejs
canonical_url: https://daveiscoding.com/2020/12/24/index-naming-hell-what-is-it-and-how-to-avoid-it/
---

I used to fall into the same trap…

![screenshot of Visusal Studio Code with many index.tsx files open](https://pbs.twimg.com/media/Epy0sFWXYAM4_FK?format=jpg&name=large)<figcaption>Look at all those index files</figcaption>

This is how it looks like in the explorer

![](https://daveiscoding.files.wordpress.com/2020/12/image.png?w=1024)

This works great and in practice it’s easy to use. You can just do

```js

import MyComponent from './components/MyComponent

```

but when you are editing them in your editor it’s ugly and takes up too much space. It also wrecks quick file navigation since all your files are named… guess what – `index`.

In this case it’s fine to add some redundancy. If your component is called `BirthdayItem`, then feel free to rename all your files to `BirthdayItem` with the proper extension then create an `index` file that exports your component. So you don’t need to

```js

import MyComponent from './components/MyComponent/MyComponent

```

Let’s see how it looks in action:

![](https://daveiscoding.files.wordpress.com/2020/12/image-1.png?w=1024)<figcaption>A lot better, now you can actually see what you are editing</figcaption>

![](https://daveiscoding.files.wordpress.com/2020/12/image-2.png?w=1024)<figcaption>Explorer is clean as well</figcaption>

As you can see both the open editors and explorer is a lot more readable. Quick file search also reacts better and easier to find what you are looking for.

Now let’s talk about Intellisense. Whenever I type `BirthdayList`, VS Code wants to import it from `./components/BirthdayList/BirthdayList`. Before the restructure it imported it from the directory like this `./components/BirthdayList`. You can clearly see that the latter is the better one. You might think about using the following code and you will get the bad result – just like me.

```js

export { default } from "./BirthdayList";

```

How do we fix this? In my codebases I try to avoid `export default` as much as possible. So you can either do it by importing then reexporting as default, like this:

```js

import BirthdayList from "./BirthdayList";
export default BirthdayList;

```

But as I said, I’d rather avoid `export default` at all costs:

```js

import BirthdayList from "./BirthdayList";
export { BirthdayList };

```

This way you will get awesome autocompletion and auto imports without the filename.
PWA with create-react-app
Tags: pwa, typescript, javascript, react
Published: 2020-12-24 22:35:02

# Setting up PWA with create-react-app and typescript.


Install create-react-app if you haven't already.

```
npm i create-react-app -g
```

Create a react app with TypeScript and PWA support. Also, we are using NPM as package manager. Alternatively, you may use yarn.

```
create-react-app frontend --use-npm --template cra-template-pwa-typescript
```

To build the project run:

```
npm run build
```
To run the build folder, we are using http-server. You may use any server. 

Install http-server if you haven't already.

```
npm i http-server -D
```

Add script scripts section of package.json file:

```
"scripts": {
    ...
    "start-sw": "http-server ./build"
}
```

To run the script, run:

```
npm run start-sw
```
Go to the browser and type the url with the associated port number.

To check the status of service workers, open chrome dev tools. Under the application section, go to "service workers" subsection.
If no service workers are registered, you need to enable them in the code.

Navigate to index.tsx and change `serviceWorkerRegistration.unregister();` to `serviceWorkerRegistration.register();` 

Rebuild the project and restart the server. 

```
npm run build && npm run start-sw
```

Now you should see registered service workers.

You may also try stopping the server and reloading the site, or use chrome dev tools on Application section to simulate offline mode. Check the Offline checkbox on the Service workers section.

The site should reload without displaying a "No internet" error message.


Happy Hacking!
The JavaScriptmas challenge from Scrimba  has been a fun challenge to participate in. My solutions are below:
Tags: javascriptmas, scrimba, javascript, challenge
Published: 2020-12-24 22:24:59

Day 1: <a href="https://scrimba.com/scrim/cob544c0691e0b668364116d0">Candies</a>
Day 2: <a href="https://scrimba.com/scrim/cocdb4e16a0791961cd5bfd14">Deposit Profit</a>
Day 3: <a href="https://scrimba.com/scrim/co5c044d39a4980de88c28a8c">Chunky Monkey</a>
Day 4: <a href="https://scrimba.com/scrim/cocdf4e39a9e201fdf336ca02">Century From Year</a>
Day 5: <a href="https://scrimba.com/scrim/coa40484188b6cc6a89829dfc">Reverse a String</a>
Day 6: <a href="https://scrimba.com/scrim/co48e46e3847db94244c54ddd">Sort by Length</a>
Day 7: <a href="https://scrimba.com/scrim/co8b346e3b3a1491729e0c776">Count Vowel Consonant</a>
Day 8: <a href="https://scrimba.com/scrim/cof1242c8813a342eba31a6c0">The Rolling Dice</a>
Day 9: <a href="https://scrimba.com/scrim/co70546aca6a21c4fae5df89f">Sum of Odd Fibonacci Numbers</a>
Day 10: <a href="https://scrimba.com/scrim/cob8c460487946fa14293c695">Adjacent Elements Product</a>
Day 11: <a href="https://scrimba.com/scrim/coefc4b8fa3538b996bcc3d1c">Avoid Obstacles</a>
Day 12: <a href="https://scrimba.com/scrim/coa7349c78c985ce044e6270b">Valid Time</a>
Day 13: <a href="https://scrimba.com/scrim/co20e4c4a8830b67f5a13675b">Extract Each Kth</a>
Day 14: <a href="https://scrimba.com/scrim/coaca4177a4346e1fb5904b7b">Maximal Adjacent Difference</a>
Day 15: <a href="https://scrimba.com/scrim/co60d403fafa5583b99dbeb11">Carousel</a>
Day 16: <a href="https://scrimba.com/scrim/cod8040bbbecae888d0d57325">Insert Dashes</a>
Day 17: <a href="https://scrimba.com/scrim/co72a48cfb486751de9dbe8ff">Different Symbols Naive</a>
Day 18: <a href="https://scrimba.com/scrim/co71f49f59242180166c83de7">Array Previous Less</a>
Day 19: <a href="https://scrimba.com/scrim/coa3241ae8cc5140c5d91ef5c">Alphabet Subsequence</a>
Day 20: <a href="https://scrimba.com/scrim/co7a04e7b8cef9ce497c02334">Domain Type</a>
Day 21: <a href="https://scrimba.com/scrim/co0a24b23be53a8fb7ea03cd9">Sum of Two</a>
Day 22: <a href="https://scrimba.com/scrim/coe6741b39424aca2039f9adb">Extract Matrix Column</a>
Day 23: <a href="https://scrimba.com/scrim/co4b245d9af932e90220d26c0">Social Media Input</a>
Day 24: <a href="https://scrimba.com/scrim/cod7140d9948f6e44472ce8a4">Test Your Agility!</a>
Key and Value
Published: 2020-12-24 22:21:30

###`dictionary_data = {'Changeable': 'Yes', 'Unordered': 'Yes', 'Duplicates': 'No'}`
And as simplicity continues while learning Python, it's time to talk about a unique way of saving data in Python using something called *DICTIONARY*.

Dictionary is based on the principle of *__key-value__*

Like when you want to search for a word definition in the dictionary, you search for the word, in Python dictionaries you search for the KEY to get the VALUE.

Let's take a look at a basic syntax of a dictionary which represents a stored data for names and ages of two people:

names_ages = {'Oliver': 20, 'George': 23}

Oliver and George are the keys, 20 and 23 are the values.

Getting a value:
```
names_ages['Oliver'] 
will return 20.
```

Adding a new key and value:

```
names_ages['Michael'] = 24

```

Updating a value:

```
names_ages['Oliver'] = 30
```

Removing an entire element:

```
del names_ages['Oliver']
```
(Now Oliver the key and its value are removed)

If you want to print each pair separated by a comma you can use the items() method:

```
print(names_ages.items())
```
SQL & Databases
Tags: sql, database
Published: 2020-12-24 20:45:41

Recently at work I’ve been assigned a few different tasks involving databases and using Microsoft SQL server. I quickly realized that it has been sometime since I have written SQL queries and decided it is best for me to review some of the basics. Here's what I  relearned!
Basically, SQL is the language of databases. SQL stands for Structured Query Language. Structured Query Language is a standard Database language which is used to create, maintain and retrieve information from a relational database. 
In a database, information or data, are stored in tables inside the database. Tables consist of columns and rows and are identified by a unique name. Each row represents an item and a column provides the properties of the items. You can think of a table as kind of like a spreadsheet.

Databases are used to store data for a majority of the applications/websites that we encounter on a day to day basis. Having a good understanding of how databases work and how to create a SQL query can go a long way in the tech industry! I will be diving deeper into SQL and how to create advanced queries, I suggest you do too. Thanks for stopping by, I hope you enjoyed it!
Rendering React in AngularJS
Tags: react, angular, webdev
Published: 2020-12-24 20:43:29

When migrating an AngularJS app to React we need a way to use React components in an AngularJS template. That’s where `react2angular` comes in. While the name sounds like the opposite of what we’re trying to accomplish, its purpose is to help bring React into an Angular app.

Here’s an example of what defining a component is like.

```javascript
import { react2angular } from 'react2angular';

function TextComponent({ text }) {
  return <div>{text}</div>;
}

angular.module('someModule')
  .component('reactText', react2angular(TextComponent, ['text']]));
```

And when we use it in a template, it looks just like an AngularJS component.

```html
<react-text text="'hello world'"></react-text>
```

One particularly helpful thing to do here is with the naming. By prefixing your `react2angular` components with “react”, it helps developers to know what components have been converted when looking at the Angular templates.

## In Summary

- Rendering React in AngularJS is straight forward with `react2angular`
- Prefix `react2angular` component names with "react" to help your team easily tell what has been converted
DevAnalytics at DOHackathon: cards everywhere
Tags: dohackathon, angular, typescript, devanalytics
Published: 2020-12-24 21:21:20

The last few days, I didn't have the time to write a post about my progress, but I made some big steps forward.

I moved all the statistics into cards, and I applied some formatting both to the data, and to the page in general.

Probably this is the most difficult part for me :)

![Nicer and nicer DevAnalytics](https://dev-to-uploads.s3.amazonaws.com/i/qkk7wtsbugezrx1rlga4.png)

Next, I'll have to make sure that the cards are nicely aligned and in the tag cards, I have to highlight the tags themselves.

You can try [DevAnalytics here](https://dev-analytics-frontend-tudwb.ondigitalocean.app/).
Importance of not Jumping the basics
Tags: leadership, html
Published: 2020-12-24 20:13:08

I believe one of the reasons why some people struggle with a skill is because some of us jumped the basics. From experience, I got to know that basics of anything we want to learn is very importance to make us know what is ahead.


Check this video out where I explained the importance of basics and why it shouldn't be jumped!

https://www.youtube.com/watch?v=Zi4ejDpshaA&t=2s

I am very sure you will learn one or two things.

Kindly subscribe, like and share.
Pure CSS Star Rating Widget - with Html and CSS - No Javascipt
Tags: html, css, codenewbie, beginners
Published: 2020-12-24 19:58:30

Pure CSS Star Rating Widget - with Html and CSS - No Javascipthere is demo => 
https://codepen.io/Bilal1909/full/WNGXeQG

Finding the longest word step 1:
Add below code inside index.html


<img src="https://i.postimg.cc/sx7HDzHM/screenshot-codepen-io-2020-12-25-00-50-54-353.png"/>


Finding the longest word step 2:
Then we need to add code for style.css which code i provide in below screen.

<img src="https://i.postimg.cc/3NFjcxbF/screenshot-codepen-io-2020-12-25-00-51-48-433.png"/>
CSS Stack Card Slider With jQuery And CSS3
Tags: html, javascript, css, codepen
Published: 2020-12-24 19:41:58

CSS Stack Card Slider With jQuery And CSS3
here is demo => 
https://codepen.io/Bilal1909/pen/JjXEBZo?editors=1010

Hello guys in this Post , we are going to Create CSS Stack Card Slider With jQuery And CSS3.