Vue Development in 2019: What You Need to Know

If you’re new to Vue development, you’ve probably heard a lot of jargon terms thrown around like single-page apps, async components, server-side rendering, and so on.
You might also have heard of tools and libraries that are commonly mentioned alongside Vue like Vuex, Webpack, Vue CLI, and Nuxt.

Link: https://dzone.com/articles/vue-development-in-2019-what-you-need-to-know?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Picking an Interactive Map Theme With Vue.js

A few weeks ago, Jayson Delancey had written an awesome tutorial around switching between visual themes for a map on demand using React. This is useful when it comes to scenarios such as switching between day and night mode on a map depending on the local time or similar. The problem with this is that his tutorial was written with React when there are a bunch of other popular web frameworks available.
In this tutorial, we’re going to see almost the same material that Jayson demonstrated, but this time using the Vue.js JavaScript framework.

Link: https://dzone.com/articles/picking-an-interactive-map-theme-with-vuejs?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Utility-First CSS With Tailwind

Utility-first CSS is the notion of composing many small utilitarian classes together. With this, the aim is to allow you to create robust, scalable, and responsive user interfaces for the web.
Tailwind is a CSS framework that provides a suite of utility classes out of the box. It also allows you to compose and add your own classes where required.

Link: https://dzone.com/articles/utility-first-css-with-tailwind-nearform?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

The Modern JavaScript Landscape

It might be that by the time we end this article, a new Javascript framework would have been launched somewhere. But that’s really not in our control. Therefore, we should simply continue with what we have. At least, because of the disclaimer, we can be sure that we aren’t inventing a new framework.
There was a time when writing effective front-end code meant that you had to possess a good understanding of how HTML, CSS, and JavaScript meld together to create web pages. Well, fortunately, that’s mostly true even today. However, in the past decade, the Javascript landscape has exploded. Due to this, developers have been left scratching their heads to simply figure out what all they should know in order to build effective web applications.

Link: https://dzone.com/articles/the-modern-javascript-landscape?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Please Stop Building Inaccessible Forms (and How to Fix Them)

I regularly find inaccessible forms. In this post we’ll check out one of the common accessibility problems and fix it.

Note, today’s blog post is very heavily inspired by the Labeling Controls tutorial from w3.org.

HTML is accessible by default. This is true, with the important caveat that when you use semantic HTML properly, what you’ve built will be accessible. Now, there are lots of ways that you can mess this up. Today I’m going to focus on

Link: https://dzone.com/articles/please-stop-building-inaccessible-forms-and-how-to?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

How to Use Emmet to Speed Up Development

Writing code, especially HTML and CSS, can be a very tedious process — writing closing element tags or duplicate HTML elements that serve as the page’s structure are repetitive, monotonous tasks that take up a lot of time. Fortunately, there is a freely available plugin that can speed up this process immeasurably. Emmet is a toolkit for writing HTML and CSS that can drastically change your workflow for the better. It exists as a plugin, available for all of the most popular text editors (Atom, Brackets, Sublime Text, and even vim). While a small book would be required to explain the full breadth of Emmet’s features, this post will aim to teach the very basics of this extremely useful plugin. After you get used to its syntax, you will wonder how you ever coded/lived without Emmet.
How Emmet Works
While many of the most popular text editors have some basic form of auto-completion pre-installed; Emmet takes this to a whole new level. After inputting a value within Emmet’s syntax, hitting the launch key will transform this input into HTML and CSS far beyond what you initially typed (this launch key is the TAB key by default, but can be customized to your liking). For example, Emmet can perform all of the standard features of auto-completion, such as typing p, followed by the TAB key, will result in:

Link: https://dzone.com/articles/using-emmet-to-speed-up-your-development-work?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Advanced Basics: Bootstrap 4 With ASP.NET Core TagHelpers

The title of this post, Advanced Basics, takes the basics and fundamental concepts of what a developer has learned, whether it be a technique or library, and extends it exponentially to advance it to be something more efficient and useful for future projects.
We kick this post off by combining some Bootstrap with ASP .NET Core TagHelper goodness to provide a worthy post (maybe even a series? See below for more).

Link: https://dzone.com/articles/advanced-basics-bootstrap-4-with-aspnet-core-taghe?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Single Page Web App UI Development Thoughts, Part 2

Welcome back! If you missed Part 1, you can check it out here.
1.3. Single Page App Architectural Pattern
1.3.1. Never Use Observers
Clarification: Observers here refers to the observer in the old Ember version (not sure if it is still there). It doesn’t contain event listeners. In older Ember versions, an observer is a function triggered when a value is changed. For example, a developer can define a function like:

Link: https://dzone.com/articles/single-page-web-app-ui-development-thoughts-part-2?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev