Responsive x-tags

Custom elements are small UI components that you can re-use all over your application, while at the same time keeping you markup tidy and semantic. However, in practice, you often cannot fit the same element everywhere. Imagine the autocomplete built in the previous blog post. If you place the autocomplete in a small sidebar, you need the results appearing in a pop-over list. However, if you want to build a real search page, you want the results always visible in a clear, big area. The solution to this is a new concept, named Responsive x-tags.
Read More…

Cache queries with dates

This post is about a small tip regarding queries that include dates in the clause. If you are not careful enough, you might be taking a performance hit.

Let’s suppose you have a database table containing articles (with the same name) and there is a field named publishing_datetime. You can store articles with a future date in that table, so that an article will be auto published when that time comes. Read More…

Caching made simple

In this tutorial we will show a very simple way to implement query caching. The goal is to create something that is versatile and easy to develop and use, even for not so experienced programmers.

The main idea is to have a PHP class which will automatically do the caching for all it’s methods. In the end, each method will have an additional parameter, which will define how long till the cache (for that function results) invalidates. If the cache is valid, we fetch the already-calculated results. Else, we run the query normally, and update the cache. Read More…

Templates – NextGen Markup pt.1

I got the idea for this series of articles after looking a bit deeper at the web components introduction working draft. Pretty soon I realized that the proposed component model gives us more power over our markup and introduce concepts that up to now where available only to programming languages.

This series of guides will make a brief introduction on the 4 key pieces of web components: Templates, Decorators, Custom Elements and Shadow DOM. Keep in mind that we are talking about an editors draft, and it is in no way supported by the browsers yet. I will try to explain what it is about, offer an example and explain the base functionality of each piece. Starting with Templates.
Read More…

Detect size change of elements using transitions

While working on the Launchpad Portal, we needed to detect when some elements had their size changed (user had the option to change their width or height). However there is not native resize event triggered so we had to come up with another solution.

Searching around a bit, the most common way for something like this, would be setting a timeout and every few milliseconds check is the values have changed or if they are the save. However, as an experiment I came up with a more elegant way.
Read More…

Comparing jQuery Selectors

We were talking with some colleagues the other day about some best practices we should follow for one of Backbase‘s products that we are building, namely Launchpad. We were considering a way of separating selectors we use for styling and selectors we use as hooks for JavaScript (like everyone should do). And I suggested a convention I use in my personal projects, which is having an attribute: data-hook to use for selecting elements in JavaScript.

Read More…

1 2  Scroll to top