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.
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.
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.
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
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:
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).
Welcome back! If you missed Part 1 and/or Part 2, follow those links to check ’em out!
2. Large-Scale UI Design
Here, large-scale means data rich. In this section, I will discuss some common patterns used in large-scale UIs.
Angular change detection helps us reflect our component data to the user. If you don’t use it properly, you can easily hurt your front-end performance.
In this post, I’ll use Chrome Dev Tools for measuring the performance.
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: