Automated wordbreaks for long words
The problem:
So I had the issue that User input (coming from many different sources and users) often contains the same long word. Maybe that's a super german thing to have lots of long words I have to deal with. This long word needs to be fully visible on small screens but none of the automated word-break solutions offered by css (https://justmarkup.com/articles/2015-07-31-dealing-with-long-words-in-css/) is clever or supported enough to be a good solution. So I...
A collection of useful design resources for developers
This collection contains some useful design resources for developers. Many of them were mentioned in the Refactoring UI tutorials.
Tutorials
Integrating or upgrading makandra-rubocop
Introduction
Most of the time it is a tedious task to apply a code style guide to an existing code base as there are likely to be a lot of conflicts. At makandra we are using makandra-rubocop to have code style checks. Here is some advice on how to add makandra-rubocop efficiently.
Note
RubyMine by default has a Rubocop inspection with rules that we don't always agree with. We recommend replacing this with makandra-rubocop or disabling the inspection.
...
Using CSS transitions
CSS transitions are a simple animation framework that is built right into browsers. No need for Javascript here. They're supported by all browsers.
Basic usage
Transitions are used to animate the path between to property values. For example, to let the text color fade from red to green on hover, the following SASS is used (shorthand syntax):
.element
color: red
transition: color .1s
&:hover
color: green
This tells the browser "whenever the color
of an .element
changes...
Flexbox: flex-basis vs. width vs. min-width vs. max-width
Within a Flexbox layout, there are multiple CSS attributes that may affect a child's basis (the initial width before flexing). You might be confused how flex-basis
, width
, min-width
and the intrinsic width of your content play together.
The attached article explains the differences. In summary:
- If a
flex-basis
is set, that is used as the basis - If no
flex-basis
is set, thewidth
is used as the basis - If neither
flex-basis
norwidth
is set, the content...
DOM API for jQuery users
General hints on the DOM
- the root of the DOM is
document
- custom elements inherit from
HTMLElement
. They need a-
(dash) in their name, e.g.<notification-box>
. - event listeners don't have event delegation à la
.on('click', cssSelector, handler)
Comparison
Action | jQuery | DOM API equivalent |
---|---|---|
Find descendant(s) by CSS selector | .find(selector) |
one: `.querySelector(selecto... |
Unpoly: Showing the better_errors page when Rails raises an error
When an AJAX request raises an exception on the server, Rails will show a minimal error page with only basic information. Because all Unpoly updates work using AJAX requests, you won't get the more detailled better_errors page with the interactive REPL.
Below is an event listener that automatically repeats the request as a full-page load if your development error shows an error page. This means you get...
Webpack(er): A primer
webpack is a very powerful asset bundler written in node.js to bundle (ES6) JavaScript modules, stylesheets, images, and other assets for consumption in browsers.
Webpacker is a wrapper around webpack that handles integration with Rails.
This is a short introduction.
Installation
If you haven't already, you need to install node.js and Yarn.
Then, put
gem 'webpacker', '~> 4.x' # check if 4.x is still cu...
RubyMine: Efficiently filtering results in the "Finder" overlay
RubyMine comes with a nice way to grep through your project's files: The finder (ctrl + shift + f
). Don't be discouraged about the notice 100+ matches in n+ files
if your searched keyword is too general or widely used in your project.
RubyMine comes with a few ways to narrow down the resulting list, don't hesitate to apply those filters to speed up your search. Your keybinding might vary based on your personal settings.
File mask (alt + k
)
If you already know the file extension of your ...
Adding Jasmine JavaScript specs to a Webpack(er) project
The goal is to get Jasmine specs running in a Rails project using Webpacker, with the browser based test runner. Should be easily adaptable to a pure Webpack setup.
Step 1: Install Jasmine
yarn add jasmine-core
Step 2: Add two separate packs
Since we do not want to mix Jasmine into our regular Javascript, we will create two additional packs. The first only contains Jasmine and the test runner. The second will contain our normal application code and the specs themselves.
We cannot...
cucumber_factory: How to keep using Cucumber 2 Transforms in Cucumber 3
Cucumber up to version 2 had a neat feature called Step Argument Transforms which was dropped in favor of Cucumber 3 ParameterTypes. While I strongly encourage you to drop your legacy Transforms when upgrading to Cucumber 3, it might not always be possible due to their different design.
This is a guide on how to keep the exact same functionality of your old Transforms
while writing them in the style of new `Paramet...
Heads up: Capybara 3's text matchers no longer squish whitespace by default
Until Capybara 2, node finders that accept a text
option were able to find nodes based on rendered text, even if it spans over multiple elements in the HTML. Imagine a page that includes this HTML:
<div class='haystack'>
Hi!
<br>
Try to match me.
</div>
Even though the text is separated by a <br>
tag in the HTML, it is matched until Capybara 2 which used to "squish" text prior to the comparison.
# Capyabara 1 or 2
page.find(...
Rails Asset Pipeline: Building an Icon Font from SVG Files
Webpacker can automatically create an icon font from SVG files, which is really handy. When you're using the asset pipeline, you can still have an icon font from SVG files, but it requires some manual work.
Creating the icon font
- Install the NPM package
icon-font-generator
. If you're not usingnvm
, runsudo npm install -g icon-font-generator
- Put all SVG icons for the font into their own directory.
- The icon name will be taken from the SVG file name
- Download the attached script and update the
Configure
...
Migrating from CoffeeScript to ES6
It is quite easy to migrate from CoffeeScript to ES6. You can use decaffeinate to convert your CoffeeScript source to modern JavaScript.
Install decaffeinate globally:
npm install -g decaffeinate
Call decaffeinate
on each .coffee
file, relaxing some options to get the most modern (and concise) JS:
decaffeinate file.coffee --use-cs2 --loose --optional-chaining --logical-assignment
Tip
If you use Babel and see errors while decaffeinati...
Webpack: Automatically generating an icon font from .svg files
Over the years we have tried several solution to have vector icons in our applications. There are many ways to achieve this, from SVGs inlined into the HTML, SVGs inlined in CSS, JavaScript-based solutions, to icon fonts.
Out of all these options, the tried and true icon font seems to have the most advantages, since
- icon fonts are supported everywhere
- they perform well and require no JavaScript at all
- their icons align nicely with text
- their icons automatically inherit color and size of the surrounding text
The big issue used to b...
Webpack: How to split your bundles
To keep JavaScript sources small, it can sometimes make sense to split your webpack bundles. For example, if your website uses some large JavaScript library – say TinyMCE – which is only required on some selected pages, it makes sense to only load that library when necessary.
In modern webpack this is easily doable by using the asynchronous import
function.
Say we have an unpoly compiler that sets up TinyMCE like this (code is somewhat simplified):
// TinyMCE as part of the main bundle!
import tinymce from 'tinymce/tinymce'
// U...
How to test Autoprefixer and CSSnext in PostCSS
PostCSS is a tool for transforming styles with JS plugins. In Webpacker you can configure the plugins and their settings via the postcss.config.js
file. Make sure that postcss-loader
is part of your package.json
.
module.exports = {
plugins: [
require('postcss-import'),
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009'
},
stage: 3
})
]
}
Note: Stage 3 means you can use all CSS features that ar...
Migration from the Asset Pipeline to Webpacker
This is a short overview of things that are required to upgrade a project from the Asset Pipeline to Webpacker. Expect this upgrade to take a few days even the diff is quite small afterwards.
Preparations
1. Find all libraries that are bundled with the asset pipeline. You can check the application.js
and the application.css
for require
and import
statements. The source of a library is most often a gem or a vendor directory.
2. Find an working example for each library in the application and write it down.
3. Find out the ver...
HTML emails with inline stylesheets and webpacker
Many mail clients do not support external style sheets. Some even require all styling inline, which means you'll have to do your styling inline. For Rails applications, you can use Roadie or premailer, which lets you keep your well-structured CSS files and do the inlining for you.
Since Roadie is now in passive maintenance mode, we go with premailer:
Include premailer in your Gemfile:
gem 'premailer-ra...
CSS: Flex and "min-width"
min-width
is known as a CSS property that can be set to define a least width for an element. Surprisingly, it can also be used to set something that feels like max-width
.
min-width
in a flex
context
While the default min-width
value is 0
(zero), for flex
items it is more like "auto". This can make block elements take up much more space than desired, even stretching their container beyond the screen edge on small screens.
![Image](/makandra/66994/attach...
Bootstrap 4 skin for the Rome datepicker
Here is how to make Rome datepicker look like the rest of your Bootstrap 4 application.
Rome comes with very little basic styling. While we could redefine its classes, we can configure the classes Rome applies to its elements to make it look like this:
Since Bootstrap 4 comes with several helpful utility classes, and requires fewer markup/containers, we can achieve Bootstrap 4 experience by applying a few classes via the styles
setting.
You still need to include `ro...
Upgrade guide for moving a Rails app from Webpack 3 to Webpack 4
Webpacker is Rails' way of integrating Webpack, and version 4 has been released just a few days ago, allowing us to use Webpack 4.
I successfully upgraded an existing real-world Webpack 3 application. Below are notes on everything that I encountered.
Note that we prefer not using the Rails asset pipeline at all and serving all assets through Webpack for the sake of consistency.
Preparations
- Remove version locks in
Gemfile
forwebpacker
- Remove version locks in
package.json
forwebpack
andwebpack-dev-server
- Install by ca...
JavaScript without jQuery
This is a presentation from 2019-01-21.
Summary
- We want to move away from jQuery in future projects
- Motivations are performance, bundle size and general trends for the web platform.
- The native DOM API is much nicer than it used to be, and we can polyfill the missing pieces
- Unpoly 0.60.0 works with or without jQuery
Is jQuery slow?
From: Sven
To: unpoly@googlegroups.com
Subject: performance on smartphones and tablets
Hello
I just used your framework in one project and must say,
I am really pleased with it -- but o...
Auto-generating plain-text bodies for HTML e-mails in Rails apps
When building an application that sends e-mails to users, you want to avoid those e-mails from being classified as spam. Most obvious scoring issues will not be relevant to you because you are not a spammer.
However, your application must do one thing by itself: When sending HTML e-mails, you should include a plain-text body or tools like SpamAssassin will apply a significant score penalty. Here is how to do that automatically.
- Add
premailer-rails
to yourGemfile
andbundle
. - Done! ...