teleren/devto huggingface dataset:
Build a Fashion Blog using only HTML5
Tags: html, blog, webdev
Published: 2020-05-01 00:45:37

First, HTML sets the underlying structure of [my blog site](https://heggy231.github.io/chingu-webdev-speedrun-challenge/frontend/fashion-blog/). 

* To make image as a link: wrap anchor tag (`<a>`) around the image tag (`<img>`).

```html
<a href="# contact">
  <img src="https://s3.amazonaws.com/codecademy-content/courses/learn-html/elements-and-structure/profile.jpg" alt="Isa blogger striped dress black hat brown hair woman">
</a>
```

* To create [jump-link](https://www.w3docs.com/snippets/html/how-to-create-an-anchor-link-to-jump-to-a-specific-part-of-a-page.html) so that with one-click I jump to a section quickly:

1) Set `<footer>` attribute to "id=contact" so it knows where to jump to.  

2) Wrap `<a>` abround your `<img>`.  This will make your image a link.

3) Add attribute `href="# contact"` beginning of `<a>`.


```html
<a href="# contact">
  <img src="https://s3.amazonaws.com/codecademy-content/courses/learn-html/elements-and-structure/profile.jpg" alt="Isa blogger striped dress black hat brown hair woman">
</a>


<footer id="contact">end of page<footer>
```
Vue, Angular, React Comparison Series: state management library
Tags: vue, react, angular, javascript
Published: 2020-05-01 00:44:13

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nvpfz9cqdfqktqldekp1.png)

A counter app below shows how each of the state management library is setup and used in its basic form.

### React - Redux
Redux - The agnostic and minimalistic library that has become the most popular state management library in React ecosystem. 
To connect react with redux, we also need to install additional react-redux library. 
- **Provider** is defined in the main file: index.js, to make the store available to child components
- To access the **count** state, App and Child component has useSelector hook method to access the state

{% codesandbox redux-counter-4gvi3 %}

### Vue - Vuex
Vuex - the official state management library that maintained by Vue team. Once the store object included in the main Vue instance in main.js, the **$store** is available to any component that needs to access the state, to commit mutation, to dispatch action, etc. 

{% codesandbox vuex-counter-n942v %}

### Angular - NgRx
NgRx - the library is built based on RxJs reactivity. Being Angular library, it also makes use of the typing features of Typescript to simplify implementation such as: reducer creations and promote type safety programming. 
- The store module is included in the main module and available to be used inside the components that inject the store object
- The count value is retrieved from the state which is returned as an observable that can be extracted using async filter or alternatively with subscribe method

{% codesandbox ngrx-counter-bgnte %}
I built a portfolio generator for Developers & Designers
Tags: webdev, react, discuss, sideprojects
Published: 2020-05-01 00:23:04

Hi there everyone! I've been working on a side project for over a year and a half now. This side project is called urspace. urspace started as a frustration I had with making my own personal website and resume. I noticed I was copying and pasting information to/from my resume onto my site. This really bothered me as I felt that there should be a more streamlined way. 

Fast forward a few months - my team and I built the first version of urspace. Since then - we have had over 1000 people generate sites using our platform. We have also added features like instant resume generation (that updates when you update your experiences) and an optional blog to each site. 

Really proud of where we have come and would love to hear any feedback you might have on the platform! Your opinion matters, and could help me shape where I take this project next. Thanks so much :)

You can find us over on - https://urspace.io/
My First Game with Unity
Tags: csharp, showdev, unity, game
Published: 2020-05-01 00:22:31

Hey all! Over the past month or two I've been slowly working on my first game built with Unity, Blokke! It's not anything extraordinary, but it still was a nice learning experience for me. Blokke is a clone of one of my favorite games, Tetris. In fact the word "blokke" is Danish for blocks.

Here are some of the "major" features of Blokke:
* Support for control pad input.
* The ability to hold blocks and use them later.
* A preview showing the next three blocks to be spawned.
* A basic level system with increasing difficulty.

So far the only build is for Windows. Once I get it to its final state I'll add a Linux build, which will be soon. Give it a try if you want!

{% github Visual-mov/blokke %}
Creating Web Components using Vanilla JS
Tags: webcomponents, webdev, beginners
Published: 2020-05-01 00:05:06

Hello everyone, this is my first 'dev.to' post. I will be going over, step by step, how I created two web components that I used on my personal website.
 
# Building a Web Component

To begin I created two separate files, one was an html file (index.html) and the other was a JavaScript file (skillCard.js). 

## HTML

The HTML is very straightforward: 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xqosn2lxalpuoqb3ykw6.png)

The (skill-card) tag is what I worked on in the JavaScript file. 
Another important part of the HTML code is referencing the JavaScript file.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zdtt5wwvhqmm8akqynre.png)

## JavaScript

After I created the HTML document, I went ahead and created the JavaScript file.
The first thing I did was create a class for my custom element. Inside the class I created a constructor and also used the "super();" method to call the constructor of the HTMLElement that is being extended. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6pfietw6ins6qzarkvwb.png)

Inside the constructor, I also created a "shadow DOM".

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zacbdezyren8tjzb95ro.png)

Then, I defined the custom element at the bottom of the JavaScript file.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/g1gjmtg451pva2men8d9.png)

Above the class, I created the new element and that is where I am able to set the inner HTML to whatever I want.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/il52f0tez3b85mfiw3xq.png)

This is where I can control the structure and styling of the information.

## Completed Web Components

**Complete HTML for skill-card**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hviv1o4g6lyu7mpmq92x.png)

**Complete JavaScript for skill-card**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3j5xgvt4tjvm38pfom6r.png)

To view the changes as you go, I opened the HTML file in the Chrome browser.

**Finished Web Component**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/928zhb794y3416x9022g.png)

The other web component was similar, except it did not use an icon. It is a basic project card where I describe my work and also provide a link to my project.

**Complete HTML for project-card**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/y14l59kvs0jcvw66pdoc.png)

**Complete JavaScript for project-card**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cwty8s74qpg0fa1ge7hq.png)

**Finished Web Component**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1vbr79ac8c02gzcv7w3c.png)
 
## Additional Resources
This is a link to a YouTube video that I used to help me get started: 
- [YouTube Video](https://www.youtube.com/watch?v=PCWaFLy3VUo)
I Finally Understand Ionic Menu Types
Tags: ionicframework, ui, mobile
Published: 2020-05-02 13:45:21

---
title: I Finally Understand Ionic Menu Types
published: true
date: 2020-05-01 00:00:00 UTC
tags: Ionic Framework,UI,Mobile
canonical_url: https://walkingriver.com/ion-menu/
---

It took some experimenting and creating a video, but I finally figured out what the difference is between the three `types` for an ion-menu component in the Ionic Framework.

<!--more-->

The ion-menu is the Ionic component that implements a side-menu. As with most other Ionic container components, it can contain a header with a toolbar and title, along with some ion-content. The typical side-menu consists of a list of pages, made from an ion-list of ion-items.

# Type

The menu can be customized with a variety of behaviors. The `type` is where I always get confused.

## Overlay

If you want the menu to obscure the main page content when it opens, you can set its `type` attribute to `overlay`. With this option, the menu slides in from the side, covering the stationary main content.

## Push

Other choices are `push`, which causes the page content to slide with the menu. As with `overlay`, the menu still slides in from the side, but it pushes the main content out of the way.

## Reveal

Or you can choose `reveal` to achieve a similar, but opposite effect from `overlay`. With `reveal`, the menu content itself is stationary, and appears to be uncovered (or revealed) as the main contents slides out of the way.

## Animated Example

Here is an animation I created to show them side-by-side. Pay close attention to which elements move, versus which ones are stationary in each example. It helps if you focus on the word Menu and the title of the main content.

![Animated Example of ion-menu types](https://walkingriver.com/assets/img/ion-menu-type.gif)

# Other ion-menu Options

## Side

You can specify what side the menu is on by setting the side attribute to either `start` or `end`. If you choose `end`, make sure your menu icon is on the same side of the main content’s toolbar, or it will look weird.

## Swipe Gesture

You can disable swiping the menu on mobile devices by setting `swipeGesture` to false.

## Menu Toggle

If you want an item in your menu to close the menu when you select it, be sure to wrap it with an `ion-menu-toggle` component. Otherwise, the menu will stay open.

The `ion-menu-toggle` can also be used to open a menu (hence the name toggle). By default, it will automatically hide itself whenever it detects that its menu is disabled or being presented in a split-pane, as we will be doing here. Because of that, if you want it to be visible all the time, be sure to set its autoHide attribute to false.

Do not ask me how long it took me to debug that the first time I forgot it.

# Summary

That is the basics of the ion-menu. There are other options, but those are the important ones to get you started. These are also the ones I tend to forget.
Hello, Cloud!
Tags: 100daysofcode, 100daysofcloud, cloud, gads
Published: 2020-04-30 23:55:55

1,3.

I gained some interest in learning about cloud architecture, and the Google Africa Developer Scholarship program (GADS) in partnership with Andela and Pluralsight came at the right time!
Pluralsight is a great platform to explore, so I'll get into it and continue on the path #100DaysOfCloud to see how far I'll go on this journey!
This is mostly a personal diary, a tool to see how far and track the progress I am making.
I'll divide my 100 days into 5-day weeks.
Today is day 3 already.

Wish me good luck!
Control a robot with just a text!
Tags: twiliohackathon
Published: 2020-04-30 23:46:59

## What I built
#### Category Submission: Exciting X-Factors

I was originally going to build a React based web app to bulk send texts, but saw other submissions already along those lines.  So I decided to go weird!  I have an old Arcbotics Sparki robot sitting around doing nothing.  My 7 year old likes to play with it, but setting it up and writing custom code for it so that it will do what he wants is somewhat painful.  Enter Twilio to the rescue!  Now he can just send text messages to the robot from my phone and it will do whatever he wants (within the limited set of actions I currently support).

## Images

Sparki
![alt text](https://github.com/jrrodgers68/twilio_hackathon/blob/master/images/IMG-2670.jpg?raw=true "Sparki all wired up!")

Wiring the Argon to Sparki
![alt text](https://github.com/jrrodgers68/twilio_hackathon/blob/master/images/IMG-2671.jpg?raw=true "Argon/Sparki wiring")

Sparki on the move!
![alt text](https://github.com/jrrodgers68/twilio_hackathon/blob/master/images/IMG-2675.MOV?raw=true "Sparki on the move")

## Link to Code

The main project is here: [Github])(https://github.com/jrrodgers68/twilio_hackathon)

This is a hardware project so you'll need some specific hardware to make the magic happen:
  - [Arcbotics Sparki robot](http://arcbotics.com/products/sparki/)
  - [Particle Argon](https://store.particle.io/products/argon)

Why the 2 parts?  Sparki is based on an Arduino, which lacks network capabilities.  The Particle Argon provides the internet connection with an easily accessible REST api.  

## How I built it (what's the stack? did I run into issues or discover something new along the way?)

The system has 3 main components
  - Sparki code (its an Arduino based robot)
  - Particle Argon - to give receive commands and send them to Sparki
  - Python flask service that receives SMS commands from users via Twilio


#### What did I learn along the way

Lots!  Originally I planned to use the Bluetooth module that comes with Sparki to just send commands to it.  But after 2 days of trying, I couldn't get the Bluetooth module to work at all.  Even breaking it down to just a simple terminal on a PC wouldn't work - no connection was ever established, though the PC said it was connected on COM6 to Sparki.  So I then moved on to attaching the Particle Argon to Sparki's back, kind like the movie [The Puppet Masters](https://www.imdb.com/title/tt0111003/?ref_=nm_flmg_act_89), but less creepy!  Sparki has an exposed RX/TX which the Bluetooth module uses, so it was time to just connect the Particle directly via jumper wires and send serial commands.  

The easiest part of the project was the Twilio part.  Definitely kudos
to the developers at Twilio for making such an easy to use product.  In 
short order, I had incoming texts being fed to my python flask service 
and calling the Argon REST api and watching Sparki move!  

#### What's next for Sparki?

His own Twitch streaming channel!  Keep your eyes open for Sparki on 
Twitch.  


## Additional Resources/Info
GAME MODE 2020: Building a Game in One Month
Tags: contributorswanted, hackathon, python, gamedev
Published: 2020-04-30 23:38:47

---
title: GAME MODE 2020: Building a Game in One Month
published: true
description: We're dedicating the month of June to building an open source game, and we need your help!
tags: contributorswanted, hackathon, python, gamedev
series: GAME MODE 2020
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/vqkcgdd8okvn0pmcavr4.jpg
---

{% youtube SQ1SOyfjETQ %}

Announcing **GAME MODE 2020**, from June 1st through the 28th, where we're going to attempt to build an open source game in *one month*. Our entire development staff is putting their usual work on hold for the month of June to work on a brand-new game: *DiamondQuest*!

# The Game

***DiamondQuest*** is a mining-inspired, 16-bit-style platformer where you search for buried treasure, fossils, and gemstones, using your math skills to dig. The game will use positive reinforcement to encourage players to keep playing and to challenge themselves; the relaxing, non-threatening game environment provides a new twist on math drills, without triggering math anxiety.

Perhaps most exciting is that this will be an **accessibility-first game**, designed to accommodate motor-impaired players who normally cannot play computer games. The keyboard-driven gameplay is designed for players who are either limited to single keyboard presses (e.g. with a head pointer) or have slower reflexes. The concept for DiamondQuest came from Lead Developer Jason C. McDonald's long-time desire to build a game for a friend from college who lived with cerebral palsy.

# Tech Specs

* Python 3.7
* Pygame (probably)
* Packaging: pip, PyInstaller, Snapcraft, (+whatever else!)
* Target: Win/Mac/Linux Desktop
* VCS: Git
* Development Platform: Phabricator (MousePaw Media DevNet)
* Project License
  * Code: BSD-3-Clause
  * Graphics/Music: Creative Commons BY-NC-SA (some CC BY-NC-ND)

The game will be completely free (as in free coffee). We won't be making *any* money from it whatsoever.

# Call for Contributors

To pull this off, we need all the help we can get! We're putting out the call for contributors: developers, graphics designers, musicians, packaging gurus, math nerds (to help with the educational component), game design enthusiasts, and the like. Whether you're a novice or an expert, you'll find something to do.

> NOTE: We *especially* need artists; we have one on our team, but having more will be a deciding factor in whether we accomplish our goal!

We'll be collaborating using Phabricator and Git, on MousePaw Media's DevNet platform. We have a robust issue tracker, code review system, automatic CI/CD pipeline, and chatroom. Instructions for getting started can be found at [mousepawmedia.com/developers](https://mousepawmedia.com/developers)

As we move closer to the start of GAME MODE 2020, we'll be announcing related events, including live collaboration sessions. We'll also be publishing Development Updates here on DEV, so follow us for the latest!

So, can we do it? We're going to find out, and we would *love* for you to join us!
Who am I?
Tags: webdev, personal
Published: 2020-04-30 23:15:34

---
title: Who am I?
published: true
description: How I became a web developer
tags: web development, personal,
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/m4c8t8ab91g6phpmvpip.jpg
---

# Who am I?
Well, that's a tricky question, I'm a design that starts coding and really enjoys doing it. So I made the choice (not too difficult). I just changed my career.

So what is this place? 
This is my personal space on dev.to, and I will be posting things I like in the dev world, but there is a problem: I will be posting this in Portuguese, for a simple reason:

_There are many people in Brazil who do not speak English_

That's it, the basic syntax of _Who am I?_

(()=>{})()
Caution Selenium FREE - Invitation to enjoy writing E2E-Tests with a modern stack
Tags: testing, cucumberjs, TestCafe, typescript
Published: 2020-04-30 23:14:41

Are you still writing E2E tests with Protractor and Selenium? If so, you might be interested in this node.js-alternative:

https://github.com/alexej-strelzow/testcafe-cucumber-typescript

This repository is a private hobby project of mine (please don't worry about me, I'm happily married) which I feel is mature enough to be shared with the world. It combines the following technologies/frameworks: node.js with TypeScript + Cucumber.js + TestCafe and lets you define your E2E tests with Gherkin, the BDD/BDT way. I loooooove it!!!

You can easily run the tests with one command (no need to start any driver, etc.), on your local machine or in a docker container in your CI/CD environment of choice. And in the end you will get reports, plenty of reports (json, junit and HTML), and even with screenshots if the scenario failed! I know, right ;-)

And on top of that you have a live-mode available - for dev purposes only, where every saved change to *.ts or *.feature files will rerun the selected tests :)

Summarised in 1 sentence: it's just super awesome!

So, please give it a shot, I'm sure you're gonna love it!

Thank you for your time,
Alexej
68 Small and Large Projects to Make You a Better Developer 🎉
Tags: 100daysofcode, tools, sideprojects, fullstack
Published: 2020-04-30 23:14:12

1 ) Make a simple HTTP request only using TCP sockets
2 ) Create a website that shows a map of the coronavirus using MapBox and John Hopkins COVID-19 data.
3 ) Make Conway's game of life using javascript
4 ) A web scraper to put hackernews into a json file
5 ) Write a BASIC compiler
6 ) Make a note program using vim and bash
7 ) Use the plaid API to track your own finances
8 ) Write a web crawler to find hundreds of thousands of websites
9 ) Make a census data API
10 ) Create a single reddit clone
11 ) Make a chrome extension to make the text on any website a different color
12 ) Implement email password authentication
13 ) Create a FTP client
14 ) Create a port scanner
15 ) Implement Merge Sort
16 ) Publish a personal website using AWS S3 and AWS Cloudfront
17 ) Make an algorithm for prime factorization
18 ) Make a code portfolio website
19 ) Create a prime number searcher
20 ) Implement MD5
21 ) Headline extractor for news articles 
22 ) Make a twitter bot that tweets a stock price
23 ) Implement XOR Decryption
24 ) Make a MySQL to MongoDB migrator 
25 ) Write a HTML prettifier
26 ) Make a Minecraft mod
27 ) Make a database backup script
28 ) Covert color picture to black and white one
29 ) Make a password cracker
30 ) Create a cookie clicker type game
31 ) Make a brain f**k interpreter
32 ) CLI chat using unix sockets
33 ) Make a GIF maker
34 ) Implement Binary Search
35 ) Create a YouTube downloader
36 ) Make a Chess bot
37 ) Make a text editor
38 ) Make a Netflix clone
39 ) Create a web server from scratch
40 ) Make your own file explorer 
41 ) Make a telegram chat bot
42 ) Make an address book website
43 ) Latitude longitude point to geohash
44 ) Make a color scheme creator website
45 ) Create a ray tracer
46 ) iOS app to advertise a bluetooth signal
47 ) Make a country to IP API
48 ) Create a SQL query optimizer
49 ) Write a blockchain example in less than 100 lines of javascript 
50 ) Implement SHA256
51 ) Make a reddit bot
52 ) Implement a hash map
53 ) Create a sound board website 
54 ) Write the game snake with only javascript/html/css
55 ) Make a digits of pi calculator website
56 ) Make a tic tak toe website
57 ) Use Dijkstra algorithm to solve a maze
58 ) Make a image resizer 
59 ) Create a sudoku solver without looking up an algorithm online
60 ) Make a database from scratch
61 ) Write a JSON parser in Haskell
62 ) Implement Quicksort
63 ) Make the hangman game
64 ) Create a super simple operating system
65 ) Implement ECDSA
66 ) Create a neural network to read numbers from handwriting
67 ) Make a discord bot
68 ) Make a graphing library in javascript

Shameless Plug: My sideproject [Vay](https://vay.studio) provides simple APIs powered by open data that are great for side projects.