3 methods to retrieve an asset in Angular CLI
This post was inspired by a question on StackOverflow about loading (content) of an SVG file in Angular. In general, about retrieving the content of any file.
…Posts
Automatically enhance headers with hierarchy, links and smooth scrolling with offset
There are several things useful in a longer document:
- showing position of given heading in the structure
- ability to create links to a heading
- smooth scrolling to internal links
- offset for scrolling if the top header covers some of the contents
Programming paradigms in JavaScript – callbacks, Promise, async/await, promisify, functional Ramda and reactive RxJS
As a quick exercise, I wanted to read all URLs from my page’s sitemap instead of crawling the site. Just after I added a nested callback I decided to apply the Single Responsibility Principle and convert calls to Promises. Later I experimented with async/await and automatic conversion with Node’s promisify. Finally, I rewrote the solution in functional style using Ramda and reactive using RxJS. Read on to follow the evolution of callbacks in JavaScript.
…CSS – two headers – big and smaller sticky
In modern web, you often see pages that have a big fancy header with a menu. It would be impractical to keep that menu visible all the time when scrolling because it would occupy too much of screen space. Therefore those pages often introduce a smaller header just with the navigation and logo that will be displayed as user scrolls down. I will show how to easily create such a header and add some animation to it.
…JavaScript – hoisting, var, let, const
This post is a quick summary of the differences in JavaScript variable declaration.
Before ES2015 (previously named ES6), there was only one keyword to declare variables: var. The newer standard introduced two extra useful keywords: let and const.
Briefly:
vardeclares “almost global” variablesletdeclares block variablesconstdeclares block read-only variables
Explanation follows.
…WordPress – add custom widgets on home page
I once had a desire to provide a list of shortcuts on the home page for my blog’s new users. I didn’t like the default WordPress’ blog page to be just a list of posts. I didn’t think that sidebar widgets grouping posts by date, category or tag would be helpful enough to grasp the versatility of the topics I cover here. I wanted to display a clear list of links with what a user can read about.
…Add Jasmine unit testing support to Angular in StackBlitz
I mentioned StackBlitz in the post about online code editors. This service allows for creating i.a. running Angular applications. Once I wanted to execute unit tests written in Jasmine inside it, and I hit a lot of troubles. Finally, I managed to resolve them all.
…Angular CLI: Different ways to include assets
In this article I will discuss several methods of adding and referring to static files in an Angular CLI application – may they be images, fonts or scripts:
- when the assets are in the
assetsfolder - when the assets are in any other folder
- when the assets are in the
node_modulesfolder
UX: wireframe, low fidelity, high fidelity, mockup, prototype
This article is part of User Interface (UI) and User Experience (UX) dictionary.
Page’s interface can be designed with various level of detail and purpose. Below you can find several common terms used in UI/UX design: low-, medium-, high-fidelity wireframe, prototype and mockup.
…Duplicated ng-content and *ngTemplateOutlet
Recently (Angular component with varying appearance) I wrote how to use the same <ng-content> twice in a switch case.
Today I hit upon explanation of this fact in a GitHub issue (https://github.com/angular/angular/issues/22972) and I found another problem.
Namely, it is not possible to display at the same time twice the same <ng-content> even if it is packed inside a <ng-template>. Therefore the following example will not work: