teleren/devto huggingface dataset:
I improved Page Speed from 80 to 91 -- can you help me get closer to 100?
Tags: discuss, webdev, jamstack, jekyll
Published: 2020-06-22 15:15:33

---
title:  I improved Page Speed from 80 to 91 -- can you help me get closer to 100?
published: true
date: 2020-06-22 13:00:00 UTC
tags: discuss,webdev,jamstack,jekyll
cover_image: https://katiekodes.com/images/header-page-speed-202006.png
canonical_url: https://katiekodes.com/page-speed-fix-scripts/
---

I finally took the world’s advice and split my blog’s JavaScript into “load first” and “load last” sections.  I brought my [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) score for [KatieKodes.com](https://katiekodes.com) on mobile up from **80** to **91**.  That said, it still feels low and I'd love help from the #DEVcommunity!

---

## Discussion Prompt

It looks like my only image on my home page is my SVG logo, so I’m a little mystified why I’m still all the way down at 91 on mobile and 95 on desktop.

<blockquote><big>Does anyone here at Dev have any ideas for how I could get my “first contentful paint” even snappier without too much effort and without sacrificing things like "cumulative layout shift"?</big></blockquote>

---

## How I did it

I used to have a file called `scripts.txt` that I injected into the `<head></head>` of my site.

It included the 6-line JavaScript for my archive expander/contractor arrow toggles as well as calls to some external JavaScript, like Google Analytics and LinkedIn/Twitter widget I had long ago stopped using.

I split it into two files: `scripts_internal.txt` and `scripts_external.txt`.

1. I left `scripts_internal.txt` in the `<head></head>`. Maybe it doesn’t need to live there, but I didn’t want to take a lot of time to debug.
2. I moved `scripts_external.txt` to live as the last piece of HTML injected into the `<body></body>` of my web site.

I also got rid of the LinkedIn/Twitter widget JavaScript it turned out I’d long ago replaced with simple links.

Moral of the story: don’t just read the textbook on web site optimization – do your homework too!

_(How many times had I read to do this one little thing before I actually did it?)_

<!--

---

## Inspiration

Thanks to Michael Kennedy for teaching me about the PageSpeed Insights tool in his [appearance on VBrownBag](https://www.youtube.com/watch?v=6SJ26Q_8Hxc), which involved a really cool use of Python to "warm up" his web servers and keep his web site from rendering slowly after making changes:  

{% youtube 6SJ26Q_8Hxc %}

---

## Shameless self-promo

My "muse" came to visit and I've been doing waaaaay too much side-project work learning JavaScript, React, Gatsby, and WYSIWYG Jamstack-friendly CMS configuration considering it's a gorgeous summer:

{% link https://dev.to/katiekodes/gatsby-minimum-viable-build-3n13 %}

{% link https://dev.to/katiekodes/gatsby-react-minimum-viable-markdown-template-component-1e26 %}

{% link https://dev.to/katiekodes/gatsby-react-wsyiwyg-cms-friendly-markdown-1npm %}

BTW, I got to [geek out about Python on VBrownBag](https://www.youtube.com/watch?v=wjPgszCLdYY), too.

{% youtube wjPgszCLdYY %}

-->
Pygame is not working In linux
Tags: help, discuss, python, pygame
Published: 2020-06-22 12:58:53

Hello guys I am trying to make a gmae in pygame I have python 3.6 installed and this is how my code looks
```
import pygame
pygame.init()



screen = pygame.display.set_mode([800, 600])

pygame.display.set_caption('Little UFO')



# actors

ufo = pygame.image.load('ufo.png')


def player(): 
    screen.blit(ufo, (375, 591))




run = True


while run:

    screen.fill([255,255,255])

    for event in pygame.event.get():

       if event.type == pygame.QUIT:
                   run = False

    player()
```
When I open I see black background even though I have selected white and I can't see the ufo
ReactJS Dialog Box Component
Tags: codepen, react, javascript, css
Published: 2020-06-22 12:54:06

<p>Dialog box component written in ReactJS.</p>

<p>I prepared I18N object, but I only know 3 languages, so I only added those 3 in the constant variable.</p>

<p>This dialog box is inspired by Cupertino design. Textbox is inspired by Twitter Bootstrap. Buttons are inspired by Material design.</p>

<p>These dialog boxes are lightly animated.</p>

<p>Usage:
'btn' attribute is for the text content of the buttons.
'type' is for dialog box type (alert, confirm, prompt).
'title' is for the title of the dialog box.
'msg' is for the message of the dialog box.
'lang' is for the language.
'ok' is the callback function if 'OK' button is pressed.
'cancel' is the callback function if 'Cancel' button is pressed.</p>

{% codepen https://codepen.io/takaneichinose/pen/jOWBpxq %}
Don’t treat Docker containers like Virtual Machines…
Tags: docker, singleservice, flexibility, webdev
Published: 2020-06-22 12:44:03

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

I know, I know. It is hard to resist some times on treating Docker images like VMs. I totally get it, but I prefer to not do that. You see, there is no sense to put everything in a custom image, every server and every product you develop, with all their necessary libraries. And I will explain myself.

From a size point, you will end up with a huge image, probably more than a GB of size on your system, which will reserve a lot of space. And if this is the only setup, that’s somehow OK. But what will happen if you need to replicate that just to experiment with a new library or a new version of a crucial component? You end up with more setups and a lot of space reserved.

From a security point, huge images tend to have obsolete or unused code and libraries that no one updates because of the fear to break something. It is hard to experiment on updates, hard to rollback and maintain. Even the dockerfiles of these images tend to have hundreds of lines.

From a flexibility point of view, it is difficult to reuse the same images on multiple projects. As a result different projects have different images, strongly tied with them, containing different libraries and scripts. Also, it is hard to change one crucial component, i.e. PHP 5 to PHP 7, in a fast and easy way, without building the whole image from the scratch.

The solution of ‘course to all the above, and this monolithic image, is to use single service containers, based on images that do only one thing, and do it the best way they can.

So, if you are a PHP developer and most of your projects use PHP, Nginx, MariaDB, Redis, Elastic Search, Kibana, the next time you want to create a setup on docker prefer to use different containers for each of the above servers. Separate, i.e. PHP from Nginx and put the containers on the same network. This will give you the necessary flexibility to change, if you need, PHP or Nginx versions really easy, just by changing the image of the specific containers. All the other containers will be untouched, continue to work just fine.

And if you have multiple projects, that use the same technology, use exactly the same images on all of them. And in case you have to maintain those images, I am sure that even the dockerfiles will have much less code, and will be much easier to maintain, than the previous monolithic dockerfile.
I'm Launching a Podcast!
Tags: womenintech, codenewbie, devjournal
Published: 2020-06-22 12:21:27

_This post was originally published on June 22, 2020 on [my blog] (https://alexlsalt.github.io/blog)._

Hi, friends! I'm excited to announce that I'm launching a podcast soon! >>

The Ladies Code Collective Podcast - for women who code, women who tech, and women who follow their creative impulses.

It's been on my mind for a while now, and as an avid pocast-listener myself, I thought a podcast could be the perfect direction for me to take in building up a community of other creative coding ladies.

I have a few specific goals for the podcast itself:

1. To discuss and celebrate the intersection of coding logic and creativity

2. To encourage women of all backgrounds to embrace the creative side of learning to code (as opposed to relying on any hard and fast, one-size-fits-all blueprint)

3. To build a community of women in tech who can offer and receive support around their pursuit of learning to code and building their respective creative projects

If I've learned anything over the past six months of teaching myself to program on a full-time basis, it's been that reaching a level of coding that allows for the building of more creative projects can only help women who may be in the same position of teaching themselves to code or considering to do so.

I love the idea of learning "enough to be dangerous," and I think achieving that along with the support and community of other like-minded women can only lead to truly amazing things for women in tech.

Here's to a great new adventure!

Stay up to date by [signing up for the newsletter here >>] (https://www.ladiescodecollective.com/)


Thanks so much for reading along! [Now let's be friends over on Twitter >>] (https://twitter.com/alexlsaltt)
Rebuilding my Music Player
Tags: music, showdev, javascript, webdev
Published: 2020-06-22 12:19:18

---
title: Rebuilding my Music Player
published: true
description: a small story of me rewriting my music player
tags: music, showdev, javascript, webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/suztubv3jbtwtpd3f67e.png
---

A few days back I posted about a file tree router, if you didn't read that, don't worry, I'll be redirecting you to it in the post later.

I've been thinking about improving [Orion](https://orion.barelyhuman.dev/) , a music player I built years ago but I never did anything because it worked well and didn't need any changes functionality wise. But, I didn't really like the design and have been wanting to change it but didn't because I kept myself busy on building new stuff.

Finally, Trashed the previous code of [Orion](https://music.reaper.im) and rewrote it properly this time, removing all amateur coding standards I used back then. Changed the design to a new level of minimalism and voila!

While I was at it, I wanted to test a file tree based router I wrote and ended up rewriting the server side of Orion as well. Replaced Express with [Routex](https://github.com/barelyhuman/routex) and what you see now when you clicked on it is the new music player. 

## Why did you make this?

Simple concept, I like listening to music when I practice for CS:GO and having a full youtube window eats up the ram and slows down the game a lot. Having a minimal player that stores my general list of tracks while giving me access to the whole Youtube Library is kinda handy.
How to create an HTML email
Tags: html, webdev, beginners, css
Published: 2020-06-22 08:20:26

---
description: Create an HTML email by following these simple steps
---
There are two types of emails you receive in your inbox: plain text emails and HTML emails. HTML emails are most of the multimedia marketing emails you find in your inbox be it a newsletter, events, announcements, etc.

Unlike a traditional web page, HTML emails are built using tables since it is a challenge to make each one of your emails be compatible with the various email clients.

Emails are infamous for their inconsistent CSS support which is why if you want to add some style to your email, we always use inline CSS.

```HTML
<body style="margin: 0; padding: 0;">
 <table border="1" cellpadding="0" cellspacing="0" width="100%">
  <tr>
   <td>
    This is the main table
   </td>
  </tr>
 </table>
</body>
```

Inside the main table, we'll create another table and give it three rows. The first row will be for the email header (usually the company logo), the second row is the content area, and the third is the footer (this is where you put your company address, social media, etc). Add a background color to be able to easily identify the three sections and some padding, when using padding in HTML email, you have to specify all the padding values (top, bottom, right, and left.)

```HTML
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600">
 <tr>
  <td align="center" bgcolor="#f5f5" style="padding: 5rem 0 5rem 0;">
  Header
  </td>
 </tr>
 <tr>
  <td align="center" style="padding: 8rem 0 8rem 0;">
   Main content
  </td>
 </tr>
<tr>
  <td align="center" style="padding: 2rem 0 2rem 0;" bgcolor="#2E86C1">
   Footer
  </td>
 </tr>
</table>
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/eo9kbhwmdxfxv3hyjdhr.PNG)

Next, we'll divide the footer section into two columns for the company address and social media links. To do so, you'll create another table inside the footer section.

```HTML
<table border="0" cellpadding="0" cellspacing="0" width="100%">
 <tr>
  <td align="center">
   The comapny contact information
  </td>
  <td align="center">
   the company social media links
  </td>
 </tr>
</table>
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5opjl2w8ceyo70yhonrh.PNG)

That's it, we're done. This is the most basic structure of an HTML email so you can change it up as you see fit. You can also change the border from 0 to 1 to make the border visible and help you when building the email but remember to change it back when finished.
What does RPA look like in healthcare?
Tags: rpa, roboticprocessautomation, healthcare
Published: 2020-06-22 12:12:44

The 3 main advantages of [RPA](www.fastpathautomation.com) in the healthcare industry are freeing the medical staff from a bunch of administrative tasks, reduce errors to zero, and save money.

With an estimative value of reaching roughly $5 billion this year, more and more CIOs are turning to RPA to streamline the business processes. [UiPath RPA](www.fastpathautomation.com) technology can save companies time and money by taking over and performing repetitive tasks. Despite the growing number of use cases, especially when it comes to updating the medical records, managing staffing levels, or simplifying claims processing, RPA is still not widespread in healthcare settings.

What role can RPA play in healthcare?

First, let us see what RPA is. RPA is the abbreviation of Robotic Process Automation which is a technology for business process automation that allows organizations to emulate and integrate human actions within digital systems.

A great benefit of RPA is that the technology can function on the organization’s existing infrastructure, which makes it non-intrusive by nature, enabling organizations to automate processes at a fraction of cost and time. 

For most occupations, 30% of the tasks are susceptible to automation. Using RPA technology in healthcare opens up opportunities that can free up clinicians’ time and enhance care delivery. 

Some examples: 

RPA can improve the healthcare cycle – clinics or any kind of medical provider collect a great amount of data from the patients, from personal information to treatment details. Using RPA software, providers can extract and optimize data effortlessly. RPA will manipulate the collected data to generate analytics that provides clinical staff with valuable insights. Then, they can make more accurate diagnoses and give tailored treatments to patients.
 
New patient appointments – when a new patient fills out an appointment request form online, the software robots can help by scanning the incoming data, build a report and direct the request to the correct work queue based on its attributes. These actions lead to an increase in patient and provider satisfaction.  
 
Simplifying claims processing – claim processes involve data input, processing, and evaluation. This whole process is error-prone and time consuming with an impact on the cash flow. RPA will streamline the claim process by speeding the data processing while reducing the errors.  

How can you implement RPA successfully?

It is important, from the start, to determine what kind of problem you hope to solve with RPA. For a successful deployment, organizations must follow several best practices such as research, staff education, presenting a strong use case and security. 

Your RPA strategy should include selecting a vendor, one or more solutions, seeking advice from experts, and, in the end, selecting a partner to implement the technology appropriately.
Daily Developer Jokes - Monday, Jun 22, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-06-22 12:00:06

---
title: "Daily Developer Jokes - Monday, Jun 22, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Monday%2C%20Jun%2022%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12597fe0374.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ Where do developers drink?

___A:___ The Foo bar
 -->
Built a white-label front-end app template 2x faster
Tags: frontend, nocode, webdev, lowcode
Published: 2020-06-22 11:48:17

Alex, a software engineer from Akveo (a company that developed UI Bakery low-code platform), has recently published a story on one of his projects. They developed a white-label front-end app template for their client, Apprise.
Apprise needed this template to provide customers with an opportunity to easily create their own social network apps on its basis, and remain full control over the data they'll share via their apps.
The big part of the work was done right in UI Bakery. No coding.

Read the story, leave your comments. Claps are welcome!
https://hubs.ly/H0rLzND0
ZuricHac 2020
Tags: haskell
Published: 2020-06-22 11:44:39

Last weekend I participated in [ZuricHac](https://zfoh.ch/zurihac2020/). It was an **awesome event**. Well organized 👏🙇 and full of interesting people!

> ZuriHac is the biggest [Haskell](https://www.haskell.org/) Hackathon in the world: a completely free, three-day grassroots coding festival organized by [Zürich Friends of Haskell](https://zfoh.ch/). It features fantastic keynotes, interesting tracks, and of course lots of hacking and socializing!

This year, due to Corona 🦠😷 the event took place online. Everything revolved around a [Discord](https://discord.com/) server. There were channels for particular projects people were hacking on, channels for the different tracks (beginner, intermediate and expert) and common channels to discuss the talks, hang out and share pictures of coffee ☕

Here's a small recap of the things I did and learned.

## did

- Joined 3 talks
  - [Languages all the way down](https://www.youtube.com/watch?v=kCpQ4aTzlis) by [@rob_rix](https://twitter.com/rob_rix)
  - [(Programming Languages) in Agda = Programming (Languages in Agda)](https://www.youtube.com/watch?v=x0R5h190Yts) by Philip Wadler
  - [Effects for Less](https://www.youtube.com/watch?v=0jI-AlWEwYI) by [@lexi_lambda](https://twitter.com/lexi_lambda) 🤯
- Joined one live coding session on GHC language extensions. [Write a GHC extension in 30 minutes](https://www.youtube.com/watch?v=bhhE2DxbrJM) by [@RaeHaskell](https://twitter.com/RaeHaskell).
- Joined one spontaneous call about lazy IO pintfalls when working with files by [@me_coot](https://twitter.com/me_coot).
- Found some fellow Spanish speakers _#lakeside-spanish_ (Spain, Argentina, Mexico, Guatemala, probably more!) 🇬🇹🇲🇽🇪🇸🇦🇷
- Collaborated on [tsearch.io](https://tsearch.io) and even got a contributor!!! 🤩
- Participated in different conversations and reacted with tons of emoji 🥳

## learned

- Lazy evaluation / lazy IO one of Haskell main features. As much as it enables some good stuff it can also cause some problems. When reading files (`readFile :: String -> IO String`), the files are open but not read until the evaluation is forced which might result in too many open files issues. Since files are closed as soon as the content is read the solution is to force the evaluation. 🤕
- Effect systems are all about abstraction of effects and being able to represent those effects in different ways.
- Effect systems have performance penalties due to polymorphism.
- The compiler (GHC) does a mind-blowing job optimizing code. 🤯
- To there's some much the compiler can do. So is up to the developers to find ways to produce more optimized code.
- Is important to know how and why the compiler optimizes (or not) certain code.
- TypeScript is harder than Haskell. Being able to type JavaScript programs makes for a very complex type system.
- Formal proof languages like Agda are less scary than they seem! 🤓

---

*And a huge thanks to the organizers and everyone who made the event possible!*

*I look forward to participate next year in person.*
Road to Genius: smart #26
Tags: javascript, beginners, computerscience
Published: 2020-06-22 11:44:03

Each day I solve several coding challenges and puzzles from Codr's ranked mode. The goal is to reach genius rank, along the way I explain how I solve them. You do not need any programming background to get started, and you will learn a ton of new and interesting things as you go.

Today we start with two relatively easy challenges. We have seen similar versions of these challenges before, but this time there are no bugs to be fixed.

![coding challenge](https://dev-to-uploads.s3.amazonaws.com/i/xxs20mm88lytkpjg7vmx.png)

This challenge starts with an empty array, followed by a for-loop that pushes numbers into the array. The challenge is to determine the value of `R` which is `arr[N-4]`. Let's briefly analyze the for-loop: it's adding numbers into `arr` starting from 0 to `N=7` (excluded). So `arr` will eventually contain the following: `0,1,2,3,4,5,6`.
Now `R` is the value at (N-4)th index, that is the 3rd index, which is 3.

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

The second challenge starts off with an array of random numbers. The for-loop iterates over each number in this array, then the if-condition checks if the element is greater than `R`, if so `R` takes its value. In a nutshell this code keeps track of the largest number from the array. To solve it, simply find the largest number in `arr` which is 9.

---

By solving these challenges you train yourself to be a better programmer. You'll learn newer and better ways of analyzing, debugging and improving code. As a result you'll be more productive and valuable in business. Join me on the Road to Genius and upgrade your programming skills, at https://nevolin.be/codr/