teleren/devto huggingface dataset:
Quicklink - a small JS library to fast load subsequent pages and improve user experience
Tags: showdev, webdev, javascript, performance
Published: 2019-06-12 09:25:04

---
title: Quicklink - a small JS library to fast load subsequent pages and improve user experience
published: true
tags: ['showdev', 'webdev', 'javascript', 'performance']
canonical_url: https://learnwithparam.com/blog/quicklink-to-fast-loading-susequent-pages-in-website/
---

Most of the modern web frameworks handle loading subsequent pages faster by different techniques like code splitting, front end caching, service workers etc.

Some other common techniques to boost site speed are,

- pre-fetching assets for next pages during idle time
- pre-load next urls and cache it

Several companies like `medium`, `wikipedia`, `dev.to`, `quora` loads their pages faster using similar techniques.

These technique require lot of smartness based on user’s settings, device and network speed etc.

## Introducing Quicklink

A small javascript library (< 1Kb) which makes the subsequent page load faster and do some smart loading techniques too.

### How it works

- It loads all the links on the page when the link is in viewport (using `Intersection Observer`)
- It won’t load those links more than once using its smartness
- It won’t load these techniques if user is on slow connection (using `navigator.connection.effectiveType`) and if user opt in for saving data in mobile devices (using `navigator.connection.saveData`)
- It won’t interrupt the site content, it start its operation only on Idle-time (using `requestIdleCallback`)

Check out the docs here for more info on the library. It is open sourced by Google chrome labs

- [https://github.com/GoogleChromeLabs/quicklink](https://github.com/GoogleChromeLabs/quicklink)

### How to use it on your site

```js
// ES6 way
import quicklink from 'quicklink/dist/quicklink.mjs';
quicklink();

<!-- Include as script -->
<script src="dist/quicklink.umd.js"></script>
<script>
  /*
        you can load the script DOMContentLoaded, or Window load callbacks,
        it won't cause any issues, since quicklink start executing only in browser idle time.
    */
  quicklink();
</script>
```

quicklink accepts lot of options, You can find it in documentation in the [github link](https://github.com/GoogleChromeLabs/quicklink).

Ignoring few URL’s are the widely used option, most other options have default values.

Example, for ignoring all URL with extensions `.pdf`, URL with sub-string `/api` and also links which explicitly asked to `noprefetch`

```js
quicklink({
  ignores: [
    // ignore all /api/* urls
    /\/api\/?/,
    // ignore .pdf files
    uri => uri.includes('.pdf'),
    // ignore all links, scripts which has explicit noprefetch
    (uri, elem) => elem.hasAttribute('noprefetch'),
  ],
});
```

Quicklink is easy to setup and smart enough for most cases to optimize subsequent page load experience. It doesn’t solve the first load experience though.

Hope it improves the performance of your website and improves the user experience. Try it out, its one exciting library to test web performance for users.
set state in two functions isnt working while excuting both in one method
Tags: react
Published: 2019-05-01 23:05:14

---
title: set state in two functions isnt working while excuting both in one method
published: true
description: i call 2 functions in "onKeyDown" and in both functions i set the state. and only the first one actually set the state. please help
tags: react
---
Have fun with GreenSock's Draggable and Hello Kitty🎀
Tags: svg, webdev, beginners, tutorial
Published: 2019-05-01 21:29:49

---
title: Have fun with GreenSock's Draggable and Hello Kitty🎀
published: true
description: Quick video to show how to use GreenSock's Draggable plugin. 
tags: #svg, #webdev, #beginners, #tutorial
---
A quick video to show you some of the ways you can use GreenSock's Draggable Plugin. I show you how I created a drag and drop Hello Kitty dress up in just a few lines of code with GreenSock. 


Hello Kitty CodePen you can fork and play around with
[Hello Kitty](https://codepen.io/cgorton/pen/XQLeBq?editors=0010)
Why you should use COPY instead of ADD when building Docker images
Tags: docker, build, images, devops
Published: 2019-05-01 19:31:25

---
title: Why you should use COPY instead of ADD when building Docker images
published: true
description: 
tags: docker, build, images, devops
canonical_url: https://www.lirantal.com/blog/2019-05-01_why-you-should-use-copy-instead-of-add
---

Docker provides two commands for copying files from the host to the Docker image when building it: `COPY` and `ADD`. The instructions are similar in nature, but differ in their functionality:

* COPY — copies local files recursively, given explicit source and destination files or directories. With COPY, you must declare the locations.
* ADD — copies local files recursively, implicitly creates the destination directory when it doesn’t exist, and accepts archives as local or remote URLs as its source, which it expands or downloads respectively into the destination directory.

While subtle, the differences between ADD and COPY are important. Be aware of these differences to avoid potential security issues:

* When remote URLs are used to download data directly into a source location, they could result in man-in-the-middle attacks that modify the content of the file being downloaded. Moreover, the origin and authenticity of remote URLs need to be further validated. When using COPY the source for the files to be downloaded from remote URLs should be declared over a secure TLS connection and their origins need to be validated as well.
* Space and image layer considerations: using COPY allows separating the addition of an archive from remote locations and unpacking it as different layers, which optimizes the image cache. If remote files are needed, combining all of them into one RUN command that downloads, extracts, and cleans-up afterwards optimizes a single layer operation over several layers that would be required if ADD were used.
* When local archives are used, ADD automatically extracts them to the destination directory. While this may be acceptable, it adds the risk of zip bombs and [Zip Slip vulnerabilities](https://snyk.io/research/zip-slip-vulnerability) that could then be triggered automatically.


---

This tip is part of a complete [10 Docker image security best practices](https://snyk.io/blog/10-docker-image-security-best-practices/) you should adopt. Thanks for reading and to [Omer Levi Hevroni](https://twitter.com/omerlh) who worked with me on it.


The original blog post includes a high-resolution printable PDF like the snippet you see below. [Check it out](https://snyk.io/blog/10-docker-image-security-best-practices/)
need javascript json tree view
Tags: javascript, json
Published: 2019-05-01 21:07:11

---
title: need javascript json tree view
published: true
description: need json tree view js based
tags: javascript, json
---
i need a json tree view js based, but most json tree view can only hide the value if the value is an array if not it will display directly and render it as regular syntax highlighter, is there a tree view that collapse the value even if the value is a string
Are there any API specification formats for WebSockets?
Tags: help, websocket, api
Published: 2019-05-01 19:03:34

---
title: Are there any API specification formats for WebSockets?
published: true
tags: help,websocket,api
---

The WebSocket protocol allows sending messages back-and-forth between a server and a client, but it does not define the structure of these messages. They can be strings or blobs, but how these strings/blobs are structured is left to the user.

This is not a bad thing - you want this layer of abstraction to be simple so it'll be easy to implement and to build on - but with HTTP - which is similar in that way (you can only send plaintext with some headers) there are many protocols built on top of it that add this structure: [OpenAPI](https://www.openapis.org/), [OData](https://www.odata.org/), [XML-RPC](https://en.wikipedia.org/wiki/XML-RPC) and many more.

Some of these protocols offer schema generators - you write your protocol's specification once in the protocol's favorite format, and it generates types and/or functions for using your protocol in many different languages.

I tried looking for something similar for WebSocket, but all I could find is [AsyncAPI](https://www.asyncapi.com/). It has a [generator](https://github.com/asyncapi/generator), which can output using templates - but it only has templates for Java (Spring, actually), HTML and Markdown (the last two are for generating docs) and googling for third-party templates yielded nothing (except results from their issue tracker, which has some requests to add templates for more languages).

Is there anything more complete than AsyncAPI? If this is the best we have I'll use that - good documentation generation is already a bonus, and I can probably contribute myself templates for the languages I use - but if there is something better I'd rather just use that.
Keep It Stupid-Simple
Tags: scalability, complexity, productivity
Published: 2019-05-01 20:19:15

We, humans, have a natural tendency to over complicate things. That's because our brain cares too much about the future and its infinite possibilities.

When talking about software development, it's really common to see developers and even software architects complicating systems and ending up with unmaintainable little monsters. Complexity is not something you look for. Find beauty in simplicity.

Complexity comes with time whenever you need new features or scale. Why would you build a super complex system with tons of classes, modules, design patterns and other jibber jabber if you don't have any customers to use the product yet?

Don't be tricked by possibilities. Let the problem come first, then the solution.
Why learning the product is a crucial first step to take in development.
Tags: beginners, productdevelopment, crackthecode, codeforsuccess
Published: 2019-05-01 19:33:38

---
title: Why learning the product is a crucial first step to take in development. 
published: true 
tags: #newbies #productdevelopment #crackthecode #codeforsuccess
---

I just started working as a Software Engineer on the product development team a few months ago. As a new associate, my team feels that I should learn the product first prior to starting code. Here are a few reasons why I believe this is an effective approach:

<b> You can effectively communicate with your teams.</b>

Depending on the language, development concepts are similar in any place you work. You get the opportunity to learn a new language and a new framework as it is released but very few developers are able to effectively communicate what they are working on or learning simply because they fail to understand the product. 

<b>You can effectively develop the product when you understand it.</b>

When developers successfully understand the product, they not only are able to better communicate with their teams, but they can work on improving the product by automating the process. As technology advances, companies are starting to learn the importance of automating parts of their process and improving the legacy code. This is a time-consuming process, however, if you learn the product first, you are able to add value quicker in the long run through strategic communication and code.

<b> You have a better understanding of your industry.</b>

There has always been and will be a competing product in the market. If you take time to learn the product as a developer you will have a better understanding of competing products and how they add value to the customers your products serve. 

<b> Most importantly, you understand if this is the work that drives you to come back to work everyday.</b>

If you don't feel passionate about your product, your role isn't going to help you much in developing passion long-term. Understanding the purpose of your product and how it helps customers every single day will lay out the vision for #whyyourworkmatters.
Advice for (first time) remote workers
Tags: advice, career, remote, discuss
Published: 2019-05-01 19:32:04

---
title: Advice for (first time) remote workers
published: true
description: 
tags: advice, career, remote, discuss
---

In a week, I start a new job, at a new company. My team is all, or mostly remote (telecommute) which is a change from what I am used to (in the office with occasional work-from-home days). 


What advice do you have for me? 

Specifically curious with how best to keep in touch with your boss about what you have been working on, so that you can show progress, stay top of mind etc.
Emotional Empathy: Feel What They Feel
Tags: career, advice
Published: 2019-05-01 19:15:20

When we last left off, we discussed the merits of cognitive empathy and how being able to take another person's perspective could be valuable in interpersonal relationships. Today's topic -- Emotional Empathy -- is another building block that builds your interpersonal skills as well.

By definition, emotional empathy involves directly feeling the emotions that another person is feeling. For me, it is the type of empathy that I most closely relate the term "empathize" with. Think of this as sharing in the emotional journey that someone you know is going through.

So why is this useful? Why is feeling what someone else feels in a given situation important? How does this make you a better coworker, manager, or friend? 

Emotional empathy is the key to becoming a more complete, compassionate individual. This compassion enables you to become a more respected peer and/or mentor. Its the quality that people will remember you fondly for, and is the quality that most organizations should prioritize when bringing in new people.

It is feasible to assume that, when filling your organization with highly emotionally empathetic folks, you will foster a welcoming culture that makes everyone feel included and avoids introducing bad faith actors or others who would seek to do harm to members of your organization in one way or another.

This can also serve as a lesson to those who act inappropriately towards others and how they can curb that behavior. Think of this situation: You are working with someone else on a very hard technical challenge. You think you see a way forward, but your pairing partner does not think your approach accounts for a relevant set of edge cases. You respond by telling them that they are being difficult and that they should just move out of your way if they aren't going to be helpful.

Remember that golden question? "How does this make them feel?" Ask it to yourself here. The answer will probably be along the lines of "Pretty terrible." Now apply some emotional empathy, which will make you share that feeling and hopefully give you some context for how your actions affect others.

I am a huge advocate for embracing emotional empathy and valuing it highly in the list of skills any organization looks for in its members. What do you have to lose from surrounding yourself with compassionate individuals?
SQL pronunciation
Tags: discuss, sql
Published: 2019-05-01 19:02:10

---
title: SQL pronunciation
published: true
description: How is it pronounced?
tags: discuss, sql
---

Is SQL pronounced as *S-Q-L* or as *sequel*?

Both are listed on Wikipedia, but which one is the most popular or accepted way to pronounce it? Are there any reasons why one is better that the other?
An async/await gotcha
Tags: javascript
Published: 2019-05-01 18:46:22

---
title: An async/await gotcha
published: true
description: It's not quite a promise
tags: javascript
cover_image: https://thepracticaldev.s3.amazonaws.com/i/01r59bisp30khppm8cxh.jpg
---

## async is not quite promises (yet?)

We've been moving from promises to async/await in our codebase, and for the most part it's been pretty smooth. Fewer lines of code, more expressive, etc, etc.

But we did have one line of code that was checking to see if a passed variable was a promise or not:

```js
if (promise instanceof Promise) ...
```

Turns out this fails for async... sometimes.

In node 8, it gives false:

```js
(async () => {})() instanceof Promise
// -> false
```

In chrome, it gives true: 
```js
(async () => {})() instanceof Promise
// -> true
```

My assumption is that `true` is the correct response, and that this is a bug to be fixed in node (probably already).

In the meantime, we're using

```js
if (promise instanceof Promise || promise.constructor.name === 'Promise') ...
```

And I'm still

<img src="https://thepracticaldev.s3.amazonaws.com/i/01r59bisp30khppm8cxh.jpg">
Vagrant environment for OpenGRM
Tags: vagrant, openfst, opengrm, fst
Published: 2019-10-06 22:53:33

---
title: Vagrant environment for OpenGRM
published: true
tags: vagrant,openfst,opengrm,fst
canonical_url: https://ofdigitalwater.postach.io/post/vagrant-environment-for-opengrm
---

Recently I uploaded my [Vagrant](https://vagrantup.com/) environment for [OpenGRM](http://www.opengrm.org) to the [GitHub repository](https://github.com/wincentbalin/opengrm-vagrant). The provision script, [install-opengrm.sh](https://github.com/wincentbalin/opengrm-vagrant/blob/master/install-opengrm.sh), should install OpenFST/OpenGRM on any Linux computer it runs. Should you decide to run the provision script by hand, consult the [Vagrantfile](https://github.com/wincentbalin/opengrm-vagrant/blob/master/Vagrantfile) to see the required software packages.

The list of OpenFST/OpenGRM projects installed:

- [OpenFST](http://www.openfst.org)
- [OpenFST Baum-Welch library](http://www.openfst.org/twiki/bin/view/Contrib/FstContrib)
- [OpenFST categorial semi-ring](http://www.openfst.org/twiki/bin/view/Contrib/FstContrib)
- [OpenGRM NGram library](http://www.opengrm.org/twiki/bin/view/GRM/NGramLibrary)
- [OpenGRM Thrax grammar compiler](http://www.opengrm.org/twiki/bin/view/GRM/Thrax)
- [OpenGRM Pynini grammar compiler](http://www.opengrm.org/twiki/bin/view/GRM/Pynini)
- [OpenGRM SFst library](http://www.opengrm.org/twiki/bin/view/GRM/SFstLibrary)

The versions of the packages installed are at the head of the provision script.

The software comes licensed under the _Apache License 2.0_.
Top 7 business pain points solved by custom CRM
Tags: crm
Published: 2019-05-01 17:51:27

---
title: Top 7 business pain points solved by custom CRM
published: true
description: For $1 invested into Customer Relationship Systems, companies get $8.71 in revenue. Ready-made solutions often come with painful drawbacks. But does it mean you need a custom CRM?
tags: crm
cover_image: https://www.mindk.com/blog/wp-content/uploads/2019/04/teddy-teddy-bear-association-ill-42230-1920x1080.jpeg
canonical_url: https://www.mindk.com/blog/custom-crm-benefits/
---
Customer relationships lie at the heart of every business. Selling is important and every dollar invested into a CRM system yields up to $8.71. With hundreds of vendors on the market, it’s natural to go the easiest way and buy an off the shelf software. But there are situations when it’s better to develop a custom CRM.

If used correctly, CRM can improve productivity by 30%. – Salesforce.

This productivity boost can be offset by a number of issues that come with ready-made CRM:
1. Costs that spiral out of control;
2. Too much time spent on onboarding;
3. Costly integration with other products (especially if you use custom solutions);
4. Poor scaling;
5. Insufficient automation;
6. Data migration issues;
7. Lack of custom features and workflows, etc.

Now, let’s see how custom CRM solutions stack up against these issues.

[Continue reading...](https://www.mindk.com/blog/custom-crm-benefits/)
Why MVP app is the ONLY way to start up a software product
Tags: mobileapp, startup, application, mpv
Published: 2019-05-01 17:49:09

---
title: Why MVP app is the ONLY way to start up a software product
published: true
description: We have analyzed the most critical problems of startups and found out how MVP app can fight them off and become a head start for your business journey.
tags: mobileapp, startup, application, mpv
cover_image: https://www.mindk.com/blog/wp-content/uploads/2019/04/cheerful-colleague-desk-1169953-1920x1080.jpg
canonical_url: https://www.mindk.com/blog/mvp-app-is-the-only-way-to-start-up/
---
MVPs are often the beginning for many startups. In this article, we will find out the exact business wins you may get by utilizing a Minimum Viable Product approach for your software idea.

Eric Ries, the author of Lean Startup wrote: “We must learn what customers really want, not what they say they want or what we think they should want.”

Well, unless you have a swimming pool filled with money which you can spend on professional customer research, you would likely start small and see if customers really want your product.

The concept of Minimal Viable Product aims to ensure that the strongest features of the app respond to your customer needs while saving you time and money. Adding features and functionality to a product gradually, in parallel with working on responses from customers, is a way more effective approach than launching a full-featured product.

[Continue reading...](https://www.mindk.com/blog/mvp-app-is-the-only-way-to-start-up/)
JFrog & Shippable – The  Synergy
Tags: cloud, cicd, devops, k8b
Published: 2019-09-05 21:04:38

---
title: JFrog & Shippable – The  Synergy
published: true
tags: cloud,ci/cd,devops,k8b
canonical_url: https://greenido.wordpress.com/2019/05/01/jfrog-shippable-the-qa/
---

In the video below we talk about [JFrog](https://jfrog.com) –[Shippable](https://www.shippable.com/) acquisition and did our best to answer some of the questions, we got over the last couple of weeks.

### What is Shippable?

Shippable provides software organizations with the ability to optimize and accelerate the process of shipping software by giving them an “Assembly Lines” platform that borrows concepts from the world of manufacturing and helps them easily achieve Continuous Delivery. Cutting-edge modern companies like Facebook, Amazon, Google, and Netflix have already built homegrown versions of Assembly Lines after spending years of effort and millions of dollars. You can ship applications as rapidly as these companies by leveraging Shippable.

### JFrog

JFrog’s solution is a fully automated pipeline for distributing trusted software releases. It connects all developers and DevOps engineers to end devices and ensures software flows quickly and free from interruption. There are many good (starting) points of integration and it can be customized to the current needs of your company. For more about the enterprise platform read here: [https://jfrog.com/enterprise-plus-platform/](https://jfrog.com/enterprise-plus-platform/)

### So Where is the synergy?

There are many benefits to all the current users of Artifactory, X-Ray and other JFrog products. The ability to leverage the meta-data integration and to use it in your CI/CD pipelines is one advantage. There are few mores and the plans are really existing. Please check the video below for the full details.

{% youtube olVmfDnF1vI %}
A simple (and small ~1kb) redux inspired reducer for handling state, actions, reactions..
Tags: react, flux, redux, javascript
Published: 2019-05-01 16:51:47

---
title: A simple (and small ~1kb) redux inspired reducer for handling state, actions, reactions..
published: true
description: Made this because I like the flux/redux ideology but hate the boiler plate and added dependancies. I thought I'd have a crack at taking the same concept and making a simpler implementation. Works well with React & React Native but can be combined with any front end library, or even vanilla JS template literals.

tags: react, flux, redux, javascript
---

Made this because I like the flux/redux ideology but hate the boiler plate and added dependancies. I thought I'd have a crack at taking the same concept and making a simpler implementation. 

Works well with React & React Native but can be combined with any front end library, or even vanilla JS template literals.

Github: https://github.com/alexfoxy/juicr.js
React ToDo Example: https://codepen.io/alexfoxy/pen/eowpdb
Vanilla JS ToDo Example: https://codepen.io/alexfoxy/pen/wZLWpp