teleren/devto huggingface dataset:
Lazyload images the browser way
Tags: browser, lazyload, performance
Published: 2020-06-22 11:43:02

One of the biggest performance wins for image-extensive webpages is `lazy loading`. Normally, the browser fetches all the required resources from the server as soon as possible. When the website has lots of images this goes against the speed and performance of the website. Consider a page loading 100s of [dog images](https://itsopensource.com/demos/lazyload/), there will be 100 asynchronous http requests. The more the http requests, the slower the website.

All images are required for the functionality of the website, but they might NOT be required on the FIRST load. Here `Lazy loading` does the magic— images will be fetched only when they are required for the content in the current view port. So for a long image-extensive page, the images which are required by the top part of a website will be initially fetched on the first load and as the website is scrolled down, the respective images are fetched.

This has been practiced for a while and various Javascript libraries are built to achieve this.
* [Jquery Lazyload](https://plugins.jquery.com/lazyload/)
* [Vanilla Lazyload](https://github.com/verlok/lazyload)
* [LazySizes](https://github.com/aFarkas/lazysizes)

The list goes on. But the good news is the specification for native image lazyloading has been merged into the HTML standards. Check [HTML standard repo](https://github.com/whatwg/html/pull/3752#issuecomment-585202516).

Official specs - <a target="_blank" href="https://html.spec.whatwg.org/multipage/urls-and-fetching.html#lazy-loading-attributes" >https://html.spec.whatwg.org/multipage/urls-and-fetching.html#lazy-loading-attributes</a>

With this we don't need any lazy loading libraries anymore and all we need to do is the following:

```HTML
<img loading="lazy" src="https://placedog.net/400/400/random" alt="doggo">
```

Notice the `loading` attribute, this is the magic keyword. It accepts 3 values `auto`, `lazy`, `eager`

* `auto` - this is equivalent to not including the `loading` attribute. This sets the default browser behavior for images.
* `lazy` - fetches images only when the element is in/near the viewport.
* `eager` - fetches the images immediately.


`Lazyload` will soon be supported in all major browsers by default. But if you want to test it, you can turn on the browser's experimental flags:

**Firefox (>=75):**
1. Goto `about:config`
2. Set `dom.image-lazy-loading.enabled` to `true`

**Chrome (>=76):**
1. Goto `chrome://flags`
2. Set `Enable lazy image loading` to `Enabled`


Demo: <a href="https://itsopensource.com/demos/lazyload/" target="_blank">https://itsopensource.com/demos/lazyload/</a>

<center><sub>Lazyload in action</sub></center>
![Lazyload in action](https://dev-to-uploads.s3.amazonaws.com/i/vo18d4rg1f71l3d6vl97.gif)
Execute Cloud Hosted Python Scripts with your Phone
Tags: tutorial, python, cloud, wayscript
Published: 2020-06-22 11:40:12

Introduction
------------

In this tutorial, let's take a look at how we can execute a python script whenever we send a text message to a specific number. Additionally, we'll look at how we can pass variables to a python script using this text message to create custom responses. Let's get started!

Text Message Trigger
--------------------

The WayScript text message trigger allows us to execute a script whenever a text message is sent to a certain number, containing an execution command for the script you're trying to execute. For example, the text may look something like this:  
  

![](https://cdn.wayscript.com/blog_img/89/1.png)

  
  
Building this in WayScript, we pull a time trigger into our workflow and turn it on:  
  

![](https://cdn.wayscript.com/blog_img/89/2.png)

  
  
The first time you use this module, you will have to connect your phone number for verification. After that, we can configure the outputs to receive from the test message. These are the values following the execution command in your message.  
  

![](https://cdn.wayscript.com/blog_img/89/3.png)

  
  
Here we're creating a variable called message, which will get assigned the value provided in the text message.

Executing a Python Script
-------------------------

Since we want this text message to execute a python script, let's pull a python module as the next step in the workflow.  
  

![](https://cdn.wayscript.com/blog_img/89/4.png)

  
  
By placing this under an activated text message trigger, this python script will execute any time a message is received. However, to provide a customized response, let's do something with the input provided by the user's message.  
  
We could write some python code like this:
<pre> 
message = variables['message'] 
string_message = str(message)
response_string = 'Hello ' + string_message
variables['response_string'] = response_string
</pre>
 
While we're not doing much here, we're taking the input, processing it, and creating a new variable that we can pass to another module. We can "export" this new variable out of python and back to Wayscript using the variables dictionary. There's limitless possibilities at this step.

Passing Back a Response
-----------------------

Now that we've created the response in the python module. Let's pass it back as a text message to the user.  
  

![](https://cdn.wayscript.com/blog_img/89/5.png)

  
  
We can write the resposne that we want into the body of the message. But in this example, let's just use that variable we created by dragging it in.  
  

![](https://cdn.wayscript.com/blog_img/89/6.png)

  
  
This will return that python response directly back to the user.  
  

![](https://cdn.wayscript.com/blog_img/89/7.png)

  
  

Questions, Feedback?
--------------------

If you have any questions or concerns, please feel free to reach out to us on our [discord](https://discord.gg/VWbXSbj) channel. If you want to view this completed script, you can find it [here](https://wayscript.com/user/derricks/hv5ZoHOi).
How to Find Paid Blogging Work
Tags: makemoneyonline
Published: 2020-06-22 11:39:55

Blogging can be a lot of fun. It can also be quite lucrative. In fact, some college students are paying their way through school by blogging for others. You can get in on this fascinating career. How to <a href="https://www.bookwebmaster.com/money/50-easy-ways-to-make-money-online/">make money online</a>,  Here are six ways to find paid blogging work .


 
<h3>Create Your Own Blog</h3>

It’s important to have a body of work to show potential employers. If you want to blog for pay, the first step is to create your own web presence. Create a blog on something you’re passionate about. Add to your blog on a regular basis. Make sure your content is compelling and valuable. Also include a page on your blog that markets your blogging services.

<h3>Get Active on the Blogosphere</h3>

In addition to creating your own blog, comment on other blogs you find interesting. Get involved in the blogging industry. Connect with other bloggers. Comment and engage. If there is a particular blog you’d love to blog for, get involved on it. Make your mark. Engage lively discussions and get the owner’s attention.

<h3>Ask</h3>

Connect with blog owners in your areas of interest. Let them know you admire their blog. Offer your services. Be sure, in your query, to include a link to your own blog so they can review your writing style. If you’ve been active on their blog, chances are they already know who you are and have taken note.

<h3>Guest Blog</h3>

While guest blogging is generally not a paid writing gig, it’s a way to garner more attention and credibility. Offer guest blogging services to a few friends and associates. Consider swapping posts. Have them guest blog on your blog as well.

<h3>Visit Freelance Job Sites</h3>

There are paid blogging opportunities on freelance job sites. They’re very competitive. However, with a notable blog, good samples and a compelling application you can get the job. There are many blogging opportunities on freelance job sites so be patient. If you don’t get the first position, keep trying. Once you get your foot in the door with a blog owner, you can show your stuff.

<h3>Network</h3>

Last, but certainly not least, networking pays off. Connect with others both online and off. Let people know you’re a writer. Let them know you’re looking for blogging work. Being in the right place at the right time pays off. You may land the blogging job of your dreams.

Blogging for pay is an ideal lifestyle. While you’re searching for paid blogging work, stay active, and engaged online. Blog, comment, and interact. Your dream blogging opportunity is just around the corner.
TYPES OF NETWORK
Tags: career, todayilearned, technicalwriter, randomtalks
Published: 2020-06-22 11:30:25


Networking skills like communication, listening, and social skills are valuable in professional and personal environments. Networking is highly essential to develop relationships with a new contact and promote something valuable. Hence, here are three types of network you should maintain professionally and personally;

**Operational Network**: The operational network includes people at the workplace, such as the product team (Developers, QA, Engineering Manager, Head Architect, Project Manager, and so on). They help you get your work done. It is internal and current focused.

**Personal Network**: Personal network includes people who can help you grow personally and sometimes professionally. It is usually external and shares a common interest, such as; friend from workplace or college.

**Strategic Network**: It includes people who can help you shape your future goals and directions. Such a type of network is either internal, external, or future-oriented such as; teachers, mentors, and so on.
Collectionaire- Digitizing your memories for a forever storage
Tags: digitalfamilyhistory, familyhistoryarchive, familyalbumstorage, recordfamilyhistory
Published: 2020-06-22 11:27:10

Want to secure your family’s memories forever? Collectionaire is your best bet. <a href="https://www.collectionaire.com">Digitize your memories</a> for generations to come. Visit us to know more
Debugging GitHub Actions
Tags: github
Published: 2020-06-22 11:26:55

Have you ever spent 20+ commits to debug a CI setup? Yes?

**EDIT:** As pointed out by follow redditors, `ssh`ing into a GitHub actions runner might cause trouble with GitHubs TOS.

A better alternative to this approach is [act](https://github.com/nektos/act), a handy CLI tool which allows us to run our Actions workflow locally. It uses Docker containers to replace build machines (only Linux is supported at the moment), so we're still able to debug our workflow without having to play the endless commit ping-pong.

~~Wanted to `ssh` into the build machine to check some things?~~

~~We were facing the same situation today and were happy to discover [ mxschmitt/action-tmate@v2](https://github.com/marketplace/actions/debugging-with-tmate "actions/tmate").~~

~~This action allows you to `ssh` into the runner executing your workflow to manually verify your build.~~

~~It will install and start [tmate](https://tmate.io "tmate.io"), which allows you to join the running terminal session, so it's possible to either connect va `ssh` or web terminal. Connection details will be printed in the command output.~~

~~`mxschmitt/action-tmate@v2` allowed us to identify the root cause of our problem and we were able to fix our build quickly, a huge win in terms of debuggability!~~
Should I #DockerAllTheThings?
Tags: devops, sitecore, digitaltransformation
Published: 2020-06-26 19:11:57

---
title: Should I #DockerAllTheThings?
published: true
date: 2020-06-22 11:25:07 UTC
tags: DevOps,Sitecore,DigitalTransformation
canonical_url: https://jasonstcyr.com/2020/06/22/should-i-dockerallthethings/
cover_image: https://www.docker.com/sites/default/files/d8/2019-07/horizontal-logo-monochromatic-white.png
---

A while back I was in a discussion about whether there was a benefit for all organizations to adopt Docker. I was of the opinion that there are scenarios where it just wasn’t a fit. The more I thought about this, the more I realized that the benefits are always there, but [some organizations have some issues they have to work out first](https://www.sitecore.com/knowledge-center/getting-started/should-my-team-adopt-docker) before they can start reaping those benefits.

When you start looking into containers and their benefits you may come to the conclusion that **"this would not work here"**. Maybe that’s right. Are you sure?

You need to ask yourself why that is. Why is it that your organization cannot benefit from container tech? Perhaps there’s an underlying issue that needs to be addressed first, like a lack of priority on infrastructure automation. Or a lack of a DevOps culture. Or any number of things. Ultimately, there is one thing I believe is true:

## YOU.👏 CAN.👏 NOT.👏 FIX.👏 ORGANIZATION.👏 ISSUES.👏 WITH.👏 TECHNOLOGY.👏



If you are struggling with your digital transformation, suddenly deciding to Kuberneti-All-The-Dockers is not going to solve that.

(I have decided that Kuberneti is the verb form)

I put together some key benefits of containers for organizations up on sitecore.com, as well as the challenges you might face and how to tackle them:

## [Are Docker and Kubernetes the right fit for my team?](https://www.sitecore.com/knowledge-center/getting-started/should-my-team-adopt-docker)

Following the article is a good series by my colleague Rob Earlam ([@RobEarlam](https://twitter.com/RobEarlam)) that can help you get started with Docker:

I'd love to hear back your thoughts on this and how I could make this better!
My top tools for Web Development in 2020
Tags: webdev, tutorial
Published: 2020-06-22 11:21:21

{% youtube z0qCxyOY-O8 %}

Not a great year, but some great tools! Here are my top 5 tools for web development in 2020. In this video, I name my top 5 tools, in no particular order, that make my life a WHOLE lot easier as a developer. Let's make all our lives a whole lot easier!

-----SPOILER------
I do not want to give away the top 5 tools but I would also like to share them with you. Please find a link to each one hidden behind a custom url.

Tool Number 1: https://bit.ly/myNumberOne

Tool Number 2: https://bit.ly/myNumberTwo

Tool Number 3: https://bit.ly/myNumberThree

Tool Number 4: https://bit.ly/myNumberFour

Tool Number 5: https://bit.ly/myNumberFive

If you have any of your own top tools you would love to share, please do comment below! I would love to hear :)
TypeScript Short links
Tags: typescript
Published: 2020-06-22 11:20:16

If you know or use TypeScript you ought to be familiar with its [Playground](https://www.typescriptlang.org/play/). It is an awesome tool, being able to play around with TypeScript on the browser, try things out. Is also great for collaboration, since the editor's state (code and config) is kept serialized in the URL, all it take is `ctrl + s` (or `Cmd` if you are in need Mac) and the link is on the clipboard and ready to be shared.

But then you paste the link on Slack and it is looonger than the *yarn.lock* of a React application 😰

A fairly short snippet results in something like this:

```
https://www.typescriptlang.org/play/index.html#code/PTAEBUE8AcFMGUDGAnAltALqayD2A3VAE1gGdQBHAV1UQGsBaAM1QA9RlZFcBbH2AHZEAhhlS4B5JrmQBYAFAhQ3PhNDDEiYoIykANKAwALWJFCkjuAO6gq0UKgGhIuKslCwiqDDNAAjYVJPBSU1ThV+IVFxSQA6BRCwADFfWFZhHmgAG1gIGAQUdCxEYSccAm1KGnpmNjJE0Gl3DBhcckdnV2b80gAuBPluSSxYKhzkUgA5Kh4-WHcAXlAAJliAdgBGAA5lre3dgBYFUfGpmbnkWJ94DGRSgHMACgBKAG4G0E+v74A9AH0AYCfqAGOZYDlEFhjKhyD4wbljLksqh7kYsH4aFkiANEFlAuQAKLpTI5ADCeNI5AA3gpPvxjLgiC9QDT5N9oaRYgJcBgACJcPGcIigJYbAAM7zZoAAvgppUA
```

That's a big nope from your coworkers who hate long links *polluting* the Slack history. And if you are anything like me you don't even like to be the one sharing long links either.

## What if ... ?

What if those long links looked like this instead?

[tsplay.dev/vwj58W](https://tsplay.dev/vwj58W)

[tsplay.dev/hello](https://tsplay.dev/hello)

## Yet another link shortener

Yes there are already a ton of link shorteners out there. But it is great to have a dedicate one. It creates identity. When you see [tsplay.dev](https://tsplay.dev) you know it'll be some TypeScript code.

🛡️ It is also about security. You never know where _tinyurl.com_ or _bit.ly_ short-links could redirect to.

## In the making

For now short links can only be created on [tsplay.dev](https://tsplay.dev).

But we are working on a [playground plugin](https://www.staging-typescript.org/dev/playground-plugins/) to create short links right there in the playground. Which should be available when the [new version of the TypeScript website](https://www.staging-typescript.org) is fully released.

---

By [Nahuel](https://dvnahuel.website/) 🎨 [Joni](https://jonidelv.me/) 💻 & myself 💻
Android Developer required for well-known software development company in Northern Suburbs, Cape Town.

Published: 2020-06-22 11:15:00

Requirements:
BSc in Computer Science Degree or related discipline would be an advantage
Minimum 3 years of overall Android development.
Extensive knowledge of the Android SDK.
Strong OO design and programming skills in Java (J2EE/ J2ME)
Experience using and creating scalable web-based RESTful APIs.
Experience in integration development (HTTP, SOAP, XML, JSON, etc.)
Demonstrated success in defining and launching mobile apps.
Object orientated design and development, with use of design patterns
Using version control (e.g. SVN)

APPLY @ ctjobs@mprtc.co.za
Please take note: if you have not been contacted within 14 days, please consider your application unsuccessful.
Python Developer required for well-known software development company in Northern Suburbs, Cape Town.

Published: 2020-06-22 11:13:51

Requirements:
Grade 12/ Matric
Degree in Computer Science or Engineering Degree with Computer Science
3 - 5 years’ Experience as a Developer
Experience in Object Oriented Language (Python, C# or Java)
Python Experience
Experience in MYSQL
LAMP Stack
Web Development (HTML, JavaScript)


APPLY @ ctjobs@mprtc.co.za
The Ten Commandments of Web Performance
Tags: webperf, javascript, css, webpack
Published: 2020-06-22 11:01:06

Follow these commandments and your website will not be remembered as slow. 

## Infographic

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

## Text form

1. You shall never put shiny, bloated frameworks above your user's experience. 
2. You shall always try to use native features before you reimplement them in JavaScript.
3. You shall use lazy loading whenever it can be used within reason.
4. You shall always serve images compressed and in the correct format.
5. You shall regularly test your website performance and fix issues as they arise.
6. You shall split JavaScript code to load what is needed when it is needed.
7. You shall serve web fonts in the proper format.
8. You shall always use a CDN for assets.
9. You shall do your due diligence when using dependencies making sure you are choosing the right one for the job.
10. You shall spread the word of performance amongst both technical and non-technical people.

Bonus: Always code as if the person who ends up maintaining your code is a violent psychopath who knows where you live.

## Read more

If you are interested in more performance oriented content, follow me and I promise to deliver original, or at least effective methods of improving your website. 

{% link https://dev.to/platformos/using-webp-in-your-existing-webpage-809 %}

{% link https://dev.to/platformos/optimizing-images-for-the-web-18gc %}

{% link https://dev.to/platformos/3-tips-on-preserving-website-speed-5g0c %}
How to get a city's current time independent of user's current time in JS?
Tags: help, javascript, webdev
Published: 2020-06-22 10:41:14

I have a problem in JS which I couldn't find an exact answer online (even on StackOverFlow). Basically, I have created 3 clocks to show current times of New York, Sydney and Tokyo. I use Date() function then converting it toLocaleString to get exact time of those cities but the problem is that if my system's time is incorrect then those clocks will also show incorrect time because JS is a client side language. Is there an easy way so that I get the local time of NY, Sydney and Tokyo without using Date()?

My current code is here:
```javascript
var countryTimeZone = new Date(now.toLocaleString('en-US', { timeZone: 'Asia/Tokyo' }));
    var time = countryTimeZone.getHours() * 3600 +
        countryTimeZone.getMinutes() * 60 +
        countryTimeZone.getSeconds() * 1 +
        countryTimeZone.getMilliseconds() / 1000
    rotate(secondElement, time)
    rotate(minuteElement, time / 60)
    rotate(hourElement, time / 60 / 12)
```

Thank you so much.
Today, I decided to use vim in my day to day job
Tags: vim, rider, ideavim
Published: 2020-06-22 10:17:04

This weekend, I was really inspired to start doing something new . I've been watching lots of cool videos about shell and different command line utilities so I've blown the dust out of my Windows Terminal and installed zsh and decided to use vim as the code editor.

https://github.com/ohmyzsh/ohmyzsh

With powerlevel10k theme

https://github.com/romkatv/powerlevel10k

Once installed, edit .zshrc file

 ZSH_THEME="powerlevel10k/powerlevel10k"

And for vim I used vimtutor for learning and ideavim plugin for my JetBrains Rider (i can't really refuse to use code completion and cool refactorings, sorry for that)) )

Next week, I will write a small review about my experience with vim. Stay tuned
How to cache node_modules in GitHub Actions with Yarn
Tags: github, javascript, node
Published: 2020-06-22 09:36:40

## The Problem

I run a small team working on a growing monorepo. Every commit, some CI checks run on the entire codebase, from GitHub actions. The checks were taking ~8 minutes to complete. We wanted them to run faster.

We use yarn workspaces to manage dependencies, so a single yarn install at root is enough to install the dependencies for all clients.

Trouble is, this yarn install was taking ~4.5 minutes on the CI. On my local machine, where the node modules have already been saved, this can take as little as 5 seconds. I wanted to speed up the CI.

## The first thing I tried

GitHub actions recommends that you cache yarn’s cache. This means you end up with 2 steps that look like this:

```yaml
- name: Get yarn cache directory path
  id: yarn-cache-dir-path
  run: echo "::set-output name=dir::$(yarn cache dir)"

- uses: actions/cache@v2
  id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
  with:
    path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
    key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
    restore-keys: |
      ${{ runner.os }}-yarn-
```

The first step grabs the yarn cache directory path, and saves it. The second step looks for anything stored in the cache, and restores it.

This sped things up a little, but it didn’t reach the heights I was hoping for.

## The Solution
Instead of caching the yarn cache, you should cache your node_modules.

```yaml
- uses: actions/cache@v2
  with:
    path: '**/node_modules'
    key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
```

This caches all of your node_modules folders throughout your repository, and busts the cache every time a yarn.lock file changes.

This works for our monorepo, and it should also work for single folder projects too.

This took our install step from ~4.5 minutes to ~30 seconds.

## The Full Snippet

```yaml
name: Automated Tests and Linting

on: [push]

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1

      - uses: actions/cache@v2
        with:
          path: '**/node_modules'
          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}

      - name: Install packages
        run: yarn install

      - name: Autogenerate GraphQL
        run: yarn codegen

      - name: Run Typescript Checks
        run: yarn lint

      - name: Run Tests
        run: yarn test:ci
```