View
Linked content

Tailwind versus BEM

The linked article compares two approaches for writing CSS:

  • A component library (like BEM)
  • Utility classes (like Tailwind)

It's good to know the pros and cons of each approach. Although we default to BEM, you might encounter a utility approach in a clinet project.

Repeats

CSS: Combining different length units with calc()

calc() lets you mix CSS units. Ever wanted to give an element "the container's width minus 20px on each side"? Here you go:

width: calc(100% - (20px * 2));

When using Sass, you need to interpolate Sass expressions:

width: calc(100% - #{$margin})

Supported by all modern browsers and IE9+.

Repeats

Keeping web applications fast

Our applications not only need to be functional, they need to be fast.

But, to quote Donald Knuth,

premature optimization is the root of all evil (or at least most of it) in programming

The reasoning is that you should not waste your time optimizing code where it does not even matter. However, I believe there are some kinds of optimizations you should do right away, because

  • they are either obvious and easy
  • or they are very hard to do optimize later

This is an attempt to list some of those things:

On the server

...

Repeats

How to make your application assets cachable in Rails

Note: Modern Rails has two build pipelines, the asset pipeline (or "Sprockets") and Webpacker. The principles below apply for both, but the examples shown are for Sprockets.


Every page in your application uses many assets, such as images, javascripts and stylesheets. Without your intervention, the browser will request these assets again and again on every request. There is no magic in Rails that gives you automatic caching for assets. In fact, if you haven't been paying attention to this, your application is probabl...

Repeats

CSS variables aka CSS Custom Properties

CSS variables are very different from preprocessor variables. While preprocessors use variables to compile a static piece of CSS, CSS custom properties are a reactive (i.e. live) part of the styles. Think of them like usual CSS properties that cascade, but have:

  • a special syntax: CSS variables always start with a double-dash (--color)
  • no inherent meaning: Defining a CSS variable will not change any styles in itself
  • a special functionality: CSS variables can be used within the values of other properties, including CSS variables...
Linked contentRepeats

Chrome Lighthouse

Chrome has a built-in utility to check performance and accessibility (and more) of your web app: Lighthouse.

Open the Develeoper Tools and go to the lighthouse tab:

Image

Then you'll see some suggestions on how to improve your site.
This is cool, because you can even use it with non-public pages or your development environment (but be aware that some settings we're using for development, like not minifying JS and CSS files, might ruin your stats...

Repeats

Stretching an HTML page to full height

This card existed before, but was outdated due to browser implementation changes. The information below is validated for the current list of browsers we support.


By default your html and body elements are only as high as the actual page content. If you only have two lines of text in your page, your html and body elements will only be around 40 pixels high, regardless of the size of your browser window.

You might be surprised by this, since setting a background on either html and body does cover the enti...

Repeats

BEM naming conventions

We structure our CSS using the BEM pattern.

Our naming convention for blocks, elements and modifiers has evolved over the years. This card shows our current style and various alternative styles that you might encounter in older projects.

The difference between the various styles are mostly a matter of taste and optics. I do recommend to not mix styles and be consistent within a given project.

Current convention

Our current BEM naming convention looks...

Vortrag: Content Security Policy: Eine Einführung

Grundidee

CSP hat zum Ziel einen Browser-seitigen Mechanismus zu schaffen um einige Angriffe auf Webseiten zu verhindern, hauptsächlich XSS-Angriffe.

Einschub: Was ist XSS?

XSS = Cross Site Scripting. Passiert wenn ein User ungefiltertes HTML in die Webseite einfügen kann.

<div class="comment">
  Danke für den interessanten Beitrag! <script>alert('you have been hacked')</script>
</div>

Rails löst das Problem weitgehend, aber

  • Programmierfehler weiter möglich
  • manchmal Sicherheitslücken in Gems oder Rails

Lösungsid...

Nokogiri: CSS syntax for XML namespaces

<soapenv:Envelope>
  <soapenv:Body>
    <elem>
      <nest>...</nest>
    </elem> 
  </soapenv:Body>
</soapenv:Envelope>

CSS selectors are a very simple tool to select elements from a Nokogiri document. However, the colon in the XML namespace syntax does not work with CSS. When selecting namespaced elements, you need to replace their colon (soapenv:Envelope) with a pipe (soapenv|Envelope):

document = Nokogiri::XML(xml)
nest = document.at_css 'soapenv|Envelope soapenv|Body elem nest'
Repeats

HTML: Making browsers wrap long words

By default, browsers will not wrap text at syllable boundaries. Text is wrapped at word boundaries only.

This card explains some options to make browsers wrap inside a long word like "Donaudampfschifffahrt".

Option 1: Soft hyphens

Unicode has a soft hyphen character you can use to mark optional word division opportunities. The soft hyphen is an invisible character with zero width. Only when the browser decides to wrap at a soft hyphen, it is turned in...

Linked contentRepeats

Lazy-loading images

Since images are magnitudes larger in file size than text (HTML, CSS, Javascript) is, loading the images of a large web page takes a significant amount of the total load time. When your internet connection is good, this is usually not an issue. However, users with limited bandwidth (i.e. on mobile) need to mine their data budget better.

One popular strategy to improve the website performance is to not load images until they enter the viewport – aka "lazy-loading images".

General Issues

  • Crawlers do not execute JavaScript (generally sp...
Repeats

How to evaluate CSS media queries in JavaScript

To make CSS rules dependent on the screen size, we use media queries:

@media (max-width: 500px) {
  // rules for screen widths of 500px or smaller
}

Browsers will automatically enable and disable the conditional rules as the screen width changes.

To detect responsive breakpoints from JavaScript, you may use the global matchMedia() function. It is supported in all brow...

Repeats

How to grep through the DOM using the Capybara API

When your Cucumber feature needs to browse the page HTML, and you are not sure how to express your query as a clever CSS or XPath expression, there is another way: You can use all and find to grep through the DOM and then perform your search in plain Ruby.

Here is an example for this technique:

Then /^I should see an image with the filename...
Repeats

Jasmine: Testing AJAX calls that manipulate the DOM

Here is a Javascript function reloadUsers() that fetches a HTML snippet from the server using AJAX and replaces the current .users container in the DOM:

window.reloadUsers = ->
  $.get('/users').then (html) ->
    $('.users').html(html)

Testing this simple function poses a number of challenges:

  • It only works if there is a <div class="users">...</div> container in the current DOM. Obviously the Jasmine spec runner has no such container.
  • The code requests /users and we want to prevent network interaction in our unit test...
Linked contentRepeats

Printing background color of elements

Browsers' printing methods usually don't print background colors. In most cases this is the desired behavior, because you don't want to spent tons of ink printing the background of a web page. But in some cases you want to print the background color of elements, e.g. bars of a chart. For those elements you need to set the following css styles:

-webkit-print-color-adjust: exact; /* Chrome and Safari */
color-adjust: exact; /* Firefox */

Note that if you're using autoprefixer, you don't need...

Letting a DOM element fade into transparency

You can use the CSS property mask-image to define an "alpha channel" for an element.

E.g. to let an element start at full opacity at the top and gradually fade into transparency at the bottom:

.box {
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
}
  • A fully opaque black pixel will render the masked pixel fully opaque
  • A fully transparent black pixel will render the ...

Sass partial names must always start with an underscore

Be careful to name any file @imported by SASS with a leading underscore.

SASS files not beginning with an underscore will be rendered on their own, which will fail if they are using variables or mixins defined elsewhere. (For me it broke only in production, which may be due to some settings in SASS-GEM/lib/sass/plugin/rails.rb.)

From the SASS docs:

The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file.

This website uses short-lived cookies to improve usability.
Accept or learn more