teleren/devto huggingface dataset:
It's the first day of Scrimba's #JavaScriptmas Advent Calendar! 🎄 Let's take a look at challenge number 1. 🎅🏻
Tags: scrimba, javascript
Published: 2020-12-01 16:48:37

---
title: It's the first day of Scrimba's #JavaScriptmas Advent Calendar! 🎄 Let's take a look at challenge number 1. 🎅🏻
description: Take a look at the very first challenge in Scrimba's coding advent calendar. 
published: true
tags: scrimba, javascript 
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/5887cl61q8zb0rp2zr7p.png
---

If you haven't already heard, Scrimba has launched [**24 Days of #JavaScriptmas**](
https://scrimba.com/learn/adventcalendar?utm_source=dev.to&utm_medium=referral&utm_campaign=gadventcalendar_day1_article) - an "advent calendar" of code challenges which gives you the chance to put your coding skills to the test and win prizes every day until Christmas Eve!

The #JavaScriptmas challenges have been created by Scrimba's popular teacher, Dylan 'Claus' Israel. You might know Dylan from his YouTube channel CodingTutorials360, but what you probably didn't know is that he moves to the North Pole every December and takes on a completely different job...creating advent calendars for code enthusiasts like you! 🎅🏻 

The #JavaScriptmas calendar contains challenges of increasing difficulty, so if you take part, you'll give yourself a good chance of becoming a Javascript maestro in time for Christmas!

##Time for the challenge!

Now let's take a look at the very first coding conundrum, a task all about dividing candies equally, which could come in handy over the holidays!

[![description of candies challenge](https://dev-to-uploads.s3.amazonaws.com/i/44re6i1o5t7euq5jh5zv.png)](https://scrimba.com/learn/adventcalendar/-javascript-challenge-candies-introduction-cLkqvpcQ?utm_source=dev.to&utm_medium=referral&utm_campaign=gadventcalendar_day1_article)
_Click the image to access the challenge._

Some skeleton code is provided in the screencast, so it's super easy to get started:

```js
function candies(children, candy) {
    //  write code here.
}
```

As it's the season for giving, Dylan also spoils us with a handy hint to help us along the way, and that is to consider using `Math.floor()`. However, this is a recommendation and not a requirement. If you come up with a different solution, by all means share it with the community. 

Speaking of sharing with the community, that's exactly what you should do if you'd like to be in with a chance of bagging one of the daily prizes. Simply share your solution on Twitter with the #JavaScriptmas hashtag and you'll automatically be entered into Scrimba's prize draw. Better still, Scrimba has installed a 'Share Your Solution' button into every challenge to take the leg-work out of Tweet-writing.

If you haven't signed up to the advent calendar yet, it's not too late! Head over to [the 24 Days of #JavaScriptmas](https://scrimba.com/learn/adventcalendar?utm_source=dev.to&utm_medium=referral&utm_campaign=gadventcalendar_day1_article) page and hit enrol - you'll then receive each day's challenge directly to your email inbox every day until Christmas Eve!

Merry challenging! 🎄
BrainTool - Productive Research
Tags: showdev, productivity, tooling, text
Published: 2020-12-01 16:26:25

[BrainTool](https://braintool.org) is something I've been looking for for a long time but never found, so I decided to build it. It's a somewhat unique take on bookmarks, browser management and note taking; combining a Chrome extension with a back end plain-text org-mode file stored on your Google Drive. 

With a couple of keystrokes in Chrome you can tag a web page into your BrainTool file which is composed of hierarchical tags and notes. That file can then be edited in any plain text editor, ideally emacs with org-mode. 

For me it allows for the seamless combination of browser-based research and note taking. The BrainTool browser side panel allows Chrome tabs and windows to be controlled en masse.

Check it out on the [Chrome Web Store!](https://chrome.google.com/webstore/detail/braintool/fialfmcgpibjgdoeodaondepigiiddio) and LMK what you think.

PS Source available on [GitHub](https://github.com/tconfrey/BrainTool)
Adding Cognito Users with Admin APIs
Tags: cognito, aws, amplify
Published: 2020-12-01 16:22:17

---
title: Adding Cognito Users with Admin APIs
published: true
description: Using the AWS CLI to add users to a Cognito User Pool
tags: cognito, aws, amplify
---

After you create a Cognito User Pool, you might want to add a user. You can do that through a mobile client or a webpage. However, it might be more convenient to do so via the CLI:

```bash
USERNAME=myusr11
PASSWORD=mypass99
POOL_ID=us-east-1_x5LZhWMsl # Not real

aws cognito-idp admin-create-user \
    --user-pool-id $POOL_ID \
    --username $USERNAME

aws cognito-idp admin-set-user-password \
    --user-pool-id $POOL_ID \
    --username $USERNAME \
    --password $PASSWORD \
    --permanent 

aws cognito-idp admin-confirm-sign-up \
    --user-pool-id $POOL_ID \
    --username $USERNAME 
```
Install ubuntu on an external drive using macOS
Tags: ubuntu, externaldrive, macos
Published: 2021-02-12 14:13:20

---
title: Install ubuntu on an external drive using macOS
published: true
date: 2020-12-01 16:20:17 UTC
tags: ubuntu,externaldrive,macos
canonical_url: https://medium.com/@victorleungtw/install-ubuntu-on-an-external-drive-using-macos-e13aec84fd10
---

If you are using mac hardware, but also want to use ubuntu, you can install ubuntu on an external hard drive without risk to remove your macOS. Here is how to do it without screw up your bootloader:

1. Plugin your external SSD/HDD. Open Disk Utility and format it to MS-DOS (FAT)
2. Open Terminal window and run: diskutil list

![](https://cdn-images-1.medium.com/max/630/0*XPyYW81oMkC2N1J0.png)

Then you can find your external hard drive IDENTIFIER, e.g. disk2 in this example.

3. Install Virtualbox: [https://www.virtualbox.org/](https://www.virtualbox.org/)

4. Run the 2 command below and start virtual box with admin right:

```
$ sudo VBoxManage internalcommands createrawvmdk -filename bootcamp.vmdk -rawdisk /dev/disk2 

$ sudo /Application/VirtualBox.app/Contents/MacOS/VirtualBox
```

5. Select New and click on Expert Mode. Select “Use an existing virtual hard disk file.

![](https://cdn-images-1.medium.com/max/630/0*Byh5oNA1xpnM_IB9.png)

6. At the System tab, check the checkbox “Enable EFI (special OSes only)”

7. At the Storage tab, mount the ubuntu ISO file to the virtual machine, which you can download from here: [https://ubuntu.com/download/desktop](https://ubuntu.com/download/desktop)

8.Start the machine and continue with the installation.

9. After installation, now you are ready to boot from the drive. For mac, you would also need to decrease the Security level and allow booting from external media. Press and hold Command-R immediately after you see the Apple logo and start macOS recovery.

10.Restart your Mac again and press the Option key. You can now choose your drive with EFI label.

Enjoy the ubuntu on apple hardware (and have fun to sort out the driver issue). I hope this worked for you :)

Written by **Victor Leung** who is a keen traveller to see every country in the world, passionate about cutting edge technologies. [Follow me on Twitter](https://twitter.com/victorleungtw)

_Originally published at_ [_https://victorleungtw.com_](https://victorleungtw.com/install-ubuntu-external-drive)_._
Flappy Bird in React Native (video)
Tags: reactnative, react, gamedev, tutorial
Published: 2020-12-01 16:15:18

In this weeks video we build Flappy Bird, set up with expo ( docs: https://bit.ly/expo-docs) !

Super excited about this video! It is a video for beginners to react-native. Therefore a fundamental understanding of JavaScript and React is advised as a prerequisite. :)

Video Content:
⌨️ (00:00) Introduction
⌨️ (01:07) Flappy Bird game logic
⌨️ (02:44) Setting up our environment
⌨️ (06:10) Creating our App
⌨️ (07:05) Creating our Bird Component
⌨️ (15:02) Making our Bird fall
⌨️ (19:53) Creating our first Obstacles
⌨️ (23:12) Looping our first Obstacles
⌨️ (35:33) Creating our second Obstacles
⌨️ (39:54) Adding random heights to the Obstacles
⌨️ (44:15) Checking for collisions
⌨️ (49:01) Making a game over
⌨️ (51:29) Making our game touch-screen
⌨️ (53:02) Adding the score

### Useful links:
* You can find the final code here: https://github.com/kubowania/flappy-birds-react-native
* You can find the full expo documentation here: https://bit.ly/expo-docs

### If you did like this video, please hit the Like and Subscribe button so I know to make more!

Twitter: https://twitter.com/ania_kubow
YouTube: https://youtube.com/aniakubow
Instagram: https://instagram.com/aniakubow

{% youtube dhpjjAxKbHE %}
Open CSS Loader
Tags: webdev, css
Published: 2020-12-01 16:12:34

Site link:- [https://wb26iz.deta.dev](https://wb26iz.deta.dev)
##Introduction
So this is my first post🤞 so don't expect much. So a little backstory here. While searching for a pure CSS loader for my college project, I stumbled across a few sites which did get my work done, but every site was maintained by only a few individuals. Also, some sites haven't been updated for a long time. So here I present to you an open CSS loader that allows everyone to contribute to the site. Thus, hopefully, it is updated.

##About
So I decided to work on one and host it on DETA since it is free and is new so I decided to give it a try. 
I aim this site at someone who is searching for a loader and can find a variety of loaders. He can take any of the code directly or can edit them on the site and see the output above the code. 

The main feature though is adding the code. It is simple. Make a parent div and give the specific id specified and you can submit the code. So a beginner or even an experienced developer can submit a code. A point to be remembered is that if the code submitted hinders the working of other loaders or does not work at all, it will be deleted. Else you are free to use any code from the site without any acknowledgment. Also, the complete backend of the site will be available on GitHub once I complete it. 

##Problems
The first is people targeting other loaders or other components of the page by mistake. I did use regex to check if only the id specified is used and not anything else to prevent style altering of other loaders, but I have to do something about the common div elements.
The second is I am using prism.js for syntax highlighting which I think is not good since it has to style the complete text box when there is a change in the textbox.
**Edit** I found that there is a library called [ace.js](https://ace.c9.io/) which provides an online IDE. I will be switching to it.
Project 1, Week 1, Day 2
Published: 2020-12-01 15:46:23

Not a lot of progress made, but still made some progress. Spent a lot of time getting the stream to be displayed on the video element. Safe to say the stream works. Next step is to send the stream in the socket and to start a peer connection.

[Pull Request](https://github.com/Cijin/project-we/commit/357057df8e13a4e8729e80700fff4a87507517cb)
JS Spec debunking for toPrimitive on an object
Tags: javascript, webdev, computerscience, uiweekly
Published: 2020-12-01 15:33:00

Let's say we have an object by the variable name of `obj` and **ToPrimitive** abstract method has been called on it implicitly. This implicit call happens when you do a comparison like this - `obj == 5` || `false == obj` etc. 
Basically when one of the operands in a `==` comparison is a primitive and other one is an object.

For our case let's say we have this comparison - `[] == 9`.

The following is an attempt to clarify the working of [toPrimitive](https://www.ecma-international.org/ecma-262/#sec-toprimitive) as per spec :-

1. First we check whether `typeof []` is **object** or not which it is in our case.
2. Now we check for **hint** which will be **default** here.
3. Then we see if `toPrimitive` has been explicitly defined or not on the concerned object. Since it hasn't been for `[]`, then `exoticToPrim` will be `undefined`.
4. Now `OrdinaryToPrimitive([],number)` will be invoked for **default hint**.
5. Since in our case **hint** is **number**, following will happen:-
   * Let methodNames be like a list of `["valueOf","toString"]`.
   * Loop over these methods and first check if method is 
     callable (which both of the stated are)
   * Check if result of **[].method()** is a primitive or not. 
   * `[].valueOf() = []` but `[].toString() is ""` which being 
     a primitive will be chosen.
7. So updated comparison will be `"" == 9`.

I am no expert in specs debunking but I think this is what is happening. Feel free to comment and correct me if there is any wrong conclusion derived here.
How to train model on AWS DeepRacer
Tags: awsdeepracer, aws, deepracer, machinelearning
Published: 2020-12-01 15:27:57

[Started #AWSDeepRacer training my #ML #ReinforcementLearning model to compete in #AWSreInvent2020 Championship. Check it out how to train model on AWS DeepRacer](https://bit.ly/AWSDeepRacerLeague)

Start racing tomorrow at #AWS #reInvent #reInvent2020 @awscloud
Use CGO in Windows 64bit
Published: 2020-12-01 15:24:46

To use CGO in Windows 64bit, you have to install `gcc`. The easiest way to get `gcc` which is eligible for CGO is to install MinGW-w64.

The official documentation also refers mingw-w64 as a gcc compiler for CGO.
> **Windows**
> In order to use cgo on Windows, you'll also need to first install a gcc compiler (for instance, mingw-w64) and have gcc.exe (etc.) in your PATH environment variable before compiling with cgo will work.
>
> [The CGO page of the go official wiki](https://github.com/golang/go/wiki/cgo#windows)


# Download MINGW-W64
Download a MinGW-W64 installer from [MinGW-W64-builds](http://mingw-w64.org/doku.php/download/mingw-builds).

# Install MINGW-W64
Execute the downloaded installer, then change `Architecture` to `x86_64` and `Threads` to `win32`.
![](https://dev-to-uploads.s3.amazonaws.com/i/lyvg2r7gbptafhuklox5.PNG)

# Add path to `mingw64/bin` to PATH
Add the path to `mingw64/bin` to your system PATH environment variable. The path may look like `C:\Program Files\mingw-w64\x86_64******\mingw64\bin`.

# There you go!

This is a tiny go library source.

```go
// main.go
package main

import "fmt"
import "C"

// no space before export!
//export hello
func hello() {
	fmt.Printf("Hello!")
}

// you have to define the main function
func main() {
}
```

To build:

```bat
go build -buildmode=c-shared -o hello.dll
```

To export a header file:

```bat
go tool cgo main.go
```

It generates c source and header files into the `_obj` directory. 

If you use Visual Studio, you can inspect the dll by `dumpbin.exe`.

```bat
dumpbin /exports hello.dll | grep hello
```

It'll be like this:

```bat
> dumpbin.exe /exports hello.dll | grep hello
Dump of file hello.dll
  Section contains the following exports for hello.dll
         15    E 000A7760 _cgoexp_7cdc2f248ed0_hello
         96   5F 000A77C0 hello
        302  12D 000A76C0 main._cgoexpwrap_7cdc2f248ed0_hello
```

You can call the function from C#:

```cs
using System.Runtime.InteropServices;

namespace Main
{
    class Program
    {
        [DllImport("hello.dll", EntryPoint = "hello")]
        static extern void Hello();

        static void Main(string[] args)
        {
            Hello(); // => Hello!
        }
    }
}
```
Daily spend tracker android app.
Tags: android, java, firstpost, codenewbie
Published: 2020-12-01 15:23:11

Hello, I have developed a simple android application to help in tracking our money usage in our day to day life. 
I developed the application using android studio and Firebase, where users can log in using their google account to access the main page of the app. 
Every time a person spends on something, lets say transport or food, they can use the app to record that expenditure, by selecting the item they have spent on, the amount they have spent, and a small note to describe their expenditure. 
The app then saves that information in the firebase real-time database.
The total amount spent is fetched and displayed in the app by use of a text view, and this amount is updated everytime a user adds another item.
Finally, at the end of the day, a user will be able to see the total amount of money they have spent, and all the items they have spent their money on. At the beginning of the next day, the user will be presented with an empty screen, where he/she can record that day's spendings.
Here's the link to my YouTube channel, where I have described in more details. Am going to make tutorials, to help other developers be able to make an app like this too!
Thank you.
 
https://m.youtube.com/watch?v=4Falg890FEk
Is there a manual task in your life that you have automated which now saves you time?
Tags: discuss, help, thanksgiving
Published: 2020-12-01 15:17:40

---
title: Is there a manual task in your life that you have automated which now saves you time?
published: true
description: What is a one time investment you have made that has proven to be useful to you time and again?
tags: discuss, help, thanksgiving
//cover_image: https://direct_url_to_image.jpg
---

What is a one time investment you have made that has proven to be useful to you time and again?

Something like automated payments, automated replies on days when you are on leave.

Things which we need to do but once ever or every quarter or year but has improved the quality of your life?
Project Corona
Tags: react, javascript, css, github
Published: 2020-12-01 15:05:35


Created a live website which shows the current stats of coronavirus. For each country, it shows bar graph of active cases, recovered people, and death count. React, Chart.js, Material UI, and Hooks are used.

Live Site: https://swapnalshahil.github.io/project-corona/

Repo Link: https://github.com/swapnalshahil/project-corona

API used: https://covid19.mathdro.id/api

Show some ❤️ by starring some of the repositories!
Roblox is experiencing multiple servers crashes worldwide
Tags: gamedev, webdev, news
Published: 2020-12-01 15:04:45

If you recently come across a new problem that many Roblox users are experiencing while connecting to the game servers via the client. The issue is known to be on Roblox's side and a lot of players are already facing issues like [Server downtime in the USA](https://fixablestuff.com/roblox-down/), Canada, and other parts of the World
Speed up your firebase development workflow and save your time.
Tags: firebase, javascript, firestore, react
Published: 2020-12-01 14:55:34

---
title: Speed up your firebase development workflow and save your time.
published: true
description: is your firebase development workflow slow? 
tags: firebase, javascript, firestore, react
//cover_image: https://direct_url_to_image.jpg
---

Did you know that firebase now has local emulator? Previously, if we write firebase functions, we have to deploy it. And then we test it online. The iteration speed is slow, this is bad.

But not anymore, firebase now has emulator suite. It covers pretty much everything, from authentication, to firestore, to firebase functions. Pretty good. 

![](https://firebase.google.com/docs/emulator-suite/images/emulator-suite-usecase.png)

I still miss one thing tho, **Hot Reload**. But it's still possible to do that with with firebase functions

This is how you hot reload the firebase functions

## Initialize your project

Follow the steps here https://firebase.google.com/docs/emulator-suite/images/emulator-suite-usecase.png

## Hot Reload

So for example, this is our current `package.json`


```json
{
  "name": "functions",
  "scripts": {
    "lint": "eslint \"src/**/*\"",
    "build": "tsc",
    "serve": "npm run build && firebase emulators:start --only functions",
    "shell": "npm run build && firebase functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "engines": {
    "node": "12"
  },
  "main": "lib/index.js",
  "dependencies": {
    "firebase-admin": "^9.2.0",
    "firebase-functions": "^3.11.0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^3.9.1",
    "@typescript-eslint/parser": "^3.8.0",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "^2.22.0",
    "typescript": "^3.8.0",
    "firebase-functions-test": "^0.2.0"
  },
  "private": true
}

```

change it into 

```json
{
  "name": "functions",
  "scripts": {
    "lint": "eslint \"src/**/*\"",
    "build": "tsc",
    "build:watch": "tsc --watch --preserveWatchOutput",
    "serve": "npm run build:watch | firebase emulators:start --only functions",
    "shell": "npm run build && firebase functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "engines": {
    "node": "12"
  },
  "main": "lib/index.js",
  "dependencies": {
    "firebase-admin": "^9.2.0",
    "firebase-functions": "^3.11.0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^3.9.1",
    "@typescript-eslint/parser": "^3.8.0",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "^2.22.0",
    "typescript": "^3.8.0",
    "firebase-functions-test": "^0.2.0"
  },
  "private": true
}

```

notice the `build:watch` and `serve` script is updated

That's it. Now you can `npm run serve`, and your functions will be `hot reloaded`
Bash Scripting: Command Arguments & User Inputs (5 mins)
Tags: bash, linux, beginners, tutorial
Published: 2020-12-01 14:54:32

Last time, we [created the first shell file](https://dev.to/medsaad/bash-scripting-fundamentals-shell-file-walkthrough-2aob). Today, let's start passing arguments and user inputs.

Arguments gives the bash program more details about what you need to do. Sometimes, it comes as a form of sub-command like `yarn add <packageName>` where "add" tells the program more about what to do, and the packageName is what you data that you what to pass the program.

You can also pass inputs in the middle of the working program. It could be asking for confirmation, authentication, etc.

In this video, we will discuss the how to of this:
{% youtube 4bcUii6HDYo %}

Check out previous videos in this series:
- [Bash commands chaining, redirecting & nesting.](https://dev.to/medsaad/writing-complex-bash-commands-using-redirecting-chaining-nesting-51l)
- [Bash commands with options for beginner developers.](https://dev.to/medsaad/8-bash-commands-with-options-for-beginner-developers-3g7i)
Tesler's Law
Tags: ux, design, uiweekly
Published: 2020-12-01 14:39:21

Tesler’s Law, also known as the “Law of Conversion of Complexity”, was coined by Larry Tesler (a software engineer) in the 1980s.

It states that every app has a fixed amount of complexity, which can be handled by either the user or the app itself.

Remember this balancing act. If you simplify your app too much, you’ll transfer some complexity to the user. If you take on too much of the complexity yourself, your app may become overwhelming.

Follow along for more content like this: [Website](https://learnuxd.io/) | [Twitter](https://twitter.com/learn_uxd) | [Instagram](https://www.instagram.com/learn_uxd/)