Lazy loading images means loading images on websites asynchronously — that is, after the above-the-fold content is fully loaded, or even conditionally, only when they appear in the browser’s viewport. This means that if users don’t scroll all the way down, images placed at the bottom of the page won’t even be loaded.

Why Should You Care About Lazy Loading Images?

There are at least a couple of excellent reasons why you should consider lazy loading images for your website:

• If your website uses JavaScript to display content or provide some kind of functionality to users, loading the DOM quickly becomes critical. It’s common for scripts to wait until the DOM has completely loaded before they start running. On a site with a significant number of images, lazy loading — or loading images asynchronously — could make the difference between users staying or leaving your website.
• Since most lazy loading solutions work by loading images only if the user has scrolled to the location where images would be visible inside the viewport, those images will never be loaded if users never get to that point. This means considerable savings in bandwidth, for which most users, especially those accessing the web on mobile devices and slow-connections, will be thanking you.

<img data-src="image.jpg" alt="test image">

img {
  opacity: 1;
  transition: opacity 0.3s;
}

img[data-src] {
  opacity: 0;
}

JavaScript then adds the src attribute to each img element and gives it the value of their respective data-src attributes. Once images have finished loading, the script removes the data-src attribute from img elements altogether:

[].forEach.call(document.querySelectorAll('img[data-src]'),    function(img) {
  img.setAttribute('src', img.getAttribute('data-src'));
  img.onload = function() {
    img.removeAttribute('data-src');
  };
});

Website

As we look forward to 2017 — a year that hopefully won’t be plagued by the passing of so many of the world’s greatest artists and performers — the big question on every designer’s mind has to be: what will define design in 2017?

So with that in mind, I decided to ask Webflow’s own designers what trends they think will dominate the world of digital design in 2017. (And wrote up a little commentary on their thoughts.) First, let’s hear from Webflow’s Chief Design Officer, Sergie Magdalin.

Layouts that let content shine

The arrangement of design elements within a given structure should allow the reader to easily focus on the message, without slowing down the speed of his reading

The last few years have seen a sea change in how people view design’s role in business. Design has shifted from a late-in-the-process “optimization” stage where designers swooped in to sprinkle on some “pretty” like mystical fairy dust to a real competitive advantage.

It’s been an amazing evolution to watch.

And a fascinating element of that evolution has been the shift back toward a focus on content: the meat on the bones of the web. Designers worldwide have realized that people visit websites for their content — whether it’s raging tweetstorms, thoughtful long-reads, or the latest “user-generated” meme — and that design’s ultimate role is to present content in an intuitive, efficient, and “delightful” way.

That’s one reason for the shift away from skeuomorphic design toward “flatter,” more minimalist design approaches, as seen in Google’s Material aesthetic, and really, across the web and our various devices.

Of course, as Newton’s third law states, for every action, there’s an equal and opposite reaction. Many designers feel that the flat design trend has taken the “soul” out of design. We expect to see this conversation continue across 2017, but look forward to it becoming a productive dialogue that never loses sight of the heart of our design work: the content.

Better collaboration between designers, and between designers and developers

As design has taken a greater and more influential role in shaping businesses, more and more attention has been paid to designers’ collaboration with both their fellow designers, and their developer colleagues.

The emphasis on designer collaboration has arisen in part from the massiveness of the web and mobile apps we’re building these days. Gigantic platforms like Google, Facebook, Twitter, and LinkedIn require not only huge design teams working on disparate aspects of the platform, but also better ways for designers to stay on the same page — and that means more collaboration, and better communication.

All kinds of tools have arisen to help facilitate that collaboration, from the shared templates and dashboards in Webflow’s Team plan to the real-time, shared canvas of Figma — and you can bet 2017 will bring both improvements to those platforms, and all-new options.

On the designer-developer collaboration front, lots of attention has been focused on the all-important handoff stage. Where designers used to hand off massive packages of static images and specs, they’re now sharing dynamic visualizations enabled by tools like InVision, Marvel, and UXPin — or doing one better by exporting real, production-ready code from Webflow.

Read Article

Some ideas for previewing or just playing with folders on hover. The idea is to show a little animation when hovering a folder icon and reveal some kind of preview for what's inside.

WebsiteExample

A CSS survival kit. Includes only the essentials to make camp.

About Tent CSS

Sleeping in a tent is certainly not a luxurious experience. It is rugged and rudimentary, but it provides the basic necessities needed for survival.

Pulling inspiration from outdoor survival, Tent CSS is unglamorously simple and robust. The framework is designed to be used as a foundation for building websites. We'll leave application and kitchen sink development to other frameworks.

With zero Javascript dependencies, Tent CSS is as the name says, just CSS (Sass too). So yeah, you're not going to see fancy components like tab drawers, accordions, and carousels in this framework. As most development goes, you usually already have a go-to favorite in mind for these more complex components anyways.

Browser Support

Tent CSS uses autoprefixer to make most modern features compatible with many older browser versions. This framework may not be best suited for you if you are looking to support legacy browsers.

• Chrome v21+
• Firefox v28+
• Safari v6.1+
• Edge
• Internet Explorer 11

Website

Lightweight & friendly front-end framework to get job done.

Website

Table Dragger is a minimalist plain Table-dragger is a minimalist plain Javascript library for building reorderable drag-and-drop table.

[otw_shortcode_button href="https://sindu12jun.github.io/table-dragger/" size="medium" icon_position="left" shape="square" css_class="codehints-post" target="_blank"]Website[/otw_shortcode_button] [otw_shortcode_button href="https://github.com/sindu12jun/table-dragger" size="medium" icon_position="left" shape="square" css_class="codehints-example" target="_blank"]Download[/otw_shortcode_button]  

Scrollbear is a tool that maintains the container scroll position when images loaded. When images loaded, the scroll position will jump and cause a unfriendly experience. Scrollbear will trace the container height and maintain the scroll position when the images loaded and container height change.

http://jquery-plugins.net/scrollbear-maintain-scroll-position-when-images-loaded

"CodeHints" site review. Developed by Wordpress team.

Website

Remember: most mobile devices are also phones! So, why not create link-to-call actions? If you’re creating a business guide, or even for your own unique phonebook, most people will prefer to call a person instead of filling in a form on the device. <a href="tel:+1800229933">Call us free!</a>

http://www.mobilexweb.com/blog/click-to-call-links-mobile-browsers

Custom Built and Crisp Icon Fonts

http://icomoon.io/