Browsed by
Month: February 2019

Posts

WordPress – I created a child theme, but it looks different because of Bootstrap

WordPress – I created a child theme, but it looks different because of Bootstrap

I wanted to create a child WordPress theme. All online tutorials were as simple as create two files and add several lines of code:

To my surprise – it didn’t work. To be more specific, it almost worked, but the child theme did not look exactly the same as the parent – some margins, fonts and colors were different. After several experiments, it became apparent that these problems were caused by Bootstrap being loaded after the parent’s style.css file.

Let’s see what exactly is happening to the parent and child stylesheets.

Read More Read More

WordPress – responsive tables with headers in Gutenberg editor

WordPress – responsive tables with headers in Gutenberg editor

I like the new visual editor Gutenberg in WordPress, but some of its limitations are really annoying. One of the biggest – inability to set a header in a table. The other problem is that the generated tables are not responsive, i.e. in a phone they will either be extremely squeezed or scrolled horizontally, neither being usable. A common solution is to convert the table into a list. I’ll present several plugins and workarounds for tables.

Read More Read More

Services to host source code and embed running applications – Gist, Codepen, JSFiddle, Glitch, StackBlitz

Services to host source code and embed running applications – Gist, Codepen, JSFiddle, Glitch, StackBlitz

If you want to show source code in a page or blog, create examples of running HTML/CSS/JavaScript code, or sample React/Angular/Node.js applications – you can use external services that allow hosting, versioning, embedding and even running applications.

I have checked several of them and each solution has both advantages and drawbacks. I don’t think it is possible to select a single service and use it for all cases, because they were created to fulfill different needs and different complexity.

In this article I present Github Gist, Codepen, JSFiddle, Glitch and StackBlitz, giving examples of what they could be used for.

Read More Read More

WordPress for developers – displaying source code and review of code sharing services

WordPress for developers – displaying source code and review of code sharing services

Since my blog is about coding – I have to show the code! There is nothing except simple preformatted text available out of the box, so I had to resort to other solutions. One option is using external source code repositories and another is using a WordPress plugin to beautify code.

Read More Read More

Customizing WordPress – adding breadcrumb

Customizing WordPress – adding breadcrumb

Add a breadcrumb trail to a WordPress site? Sounds like it was a matter of switching one option. Not in WordPress!

What I realized, adding a breadcrumb required four actions:

  1. Install a breadcrumb plugin.
  2. Create a child theme if you use a stock theme.
  3. Edit theme file to display the breadcrumb in a correct position.
  4. Edit theme file to style the theme.

Read More Read More

WordPress for developers – my set of plugins

WordPress for developers – my set of plugins

I have chosen WordPress as a platform for blogging due to its popularity. I’m not sure if it is the best choice for a developers’ blog as searching for a theme, fine-tuning it, searching for plugins, configuring them, bothering with limitations of visual editor (Gutenberg) – these all tasks took a lot of time and frustration. And in future, backup (application, plugins, database) will be more troublesome and I will probably have to deal with performance issues.

Read More Read More

UX: wireframe, low fidelity, high fidelity, mockup, prototype

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.

Read More Read More

Duplicated ng-content and *ngTemplateOutlet

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:

Read More Read More

JavaScript: converting values to boolean or what is false and what is true

JavaScript: converting values to boolean or what is false and what is true

What will !x return? And !!x? It depends on what is x

!x will convert any value to a boolean, and !!x will negate the previous value. When x is a boolean, !x is its negation and !!x is back the original value x. But for other types, some magic happens thanks to auto conversion.

What exactly? I’ll explain in several cases. JavaScript recognizes 7 primitive data types, of which the most prominent ones are:

Read More Read More