teleren/devto huggingface dataset:
🖥️ How I share my code 
Tags: tutorial, writing, beginners
Published: 2020-05-25 22:30:13

When I am composing tweets or writing short blog posts I like to post images of small code snippets as I think it is a nice way of quickly getting to the nitty-gritty. I try to keep these code snippets as short and concise as possible.

My go-to tool for a long time has been [Carbon](https://carbon.now.sh/) which if you have not heard of them directly you will likely have seen the images that it produces. 

![Carbon INput](https://dev-to-uploads.s3.amazonaws.com/i/vi8em9z3fbqn7yp1wjpo.PNG)
<figcaption>Carbon</figcaption>

More recently I have started experimenting with two other code image generators firstly is [CodeImg](https://codeimg.io/)

One of the great features that CodeImg has over Carbon is its Social Network templates which makes it super easy to create the perfect size image.

![CodeImg](https://dev-to-uploads.s3.amazonaws.com/i/ffaehov4i3lt98ih9npz.PNG)
<figcaption>CodeImg</figcaption>

The other tool I have been using is a Visual Studio Code extension called [Polacode](https://marketplace.visualstudio.com/items?itemName=pnp.polacode) that allows you to capture images directly from the IDE which makes it very efficient.

![Polacode](https://dev-to-uploads.s3.amazonaws.com/i/6nk6zl7vvlyku3xwwrnt.PNG)
<figcaption>Polacode</figcaption>

All three have there pros and cons and as they are all free to use I would suggest giving each a try.

The major downside of posting an image of code is that if someone finds it useful there is no easy way of copying the code. So when possible I like to also post the code in a manner that allows this, it also helps greatly with accessibility. 

For small snippets I will generally use either [Github Gists](https://gist.github.com/) or use [PrismJS](https://prismjs.com/)

{% gist https://gist.github.com/iainfreestone/1d78a689fdb69bbdcb12d09f0f5dfb5e.js %}
<figcaption>Github Gist</figcaption>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5rbwfufvssx2gmwkgrs8.png)
<figcaption>PrismJS Input/Output</figcaption>

For larger amounts of code or if I want to share a working version of the code the I will generally embed a project from either [CodeSandbox ](https://codesandbox.io/) or [CodePen](https://codepen.io/)

{% codesandbox string-subsitution-5syys view=editor%}
<figcaption>CodeSandbox Embed</figcaption>

If you enjoyed this little article you can [follow me](https://twitter.com/iain_freestone) on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.
Why do people/companies still use Internet Explorer?
Tags: javascript, internetexplorer
Published: 2020-05-25 22:27:57

On my full-time job, I was working on an app where I had to use the JavaScript includes() method. 

The app was sent for UAT, manager applauded the effort of whole team.

After an hour, the user complained about not being able to submit a form.
I checked, it was working.
But the user was using the app on IE and it failed because the includes() method is not supported by IE and the default browser in that company is IE, so almost all of the users have to use IE and our app has to be compatible with it.

It was a quick fix, but the overall impression was negative.

We see and hear negative things about Internet Explorer, but still, it is being used, specially in corporate sector.

Did you face any such incident due to IE?
Aminu_Muhammed
Tags: devgrad2020
Published: 2020-05-25 22:15:28

[Comment]: # (All of this is placeholder text. Use this format or any other format of your choosing to best describe your project and experience.)

[Note]: # (If you used the GitHub Student Developer Pack on your project, add the "#githubsdp" tag above. We’d also love to know which services you used and how you used it!)

## My Final Project


## Demo Link
 

## Link to Code

[Note]: # (Our markdown editor supports pretty embeds. If you're sharing a GitHub repo, try this syntax: `{% github link_to_your_repo %}`)

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


## Additional Thoughts / Feelings / Stories


[Final Note]: # (CONGRATULATIONS!!! You are amazing!)

#devgrad2020
#octograd2020
Another Reason to Blog: Your Words Might Be Better SEO
Tags: aws
Published: 2020-05-25 22:00:56

---
title: Another Reason to Blog: Your Words Might Be Better SEO
published: true
description: one of the best reasons for blogging is showing other people your solution to a problem using your words. Your words may end up being better SEO for some lucky developer down the road.
tags: aws
---


I was recently struggling with getting a CloudWatch alarm on a log filter metric to work. I was refactoring the creation from a CloudFormation template into just Lambda Python code. I was able to get both the filter metric (looking for errors and exceptions in logs) and alarm created. 

But, when I tested the alarm, it never went into an alarm state, even when then metric filter showed active data. It was driving me crazy. I was able to manually create a new alarm, pointing to the same metric filter and see it work. This is the type of bug that developers hate: a completely illogical bug (as viewed by the bug's creator).

Here is the metric showing data:
![Working CloudWatch metric showing a spike](https://dev-to-uploads.s3.amazonaws.com/i/d4cxcitx0bby8y9wzyaj.png)

Here is what the empty alarm looked like:
![Broken CloudWatch alarm never showing the showing the spike](https://dev-to-uploads.s3.amazonaws.com/i/emciexf55mmav1vw9rsg.png)

Searching online for an answer was not easy. My heart sunk when Stack Overflow didn't have the exact answer to my question with my first search. :) Searches for "alarms not working for filter metrics" weren't leading anywhere. 

I slept on it and tried different searches the next day. Luckily, [Marta Tatiana](https://medium.com/@martatatiana) blogged her solution once she finally found it: 
[Insufficient data: CloudWatch alarm based on custom metric filter.](https://medium.com/@martatatiana/insufficient-data-cloudwatch-alarm-based-on-custom-metric-filter-4e41c1f82050). It turns out that you can't specify the period units (seconds, minutes, ...) when creating the alarm programmatically. 

Marta demonstrated one of the best reasons for blogging: showing other people your solution to a problem using your words. Your words may end up being better SEO for some lucky developer down the road.
100 Days of SwiftUI — Day 5
Tags: 100daysofswiftui
Published: 2020-05-25 22:00:25

---
title: 100 Days of SwiftUI — Day 5
published: true
date: 2020-05-25 21:59:28 UTC
tags: 100daysofswiftui
canonical_url: https://zeitschlag.net/100-days-of-swiftui-day-5/
---

[Today's lessons](https://www.hackingwithswift.com/100/swiftui/5) of Paul Hudson's 100 Days of SwiftUI were about functions. What was actually pretty new to me was that Swift supports [variadic functions](https://www.hackingwithswift.com/sixty/5/7/variadic-functions) — I'm not sure what they should be good for. And I got reminded about the existence of the `inout`-keyword. Usually, parameters are passed as constants into functions. Marking them with `inout` enables me to change those parameteres from inside a functions. But: They have to be variables, so no `let` in this case.

I really like the short lessons. Today was the first day I attended the course on a workday and I made it. I'm a bit proud of me :-)

<!--kg-card-end: markdown-->
How come your model class can call ::devise?
Tags: devise, rails
Published: 2020-05-25 21:26:08

I've decided to read some devise code, for learning purposes. Since I'm on that mission, I'll also write some posts. The thing the internet needs is another blog that will not be read.

Ok, let's get back to the question from the title.

When you'll install devise in your project it will add to your User class these four lines:
```
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable
```
Nothing else changes in the class. So where the ::devise method comes from?
https://github.com/heartcombo/devise/blob/f39c6fd92774cb66f96f546d8d5e8281542b4e78/lib/devise/orm/active_record.rb
```
ActiveSupport.on_load(:active_record) do
  extend Devise::Models
end
```
What does ::on_load do? According to the documentation it:
> Declares a block that will be executed when a Rails component is fully loaded.

That's all folks.
Please ELI5 how Stateless deployment works
Tags: explainlikeimfive, devops
Published: 2020-05-25 21:21:42

If there is only HTML/CSS/JS, I might go for Netlify, but if it goes beyond that? Docker that only expose ports?

When do I need Kubernetes? Why is it "Starting at $10/mo" on DigitalOcean?

When I host it somewhere, isn't every computer / server supposed to be mutable somehow?

Also, what about geographical location and can it be duplicated for performance?
Deno 1.0 What ? NodeJS is dead ? are you serious ?
Published: 2020-05-25 21:12:00

Two years ago the creator of NodeJS Ryan Dahl announced Deno a secure runtime for JavaScript and TypeScript, in this [talk](https://www.youtube.com/watch?v=M3BM9TB-8yA)  where he talked about the 10 things he regret about NodeJS and in the end of the talk he presented Deno and the motives behind it, why he is building this new JS runtime.

The 13 of May Deno 1.0 was released (here is the official [blog post](https://deno.land/v1)). By the end of the day every tech blog was sharing blog posts about Deno and some developers even started saying NodeJS is dead! like are you serious guys ?!

This is what we always see in the tech community when a new technology come to life the next day every other technology is dead, just take a second and remember how React Native was dead after announcing the first version of Flutter, since that and React Native continue to improve day by day and nothing is dead but the blog post about it :D

The short answer is **NO!** NodeJS is not dead and won’t be anytime soon, a lot of companies use it in production and the community around NodeJS is really big.
In the other side Deno come with a lot of improvements (which this post is about) so let’s talk about that now.

Here is a quick list of Deno features :
* It is based on "modern" JS features.
* It has TypeScript at its core, this may help it gain popularity, you don’t have to separately compile TypeScript, it’s automatically done by Deno.
* It embraces ES modules.
* It has no package manager.
* It has a first-class await.
* It aims to be browser-compatible as much as it can, for example by providing a built-in fetch and the global window object.

What I find cool about Deno, is the TypeScript support out of the box. As we see nowadays TypeScript is getting more popular than ever which will help Deno gain popularity, of course let’s not forget about the security improvements.

> Finaly, I hope to not see an HR agent posting “Hiring! Senior Deno developer with +3 years of exp ONLY”

Feel free to leave your opinion on this in the comments section ;)

I post my thoughts in my [LinkedIn profile](https://www.linkedin.com/in/naoufalelh/).

Sources:
https://deno.land
https://deno.land/v1
https://www.freecodecamp.org/news/the-deno-handbook/#will-it-replace-node-js
Missing 'distutils.util' after upgrading from Python 3.7 to 3.8
Tags: python, aws
Published: 2020-05-25 21:08:11

I recently upgraded to Pop OS(essentially Ubuntu) 20.04, which had Python upgraded to 3.8. My ongoing AWS Lambda project build is broken right away:
```
Running PythonPipBuilder:ResolveDependencies

Build Failed
Error: PythonPipBuilder:ResolveDependencies - Traceback (most recent call last):
  File "<string>", line 1, in <module>
  File "/usr/lib/python3/dist-packages/pip/_internal/main.py", line 14, in main
    from pip._internal.utils.entrypoints import _wrapper
  File "/usr/lib/python3/dist-packages/pip/_internal/utils/entrypoints.py", line 3, in <module>
    from pip._internal.cli.main import main
  File "/usr/lib/python3/dist-packages/pip/_internal/cli/main.py", line 10, in <module>
    from pip._internal.cli.autocompletion import autocomplete
  File "/usr/lib/python3/dist-packages/pip/_internal/cli/autocompletion.py", line 9, in <module>
    from pip._internal.cli.main_parser import create_main_parser
  File "/usr/lib/python3/dist-packages/pip/_internal/cli/main_parser.py", line 7, in <module>
    from pip._internal.cli import cmdoptions
  File "/usr/lib/python3/dist-packages/pip/_internal/cli/cmdoptions.py", line 19, in <module>
    from distutils.util import strtobool
ModuleNotFoundError: No module named 'distutils.util'
```
All the solutions from googling the error message seems to be "make sure to run 'apt sudo install python3-distutils'. However, I do have `python3-distutils` installed under `/usr/lib/python3.8`.

I noticed that the traceback above was produced by pip from `python3/dist-packages`, however I do have a later version of pip installed under my `.local/lib/python3.8/site-packages`. So why did that not get picked up? The two symptoms together made me think that when SAM runs pip, it's not using the Python 3.8 search path which would contain all the 3.8 packages.

After a couple of hours of pouring through SAM source code and debugging, it turns out SAM was using python 3.7 to build my project, including running pip in, because when I upgraded I only remembered to update `Pipfile` to use '3.8', but (completely) forgot to update the '3.7' references in the CloudFormation template file.

While I should obviously take the bulk of the blame for this silly trip, it would have helped if SAM could somehow print something more obvious then the error message I got.
My Graduation Project
Tags: devgrad2020, octograd2020
Published: 2020-05-25 21:04:49

## What is my final project?

I build a CLI for downloading YouTube videos.

## Link to repository

{% github https://github.com/marethyu12/gotube %}

## Why did I build it?

There are zillions of third-party tools available for downloading YouTube videos. Why did I build my own when there is an abundance of them? Well, the part of the reason is to improve my skills in Go programming and to learn more about HTTP protocol. I believe that the important reason I built it is to help others to understand the inner workings of other popular open-source YouTube video downloaders like [youtube-dl](https://github.com/ytdl-org/youtube-dl) for example.

## How did I build it?

I used Go to build my project because it is an excellent programming language to build CLIs. I made sure my code is readable and compact. I tried my best to reduce any external dependencies which means I need to implement some features from scratch. I adhered to KISS principle so that my code can be read and understood in one sitting.

## Additional thoughts?

I enjoyed building this project and I hope to inspire others to do a similar project. Also I would like to thank developers who helped me to refactor my code and add new features to my project.
Semantic Release Automation - Part 3 - deploy to github pages 
Tags: javascript, github, devops, webdev
Published: 2020-05-25 20:56:12

In part 2 of **Semantic Release Automation** series, we configured our Continues Integration part in our workflow using [semantic release package](https://github.com/semantic-release/semantic-release) along with [Github Actions](https://github.com/features/actions) and [GitHub Packages](https://github.com/features/packages). Now lets go live and configure the deployment workflow using [Github pages](https://pages.github.com/).

# Table of contents
1. [Prerequisites](#prerequisites) 
2. [Configure repository settings](#configure-repository-settings)
3. [Update Github Action](#update-github-action)

## Prerequisites <a name="prerequisites"></a>
- Basic knowledge of CI/CD workflow, you can refer to my 2 mins [article](https://dev.to/abdelrahmanahmed/continuous-integration-continuous-delivery-and-continuous-deployment-in-a-nutshell-1018) about this topic.
- Create [Github token](https://help.github.com/en/github/authenticating-to-github/creating-a-personal-access-token-for-the-command-line), this will be used by **Github pages action** ( you can skip this part if you have already created it in the previous series).

## Configure repository settings <a name="configure-repository-settings"></a>
- In your Github repository, Create a new branch from your main branch with name **gh-pages**.
- Navigate to settings option.
- Go to GitHub Page section.
- Make sure that your are selecting the source branch to **gh-pages** which you created before.

![gh pages](https://dev-to-uploads.s3.amazonaws.com/i/disswqnerlg2flpf3q8t.png)

- Now copy your site URL and open your `package.json` file add **homepage** key with your site URL as a value.

## Update Github Action <a name="update-github-action"></a>
To simply things for us we are going to use a [ready action](https://github.com/peaceiris/actions-gh-pages) to deploy to github pages. You can find a full example in the following gist below:  

{% gist https://gist.github.com/abdelrahmanahmed/8a2bb5feadee4d7b124e80f5c9157406 %}

Now push a new commit and watch your pipeline in action, in a successful scenario you should find the build results in **gh-pages** and your code is deployed to your site URL.

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

Thanks for reading, waiting your feedback.



Cover Design Credit: <a href="https://www.freepik.com/free-photos-vectors/infographic">Infographic vector created by studiogstock - www.freepik.com</a>
PerfTrack - Semester Result Analysis of University Students
Tags: 2020devgrad, octograd2020, showdev
Published: 2020-05-25 20:50:50

---
title: PerfTrack - Semester Result Analysis of University Students
published: true
description: I just graduated from Guru Gobind Singh Indraprastha University, and this was my final project.
tags: 2020devgrad, octograd2020, showdev
---

[Comment]: # (All of this is placeholder text. Use this format or any other format of your choosing to best describe your project and experience.)

[Note]: # (If you used the GitHub Student Developer Pack on your project, add the "#githubsdp" tag above. We’d also love to know which services you used and how you used it!)

## My Final Project
Professors in my college were facing a great difficulty while organizing all student data at one place. My final project was based on building a pdf scraper that successfully scrapes the unstructured data in the college semester marksheet pdf file and convert it into well-defined csv files. This project is thus saving an ample amount of time for teachers and office personnel in my college who have to enter the data of students manually. It also analyzes the results of students of current and previous semesters and in-turn predicts their future grades using machine learning.

[Note]: # (Our markdown editor supports pretty embeds. If you're sharing a GitHub repo, try this syntax: `{% github link_to_your_repo %}`)

## How I built it (what's the stack? did I run into issues or discover something new along the way?)
I built the project mainly using Python programming language. While building the project, one of the main issues I ran into was selecting a good Python library for scraping the pdf file which was most suitable. I tried many different libraries and finally selected Camelot.

## Additional Thoughts / Feelings / Stories
This project is very close to my heart as I've spent a huge amount of time researching and developing the project. The main motive of building this project was to help my teachers who I saw doing manual data entry of student details (which took weeks to get done). The most happy moment was when one of my teachers used my project for doing her college work and praised me for building this project.

[Final Note]: # (CONGRATULATIONS!!! You are amazing!)
[Placeholder Title]
Tags: devgrad2020
Published: 2020-05-25 20:45:36

[Comment]: # (All of this is placeholder text. Use this format or any other format of your choosing to best describe your project and experience.)

[Note]: # (If you used the GitHub Student Developer Pack on your project, add the "#githubsdp" tag above. We’d also love to know which services you used and how you used it!)

## My Final Project


## Demo Link
 

## Link to Code

[Note]: # (Our markdown editor supports pretty embeds. If you're sharing a GitHub repo, try this syntax: `{% github link_to_your_repo %}`)

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


## Additional Thoughts / Feelings / Stories


[Final Note]: # (CONGRATULATIONS!!! You are amazing!)
Efeito :hover com CSS, simples e muito funcional
Tags: css
Published: 2020-05-25 20:00:59

Esse é um truque muito simples e que ajuda a não ter que pensar o :hover a cada link que temos no site.

Para isso vamos usar a propriedade *filter* do CSS, da seguinte forma:

```css
a:hover {
    filter: brightness( 50% );
}
```
Nesse exemplo acima, a cor aplicada aos links terão seu brilho (brightness) reduzido em 50% quando o mouse passar sobre eles.

Para melhorar ainda mais, você pode adicionar uma transição nos links, da seguinte forma:

```css
a {
    transition: all 0.2s ease-in-out;
}
```

Simples assim e muito útil. O que vocês acham?
Optimize images for website
Tags: html, webperf, webdev, beginners
Published: 2020-05-25 19:59:26

Unoptimized images may cause a lot of performance issues and slow down your site significantly. In this article, I'll share with you some ways how to increase your web app performance dealing with images.

## 01. Lazy loading

Lazy loaded images start loading only when they are in the user's viewport. That's a huge win because you don't need to load all the images at once.

### how to do it?

The simplest way is to use native HTML `loading` attribute and set it to `lazy` on the `img` element

``` <img src="../assets/photo.jpg" loading="lazy" /> ```

[check the browser support](https://caniuse.com/#search=loading)

## 02. Load proper images sizes

In the perfect world, you should never load a bigger image then you display, it's just a waste of transfer. You can define which image needs to be load depend on the user's screen resolution. There are a couple of ways to achieve that.

- Set `srcset` on the `img`

``` <img src="images/photo.jpg" srcset="images/photo_medium.jpg 100w,images/photo_large.jpg 400w"/> ```

In that attribute, you can tell the browser that you have the same image in different sizes by providing a path to the asset and intrinsic width in pixels (`100w`).

[read more on MDN](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)

- Use media queries

In some cases you can't use `srcset` property because you don't use the `img` tag. For example when you set the background image. The solution is simple, you can define different background images using media queries.

example:

``` CSS
@media (max-width:1280px){
 hero-wrapper{
  background-image: url('assets/hero_medium.jpg');
 }
}
@media (max-width:720px){
 hero-wrapper{
  background-image: url('assets/hero_small.jpg');
 }
} 
```

## 03. Use compressed images

According to the Google Chrome Developers team most of your images should have less than 100kb.
You should consider using jpeg or [webp](https://caniuse.com/#search=webp) formats. They are way lighter then png files. You can use [squoosh](https://squoosh.app) the tool maintained by Google that allows you to convert and compress your images.

## 03. Images optimization CDNs

There are some tools that compress, resize, and make other transformations on your photo to reduce loading time. I personally use [imagekit](https://imagekit.io/) and it does the job very well.