teleren/devto huggingface dataset:
Moved Coding Grace repos from BitBucket to GitHub
Tags: diversityintech, learning, news, github
Published: 2020-06-23 11:43:20

With a week left before [BitBucket sunsets Mercurial](https://bitbucket.org/blog/sunsetting-mercurial-support-in-bitbucket) on July 1st, I've decided to use GitHub now for Coding Grace (plus it's all in one place now).

It's sad as I'm a very big fan of Mercurial and BitBucket when they started off and was on their side as git came about and then GitHub. I've always had no problems with Mercurial, but it's mostly because I work on my own projects.

Anyhoo, one of the popular workshops from Coding Grace is my "Learn Python by Maker your Text Adventure Game", so I'm popping that on GitHub now.

{% github codinggrace/text_based_adventure_game %}

I'll see what other workshop repos to add, but this would be a good chance to start planning workshops (online possibly) and get new workshop content on current tech folks are interested in learning and are used in the industry at the moment.

So one last farewell to BitBucket (and Mercurial), and thanks for all the fish. I knew this would happen ever since Atlassian took over.
SSH Keys for GitHub (Debian GNU/Linux)
Tags: ssh, github, webdev, publickey
Published: 2020-06-23 11:38:42

That is a very nice way if you want to dont write your password for every push in Github :)

```
cd ~/.ssh
ls
```

If you have "id_rsa.pub" you dont need to generate it but if you dont have it lets make it

```
 ssh-keygen -o -t rsa -C "azibom@gmail.com"
```

Now you should see it in ~/.ssh
Lets open it
```
cat cat ~/.ssh/id_rsa.pub
```

Now copy what you see and go to your github

#### Go to Account Settings > Ssh keys and pase what you have been copied 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8rxuec8c5kgp1pqykzr3.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mmhswl47ep1d0bt2b9ne.png)

And now save it 
Done
How to lint HTML using CSS
Tags: html, css, a11y
Published: 2020-06-23 11:37:41

The following CSS rules will help you highlight potential semantic and [accessibility](https://a11yproject.com/) (a11y) issues you might have on your website.

## Missing alt attributes

The `alt` attribute provides a fallback for images that aren't able to load. The attribute is also important for a11y since screen readers will read the text to the user.

**Rule of thumb:** When choosing `alt` strings for your images, imagine what you would say when reading the page to someone over the phone without mentioning that there's an image on the page.

Images without semantic meaning should have the `alt` attribute set to `""`.

```css
/* Find images with missing alt attributes */
img:not([alt]) {
  outline: 2px dotted red;              
}
```

## Links without a destination

This trick will highlight links that do not have an `href` attribute, an empty `href`, or an `href` set to #.

```css
/* Links that go nowhere */
a:is(:not([href]), [href=""], [href="#"]) {
  outline: 2px dotted red; 
}
```

## Tabindex that's not 0 or -1

Elements that use the `tabindex` attribute with a value other than 0 or -1 might disrupt the natural flow of the website. This might make navigating especially difficult for people who rely on assistive technology.

```css
/* Potential tabindex problems */
[tabindex]:not([tabindex="0"], [tabindex="-1"]) {
  outline: 2px dotted red;
}
```

## Invalid children in lists

According to [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul), `<li>` is the only element, apart from `<script>` and `<template>`, that is semantically allowed inside `<ul>` and `<ol>`. This trick helps you spot any invalid elements.

```css
/* Invalid list elements */
:is(ul,ol) > *:not(li) {
  outline: 2px dotted red;
}
```

## Images with missing width and height

Images that are missing `width` and `height` might cause page load jank and [Cumulative Layout Shift](https://web.dev/cls/) (CLS) when the images are loaded.

```css
/* Images without width and height */
img:not([width]):not([height]) {
  filter: blur(20px);
}
```
Bored of console.log?
Tags: javascript, style, console, logging
Published: 2020-06-23 11:34:06

---
title: Bored of console.log?
published: true
description: 
tags: javascript, style, console, logging
//cover_image: https://direct_url_to_image.jpg
---

A useful and fun thing about console.log is that you can add CSS styles to it. You can do it with the help of %c variable which gets replaced with the respective styles passed in as a parameter.

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

You can revert the style previously applied using another %c with an empty parameter passed in order.

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

You can be as creative as you like

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

You can also reuse styles using variables

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

This feature can really come in handy when you want to differentiate the console logs added at different parts of the code.
Go - Set Parsed form values to Struct
Tags: go
Published: 2020-06-23 11:08:39

---
title: Go - Set Parsed form values to Struct
published: true
description: 
tags: golang
//cover_image: https://direct_url_to_image.jpg
---

```go
// Set FormValues to struct
func SetFormValueToStruct(values url.Values, structPtr interface{}) error {
	// Get the pointer of struct
	ptr := reflect.ValueOf(structPtr)

	// Get the value of struct
	value := ptr.Elem()

	// Set value to struct field
	valueType := value.Type()
	for i := 0; i < value.NumField(); i++ {
		jsonTag := valueType.Field(i).Tag.Get("json")
		if value.Field(i).CanSet() == false {
			return errors.New("cannot set value to field")
		}
		value.Field(i).Set(reflect.ValueOf(values.Get(jsonTag)))
	}

	return nil
}

// Example
func ExampleSetFormValueToStruct() {
	// Form values
	formValues := url.Values{}
	formValues.Set("test1", "test1_value")
	formValues.Set("test2", "test2_value")

	// Struct that be wanted to set form values.
	structPtr := &TestSetFormValueToStructStruct{}

	// Set
	structWithValuesPtr := apphttputil.SetFormValueToStruct(formValues, structPtr)

	fmt.Printf("%v", structWithValuesPtr)
}
```
Deploy React Apps on Surge using GitHub Actions (Free)
Tags: react, github, javascript, tutorial
Published: 2020-06-23 11:03:35

[GitHub Actions](https://github.com/features/actions) is a tool by GitHub to automate building, testing and deployment of code.

[Surge](https://surge.sh/) is a simple tool for publishing static websites for free, by only running a single command.

In this post, I have written the steps you can follow to deploy a react app to surge.sh using GitHub actions.

## What we need:
- A React application. [create](https://create-react-app.dev/)
- A GitHub repository. [create](https://Github.com/new)
- A Surge deploy token.

## Get surge deploy token
```
npm install surge
surge
```
Enter username/email and password to login.
Then run `surge token` to generate token.
Copy this token and add it as a [secret](https://help.github.com/en/actions/configuring-and-managing-workflows/creating-and-storing-encrypted-secrets) in the GitHub repository.

## Setup GitHub Actions
GitHub actions are triggered by yaml files in `.github/workflows/` directory. Create a yaml file in this directory and add these lines.
```yaml
name: Deploy

on:
  push:
    branches: [ master ]

jobs:
  build:
    runs-on: ubuntu-latest
    
    steps:
    - uses: actions/checkout@v2

    - name: Setup Node
      uses: actions/setup-node@v2-beta
      with:
          node-version: 12
    
    - name: Build React App
      run: |
        npm install # Install Dependencies
        CI=false npm run build # CI=false to ignore warnings
        
    - name: Install Surge
      run: npm install -g surge
      
    - name: Deploy to Surge
      run:  surge ./build https://someawsomeurl.surge.sh/ --token ${{secrets.TOKEN}}
```
What this does is on every push to master branch, these steps are performed by GitHub actions.
- Setup Node
- Install all dependecies.
- Build the app.
- Install surge.
- Run surge to deploy on given url.

## Deploy
Commit and push your changes to the GitHub repository. You can now see the progress in the Actions tab on GitHub.
After all steps are completed, you React app will be available on the URL used in the deploy.yaml file.

## Conclusion
You can use this process to deploy Vue and Angular app too. GitHub actions is a great tool that can be used to automate your workflow.

Checkout this React project in which I used the above steps for deployment:
{% github usamasubhani/another-covid-tracker no-readme %}

Feel free to share what automation tools are you using and what tasks are you planning to automate.
Post your article on an emerging frontend blog
Tags: javascript, react, webdev, showdev
Published: 2020-06-23 11:03:02

> The goal of [Typesafe](https://typesafe.blog) is to give __YOU__ an opportunity to _inspire_ thousands of developers __with your articles__.

I created https://typesafe.blog to give *talented* web developers - _who doesn't necessarily work for big startups or companies with a wide reach_ - a chance to become known through their articles while helping and inspiring other people. 


# Why should I post articles on Typesafe?

First of all, writing blog articles will always be beneficial for you (and your career). You can find an article [here](https://www.freecodecamp.org/news/every-developer-should-have-a-blog-heres-why-and-how-to-stick-with-it-5fd55a247fbf/#:~:text=A%20blog%20is%20useful%20for,audience%20and%20express%20your%20ideas.) that goes into the _why_.

[Typesafe](https://typesafe.blog) is a great place for posting an article. It is built to scale well and rank well in search engines. I attached great importance to the minimalism and design of the website to focus on the/your posts themselves.

There is currently no advertising on Typesafe, so it is a non-profit site. The complete focus is on the content.

Furthermore, every post is reviewed & evaluated before publication, so the reader can be sure that *your* article must be very good.

The main reasons summarised:

- Sell yourself - show the world what you are capable of
- Inspire people
- Reach a great audience


# How do I post articles on Typesafe?

You can send your article to _eyk@typesafe.blog_. The email should include:

- The article's content (preferably as markdown) OR the link of your existing article, if you want to crosspost it
- The title
- Your name
- (optional) Subtitle
- (optional) LinkedIn Profile Link
- (optional) Github Profile Link
- (optional) Your "profile picture"

Your name, LinkedIn profile, Github profile and profile picture will be included with the post, so it is clear that you are the author of the post.

Since Typesafe is very exclusive and the main focus is on the quality of the content, every submission will be reviewed.


If you have any questions or other comments on the product, feel free to write them in the comments below or send them via email to eyk@typesafe.blog!
Learn With Me 4
Tags: html, css, javascript, beginners
Published: 2020-06-23 10:50:42

Hey developers.How are you feeling today?So this is the 3rd part of my <i><h3>Learn with me</i></h3>In my 2nd blog I said I would talk about CSS today.But thinking about it and reading the 2nd blog again I didn't saw any html topic to be discussed in my post.So I wanted to discuss html topics,what aspect of html you should care more about and also some tips to learn html.

Ok now,a quick overview on html.html isn’t vastly spread all over the place.It is a very small and sorted markup language.So its easy to read it all.Whoever is trying to master html should remember explicitly that html cannot do everything on its own.So he/she better be ready to learn the extension for doing anything with html.The extensions are not that hard to learn but its not that easy too.It's like the <b>English</b> language(For people who are **not** native English speaker)They have to learn it.Its not easy at first.But once you get hold of it,It's easy to get around or may be not.Because I have only been exposed to CSS.But it's fine I will let you people know about it once I cover all the extensions.

About the extensions I will list some of the important ones that I think is important:
<ul><li>css</li><li>java-script</li><li>bootstrap</li></ul>

Before moving on to the next topic I would love to tell you about this movement that was started sometime ago.And its a big movement for new coders.Its called the #100dayschallenge.So what happens is you basically code for 100 days consistently for at least an hour.I joined it yesterday.You can join it if you want.Just tweet once by saying <q> I start the #100dayschallenge</q>.Here is the tweet:

{% twitter 1275068165811101698 %}

Now about the topics you should give more attention.First of all there aren't many topics so its easy to remember all.But what happened with me is that I started css and now I keep forgetting some important things like combining a link from html.That is why you should learn how to link an url with any button or image or word and practice it.And other tags and small things are easy to remember or you can google it when you need.But you always need to remember the process how to make a form,table,link an image/word/button.Also learn about how to link an email in a form(so that the admin gets the message).That is something I forgot too.

Now about learning html.Actually you dont have to do much.You just have to be consistent enough to take all the demotivation in and kick it out.For getting materials just search in youtube <em>learn html</em> and filter it to **playlist**.You will see 100s of playlist.If you need written document I would suggest www.w3schools.com
So this is all about html that I learned and from where I learned.Hope it helps you guys.I will give a blog after I finish CSS.It will take some time.May be a week or more no idea.If I can,I will give another blog in the meanwhile.

**Thanks for reading till the end**
Native App Vs Progressive Web App
Tags: native, android, ios, ux
Published: 2020-06-23 10:45:19

Native apps have been built for Android or iOS devices. They have been developed as per the platform guidelines and have been customized perfectly to match the target OS. While building native apps, developers make use of frameworks, libraries, and native tools. The most significant features of the native apps happen to be their high performance as well as satisfactory communication with the device hardware.

In spite of all these advantages, it is quite costly and time-consuming to develop native apps. Moreover, developing a native app implies emphasizing on only one-half of mobile users who might be either Android users or iOS users. For this reason, one particular native app will not be able to appeal to a lot of users out there.

Because of this, the developers and business owners are trying to find some solutions for building more inexpensive and profitable apps that will work with any device and any platform. One of the alternatives has been the progressive Web apps.

PWAs or Progressive Web apps are actually fully functional applications that appear like the native Web apps. In fact, an app-like UX is being used by the PWAs for offering app-style navigation and gestures. Moreover, they are going to work on every device since they have been developed for the web.

Learn more about benefits and difference here: https://www.rlogical.com/blog/native-app-vs-progressive-web-apps-who-is-winning-for-your-business/
Webinar: Data scraping made easy in Elixir 
Tags: webinar, elixir, webscraping, parser
Published: 2020-06-23 10:38:59

---
title: Webinar: Data scraping made easy in Elixir 
published: True
description: Learn how to use Crawly for web crawling using a real life example based on crawling the Elixir Radar job board. 
tags: webinar, elixir, webscraping, parser, 
//cover_image: https://i.imgur.com/3soxYuY.png
---
Following up from his talk at ElixirConf EU Virtual, our colleague Oleg Tarasenko will be joining us on the webinar to dive deeper into Crawly, the web scraping framework he created in Elixir.

In this webinar he will discuss what web scraping is, why it is valuable and how Crawly makes it easy.

The webinar will demonstrate a real example using the Elixir Radar job board.

Register at https://www2.erlang-solutions.com/crawlywebinar2

Businesses are investing in data. The big data analytics market is expected to grow to $103 billion (USD) within the next five years. It’s easy to see why, with everyone of us on average generating 1.7 megabytes of data per second.

As the amount of data we create grows, so too does our ability to inherent, interpret and understand it. Taking enormous datasets and generating very specific findings are leading to fantastic progress in all areas of human knowledge, including science, marketing and machine learning.

Learn how to gather valuable data with web scraping in Elixir. Register for our webinar at https://www2.erlang-solutions.com/crawlywebinar2
Web accessibility and dyslexia
Tags: a11y, webdev, css, html
Published: 2020-06-23 10:35:10

> “Once freed from archaic schooling practices and preconceptions, my mind opened up. Out in the real world, my dyslexia became my massive advantage: it helped me to think creatively and laterally, and see solutions where others saw problems.” - [Richard Branson](https://www.independent.co.uk/news/people/dyslexia-richard-branson-potential-intelligence-genius-advantage-virgin-a7710676.html)

## About dyslexia

Between 5-10% of the global population experience dyslexia. That's approximately **700 million** people. According to the [NHS](https://www.nhs.uk/conditions/dyslexia/), dyslexia can be described as a learning difficulty that can cause problems with reading and writing. Unlike a learning disability, intelligence isn't affected by dyslexia. It is a lifelong problem that may present some day-to-day challenges.

## Web accessibility for dyslexic people

There is one surprising point to consider when ensuring your website is accessible for dyslexic people. If you follow the [A11Y Project checklist](https://a11yproject.com/checklist/) to the letter you'll miss it – I did. If you use the standard [axe accessibility testing tools](https://www.deque.com/axe/) or the [WAVE web content accessibility checker](https://wave.webaim.org/extension/) they won't alert you to it either. Even if you've ensured your web content is well structured, using readable fonts, ensuring lines of text aren't over 70 characters long, with sufficient colour contrast levels, avoiding green and red/pink colours, you still won't have met this need. 

# Off-white backgrounds

Where your site includes long blocks of text, consider using an alternative to a white (#FFFFFF) background. If possible, use cream or a soft pastel. Where dyslexia is concerned, white can be too dazzling. It can cause words to blur or swirl together.

When checking your site for accessibility, consider the following 2 points:

1. Can you use an off-white colour for the background of text blocks?
2. Can you use dark grey text in place of black?
Thoughts on IT Stickers 💻✨
Tags: discuss
Published: 2020-06-23 10:30:31

What do you think before adding a sticker to your laptop?
Do you only pick the technologies that you know well and love to work with 💕
Or anything that's popular and/or want to motivate yourself towards learning it 🤔

I myself can't get myself to stick something I don't really know, although it's usually hard to tell if you truly know something when you're just a beginner 😅

this is my layout
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/v3hynhqz5y5jbvr01pf3.jpg)

And I would love to see yours and know your thoughts 🙆🏻‍♀️

Note: this is my first post, let me know if I should've added a specific tag for this, ty ^^
SSH Connection Shortcut in Windows
Tags: windows, ssh, batch, shortcut
Published: 2020-06-23 10:27:35

In general, I use Ubuntu/ other Linux variants for the development machine. I recently switched to Windows 10 to do some documentation
In Windows 10 there are a lot more improvements than earlier, we can directly use `ssh` command in Command Prompt to connect server.
I frequently used to connect servers so many times a day, it is very difficult to run the same command again and again as the command history doesn't persist between sessions. So I found a simple way to create a shortcut for `SSH Connection` without any software installation.

### Steps
* Right Click on Desktop New => Shortcut
* Popup Dialog will be displayed asking for the location of the file
  * Enter `C:\Windows\System32\cmd.exe /k ssh -i path\to\key.pem username@ipaddress`
  * Save it with a name
🔥 Firebase Auth Migration 🔥
Tags: tutorial, database
Published: 2020-06-23 09:58:34

## Introduction

This article is a short tutorial aimed at giving you a path to migrate users between two Firebase projects (or really any authentication service).

As I passed a good amount of my morning trying to figure out how to do this, I thought spreading the word on the internet could potentially help more people locating it.

The documentation on this matter is hoster by Google [here](https://firebase.google.com/docs/cli/auth#auth-import). So if you like to work with docs and do not want to read my little tuto, feel free :)

## Tutorial

### Step 1: Firebase CLI

In order to perform the import, you will need to use the Firebase command line interface. You can install it without issues on your machine by entering this command into your terminal (npm users)
```
npm install -g firebase-tools
```

Continue with the login process and init your firebase repo. Once all is done, you are ready to import/export your auth users.

### Step 2: Import users

To import users, go into the Firebase repo you just have inited, and enter the following command
```
firebase auth:export accounts.json --format=JSON
```
This will download your current users into your local machine. Make sure the file location is secured, not committed to any git repo and offline. You don't want to leak your users' passwords.

### Step 3: Export users to new project

First, switch projects using
```
firebase use new-project-name
```

Then go to your Firebase dashboard and go to `Authentication > three dots on the top of user card > Hash parameters`. You will need this information.

Now to import the users enter (replace the <data> with your config from Firebase)
```
firebase auth:import accounts.json \
> --hash-algo=<hash_algo> \
> --hash-key=<hash_key> \
> --salt-separator=<sale_sep> \
> --rounds=<rounds> \
> --mem-cost=<mem_cost>

```

Once successfully migrated, you should receive something like
```
Processing accounts.json (XXXX bytes)
Starting importing 15678 account(s).
✔  Imported successfully.
```

All done, you have successfully migrated your users.

Now before you migrate please make sure you have disabled access to your old project for all users in order not to have different data from one project to the other. Also make sure that the apps are correctly updated to use your new project's config. If you respected that, the experience for your users should be seamless.

Have a great day of code!
Mike

----

## About me

I am a partner at [MMPG Consulting](https://mmpg.xyz), a firm active in the custom software development industry in the Spanish and Swiss markets.

For more content, you can add me on [LinkedIn](https://www.linkedin.com/in/mikaelgross/) or shoot me a DM if you want to discuss specific topics, your software or an idea you want to implement.