teleren/devto huggingface dataset:
One HTML Page Challenge
Tags: html, codingchallenge, javascript, oldschool
Published: 2019-11-19 21:54:46

---
title: One HTML Page Challenge
published: true
description: Can you create something cool without modern tools?
tags: HTML, Coding Challenge, Javascript, oldschool
---



[![One HTML Page Challenge](https://github.com/Metroxe/one-html-page-challenge/raw/master/meta/one-html-page-logo.png?raw=true "One HTML Page Challenge")](https://onehtmlpagechallenge.com/)

The goal is to create anything you want within 1 single html file. Practice your skills with no assistance from libraries, no separation of files, and no assistance of a modern framework. **How creative can you be with such restrictions?**

### [View Submissions](https://onehtmlpagechallenge.com)

## Rules
 - You must write all of your code in 1 single HTML file.
 - Your file must be less than 1mb (measured by the file size on github).
 - You cannot import any external files (this will be checked by looking at the network tab in chrome).
 - You are allowed to use libraries, however the library must be hard coded into a script tag and still must fit under the 1MB file size. (I suggest using a cdn and replacing with hardcoding the minified library at the end, or use [JSCompress](https://jscompress.com/)).
 
## How to Submit
 1. Fork the repository.
 2. Add your html file to the `/entries` directory.
 3. Edit the `entries.js` file in the root, with your information for the entry.
 4. Commit to your forked repo.
 5. Make a pull request to master from your forked repo.
 
 _* You may submit as many entries as you'd like._
 
 ## Publicity
 - [**Boing Boing** - The "One HTML Page Challenge", a great example of view-source culture](https://boingboing.net/2019/08/23/the-one-html-page-challenge.html)
 - [**Medium** - How Having No-Internet Lead Me to Building a Worldwide Viral Website.](https://medium.com/@metroxe/one-html-page-challenge-d0e6e6d23e16)
 - [**10BestDesign** - Coders Try a Single-page HTML Coding Challenge to Boost Skills](https://www.10bestdesign.com/blog/coders-try-a-single-page-html-coding-challenge-to-boost-skills/)
 
 
 ## Useful Links
 - [Fun Times with CSS Pixel Art](https://css-tricks.com/fun-times-css-pixel-art/)
 - [Pixel Art to CSS](https://www.pixelartcss.com/)
 - [How to make a simple HTML5 Canvas Game](http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/)
 - [JSCompress: Compile Multiple JS Files Into a Single Script Tag](https://jscompress.com/)
 - [Cookie Clicker](https://orteil.dashnet.org/cookieclicker/)
 - [List of Javascript Game Frameworks](https://github.com/collections/javascript-game-engines)
 - [How to render images in HTML with base64 strings](https://stackoverflow.com/a/41057998)
 - [Convert images to base64](https://www.browserling.com/tools/image-to-base64)
Testing GitHub Pages Locally 
Tags: testing, local, githubpages, docker
Published: 2019-12-06 03:22:18

---
layout: post
title: Testing GitHub Pages Locally 
category: [ testing, local, github pages ]
tags: [ testing, local, github pages, docker ]
published: true
---
Something has always bothered me about deploying something that I haven't tested locally. A big manifestation of this is my blog. Since my blog is currently hosted on GitHub Pages, I needed [Jekyll](https://jekyllrb.com/) and all of its dependencies. Since those aren't things I typically have installed, so I decided to use a piece of software I always install: Docker.

The whole ordeal managed to come out to a single line:

_Linux_
```sh
docker run --rm -it -v $(pwd):/srv/jekyll -p 4000:4000 jekyll/jekyll jekyll serve --watch
```

_Windows_

```sh
docker run --rm -it -v "%cd%":/srv/jekyll -p 4000:4000 jekyll/jekyll jekyll serve --watch
```
_Note the double quotes since Windows paths can have spaces_

This command should be run in the root of your GitHub Pages project. It will create a Jekyll container that is listening to the current directory for changes and is exposed via port `4000`. This way as you edit either blog content or site styling the changes appear as quickly as the site refreshes in your browser.
Create & Publish Your First Ruby Gem 
Tags: beginners, ruby, gems
Published: 2019-12-06 01:50:17

   We can build and publish our gem in a few steps.

After we have written our code, our command line interface(CLI) and inspected it, we are ready to upload it (https://rubygems.org).

Today we will be updating, creating and publishing a Ruby Gem. We currently are in version 0.1.3.gem.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/2h8j4kbz9ev5z7nre3zn.JPG)

In order to update this gem we need to change the Version, to a higher number preferably. 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/l1fkd7z8byoo5xbyx0e5.JPG)

Once we have manually change the version number, run this command:   
   "gem build insert-name"

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/9rtq2sar30wr3oc7rxa4.JPG)

At this point our gem has bee created, I recommend taking the time to visit "rubygems.org" where our gem will be pushed/uploaded to. Create and register an account, you will need it while pushing via command line.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/3pp9ztsc4dx92sit44wn.JPG)

Now it is Live! 
https://rubygems.org/gems/crypto_price

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/91hp2w3jfyovjlovx9jo.JPG)
Render Conditionally with a Ternary
Tags: react
Published: 2019-12-06 01:33:41

When you need to render JSX conditionally, you need to use a ternary operator.

There are no `if/else` statements allowed inside a block of JSX.
Fortunately, JavaScript has us covered.
We can use a [ternary operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) — a single line expression for conditionals.

The ternary operator looks like this:

```js
someCondition ? doTheTruthyThing() : doTheFalsyThing();
```

They can be used for assignments.

```js
let activity = happyAndKnowsIt ? "clap hands" : "brood";
```

And — in JSX — they can be used for conditional rendering.

```jsx
return (
  <div>
    {pokemon
      ? <Pokemon name={pokemon.name} />
      : <div>couldn't catch 'em all.</div>
    }
  </div>
)
```

## Give it a try
Try you new skills right in the browser.
Go to this sandbox.

{% codesandbox 8bfw0 %}

**Assignment:**
Use the [Conditional (ternary) operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) to render a `<Pokemon />` only when we have one to render.

1. Add a ternary expression. Remember to interpolate it with `{}` curly braces
2. If we have a Pokemon to render, render it using the Pokemon Component
3. If we don't have a Pokemon, show the `index` for the Pokemon we're missing

---

Subscribe to all my web developer videos on YouTube:
{% youtube 1VOJ4jtE-P4 %}

Follow the 🧵 on Twitter:
{% tweet 1202746326020059136 %}
How to connect CSS files to React components
Published: 2019-12-06 01:04:34

I recently learned React and realized it's completely different using CSS with React as opposed to vanilla javascript or html.


In React you'll need to import your CSS file into the component you want to style directly.


Let's say this is our CSS file. The goal here is to change the color of the text in our component. Let's assume we will have the class "text" already available.
```
.text {
  color: green;
}
```



You'll want to import your CSS file directly into the component you want to style. 
```
import React, { Component } from 'react';
import './Example.css'

class Example extends Component {

  
    render() {
        return (
            <div>
                <h1 className="text">Hello</h1>
            </div>
        );
    }
}

export default Example;
```

Cool now our text is green!
Naming Things is Hard, Especially Apps
Tags: branding, naming
Published: 2019-12-06 00:18:21

---
title: Naming Things is Hard, Especially Apps
published: true
description: Sometimes the hardest thing is a succinct name.
tags: branding, naming
---

I've always found that trying to pin a name on something is often one of the most challenging aspects of a project, that it ends up being a roller-coaster of a journey, from the peaks of frothy enthusiasm to bleak despair, and back again.

If you keep at it long enough eventually you'll find something you can live with, and with some luck, something you come to actually appreciate. That's the theory, anyway, but at the outset it can seem like that will never happen.

I'm curious what names people have come up with that seemed awful at the time but which end up becoming something great.
Question: How do I deal with environment variables in production?
Tags: webdev, javascript, environmentvariables, frontenddevelopment
Published: 2019-12-06 00:09:36

---
title: Question: How do I deal with environment variables in production?
published: True
description: Environment variable values injected during runtime
tags: Web Development, JavaScript, Environment Variables, Front-end Development
cover_image: https://www.inspiring-decisions.com/wp-content/uploads/2017/06/how.jpg
---

So I was checking the source code (in browser) of some of my projects and I discovered that even though I used environment variables to store sensitive information I could still see the values when rendered in the browser, meaning that my values are injected during runtime, hence still makes my projects vulnerable. How do I deal with env variables in production so that no one will see the values when the page source is viewed?
Advent of Code 2019-06 with R
Tags: rstats, adventofcode
Published: 2019-12-06 20:34:27

---
title: Advent of Code 2019-06 with R
published: true
date: 2019-12-06 00:00:00 UTC
tags: rstats, adventofcode
canonical_url: https://colinfay.me/aoc-2019-06/
---

Solving Advent of Code 2019-06 with R (and no JavaScript this time).

[Disclaimer] Obviously, this post contains a big spoiler about Advent of Code, as it gives solutions for solving day 6.

## Instructions

Find the instructions at: [https://adventofcode.com/2019/day/6](https://adventofcode.com/2019/day/6)

## R solution

### Part one

```
library(magrittr)
library(igraph)

## 
## Attaching package: 'igraph'

## The following objects are masked from 'package:stats':
## 
## decompose, spectrum

## The following object is masked from 'package:base':
## 
## union

ipt <- read.delim("input6.txt", header = FALSE, sep = ")", stringsAsFactor = FALSE)
grph <- ipt %>% 
  graph_from_data_frame() 

grph %>% 
  distance_table() %>% 
  extract2("res") %>% 
  sum()

## [1] 147807
```

### Part two

```
distances(
  grph, 
  v = V(grph)[["YOU"]], 
  to = V(grph)[["SAN"]]
) - 2

## SAN
## YOU 229
```

## JS solution

> Nop, no JS solution today… I didn’t feel like reimplementing igraph in JavaScript, neither digging into the graph modules today ;)
How to Get Database Name in Laravel
Published: 2019-12-07 10:19:17

---
title: How to Get Database Name in Laravel
published: true
date: 2019-12-06 00:00:00 UTC
tags: 
canonical_url: 
---

Hi GuysIn this blog I will show you get database name in laravel 6 we will give you the database name for the connected database so you can use DB Facade in laravelif you do not know your database name then you can use bellow examplestrong classstepExample 1strongpre c
Easily add Anaconda Prompt to Windows Terminal to make life better
Tags: python, productivity, tutorial, terminal
Published: 2019-12-05 23:53:07

---
title: Easily add Anaconda Prompt to Windows Terminal to make life better
published: true
description: 
tags: python, productivity, tutorial, terminal
---

I love the Windows Terminal and if you haven't tried it out yet I highly recommend it. Its _super_ customizable which is absolutely lovely. Here are the steps to add Anaconda Prompt to Windows Terminal.

## Prerequisites
- [Install Windows Terminal](https://www.microsoft.com/en-us/p/windows-terminal-preview/9n0dx20hk701?activetab=pivot:overviewtab)
- [Install Anaconda](https://www.anaconda.com/distribution/)
- Windows 10

## Add Anaconda Prompt
1. Open Windows Terminal and click the arrow and then `settings`. This will open the `settings.json` file to customize the terminal.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/510dg0xj5jcbgtz5isz8.PNG)
2. Duplicate the `cmd` settings by copying and pasting them below or highlight `CTRL + D` if using visual studio to duplicate the selected text. (I ♥ shortcuts) 
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/m0xac4m0sd28dcfjbx7r.PNG)
3. Update the `guid` to something unique
4. Update the `name` to `Anaconda`
5. Next update the `commandline` to the cmd for `Anaconda Prompt`. The easiest way to do this is to grab the target path from the Anaconda Prompt shortcut.
    - Search for `Anaconda Prompt` in the windows search bar
    - Right click and `open file location`
    - Right click on the `Anaconda Prompt` shortcut
    - Click `properties`
    - Grab the target path
    - Delete the extra text to get the path (shown below)
    - If you prefer you can replace the "C:\\Users\\xxx" to "%USERPROFILE%"
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/nvn4aujsh70qwuac6plq.gif)
The new terminal `settings.json` should look something like this:
    ![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/bzx68enxok6pcipsxefu.PNG)
6. Optional: Update the icon to the Anaconda navigator icon
 - It will be the same root path as above up to the `anaconda3`
 - Append `\\Menu\\anaconda-navigator.ico` to the end.
 - End result should look something like this:
`
"icon": "%USERPROFILE%\\AppData\\Local\\Continuum\\anaconda3\\Menu\\anaconda-navigator.ico"
`
7. Save the changes to the `settings.json` file
8. Open Windows Terminal
9. Click the down arrow and select `Anaconda`
10. BOOM! Anaconda in Windows Terminal.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/7jw6sv870lyedqunta72.PNG)
11. Listen to Sir-Mix-A-Lot and rejoice in your awesomeness
Day 47 : Money
Tags: hiphop, code, coding, lifelongdev
Published: 2019-12-05 23:29:46

_liner notes_:
- Professional : Account is unlocked! That was awesome. haha Hope it doesn't happen again. Did a demo of the prize wheel app for the team meeting so I could test it and get some feedback. Aaaaannnnd it worked! (for the most part) haha. I was able to create a contest, people were able to join via web and SMS and they showed up on the wheel, once it filled up, people got notifications that it was full, I clicked the spin button, the arrow on the prize wheel spun, selected the winner and all the contestants were notified of the results! Everyone seemed to really like it! Funny thing is that my original Glitch project wasn't loading for some reason, I just remixed it, ran the setup CLI I created and got a whole new project up and running in a couple of minutes! I also got my tickets for my first official out of town event as a JavaScript Developer Advocate! Finalized travel preparations with the booking agent. Attended another team meeting for the Client SDK and we got to discuss our 2020 roadmap. Added another conference to the events list. Hoping it gets selected. Yeah, a lot of stuff today.

- Personal : Got an email from the Dealership that my van came in! Awesome. Been looking into some of the things I'll need and bookmarking site and other van builds I like. So I transferred money from my savings account. In the long run, I think I'll be saving a lot. Really looking forward to building it out and going on a journey.

![Arial shot of a beach in Painted Cove Trail, Oregon](https://thepracticaldev.s3.amazonaws.com/i/2cux5s35skv8tc2oz1u4.jpg)

For the rest of the night, going to listen to some tracks for this week's radio show. Also, been watching an anime my friend put me onto called 'Babylon'. It's pretty interesting so far. The story took a crazy turn right in the first couple of episodes. haha

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube EiBoFw2meAQ %}
My first meetup talk @ GraphQL Toronto ⚛️
Tags: graphql, apollo, localstate, talks
Published: 2019-12-05 23:23:39

---
title: My first meetup talk @ GraphQL Toronto ⚛️
published: true
description: I took the leap
tags: graphql, apollo, local-state, talks
cover_image: https://res.cloudinary.com/dscgr6mcw/image/upload/v1575587334/apollo-state-talk/617E072E-D41E-4659-A3F7-4E721D0FC7F5_1_105_c.jpg
---

> Not me pictured lol

The one skill I think every developer should practice is public speaking. Unless you are a remote-developer who doesn't do audio OR video calls (idk if this exists), every developer needs to communicate ideas, thoughts, and plans with other co-workers.

I am pretty committed to this idea so I did a couple of talks last year just to my coworkers. This got me much needed practice and gave the chance for people to give me feedback.

Anyways, I decided that once a year is a good cadence for giving talks and meetups are the next stepping stone for me. I reached out to [Paul Dowman](https://twitter.com/pauldowman) at Shopify who was running the next GraphQL Toronto meetup. He accepted my offer to do a talk on Apollo Local State and the rest is history 😇

<a href="https://apollotalk.alec.coffee">
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/spkq9jkfh78kq201xkwa.png)
</a>

[The slides](https://apollotalk.alec.coffee)

<a href="https://blog.alec.coffee/apollo-local-state-pains/">
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/b0lel9a14ywb8e0xxhoc.png)
</a>

[Blog post I wrote on the subject](https://blog.alec.coffee/apollo-local-state-pains/)

A lot of people gave me positive feedback which was awesome. I practiced a lot in front of co-workers (and my wife <3) which all gave me super good feedback.
Ember's Nested Routes and URLs Explored
Tags: ember, routing
Published: 2020-06-12 04:00:13

---
title: Ember's Nested Routes and URLs Explored
published: true
date: 2019-12-05 22:14:07 UTC
tags: ember, routing
canonical_url: https://ilyaradchenko.com/ember's-nested-routes-and-urls-explored
---

Ember's router is powerful and a bit unique, in that it has a nested structure for the routes which build up the URL a user would see in the browser.Given it's power, it is easy to be unsure about how to structure your routes, especially in scenarios where you have parent-child UI patterns or CRUD like resources.

One of the patterns that I've learned is not using extra nesting when want to build out a multi-part URL structure, like `/users/1234`, which seems like it should be nested, but generally a single level is enough. I'd structure it like this:

```
this.route('user', { path: '/users/:userId' });

```

This puts your user "view" route at the `app/pods/user` directory (my examples will use PODS, since they are sane for routes).The following is generally not the way I'd write my router map, even though it creates the same URL pattern.

```
this.route('users', function () {
this.route('user', { path: ':userId' });
});

```

Unless you are showing the list of users at the same time as the selected user, which I think is a rare pattern, this is probably not the way your route should work.The reason I wouldn't do this is because it adds unnecessary mental overhead between the list and a selected item from the list.With my preferred pattern, if I wanted a list route, it would be a sibling to the resources.

```
this.route('users');
this.route('user', { path: '/users/:userId' });

```

And the folder structure is sane as well:

```
app
pods
  users
  user

```

Since the two usually don't share any common UI, the common UI will probably be one route up or at the `application` route.Well that's it! Let me know if this is how you do it or if you completely disagree.
I have just started the strategy game dev project in Unity
Tags: csharp, gamedev, unity3d, sideprojects
Published: 2019-12-05 23:00:58

Since I finished Coresearch library (yup, finished side project - magic ✨) which about I had written previously (https://dev.to/meatboy/one-month-of-learning-full-text-search-algorithms-building-web-search-lib-with-prefix-trees-5gjd), I was looking for a new project to stick with for the next few weeks. And because at my studies, we got practise exercise to create a game, I found this may be very interesting.

We had two weeks to write simple GDD (Game Design Documentation) with briefly described our vision of the project. After a long inner fight in my mind and choosing between VR or horror game with great mates from studies, I decided to create strategy game based on graph theory similar to "Little Stars for Little Wars" and Freeciv/Civilization series with ancient Slavic theme.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/el3kucyemjm3lrhtmxyt.jpg)

Every vertex of the graph is going to be another region to capture which can produce warriors, mana or honey. Mana and honey are going to be resources for casting spells on the enemy vertex and upgrading buildings. Why honey? It's a little easter egg for those who play "Polanie" game about another ancient Slavic tribe, where milk was the main resource. 😜 Edges of the graph are going to be paths to send warrior between regions, however, the main weight of the graph will be warriors count on the edge, not the distance itself.

First what I am going to do, is level controller with some scripts for spawning vertices on correct positions based on the config JSON file. The entire game is open-sourced since it's just my study project ;) If you want, you can check it on GitHub: https://github.com/pilotpirxie/vistulans If you want to be notified about news in this project, follow my profile or hashtag on dev.to, or GitHub repository.

Thanks for reading, have a wonderful day! 🤗
Virtual DOM vs DOM (Real DOM)
Tags: javascript, dom, virtualdom, documentobjectmodel
Published: 2019-12-05 22:42:18

---
title: Virtual DOM vs DOM (Real DOM)
published: true
description: Virtual DOM & DOM... What are they? 
tags: JavaScript, Dom, Virtual Dom, Document Object Model
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sigd93l2jlmo4pvuy49z.jpg
---

I’m [Ovi](https://muhammadovi.com) a MERN Stack developer!
So the topic today is “Virtual DOM vs DOM”,

First, this is an example of DOM:
![DOM Flow](https://thepracticaldev.s3.amazonaws.com/i/sigd93l2jlmo4pvuy49z.jpg)

The DOM is actually the object-based abstraction of your code which is being shown on the page!

## DOM (Real/Browser DOM)
DOM takes all the HTML elements and wraps them in an object with a tree-structure — like the image above. This provides an API that **allows us to directly target any specific node** (HTML element) and do what we want like adding more child/parent nodes, removing, editing it’s content and blah blah blah...

## Virtual DOM
On the other hand, Virtual DOM is an abstraction of your Real DOM **but** it’s pretty light-weight than the Real **DOM** — It has all the same properties as the Real DOM object but it **can’t** write and show things to the screen like Real **DOM**. It’s extremely fast as compared to the Browser’s DOM — It can produce about **200,000 Virtual DOM Nodes / Second** 😲

That was a short intro of **DOM** and **DOM** — I mean the Real DOM and the Virtual DOM 😃

I hope you understood what I said 😜

Let’s meet in the next post.
Till then, Sayonara! (Good-Bye)

If you found this story useful, you know what to do now. Give it a ❤️ and follow me to get more articles and tutorials on your feed. 😜😉
A Slack Bot for your private Advent of Code Leaderboard
Tags: adventofcode
Published: 2019-12-05 22:02:42

# Slack Bot for the Advent of Code


In this festive time, a colleague created a private Leaderboard and invited every dev where I work to participate. I was very exited and after completing the first challenge I thought something was missing to engage others.

**A Slack Bot that show the progress of every participants.**

Thanks to this repo, [tomswartz07/AdventOfCodeLeaderboard](https://github.com/tomswartz07/AdventOfCodeLeaderboard) that gave me the idea.

I didn't want something that posted every 10 minutes with the same score. So I made a Rails app (because this's what I know) that will check if someone gained a ⭐️, save it and then send the new LeaderBoard.

{% github https://github.com/Bhacaz/Advent-of-Code-Slack-Bot %}


Have a look and happy **Advent of Code**