Posted on

Make a Skype Bot with Electron & the Microsoft Bot Framework

David Marcus, VP of Messaging Products at Facebook, gave a talk at Web Summit in November about Facebook’s involvement with chat bots, and it was quite clear Facebook has big plans for enabling customers and business owners to integrate not only customer support into Messenger chat but also some interactions which you would expect to […]
Continue reading %Make a Skype Bot with Electron & the Microsoft Bot Framework%

Link: https://www.sitepoint.com/skype-bot-electron-microsoft-bot-framework/

Posted on

Write Practical Shell Scripts

In the last post, we talked about regex, and see how to use them in sed and awk for text processing. Additionally, we discussed Linux sed commands and awk commands. During the series, we’ve written small shell scripts, but we didn’t mix things up. I think we should take a small step and write a shell script that can be somewhat useful.
The main reason for learning to write a shell script is to be able to create your own Linux utilities. Understanding how to write useful and practical scripts is important. Sometimes, however, it helps to do something fun to learn a concept or skill. The scripts in this post can be lots of fun! And they help empower the concepts behind the script.

Link: https://dzone.com/articles/write-practical-shell-scripts?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Posted on

How to Build Your Own Progressive Image Loader

You may have encountered progressive images on Facebook and Medium. A blurred low-resolution image is replaced with a full-resolution version when the element is scrolled into view:

The preview image is tiny – perhaps a 20px width highly-compressed JPEG. The file can be less than 300 bytes and appears instantly to give the impression of fast loading. The real image is lazy-loaded when required.
Progressive images are great but the current solutions are quite complex. Fortunately, we can build one with a little HTML5, CSS3 and JavaScript. The code will:

be fast and lightweight – just 463 bytes of CSS and 1,007 bytes of JavaScript (minified)
support responsive images to load alternative versions for larger or high-resolution (Retina) screens
have no dependencies – it will work with any framework
work in all modern browsers (IE10+)
be progressively enhanced to work in older browsers or when JavaScript or image loading fails
be easy to use.

Our Demo and GitHub Code
Here’s what our technique will look like:
See the Pen responsive-image by SitePoint (@SitePoint) on CodePen.

Download the code from GitHub
The HTML
We’ll start with some basic HTML to implement our progressive image:
[code language=”html"]

<img src="tiny.jpg" class="preview" alt="image" />
</a>
[/code]
where:

full.jpg is our large full-resolution image contained in the link href, and
tiny.jpg is our tiny preview image.

We already have a minimal working system. Without any JavaScript – or in older browsers where it may fail – the user can view the full image by clicking the preview.
Both images must have the same aspect ratio. For example, if full.jpg is 800 x 200, it has a resulting aspect ratio of 4:1. tiny.jpg could therefore be 20 x 5 but you should not use a 30px width which would require a fractionally impossible 7.5px height.
Note the classes used on the link and the preview image; these will be used as hooks in our JavaScript code.
To Inline or Not Inline Images
The preview image can also be inlined as a data URI, e.g.
[code language="html"]
<img src="data:image/jpeg;base64,/9j/4AAQSkZJ…" class="preview" />
[/code]
Inlined images appear instantly, require fewer HTTP requests and avoid additional page reflows. However:

it takes more effort to add or change an inline image (although build processes such as Gulp can help)
base-64 encoding is less efficient and is typically 30% larger than binary data (although this is offset by additional HTTP request headers)
inlined images cannot be cached. They will be cached in the HTML page but could not be used on another page without re-sending the same data.
HTTP/2 lessens the need for inline images.

Be pragmatic: inlining is a good option if the image is used on a single page or the resulting code is small, i.e. not much longer than a URL!
The CSS
We start by defining the link container styles:
[code language="css"]
a.progressive {
position: relative;
display: block;
overflow: hidden;
outline: none;
}
[/code]
Continue reading %How to Build Your Own Progressive Image Loader%

Link: https://www.sitepoint.com/how-to-build-your-own-progressive-image-loader/