teleren/devto huggingface dataset:
Stop Bundling Scripts for Better Web Performance
Tags: webperf, javascript, webdev, serviceworkers
Published: 2020-04-06 17:15:35

###Here's the conventional advice: 
#for a fast webpage, split your code and bundle it.

This advice did not work for me. 

Whenever I split my code into manageable subsets, the page broke. I still bundled my code to reduce HTTP requests [(using Netlify's post processing)](https://docs.netlify.com/site-deploys/post-processing/#post-processing-features), and my page loaded in over 2 seconds, with 1.5 seconds being dedicated to the huge bundled script. Not acceptable. Shouldn't reducing HTTP requests lead to a faster page? This is web performance gospel - [reduce HTTP requests!](https://dev.to/ben/addy-osmanis-18-point-web-performance-checklist-2e1)

![My page speed while bundling scripts](https://dev-to-uploads.s3.amazonaws.com/i/x4aag1cwof68yqj7hijy.png)

I did have a service worker that was caching static assets for me, but the caching only increased page speed because those static assets were never used in the cached form. 

The service worker would cache sea.js, but since sea.js was bundled with webrtc.js and jquery.min.js in production, that cached asset never saw the light of day.

I think you can see where I'm going with this. **Unbundle!**

![Page speed while unbundling scripts](https://dev-to-uploads.s3.amazonaws.com/i/a2sr1aggsm8lbqft3xvu.png)

After unbundling the scripts, all of them loaded asynchronously in under 50 *ms*. 
##From 1.5 seconds of loading to *50 ms* loading. 
The whole page loaded in **77ms.** Wow.

This speed increase from unclicking one button on Netlify's post-processing options was too incredible for me not to share. 

Of course, this post assumes you are using a service worker to pre-cache static assets. If you're not, you can read the documentation to [learn why service workers are useful](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers) and [follow some tutorials](https://serviceworke.rs/).

I have Lighthouse, YSlow, and PageSpeed scores of 100 across the board, largely because of service workers.

###This is my first DEV post. Let me know what you think!
Font Typekit Generator Action
Tags: devops, webdev, showdev, github
Published: 2020-04-06 17:12:47

An action for typekit generation along with CSS from TTF files

Marketplace Link:
https://github.com/marketplace/actions/font-typekit-generator-action

## Instructions
* Make sure that the filename is same as the name of font-family as the filename will be used to set the font-family name in the CSS.
* Only ttf files will be converted.
* CSS files will be uploaded in the root directory of repository by default.

## Usage
To use this action add following to your workflow file

```yml
- name: Font TypeKit Generation Action
  uses: sharadcodes/font-typekit-generator-action@v1.0
  with:
    input-folder: "my_fonts" # This is a Required field & this folder has original font files in TTF format
    output-folder: "converted_fonts" # This is a Required field & this folder will be used to store converted font files
```

## NOTE
This action will not upload the files to your repo, in order to do so you should add the following code in your workflow file
```yml
- name: Font TypeKit Generation Action
  uses: sharadcodes/font-typekit-generator-action@v1.0
  with:
    input-folder: "my_fonts" # This is a Required field & this folder has original font files in TTF format
    output-folder: "converted_fonts" # This is a Required field & this folder will be used to store converted font files
- name: Add & Commit files
  run: |
    git config --local user.email "YOUR-GITHUB-USERNAME@github.com"
    git config --local user.name "YOUR-GITHUB-USERNAME"
    git add .
    git commit -m "Add changes" -a
    git push -f -q https://${{ secrets.GITHUB_TOKEN }}@github.com/YOUR-GITHUB-USERNAME/YOUR-REPO-NAME.git master
```
React: Slow Suspense
Tags: react, swr, functional, suspense
Published: 2020-04-06 17:10:20

There are several ways to deal with loading states, and in fact the React team came up with a solution called Suspense. 

When you use Suspense directly, the fallback will show even if the fetching process is quick. And it will also disappear as soon as the fetching process is done. This would make up for a jarring UI, we can do better.

> At the time of writing, there's a great package, developed by the Zeit team, called [`swr`](https://swr.now.sh/), which supports suspenseful data fetching.

This gist, shows a fairly simple pattern, `SlowSuspense`.

{% gist https://gist.github.com/icyJoseph/61eebf947bc3185c71f1b2ccde6f6639
 %}

`SlowSuspense` renders its children with a Suspense boundary, when the Suspense Boundary uses the `suspense-fallback`, a first timer is started, if timeout occurs, then the `slow-fallback` is rendered.

Once the suspense settles, the `suspense-fallback` is unmounted, and a second timer is started, when timeout occurs, the `slow-fallback` is unmounted.

Should the suspense settle quickly, then we clear out all timers and prevent the `slow-fallback` from being rendered at all.

{% gist https://gist.github.com/icyJoseph/7762a3e1415eeeee26df076e5dd5b68d %}

This CodeSandBox, has a beefed up demonstration. 

{% codesandbox romantic-ardinghelli-bvzdg %}

Keeping track of a promise, and manage a piece of state, depending on whether or not the promise has settled, can make up for a very complicated implementation. On top of that, having to account for quick loading, or delays on the activation of the loading state, can quickly become unmanageable. 

In this example, Suspense helps us remove the promise management completely, and we re-purpose the fallback props, to help us provide friendlier user experience.

Happy hacking!
iOS: How to generate image previews/thumbnails of various files
Published: 2020-04-06 17:05:28

Quick Look framework powers file previews across iOS and you can use its power to generate thumbnail images for all kinds of files. For example PDFs, text files, Pages documents, Word documents, Keynote presentations, 3D models for ARKit or images.

Let's look how to use it. The first step is to import `QuickLookThumbnailing` or `QuickLook` which includes the thumbnail part and offers more functionality.

The thumbnail generation is responsibility of the `QLThumbnailGenerator` . 
Next step is to create its instance:

```swift
let previewGenerator = QLThumbnailGenerator()
let thumbnailSize = CGSize(width: 60, height: 90)
let scale = UIScreen.main.scale
```

I have also created constant that we will use later on.

This class offers method `generateBestRepresentation` which will create the thumbnail and report the result with completion handler. It automatically works on background thread so you don't have to worry about it. Just be careful trying to update UI from the handler.

The method takes single parameter and that is special "request" type `QLThumbnailGenerator.Request`.

Here is an example of one:

```swift
let request = QLThumbnailGenerator.Request(fileAt: url, size: self.thumbnailSize, scale: self.scale, representationTypes: .thumbnail)
```

The most important part is URL of the file for which to create thumbnail. If you have file in memory, you need to save it first and then use its URL to create thumbnail.

We have already specified the size and scale of the thumbnail. The last parameter specifies what kind of thumbnail we are interested in. For example you can ask for `.icon` or for `.lowQualityThumbnail` to get the result faster.

```swift
self.previewGenerator.generateBestRepresentation(for: request) { (thumbnail, error) in
                
	if let error = error {
		print(error.localizedDescription)
	} else if let thumb = thumbnail {
		thumb.uiImage // image available
	}
                
	group.leave()
}
```

The completion handler will give you instance of `QLThumbnailRepresentation` if the thumbnail generation was successful. On iOS you can use its property `.uiImage` to get instance of `UIImage`.

And that is how you can create thumbnails for your files 🙂

I have more complete example of Quick Look framework on [GitHub](https://github.com/nemecek-filip/QLPreviewController.Example) that covers thumbnails as well as `QLPreviewController` to open these files in your app.

_Thanks for reading!_

{% link https://dev.to/nemecek_f/ios-how-to-easily-display-files-like-pdf-documents-images-and-more-in-your-app-l1 %}

-- 
Need to *focus on your iPhone*? Get free WebBlock app for scheduled website blocking from the [App Store](https://apps.apple.com/us/app/webblock/id1513121732)!
100daysofcode Flutter
Tags: 100daysofcode, flutter
Published: 2020-04-06 17:01:23

day 28/100 of #100daysofcode #Flutter
Learning Flutter , courses Udemy from
@maxedapps

 Today learning n implement some constructor, and list update , putIfAbsent
https://github.com/triyono777/100-days-of-code/blob/master/log.md
Happy 7th Birthday Docker!
Tags: docker, devops, cloud
Published: 2020-04-06 16:58:44

Seven years seems like an eternity in human years, but in Docker years, they turn 7. Looking back on the last seven years is quite amazing, considering where we started. Since the time Docker burst on the scene at Pycon 2013, to the rise of Container Orchestrators. It has been an unbelievable journey.

The introduction of Docker not only changed Developers' lives but also accelerated the adoption of DevOps, introduced the world to an entirely new ecosystem of technologies surrounding containers, and created new job roles. Fast forward to 2020; we now work daily with containers, DevOps, and helping people adopt these technologies.

## What's Next for Docker?

Docker is refocusing its efforts in three main areas. The first is the Developer Experience (DX). The main focus here is expanding the functionality of Docker for Desktop and Docker CE.

Next is CI/CD, Docker is now spending more time on Docker Hub and integrations with CI/CD tools such as Docker GitHub Actions. Docker Hub has already received a few new features such as Two Factor Authentication, expanding the search capabilities, and many more in the Roadmap.

The final area is organising Open Source. Docker is returning to its roots here and again, making a big push on Open Source commitment and helping organizations manage their Open Source software.

How can you help make Docker better? Docker has open-sourced its Roadmap. Now, everyone can open feature requests or vote on features in the Docker Roadmap. One such feature is Darragh’s request to implement Linux support in Docker for Desktop, and it is the most commented issue to date.

Docker Roadmap - https://github.com/docker/roadmap/projects/1

## Docker Birthday Discounts

A Docker birthday wouldn't be complete without some swag giveaway. This year Docker Captains added a list of discount codes ranging from books to video courses. Check out all the great content.

https://www.docker.com/blog/mydockerbday-discounts-on-docker-captain-content/

## 7th Docker Birthday Challenge
Every year we hosted a community meetup where we would invite the community to complete a Docker birthday challenge. This year is now the exception. Check out the 7th Docker Birthday challenge and earn badges for completing the various tracks.

7th Docker Birthday Challenge - https://www.docker.com/birthday

## Docker Birthday Show
Docker Captain extraordinaire, Bret Fisher, hosted the annual Docker Birthday show. He interviewed a lot of different people in the show, which has some great conversations and takeaways.

{% youtube 3UZ0TUPP0ks %}

## Find out more about 56K.Cloud
We love Cloud, Containers, DevOps, and Infrastructure as Code. If you are interested in chatting connect with us on [Twitter](https://twitter.com/56kcloud) or drop us an email: info@56K.Cloud We hope you found this article helpful. If there is anything you would like to contribute or you have questions, please let us know!
Git unrelated-histories and local
Published: 2020-04-06 16:54:21

# Intro

This is a small learning about git. 
1. --allow-unrelated-histories
2. local git copies

# Unrelated-histories

Unrelated histories may happen sometimes. Usually, we use git init command and create a git repo. This has some unique identity (I didn't dig into internals, I'm just speculating). 

So, how the unrelated histories happen ? 

Here are few scenarios, I can think. 
* One personally `git init` locally, and done a fair amount of coding. Another person, created git repo just for the first person.
* If one person shares a project folder to other without initializing a git repo (ie. `git init`). Then, both of them `git init` at later stage.

Then, you might end-up in unrelated histories. Probably, you will see this error.
`fatal: refusing to merge unrelated histories`.

The option to fix this is 
`--allow-unrelated-histories`

For example, see following command
`git pull origin master --allow-unrelated-histories https://github/username/reponame.git`

# local git copies

Say two developers are working on project and both are using git. They can merge git repos locally as well.

`git pull /path/to/other-copy`

Actually, other operations like `clone, pull, etc.` work as well.

# Reference 
https://stackoverflow.com/questions/37937984/git-refusing-to-merge-unrelated-histories-on-rebase
https://mkyong.com/git/git-pull-refusing-to-merge-unrelated-histories/
https://www.datree.io/resources/git-error-fatal-refusing-to-merge-unrelated-histories
Swift: Easy way to wait for multiple background tasks to finish
Published: 2020-04-06 16:36:26

Suppose you need to wait for multiple network requests before executing some other action like saving the data in one batch or populating the UI. Swift offers great solution named `DispatchGroup`.

This is very straightforward class to use and in this post I will show you how.

The `DispatchGroup` basically functions like a kind of counter of running operations. You call the method `enter()` to signal that task begun and then call `leave()` when the work is finished.

You get notified once all calls to `leave()` are done ✅ 

Let's check this example below:
```swift
let group = DispatchGroup()
for item in self.items {
        group.enter()
        self.downloadData(for: item) { (data, error) in
             // handle data and possible error here                
             group.leave()
        }
}
        
group.notify(queue: .main) {
        // all data available, continue
}
```

In this example the `downloadData()` method has completion handler that finishes after some time.

Once data for all the items are downloaded, the `notify()` will be triggered and you can respond.

**Important**: You need to make sure to always call `leave()` when the work is done otherwise the `notify()` will never be called.  You can use `defer` keyword if you have more complex logic. 

`defer` will execute the specified block right before the end of the current scope so you don't have to handle multiple code paths due to conditions, errors etc.

You can also use `group.wait()` which will wait for all items to finish before the execution will continue. This is only for background threads. If you call it on your main thread, you will **block** the UI until the work is done. Be careful. ❗

_Thanks for reading!_



[![Scan it - wide banner](https://nemecek.be/media/images/scanItWideBanner.png)](https://apps.apple.com/app/scan-it-scan-and-export-pdf/id1509634112)

-- 
Need to *focus on your iPhone*? Get free WebBlock app for scheduled website blocking from the [App Store](https://apps.apple.com/us/app/webblock/id1513121732)!
Synchronized ArrayList in Java
Tags: java
Published: 2020-04-06 16:36:12

Implementation of arrayList is not synchronized is by default. It means if a thread modifies it structurally and multiple threads access it concurrently, it must be synchronized externally. Structural modification means the addition or deletion of the element from the list or explicitly resizes the backing array. Changing the value of existing element is not structural modification.

See Reference: https://www.java8net.com/2020/03/synchronized-arraylist-in-java.html

import java.util.*; 
  
class ArrayListExample 
{ 
    public static void main (String[] args) 
    { 
        List<String> list = 
           Collections.synchronizedList(new ArrayList<String>()); 
  
        list.add("A"); 
        list.add("B"); 
        list.add("C"); 
  
        synchronized(list) 
        { 
            // must be in synchronized block 
            Iterator it = list.iterator(); 
  
            while (it.hasNext()) 
                System.out.println(it.next()); 
        } 
    } 
} 

See Reference: https://www.java8net.com/2020/03/synchronized-arraylist-in-java.html

Further Readings
https://www.java8net.com/2020/03/java-arraylist-common-program-examples.html
https://www.java8net.com/2020/02/how-to-sort-arraylist-in-java.html
https://www.java8net.com/2020/03/initialize-arraylist-in-java.html
https://www.java8net.com/2020/03/how-to-remove-duplicates-from-arraylist-in-java.html
https://www.java8net.com/2020/03/arraylist-to-hashmap-in-java.html
Ansible-NAS
Published: 2020-04-06 16:32:27

---
title: Ansible-NAS
published: true
description: 
tags: 
---

I was experimenting with FreeNAS when I stumbled upon Ansible-NAS. Ansible-NAS makes it very easy to set up your home media server. I got to learn about lots of new & interesting tools like Portainer, Sonarr because of it.

### Why use Ansible-NAS
1. To make use of your old dusty laptop
2. To save space on your laptop by downloading things/movies to your old laptop.

Reference:
https://github.com/davestephens/ansible-nas/
🎁 Yarn Cheat-Sheet [infographic + pdf]
Tags: npm, node, inthirtyseconds, todayisearched
Published: 2020-04-06 15:49:37

My last post in the series was on **npm**, the default package manager of Node Js. This one is on **yarn** which is a popular alternative to npm.

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

📁 [Download](https://github.com/godcrampy/cheat-sheets/blob/master/yarn/yarn-cheatsheet.pdf) the pdf version of this cheatsheet
🌟 All my cheat-sheets are in this [repo](https://github.com/godcrampy/cheat-sheets/) (Star it!)
🚀 Find me on [Instagram](https://www.instagram.com/godcrampy/) | [Github](github.com/godcrampy) | [Website](sahil.surge.sh)
😄 Have a wonderful day!
manaserials telugu TRP ratings
Tags: telugu, serials, bestserialsintelugu, teluguserials
Published: 2020-04-06 15:46:04

ఇపుడు ఉన్న manaserials తెలుగు సీరియల్స్ లో బెస్ట్ సీరియల్స్ ఏంటో తెలుసా , ఎప్పటికపుడు ఆడవాళ్లను ఏడిపిస్తూ , సెంటిమెంట్ తో అంటిమెంట్ పెడుతూ , ఆడవాళ్ళ సమయాన్ని వృధా చేస్తూ సారీ సారీ … టైం పాస్ అయ్యేలా చేస్తూ మంచి రేటింగ్ పొందుతున్న సీరియల్స్ లిస్ట్ మీకోసం అవేంటో తెలుసా తెలిస్తే షాక్ అవుతారు.
http://www.teluguvision.com/manaserials-telugu-trp-ratings/
COVID-19 vs College Students
Tags: discuss, productivity, motivation, covid19
Published: 2020-04-06 15:40:35

Hope you all are doing well in this tough time :smile:

While time is an expendable resource for most of us, I just wanted to share some of my experiences as a college student during Covid-19 and hopefully get a good discussion going. 

3/16/2020 - I received an email from my school calling for an extension to the spring break. I was not shocked, but was kind of expecting this to happen given the precedent that we were in. So I waited until 3/18/2020.

3/18/2020 - I received another email from my school. All in person lectures are cancelled and remote delivery will be the primary means of getting material until 4/7/2020 (not the end of the semester => there is still a chance that we get to come back :smile:). I was already taking a few online classes, and was ready to take a few more. However, a lot of my peers were not ready for this transition. Some just learn better if they can attach the voice to a physical presence and when they are constrained by a controlled learning environment. 

3/20/2020 - Extension of remote classes to the summer semester:sad:. This is it. It is really happening. We are the next generation to experience an educational shift that carries a high degree of uncertainty. 

Changes:

- increase in video lectures
- greater utilization of collaborative networks: Discord, Slack, BlackBoard Collab, Microsoft Teams, etc...
- increase # of emails from school and teachers 
- test were delivered online using special browsers that block access to other applications (respondus lockdown). Professors will attempt to maintain the integrity of the testing environment by enforcing certain restrictions: no phones, your desk must be clean, no electronics, you need a webcam, the webcam has to be pointing at your face the whole time, no standing up, the list goes on... This is sometime hard to do when you are in your own living space and are not mentally situated for a testing situation (you are taking a real freaken test, but it feels like you are taking an online quiz in your spare time).
- Project presentation. This one has been the most difficult thing to do; It is sometimes hard to find a compatible time.

As a student, what are some of the issues you deal with? How have you coped with these issues? What can be done to mitigate the effects of Covid-19 on student's learning?
An Engineer’s trek into Machine Learning
Tags: beginners, developer, machinelearning, datascience
Published: 2020-04-17 11:20:48

*Intro to data science, machine learning, and deep learning for software engineers and developers, with a curated list of online resources.*

---

**You are a Software Engineer.** You notice Artificial Intelligence, Machine Learning, Deep Learning, Data Science buzzwords all around. You wonder what these phrases mean, whether all this is for real and useful or is yet another hype and passing fad.

You want to figure out how it is changing or will change the computer/IT industry, and why you should care, if at all. You google about it, you read various articles, blogs, and tutorials. You get some idea but are also overwhelmed by the enormous wealth of math, tools, frameworks you discover.

>You wish if someone could give an overview, say, a map and compass suitable for an engineer, to help you embark on the journey of mastering it all. This blog post is for you.

Like you, I am a software engineer and have been through that journey. My experience is relevant, and you can use it for charting out your own course. Apart from programming, I also love to trek in the Himalayas. I see interesting parallels in my ML journey and high altitude treks. Through those parallels, I will explain how you can plan and go on an ML expedition.

[Continue reading »](https://www.ml4devs.com/articles/machine-learning-intro-for-developers/)
Sum Last Field Using Vim
Tags: vim, awk, math
Published: 2020-04-06 15:38:31

---
title: Sum Last Field Using Vim
published: true
description: Using an external command to sum a specific column
tags: vim, awk, math
---

## Let's say you have

    val:1 5.50
    this line has 6.70
    this one, even more, fields 10.15

Using awk you refer to the last column with `$NF`. So after saving the file we can save the result ina variable

    :let @a = system("awk '{t+=$NF} END {print t}' file.txt")

Now we insert the value with:

    :put a

Or on insert mode 

    <Ctrl-r>a

## A more simple solution

    :r!awk '{t+=$NF} END {print "Total: " t}' %

    :r ................... read to next line
    awk .................. awk command
    t  ................... variable to store total
    $NF .................. last field
    % .................... current file
Angular 6|7|8|9 Tutorial – Angular Components By Examples
Tags: angular, angular7, angular8
Published: 2020-04-27 19:46:53

---
title: Angular 6|7|8|9 Tutorial – Angular Components By Examples
published: true
date: 2020-04-06 15:38:11 UTC
tags: Angular,angular,angular7,angular8
canonical_url: https://codesquery.com/angular-components/
---

Modern front-end web application development changes a lot in these days. In the modern frontend web development, we break our page into different components and then link them together with one root component. In this article, we are going to learn something similar for angular which known as angular components in detail with examples. Before [...]

The post [Angular 6|7|8|9 Tutorial – Angular Components By Examples](https://codesquery.com/angular-components/) appeared first on [CodesQuery](https://codesquery.com).