teleren/devto huggingface dataset:
Day 28 of 100DaysOfCode
Tags: 100daysofcode, javascript, freecodecamp, codenewbie
Published: 2020-09-24 20:12:49

Today I finished the OOP exercises for JavaScript at freeCodeCamp. Also worked on the responsive web desing project. 

###What I did today:

####1. Finished the object-oriented programming challenges at FCC
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/object-oriented-programming/

####What I learned from it:
* Using prototypes
* Changing the constructor function
* Public and private properties

####2. Worked on the Responsive Web projects
https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-product-landing-page
####What I learned from it:
* Using css
* Making things look prettier

####Time spent learning:
Task 'FCC'. Elapsed time: 0 h 34 min 24 s
Task 'FCC responsive web'. Elapsed time: 0 h 42 min 0 s

#### Total time: 1 h 16 min 24 s
Time spent is tracked by my [TaskTimer](https://www.arttupyykonen.com/tasktimer/) script and the [WakaTime app](https://wakatime.com/about).


### Links and videos

Once again a python video! This is also done by the wonderful Corey Schafer. Take a look!

{% youtube bD05uGo_sVI %}

That's it. See you all tomorrow!
Release 0.1 of urlChecker
Tags: opensource
Published: 2020-09-24 20:09:18



[**urlChecker**](https://github.com/isabellaliu77/urlChecker)
Go implementation of the URL checking

**Versioning**
This is the 0.1 version of this tool.

**Usage**
git clone https://github.com/isabellaliu77/urlChecker.git

cd urlchecker
go run urlChecker.go urls.txt
go run urlChecker.go urls.txt urls2.txt

**Features**
- It can check the file passed through arguments to get and check the URLs inside it.

- Multiple files can be passed through arguments to get checked.

- The result will show different colors and notifications based on the different accessibility of each URL.

- The version of the tool can be checked through command-line arguments, supporting both Windows and Unix style. (-v, --version, /v)

- Support for parallelization for the tool to run efficiently

- Only headers are requested when the URLs are being checked.
Big List of Online Places to Code/Prototype
Tags: replit, codepen, codesandbox
Published: 2020-09-24 20:05:39

Across the internet that has always been many code playgrounds, places we can practice basic coding drills. Nowadays we have even more robus online coding tools that allow us to even build whole applications online. This is meant to be a list of such tools.

## Repl.It

Probably the most well known allowing you to spin an environment for most every language you can think of and many you weren't aware. Considering learning a new language and didn't want to install another IDE and langauge on your machine just yet, Repl.it has your back!

## Codepen.io

A great place to prototype frontend web applications. It allows you develop in html/css/javascript and see the results update live. Very useful tool for education and development.

## CodeSandbox.io

Allows you to spin up a sandbox in many templates for frameworks such as React, Vue, Angular to create and deploy javascript/frontend projects.

## Runkit.com

NodeJS prototyping, create APIs and Web Servers then deploy, download the code etc. Have access to the world of node in the browser.

## alpha.trycarbide.com

A node coding playground that saves and loads directly into your github gists.

## autocode.com

Create automations, apis and deploy them online with this online code editor.

## jsfiddle.net

Another online code editor for web based applications similar to CodePen.io.

## codeanywhere.com

Online full featured IDE for working in projects in several languages.

## glitch.com

An online community to develop, deploy nodeJS applications as a community. Lots of templates for popular frameworks and APIs.

## pythonanywhere.com

Focuses on python exclusively, allows you to host, develop and deploy applications and databases from their platform.

## And more...

There are many JS coding sandboxes/pastbins such as 

- https://jsitor.com/
- https://ideone.com/
- http://plnkr.co/
- http://jsbin.com/
- https://www.tutorialspoint.com/codingground.htm
- https://dabblet.com/
- https://codeboard.io/
Closed Open Source
Tags: opensource
Published: 2020-09-24 19:55:15

OSD 600 (Open Source Development) is a class that is going to demand a lot of attention from me. I can tell already.

This week we took the experience and training of the students and leveraged them to help us all write better code. We each tested another student's work and helped them improve it. I looked at Joseph's project (https://github.com/joey2031/OSD600-Release0.1)and gave him some feedback.

It was pretty easy to find him! there are so many people in class that we all can kind of just ask for help, post our repositories, and someone will come along and give us a hand. It's extremely welcoming.

I raised a few issues with his project, though small.

The first was with his readme. (https://github.com/joey2031/OSD600-Release0.1/issues/2) It's important to have an easily readable readme! Joseph's readme, in my opinion, didn't properly inform the user on how to start his app. I just suggested a clearer paragraph. Easy!

The second was an issue with his argument checker. (https://github.com/joey2031/OSD600-Release0.1/issues/3) When the user inputted "-v" or "--version", the app would break! The user would have to write "v" or "version" instead. I just suggested he change the latter option to the former. Again, a small change that means a lot.

Finally, I noticed that his repo had his node_modules folder included. (https://github.com/joey2031/OSD600-Release0.1/issues/4) So I simply suggested he remove the folder and add a .gitignore so that it doesn't get uploaded again.

There were 4 issues on my repo as of writing that I'll list in point form:

- Readme is slightly unclear https://github.com/fluentinstroll/Link-Checker/issues/1

Easy fix! Be more clear and add a little more info about how ot run the app.

- Folder structure is unclear https://github.com/fluentinstroll/Link-Checker/issues/2

Again, simple to resolve, just rename some folders and move some files.

- Remove node_modules 
https://github.com/fluentinstroll/Link-Checker/issues/3

I just deleted node_modules folder and went on my way! Though I wonder if it's better to keep or not since the issue mentioned the arguments for and against.

- Add additional reasoning for why I included the libraries I did
https://github.com/fluentinstroll/Link-Checker/issues/4

All together, the fixes were simple! And I learned a lot about working with git and other programmers.

This experience was plenty of fun! Also, I was surprised at how easy it was to find someone in our group to pair up with.

I can't wait to dive in to more involved projects with my classmates and the greater world of open source.
Five things I learned from my first Open Source contribution 
Tags: opensource, codenewbie, git, github
Published: 2020-09-24 19:52:36

## *And why you should contribute*

### 1) Read Documents Slowly

This one is important in all aspects of development, especially when learning new skills or technologies. Take the time to comprehend what it is you are trying to do, and plan accordingly. Depending on how a doc is worded you can even easily overlook a step within a step separated by a comma. Also, don’t be afraid to read the whole doc or relevant section of the doc at least once or twice, maybe even three times before you get going. This step can save you time and frustration down the road.

### 2) Don’t stress and Slow Down

This sometimes can be easier said than done but really if you slow down and follow the previous advice you’ll be in a better position when you encounter roadblocks in your path. If you're like me and completely new to open source, still learning to code, and diving in headfirst, you CAN NOT stress. You will get there, learning to code takes time. When you are new even the simplest processes that eventually become routine such as just committing your files to a new branch can be frustrating at first, especially if you don’t have your SSH keys set up and are working away from your normal machine, or don’t even know what that is.

### 3) Don't edit to much

Make sure you only edit the code you mean to. You can sometimes accidentally select more than you meant to or if your editor is like mine you likely have some neat workflow set up like eslint or prettier. These kinds of tools are fun and fine to use in your workflow, but you are most likely used to hitting ctrl+s and just letting the editor do the work for you. Just make sure they don’t over edit your code because not 
everyone uses these tools or has their indentations set the same as you do.

### 4) Don't be afraid to ask for help

This one speaks for itself. Many developers love to help you figure things out especially if you are working on open sourcethat is noob-friendly. It is there to help you learn and grow as a developer, and the developers who maintain the code want to teach you anything they can. I know asking for help can sometimes be intimidating. Just do it, it won't be scary the next time you ask, and you will learn from it.

### 5) Contribute to open source

Seriously go for it. Take any opportunity you can take that has a small issue you can solve and go for it. If you get stuck ask for help, remember the devs in charge of the project likely would love to help you! It’s going to make you nervous a bit, but ignore your fear and just go for it! Take the advice I have given you here and you will be well on your way to contributing to your first bit of open-source yourself. If you don't know where to get started with open source check out code connector. 
[https://codeconnector.io/](https://codeconnector.io/)

Code Connector is a fantastic place to learn from other devs. The slack channel and meetups have been crucial in my learning process. Code Connector also lead me in my first steps with open source!
Rebel: Fast, beautiful and focused note taking
Tags: showdev, linux, ubuntu, writing
Published: 2020-09-24 19:48:48

I wanted a decent note app on Ubuntu and Windows, just like the one on Mac. I also wanted it to be developer friendly. Since I couldn't find one, I made one ( [See it in action](https://raw.githubusercontent.com/kumarasinghe/rebel/master/resources/rebel-in-action.gif) ). Throw me your thoughts! Thanks.

[FREE DOWNLOAD](https://github.com/kumarasinghe/rebel)

![Note Taking With Markdown](https://dev-to-uploads.s3.amazonaws.com/i/h4tw4om3dts31dhyvt4v.png)
Trello + Sapper JAMstack, When not to use
Tags: svelte, sapper, javascript, trello
Published: 2020-09-24 19:45:30

While this is a fun project for JAMstack there are some limitations.

1. Multiple authors are possible but the latest edit becomes your published date.
2. The edits and updates can be tracked in Trello to check if point 1 happens.
3. Acknowledge you are using Trello for experiment/fun.


{%youtube oMOtZUsgR5c %}

This demo shows how Sapper could be used for any headless CMS or other API solutions even Shopify has a headless mode.

This demo is also hosted here [https://trello.anoram.com/](https://trello.anoram.com/)

Check the repo here: https://github.com/peopledrivemecrazy/Sapper-Trello
Highly suggested React Course
Tags: react, tutorial, javascript
Published: 2020-09-24 19:41:50

Today, I'm sharing highly curated & selected courses to learn React knowledge with practical examples. I started my web development journey with Angular 1.6 in 2016 and this was super easy for me to make projects.

After playing with Angular for 1 year then I got to know about Reactjs and I dive into this and decide to build something with React.

So, I was loving React.js & decide to become a master in this. So, I ask some suggestion about which course should I take to learn to React. I took a couple of courses for React & I'm sharing them here.

I'll only suggest two courses that will make you master in React development journey.


## [React For Beginners](https://ReactForBeginners.com/friend/PUBLICAPIS)
![React Begineers](https://dev-to-uploads.s3.amazonaws.com/i/kqgijvgdnxe2ksdlf8kn.png)

This is the first course I took to confirm my basic with React that I'm going in the right direction or not. I finished the course in 2 days & in the course 80% new things I learned. **Highly Recommended**.

[Link to the course](https://ReactForBeginners.com/friend/PUBLICAPIS)

## [Master Gatsby](https://mastergatsby.com/friend/PUBLICAPIS)
![Master Gatsby](https://dev-to-uploads.s3.amazonaws.com/i/214fnxjh0al046gpyjdp.png)

If you are a React developer then definitely you know about Gatsby. Gatsby is a React framework to make static websites with lots of built-in features like caching, preloading, & more.

I was building the Gatsby website for 1.2 years & I made 6-7 Gatsby projects.

[Link to the course](https://mastergatsby.com/friend/PUBLICAPIS)

I can guarantee you that these two courses will worth your single penny. WesBos make these course with the examples that explain code logic in real-time.

## Questions:

Please leave the comment with your recommended courses. Thanks
Defeating Flash of Unstyled Text (FOUT)
Tags: css, webdev, typography, design
Published: 2020-09-24 19:41:27

I noticed when I loaded my personal site without cache, my text would first display without the correct font. It eventually restyle using the original font after everything loaded.

![font-flash.gif](https://dev-to-uploads.s3.amazonaws.com/i/yguf03i3uh6dpzrog2g4.gif)

I was originally using a NPM package called `typeface-roboto` to load my font. This was awesome because I wanted to host the fonts myself instead of pulling from a CDN. I realized the styles included in the package was the reason for my Flash of Unstyled Text (FOUT).

I looked through the code inside the package and checked out the CSS files. Here is an example of how they were adding the font.

```css
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap; /* Line Causing FOUT */
  font-weight: 500;
  src:
    local('Roboto Medium '),
    local('Roboto-Medium'),
    url('/fonts/roboto-latin-500.woff2') format('woff2'),
    url('/fonts/roboto-latin-500.woff') format('woff');
}
```

I noticed the `@font-face` styles were using `font-display: swap;`. When `swap` is set, the browser will give a very short time to load the font before it uses a fallback. Once the font is fully loaded, it will convert back to the expected font. This option is great from a performance standpoint but might affect user experience. If you set `font-display: block`, this will increase the amount of time the browser will have to fetch your fonts before it starts displaying anything on the page. `block` sacrifices performance for user experience.

## My Solution

I pulled all the font files into my project instead of using the NPM package. Then inside my CSS, I loaded the fonts using `font-display: block`;

```css
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: block; /* No longer causing FOUT */
  font-weight: 500;
  src:
    local('Roboto Medium '),
    local('Roboto-Medium'),
    url('/fonts/roboto-latin-500.woff2') format('woff2'),
    url('/fonts/roboto-latin-500.woff') format('woff');
}
```

Since my websites design is heavily focused on typography. I was willing to sacrifice some performance to give my fonts a little more time to load before anything is displayed.

![no-flash.gif](https://dev-to-uploads.s3.amazonaws.com/i/8gpc6gkklldm2d251hoq.gif)

---
- Follow me on [Twitter](https://twitter.com/CodeByCorey) for random posts about tech, programming, and working from home.
Intro to Open Source
Tags: opensource, beginners, ai, python
Published: 2020-09-24 19:35:29

### About me  
My name is Henry. I just started my path in Open Source with OSD600 from Seneca. I'm interest in Open Source because I have worked with VSCode for a while and I think it's one of the best software I have ever used. And it's an open source Software which make it so great. The second reason is with Open Source project, I can get to work with real world type of work.  

### Location  
I live in Toronto with my awesome roommates until some of them wanna move back home. Lucky for us, in this pandemic, our jobs can be done remotely.  

### Planning  
I'm looking to work on an Open Source AI projects. I know there are options between C++ and Python. I have been working with C++ for a while so I want to try with Python for this project.  

### Target repo  
I forked this repo https://github.com/tensorflow/tensorflow. It seems to be the most popular open source AI project.
Python Loop Troubles
Tags: python, beginners
Published: 2020-09-24 19:35:21

Hi, I'm fairly new to coding and I wanted to learn Python. I think it's a really fun and simple to use language. I am having a bit of trouble with this piece of code that I attached, and I also attached what it actually looks like when you compile it. What I want it to do is keep asking the user to input a response if the inputted response doesn't match the values the program can give, and it kinda works but you at the end, in the picture with the compiled code it will keep repeating its self and I don't want that. I want the loop to stop running when the it has the correct inputted response, where the program can provide an output. I've pretty much tried everything I could think of and I still cant figure it out. If anyone could help me that would be greatly appreciated!! or let me know if this isn't clear enough or something.
Keeping Aurora Serverless Warm
Published: 2020-09-24 19:21:53

In a play/test context I found it annoying when my database went to sleep.  It gave me a new source of annoying error messages.  I solved it by setting the minimum ACU to '1' and the 'Pause after' to 1440 minutes.  This worked a treat.  It kept warm all day.  My calculation is that this would cost $1.44/day.

My question is could/should this technique be used in production?  Are there downsides?  If this is OK in production you could also add a CloudWatch CRON job to tickle the database every 24 hours.  You would have a perpetually warm Aurora.

Thanks

Brian
SingleNumber Solution in O(n) Time Without Extra Storage
Tags: javascript, xor, leetcode
Published: 2020-09-24 19:21:09

## Problem Statement
Given a non-empty array of integers, every element appears twice except for one.  Find that single one.  Note: Your algorithm should have a linear runtime complexity.  Could you implement it without extra memory?

## Thought Process
My initial conclusion was that no, you couldn't.  Since there's not a range for the possible numbers in the array and the array isn't already sorted, you can solve in linear time if you used an object to store counts, but you need that extra storage or sorting is O(n log n).

But see, I forgot about XOR (^).  For those of you who don't play with bits, exclusive or takes two binary numbers and for pair where one number has the bit flipped and the other doesn't, the resulting number has the bit flipped.
```
  01101
^ 10110
= 11011
```

So if you have a number and XOR it by 0, you get the number.  If you have a number and XOR it by itself, you get 0.  

Now, that's helpful, but why would you care about XOR for this problem?

Let's run through an example:
```
input:  [4,1,1,2,2,4,5,1,2,1,2]
4^1=5
5^1=4
4^2=6
6^2=4
4^4=0
0^5=5
5^1=4
4^2=6
6^1=7
7^2=5
```
## Explanation/Solution
Because all of the values that appear twice will eventually cancel themselves out, you're left with that one solitary element that has no partner.  No extra storage necessary.  Linear time.

```javascript
function singleNumber(nums) {
    return nums.reduce((a, b) => a ^ b)
}
```
Trello + Sapper JAMstack (Part 2)
Tags: sapper, svelte, trello, javascript
Published: 2020-09-24 18:45:33

## Important API endpoints
List of sanity checks (I have done your homework 😉) and API endpoints that help you get the cards and list.

* `https://api.trello.com/1/boards/{boardID}?key={yourKey}&token={yourToken}`
* `https://api.trello.com/1/boards/{boardID}/lists?key={key}&token={token}`
* `https://api.trello.com/1/lists/{cardID}/cards?key={key}&token={token}`

We need to hit 3 endpoints sequentially to get all the items in the cards. `/1/boards/{boardID}` {boardID} is your part of the URL on your Trello board *they have some confusing API keywords* this will give you `boardID` for query the list for the next step


![Step1](https://dev-to-uploads.s3.amazonaws.com/i/nks2mlxyqq2m47lyz0qe.png)
<figcaption>Step 1: boardID is the URL part 🤷</figcaption>


Make use of the id from the first endpoint in the `1/boards/{boardID}/lists` and this will return cards on the board if done right.


![Step2](https://dev-to-uploads.s3.amazonaws.com/i/huk5nzml0bm3rujipile.png)
<figcaption>Step 2: Copy id for Posts</figcaption>


Having copied the id proceed to obtain the items in the card

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vjev6im8eveyjawkbyll.png) 
<figcaption>Step 3: Success!</figcaption>

The 3rd endpoint will be used for the Sapper app and generate blog posts, have the last endpoint somewhere safe.
Sapper JAMstack - Trello as a blog backend? (Part 1)
Tags: svelte, trello, sapper, javascript
Published: 2020-09-24 18:45:19

{%youtube oMOtZUsgR5c %}


####  #1 What is Sapper?

Sapper is the companion framework of svelte, like how Next/Nuxt is for React/Vue. You have the benefits of svelte and all the SEO powerhouse and Server Side Rendering. You can read more about sapper [here](https://svelte.dev/blog/sapper-towards-the-ideal-web-app-framework)

####  #2 What is Trello?

Jira of cool kids, A project management tool that is used by several collaborators to get things done and be organized also it is very easy to get started and begin a new project board

#### #3 Base setup - trello

Since we are going to make a blog we need to have `Drafts` and `Posts`. Drafts are incomplete and in-progress articles. Posts are completed articles that appear in your blog.

Create a new private board and set up two lists like so

![trello](https://dev-to-uploads.s3.amazonaws.com/i/pviyuipsqmegf14r6q0s.png)

The drafts list has a new card `First Post`

![First Post](https://dev-to-uploads.s3.amazonaws.com/i/5ai823of93pzh2nkmfve.png)


#### #4 Trello as a Blog Backend

We make an unconventional project. Trello has extensive [API](https://developer.atlassian.com/cloud/trello/guides/rest-api/api-introduction/) documentation that we can use for JAMstack applications.

<img src="https://media.giphy.com/media/l0ErBdKr1fnFRZIbu/giphy.gif"/>

Once you are logged in you need to go [here](https://trello.com/app-key) agree to ToS and obtain the key and token.

![token](https://dev-to-uploads.s3.amazonaws.com/i/2c1130lzmur6vli78o4u.png)

Token along with your API key can be used to read and write for your entire Trello account. Tokens should be kept secret!