teleren/devto huggingface dataset:
Embedding code in posts
Tags: a11y, ux
Published: 2019-05-31 09:46:26

---
title: Embedding code in posts
published: true
description: 
tags: a11y, ux
cover_image: https://thepracticaldev.s3.amazonaws.com/i/o77pjvpt1bo6xbmx9yhl.png
---

As I read articles on here, and on other sites like Medium, I sometimes see people post pictures of their work.

Services like [Carbon](https://carbon.now.sh) let you paste code in and get a pretty version as an image.

It looks pretty sweet. It's nicely coloured. It has decent contrast. It invariably makes it look like you use a Mac.

_And it's still totally inaccessible._

You can't reasonably put a great swathe of code into the `alt` text for an image. On hosted platforms where you have a limited number of options, you generally can't do something clever with `figure` vs. `code` to let people choose the one they want.

However, these same platforms also natively provide code embedding options, with language-specific syntax highlighting. In markdown, it's as straightforward as pasting your code inside triple-backticks. You can force a particular language for the syntax-highlighting by including the language type directly after the opening ticks.

~~~```
```
This will be enclosed in <pre> tags.
```
~~~

~~~
```js
// This will be highlighted as if it was javascript
```
~~~

The resulting code is still heavily marked up to handle the colours and spacing, but it's a lot more accessible:

* Stylesheets can handle it at different viewport sizes without ending up with really tiny text.
* It will respect the font sizing overrides you have set in your browser.
* You can copy and paste it into your own editor with your own font configurations.


This serves more purposes for everyone, not just people with limited vision:

* When replying to a post you can _copy_ in relevant sections of the original code without having to open two browsers side-by-side and do it all by hand.
* You can _paste_ that code into your own editor and try it out.
* You can switch on that trendy new _dark mode_ your browser/Window Manager/OS has and - if you're lucky - the site's styles will respect your settings.
* You can _search_ for posts containing certain half-remembered bits of code without the expectation that the host site has a million-dollarpound OCR AI system prepared to spare CPU cycles from its regular job of trying to take over the world.

**What about other third-party code hosts, like [Codepen](https://codepen.io) et al?**

They're good, too. Especially if
* You're on a site that lets you embed scripts but doesn't natively support code highlighting (e.g. a hosted blog)
* Your code is a fully functional example that can be run as a demonstration, rather than just shown as a snippet.
* You're happy to add a dependency on another service, with all that entails (more points of failure, potential fees, etc.)

## Further reading
{% embed https://dev.to/tota11ydev/sharing-code-snippets-on-social-media-the-accessible-way-quicka11y-cf %}
rgba2rgb
Tags: css, graphics, javascript
Published: 2020-05-11 15:27:01

---
title: rgba2rgb
published: true
date: 2019-05-31 09:31:00 UTC
tags: CSS,Graphics,JavaScript
canonical_url: https://drmsite.blogspot.com/2019/05/rgba2rgb.html
---

I had a lovely little challenge a couple of days ago which, in conjunction with my invite to the First Alpha Testing of [Empire of Code](https://empireofcode.com/), got me excited. It led me to generate the following chunk of code:

```javascript
const rgba2rgb = rgba => "#" + rgba.match(/.{1,2}/g)
  .map((c, i, a) => (i !== a.length -1)
    ? parseInt(c, 16)
    : parseInt(c, 16) / 255)
  .map((c, i, a) => (i !== a.length -1)
    ? ~~((1 - a[3]) * 255 + a[3] * c)
    : null)
  .reverse()
  .slice(1)
  .reverse()
  .map(c => c.toString(16))
  .join("");
```

We needed to convert an [RGBA](https://en.wikipedia.org/wiki/RGBA_color_space) colour to [RGB](https://en.wikipedia.org/wiki/RGB_color_space), with the assumption that the original colour was atop a white background. The maths and colour theory are a little confusing, and I went through any [number](https://stackoverflow.com/questions/11614940/convert-rgba-to-rgb-taking-background-into-consideration) [of](https://stackoverflow.com/questions/2049230/convert-rgba-color-to-rgb) [iterations](http://marcodiiga.github.io/rgba-to-rgb-conversion). The result made me feel a bit smug though as it is teeny - I'm guessing it could be improved though.

Have at it!

**EDIT**

So I clocked that the above wasn't quite as brilliant as I thought so I've updated it after simplifying it:

```javascript
const rgba2rgb = function(rgba){
  const coloursAsBase16 = rgba.match(/.{1,2}/g); 
  console.log("coloursAsBase16", coloursAsBase16);
  const coloursAsBase10 = coloursAsBase16.map(function(c, i, a){
    if(i !== a.length - 1) {
      return parseInt(c, 16) // Value between 1 - 255
    } else {
      return parseInt(c, 16) / 255 // Value between 0 - 1}
    }); 
  console.log("coloursAsBase10", coloursAsBase10);
  const coloursWithAlpha = coloursAsBase10.reduce(function(t, c, i, a) {
    if(i !== a.length - 1) {
      return t.concat([parseInt(((1 - a[3]) * 255 + a[3] * c), 10)]);
    } else {
      return t;
    }
  }, []) 
  console.log("coloursWithAlpha", coloursWithAlpha);
  const coloursChangedToBase16 = coloursWithAlpha.map(function(c){
    return c.toString(16)
  }); 
  console.log("coloursChangedToBase16", coloursChangedToBase16);
  return "#" + coloursChangedToBase16.join("");
}
```

Which led to this one-liner:

```javascript
const rgba2rgb = rgba => "#" + rgba.match(/.{1,2}/g)
  .map((c, i, a) => (i !== a.length - 1)
    ? parseInt(c, 16)
    : parseInt(c, 16) / 255)
  .reduce((t, c, i, a) => (i !== a.length - 1)
    ? t.concat([parseInt(((1 - a[3]) * 255 + a[3] * c), 10)])
    : t, [])
  .map(c => c.toString(16))
  .join("");
```
Dev10 is on ProductHunt! 😻🙀 Show some love! 💖
Tags: showdev, meta, webdev
Published: 2019-05-31 09:12:29

---
title: Dev10 is on ProductHunt! 😻🙀 Show some love! 💖 
published: true
cover_image: https://thepracticaldev.s3.amazonaws.com/i/rhr0wvk4x09fsgumk9dw.png
description: 
tags: showdev, meta, bestofdev, webdev
---

Hi guys! You remember [Dev10](https://dev.to/teamxenox/-dev10--a-christmas-gift-for-the-best-community-on--44bg), right? We made it back in December and presented it as a Christmas gift to the community right here. It was the app that started it all for us. I'm so glad we made that, and we've only gone from strength to strength since then, all thanks to you guys.

We had discussed adding a dark mode to Dev10 months ago but never got around to doing it. I'm happy to tell you guys that we finally did it.

**Dev10 has a sweet new dark mode!**

![](https://thepracticaldev.s3.amazonaws.com/i/rhiacp0m55jg1gv5166z.gif)

Oh, and one more thing...

### Dev10 is live on ProductHunt!

I just wanted to take a moment to THANK YOU ALL, especially the super-supportive DEV team.

You can check out Dev10 here on [ProductHunt!](https://www.producthunt.com/posts/dev10)

{% twitter 1134380456970002432 %}

Please go and share your thoughts over there! As always, Team XenoX will keep bringing more awesome tools like this one in the future. Stay tuned and thanks for the love! Cheers! 🤩🙌🙏
Protect your templates without tedious *ngIfs
Tags: angular, cleancode, fika
Published: 2019-05-31 08:44:24

**Problem:** 
Properties we use in our templates are sometimes undefined or null, this can cause our templates not to render. We can protect our code by wrapping the potential problem area with an `*ngIf`, but that quickly becomes cumbersome for longer property paths.   

**Solution:**
By utilizing Angulars safe navigator operator `?.`, also called the Elvis operator, we can reduce unnecessary checks in our templates, by making sure we only access properties that could be null or undefined via the safe navigator operator. 

##Before / Untutored:
**Component**
```javascript
pastery = {
    name: 'Cinnamon bun',
    ingredients: {
      eggs: null,
      milk: null
    }
}
```

**Template**
```html
<h2>Ingredients</h2>

<div *ngIf="pastery.ingredients.eggs">
  {{ pastery.ingredients.eggs.qty.amount }} {{ pastery.ingredients.eggs.qty.unit && pastery.ingredients.eggs.qty.unit.name }} {{ pastery.ingredients.eggs.name }}
</div>

<div *ngIf="pastery.ingredients.milk">
  {{ pastery.ingredients.milk.qty.amount }} {{ pastery.ingredients.milk.qty.unit && pastery.ingredients.milk.qty.unit.name }} {{ pastery.ingredients.milk.name }}
</div>
```


##After:
**Component**
```javascript
pastery = {
    name: 'Cinnamon bun',
    ingredients: {
      eggs: null,
      milk: null
    }
}
```

**Template**
```html
<h2>Ingredients</h2>

<div>
 {{ pastery.ingredients.eggs?.qty.amount }} {{ pastery.ingredients.eggs?.qty.unit?.name }} {{ pastery.ingredients.eggs?.name }}
</div>

<div>
  {{ pastery.ingredients.milk?.qty.amount }} {{ pastery.ingredients.milk?.qty.unit?.name }} {{ pastery.ingredients.milk?.name }}
</div>
```

Try it yourself:
https://stackblitz.com/edit/thllbrg-angular-fika-3

Official docs:
https://angular.io/guide/template-syntax#the-safe-navigation-operator----and-null-property-paths
Introducing a banner generator for your articles on DEV
Tags: webdev, meta
Published: 2019-05-31 08:29:47

---
title: Introducing a banner generator for your articles on DEV
published: true
tags: webdev, meta
cover_image: https://thepracticaldev.s3.amazonaws.com/i/1kxyxq4691kfs15m9d66.png
---

I've been struggling to find nice pictures for my articles on DEV (and ones that I'm allowed to use in fact). So I figured I'd make a quick banner generator for simple & straight to the point banners.

[Link](https://christopherkade.com/banner-generator/)

![gif](http://g.recordit.co/tYJhy9QcPH.gif)

All you have to do is:

- Edit your own banner
- Download it
- Upload it to DEV in order to get a URL

![screenshot-2](https://thepracticaldev.s3.amazonaws.com/i/wifdi16t7ssuhsgr0a8n.png)

> You can upload your images by simply clicking the bottom on the bottom left of your article editor !


- Add the `cover_image` attribute in the metadata of your articles with the URL you got from the last step

And that's it !

Even though its main feature is finished, I'll try to add the following in the coming days:

- More themes
- Reduced file size
- Any other recommendations in the comments


I really hope some of you get to use it as much as I will 😄

## UPDATE:

[Contribution guidelines](https://github.com/christopherkade/banner-generator/blob/master/CONTRIBUTING.md) & a [code of conduct](https://github.com/christopherkade/banner-generator/blob/master/CODE_OF_CONDUCT.md) have been added to the project alongside some [first enhancements ideas](https://github.com/christopherkade/banner-generator/issues) for those who would like to partake in making this tool even better. 😄
Is it appropriate to play video games at work?
Tags: culture
Published: 2019-05-31 08:06:33

---
title: Is it appropriate to play video games at work?
published: true
description: Should people play video games at work?
tags: culture
---

I recently created my first Twitter poll to see what people thought.    
     
![poll](https://thepracticaldev.s3.amazonaws.com/i/u4ao64ry0cwhdcl8149e.PNG)    

I personally don't play video games but don't have a problem with people who do at work (assuming they are getting their work done).  I know people who think it's completely inappropriate and believes it gives a poor perception of the gamer.  

What do you think?
Make it Rain Event has now ended
Tags: microbitcoin, opensource, blockchain, community
Published: 2019-05-31 08:01:26

---
title: Make it Rain Event has now ended
published: true
description: Thank you to everyone who joined. We had some issues but in the end we hope that everyone enjoyed the event!
tags: microbitcoin, opensource, blockchain, community
---



Thank you to everyone who joined
We had some issues but in the end we hope that everyone enjoyed the event!

We will work on making improvements on the bot and to provide more events in the future
Let us know how you liked the event and any suggestions for new events below

Let’s grow MicroBitcoin together!
Explain The Different Types of Software Architect Like I'm Five
Tags: explainlikeimfive
Published: 2019-05-31 07:52:09

---
title: Explain The Different Types of Software Architect Like I'm Five
published: true
tags: explainlikeimfive
---

For example, what are the differences between these?

- Solutions Architect
- Enterprise Architect
- Systems Architect
- Software Architect
- etc.

I'm confused!
Introduction to PHP for absolute beginners
Published: 2019-05-31 05:14:41

**Disclaimer:** This article is meant for beginners in this field, written by a dummy in Php, don't expect extensive explanation!

##What is PHP?##
PHP stands for Hypertext Preprocessor. Most online source did not explain why it is not HPP,later found out through Wikipedia that it's original name is Personal Home Page!

It's an open source, server-side, scripting language used for the development of web applications.


##WHY DO WE USE PHP?##
There are many reasons to use PHP for server side programming, firstly it is a free language with no licensing fees so the cost of using it is minimal.

A good benefit of using PHP is that it can interact with many different database languages including MySQL. Both PHP and MySQL are compatible with an Apache server which is also free to license. PHP can also run on Windows, Linux and Unix servers.

Due to all these languages being free it is cheap and easy to setup and create a website using PHP.

PHP also has very good online documentation with a good framework of functions in place. This makes the language relatively easy to learn and very well supported online. There are countless forums and tutorials on various PHP methods and problems so it is usually very easy to find help if you need it.

Due to PHP being so accessible and cheap to setup there are a lot of people who know how to use the language which makes finding new employees proficient in this language less challenging.

In summary, PHP is widely used because it is Open source, easy to setup, cross platform compatibility, large online resources to learn from and many frameworks available to work/start with.

##PHP STRENGTH##
- It is open source language

- Eliminates client configuration problems. With PHP there is no need to worry if the client has the appropriate software installed, since the application is executed on the server. 

NP: This is my fifth day learning about PHP, I might update this article as I understand more about this precious language
Vue.js Vs React
Tags: vue, react, frontend
Published: 2019-06-04 07:34:33

---
title: Vue.js Vs React
published: true
tags: vuejs, react, frontend
canonical_url: https://theworldwidecode.com/blog/2019/vuejs-vs-react/
---

Vue.js and React are both open source JavaScript libraries that are used for building user interfaces
Looking for automated transfer of content to Drupal? Say hello to Migrations.
Tags: php, webdev, opensource, devops
Published: 2019-05-31 06:35:25

---
title: Looking for automated transfer of content to Drupal? Say hello to Migrations.
published: true
description: Whether it is migrating from a Drupal 7 website to Drupal 8 or from any other technology (like Wordpress, Joomla, AEM, Sitecore, Typo3, DotNetNuke, etc) to Drupal 8, the most challenging task is the migration of the content.
tags: php,webdev,opensource,devops
---

Drupal 8 provides an easy solution to this by providing built-in features for migration. Let's take a look at how. I will try and elaborate as much as possible so that this article can become your full guide to migrating content in Drupal 8.

Before we get into the how, let me create a glossary of some terms that I will use throughout.

Migration API is the key to move content from any source to Drupal 8. Migrations are basically ETL processes. ETL is the abbreviation for Extract, Transform Load processes.

**[Read more](https://www.innoraft.com/blogs/looking-automated-transfer-content-drupal-say-hello-migrations)**
Dark Theme for Quora - Chrome Extension
Tags: productivity, quora, opensource, showdev
Published: 2019-05-31 06:17:46

---
title: Dark Theme for Quora - Chrome Extension
published: true
description: This simple extension changes Quora Background to a dark theme. 
tags: #productivity, #Quora,#opensource,#showdev
cover_image: https://raw.githubusercontent.com/ganeshraja10/quora-dark-theme/master/screenshot.png

---

This simple extension changes Quora Background to a dark theme. If you are someone who prefers the dark theme it might be useful for you. 

It's created in 15 mins. So it's not in its final version yet. feel free to do modification or fork if you want. I will keep updating the code for other pages too. 

{% github ganeshraja10/quora-dark-theme %}
A Simplified Insight Into How IoT Works
Tags: iot, iotworking
Published: 2019-05-31 05:47:40

---
title: A Simplified Insight Into How IoT Works
published: True
description: To explain simply, IoT Integration helps one in planning, directing, controlling and execution of business operations
tags: iot, iot working
---
The Advantages of IoT
To explain simply, IoT Integration helps one in planning, directing, controlling and execution of business operations, the daily commute of one's ward and even care for an ailing loved one and more! Additional advantages of IoT are mentioned below:
<ul>
<li>Digitizes industrial operations</li>
<li>Simplifies management</li>
<li>Boosts quality control</li>
<li>Enhances offline safety and security</li>
<li>Monitors production flow</li>
<li>Optimizes packaging, logistics and supply chain management</li>
<li>Promotes shorter feedback loops and responsive services</li>
<li>Decodes customer behavior</li>
</ul>

<img src="https://s3.amazonaws.com/s3-biz4intellia/images/how-iot-works.jpg" alt="how iot works - biz4intellia">

<a href="https://www.biz4intellia.com/blog/simplified-insight-into-how-iot-works/">Source</a>
Enable AWS EBS encryption By default
Tags: aws, ebs, python, devops
Published: 2019-05-31 05:07:19

Based on [Jeff Barr Recent Blog](https://aws.amazon.com/blogs/aws/new-opt-in-to-default-encryption-for-new-ebs-volumes/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+AmazonWebServicesBlog+%28Amazon+Web+Services+Blog%29) AWS make it easier and simpler for you to protect your data from unauthorized access. I feel this should be enabled by anyone who use AWS.

If you prefer to do via AWS CLI then make sure you have updated to latest version of CLI [aws-cli/1.16.169 Python/2.7.10 Darwin/17.7.0 botocore/1.12.159 ]
```
aws ec2 enable-ebs-encryption-by-default

```

> Note: You will have to run this command in all the regions you operate.

Below is the python script that can help you with enabling it using below for region you interested are 

```
import boto3

# list the regions you are interested to run this script on
regions = ['us-east-1']

for region in regions:
    client = boto3.client('ec2', region)
    response = client.enable_ebs_encryption_by_default()
    print("Default EBS Encryption for region", region,": ",  response['EbsEncryptionByDefault'])

```

> Note: Shared script will use the default ebs key. If you are interested in using different KMS key then use below
```
response = client.modify_ebs_default_kms_key_id(
    KmsKeyId='string'
)
```
JavaScript Equality Operators
Tags: javascript
Published: 2019-06-01 11:18:49

---
title: JavaScript Equality Operators
published: true
tags: javascript
canonical_url: https://flaviocopes.com/javascript-equality-operators/
---

Those operators accept two values and return a boolean:

- `==` checks for equality
- `!=` checks for inequality
- `===` checks for strict equality
- `!==` checks for strict inequality

Let’s talk what we mean for _strict_. Without the strict check, the second operand is converted to the type of the first before making the comparison. Strict prevents this.

Examples:

```js
const a = true

a == true //true
a === true //true

1 == 1 //true
1 == '1' //true
1 === 1 //true
1 === '1' //false

```

You cannot check objects for equality: two objects are never equal to each other. The only case when a check might be true is if two variables reference the same object.

Some peculiarities to be aware: `NaN` is always different from `NaN`.

```js
NaN == NaN //false

```

`null` and `undefined` values are equal if compared in non-strict mode:

```js
null == undefined //true
null === undefined //false

```
Git help: Merging updates in a classroom repo
Tags: help, git, teaching
Published: 2019-05-31 04:15:50

---
title: Git help: Merging updates in a classroom repo
published: true
description: 
tags: help, git, teaching
---

I have a repo of lessons that I'm using to teach a React class. ([You can see it here](https://git.generalassemb.ly/good-idea/react-exercises)). 

Each lesson has a few files:

 - a markdown document
 - a test file
 - an exercise file
 - a solution file
 - maybe some sample data

The students will work within the exercise file, building out react components to get the tests passing. Most of their changes will be here, but they will also be changing a few lines in the test file (changing `it.skip` to `it` when they are working on a new test.)

Everybody has created their own fork of this repo, and have cloned that. I have an `init` script that adds the original repo as an `upstream` remote.

I'm making updates to the main repo as we move along: fixing some typos, and cleaning up the notes. I would like to figure out a way for my students to pull in these updates without losing the work that they have done.

A simple solution is doing `git fetch upstream && git merge --strategy-option ours upstream/master` - which will pull in all new updates, but opt for the student's work whenever there is a merge conflict.

But, I also want the students to be able to merge in the updates if they choose to do so. One scenario would be if they had been struggling on a particular exercise and wanted to "reset" it.

An ideal tool would be an interactive CLI where:

 - The student runs the 'update-lessons' script
 - For each merge conflict, they can choose to either:
   - Keep their own work
   - Back up their own work, and merge in the new updates. For example, if there's a conflict in `./src/lesson1/exercise.js`, they could choose this option and end up with:
      - `./src/lesson1/exercise.js` (The updated file)
      - `./src/lesson1/exercise.5-30-2019.js` (The work they had already done)

My students are fairly new to git, so I would want to provide them with something simple.

I don't know git well enough to figure this out, but if I were pointed in the right direction I could write some kind of bash script.

Does anyone know of any tools, workflows, or git magic that could do something like this?