Building Real-Life Applications With Functional Elements of HTML 5.2

What do you do when you need a widget-like functionality? At present, there is a whole generation of developers who, as a rule, are googling for ready-made jQuery plugins. Can’t we do better than that? With the advances of web-components, we are expected to compose UIs from these building blocks. They are many. One can find one for almost any task. They are highly customizable. One can reuse the functionality, but with your own original representation. They are isolated. One doesn’t need to worry about the collisions in the compound system. But in reality, the APIs required by true web-components still have poor support in user-agents. One has to load an emulator library like Polymer. When it comes to component-based frameworks, one can painlessly import a component or rather go with a set like Material UI. But what would you say about standardized, library/framework-agnostic solution with not dependencies? Interesting that with HTML 5.1 and HTML 5.2 we get a number of new functional elements, solving classic developer tasks such as dialog, expandables, date pickers, and others. At the time of writing this article, the support for spec among browsers isn’t that good, but the elements can be polyfilled where it lacks. Let’s see what’s available and how we can use it.
Expandables With Summary/Details
A pair of elements, details and summary, were introduced in HTML 5.1 and are now widely supported. They implement a disclosure widget that can be adopted for collapse, dropdown menus, tree navigation, and other tasks. By default, any child elements of details except summary are hidden. As one clicks summary, the properties of open details change to true and the hidden content comes into view. To put it in practice, we made the following HTML:

Link: https://dzone.com/articles/building-real-life-applications-with-functional-el?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Which Meta Tags Should You Be Using in 2017?

Meta tags are those HTML tags that appear in the section of HTML documents, and they act as behind-the-scenes settings that can be interpreted by the web browser to help render the website correctly, or by search engines to help them process certain information that aids your ranking (SEO).
Let’s take a look at all of the meta tags that are relevant in 2017, as you’d be quite surprised at how many of them have been deprecated. If there’s a meta tag you don’t see here, it’s highly likely that you don’t need it anymore.

Link: https://dzone.com/articles/which-meta-tags-should-you-be-using-in-2017?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Livecoding: HackerNews App Where People Are Nice [Video]

This weekend, I tried something new: coding from a pleasant, sunny location. It didn’t go so well.
First, the internet was atrocious. My stream kept lagging and cutting off and being blurry. In the end, I had to crank the bitrate and resolution way down. That helped, sort of.

Link: https://dzone.com/articles/livecoding-hackernews-app-where-people-are-nice?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

New & Upcoming Course Highlights: HTML Basics

Every week, new courses and workshops are published to the growing Treehouse Library! Here’s a short list of what we’ve added recently, upcoming course highlights, and our weekly video update of What’s New at Treehouse. Start learning to code today with…
The post New & Upcoming Course Highlights: HTML Basics appeared first on Treehouse Blog.

Link: http://blog.teamtreehouse.com/new-upcoming-course-highlights-html-basics

New & Upcoming Course Highlights: Introducing Text Editors & Express Basics

Every week, new courses and workshops are published to the growing Treehouse Library! Here’s a short list of what we’ve added recently, upcoming course highlights, and our weekly video update of What’s New at Treehouse. Start learning to code today…
The post New & Upcoming Course Highlights: Introducing Text Editors & Express Basics appeared first on Treehouse Blog.

Link: http://blog.teamtreehouse.com/new-upcoming-course-highlights-text-editors-express-basics

Faster Page Load Using Lightweight CSS and SVG Animation (Without JavaScript)

Including animations on a web page is an exciting process. However exciting, it can be also an expensive process for your users. Common web animation tools, while effective, can create a lot of frontend bloat with large JavaScript animation libraries and multiple file requests for source images.
The end result (while pretty) can leave your user spending precious time waiting for the page to load. 

Link: https://dzone.com/articles/faster-page-load-using-lightweight-css-and-svg-ani?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Java HTML Templating With Handlebars and Undertow

Researching how to create a website in Java can be a daunting task. A few Google searches and you end up with tons of libraries and strong opinions. JSP, JSF, Spring MVC, GWT, Vaadin and many more. All of them seem like they have quite a learning curve. All we really need is to pass an object to a template and render some HTML, nothing fancy. Let’s take this a step further and follow the node/express approach of simply plugging in an HTML templating engine. Enter Handlebars – a perfect, fairly simple syntax added to plain HTML anyone should be able to pick up immediately (Yes, MVC frameworks can use this also, but do we need a framework for what a single class can do?). It also conveniently has ports in many languages. This means we can use the same templates client-side (JavaScript) and server-side if we want.
HTML Templating Utility
This is a rare case where we decided to make a simple abstraction hiding the underlying jknack handlebars implementation. Since it only really needs a few methods, we can hide the implementation and easily swap it out later. Notice how we have a few config options. When we are running locally, we want handlebars templates to be compiled on the fly and NOT cached. We also utilize HTML compression for all of the HTML-specific methods. We also offer some non-HTML templating methods. Sometimes it might make sense to abuse an HTML templating library to solve a similar problem.

Link: https://dzone.com/articles/java-html-templating-with-handlebars-and-undertow?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Three New Products Help Developers With PDFs

pdfHTML to Convert HTML and CSS to PDF
An iText 7 add-on, pdfHTML is a premium upgrade to the previous XML Worker from iText 5. The new solution provides more functionality out of the box and easier extensibility and customization.
“HTML is ubiquitous. A lot of software already outputs HTML in one way or another, and most developers know at least the basics,” said Raf Hens, iText director of product management. “As such, pdfHTML is a convenient way to integrate PDF functionality, allowing developers to use existing HTML and CSS skills and resources to quickly create PDF documents.”

Link: https://dzone.com/articles/three-new-products-help-developers-with-pdfs?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev