Front-End Development

Cardmapr N8pnhrcr73o Unsplash

Implementing Custom Play/Pause Button for Embedded YouTube Videos Using IFrame Player API

Recently, I worked on one bug where GTM tracking was breaking for an embedded YouTube video with a custom play button. The video played perfectly fine on the click of the play button, but it was not getting tracked by GTM. I didn’t find anything wrong in the code, so I researched and found that […]

Get Ahead of Headings: How to Correctly Use Headings for Accessibility

Heading Overview  For those that may not be familiar with heading levels, here is a quick run-down. Titles on your web page will have heading (<H>) tags to indicate their level of importance. Web developers use <H> tags for page titles to structure the content of the page. Not only are <H> tags used for […]

Einar H Reynis Cgset8 Wgw Unsplash

AEM Customization: Show Unpublished Reference Alert for Tagpicker

Recently, I published a blog post regarding AEM Customization: Show Unpublished Reference Alert for Content Path where I showed how to customize the Pathfield and Xffield resourceType. In doing this, I was able to showcase how to create a notification for the content author as to whether the selected content path is published or not. […]

Close Up Software Developer Programming Code On Screen

CSS Transform Property: Four Common Uses

The CSS transform property allows a developer to perform a number of different actions on an element that changes how that element appears in the browser.  While the realm of possibilities for what you can do with one or more of the transform values is very large, here are some common uses to save time […]

Headphones

Landmark Your Way into Accessibility

HTML5 semantic sectioning elements are great for identifying page structure. Landmark elements such as <header> <nav> <main> <footer> <aside> <section> <article> and <form> are much easier to identify than a sea of <div>s, and provide accessible structure for screen reader users without having to add any ARIA attributes. Using these elements properly helps developers understand […]

Abstract Lights

Defer offscreen images in Episerver

Lazy loading images is a technique for modern web developers where you instruct the client’s browser to only download images as they are needed.  This leads to tremendous performance improvements, as client devices do not waste bandwidth downloading assets which are not being rendered.  To achieve this, we’ll use some client side mechanisms from css-tricks.com […]

Top 3 Reasons Why Episerver’s React-Based Front-End CMS Is Really, Really Cool.

2020 has offered us some big surprises that I don’t think any of us could have predicted. The most obvious one I won’t waste breath mentioning, but the other surprise that came up near the end of 2019 as we looked to kick off a new decade was Episerver’s acquisition of Insite. With this acquisition, […]

Accessibilty W3c Standards Brainjocks@1x

Accessibility: A, AA or AAA? That is the question.

Accessibility: What it takes to achieve the highest level of accessibility while understanding and managing the trade-offs Why is Accessibility important? Every website has its target audience and site owners who always want to make sure their site attracts as many visitors as possible from its target audience. One way to achieve this is to […]

Tools@1x

Toolset for the Elite Web Developer

Remember the good ol’ days when you were learning how to code, and all that mattered was getting the code to compile and making sure the site rendered what you expected? You probably tried to keep your code organized and readable; after all, you had to be able to understand what you wrote. Maybe you […]

Typing On Laptop@1x.jpg

Background to Foreground Image Solution for Responsive Web Development

Proper design plays a key role when it comes to the topic of responsive web design (RWD). But sometimes we don’t have the luxury of a flushed out design to begin with. We often have to manage and make practical use of the assets in hand, and in some cases, background images can become a […]

Javascript Laptop@1x.jpg

Sass Maps and Iterators

One of the top rules for programmers is to stay DRY – don’t repeat yourself. CSS preprocessors are great for helping UI developers accomplish this goal. However, there are still some instances where it seems as if you can’t help but repeat yourself. Here’s a common example of background positions using a sprite: Typing “background-position” […]

Javascript Abstract@1x.jpg

8.1 Experience Editor JavaScript APIs

[su_note note_color=”#fafafa”]There are parts of Sitecore APIs that are well understood, widely used, and probably won’t change without a really good reason. And then there are relatively new APIs – some introduced along with new product features (e.g. xDB in 7.5, Content Testing in 8.0) and others added to support the shift in the underlying […]

Load More