Bad CSS in JS

An article, posted about one year ago filed in , , , , , , , , & .

I tried to understand the argument made for styled components vs. ‘traditional’ CSS. But when reviewing these arguments I found out that they typically use bad code as proof for their point.

See e.g. the following SCSS code:

$blue = #5DBCD2;

@mixin button-styles($bg-color, $color) {
  background: $bg-color;
  color: $color;
  border: none;
  border-radius: 0.20em;
  &:hover{
      background: darken($bg-color, 6%);
      cursor: pointer;
  }
}

.button {
  @include button-styles(#ddd, black)
}

.button--primary {
  @include button-styles($blue, white)
}

To pair with a simple component along the lines of:

const Buttons = props => (
  
    Default
    Primary
  
)
export default Buttons

The suggested alternative is:

import themeVars from "myTheme"
import styled from "styled-components"
import { darken } from "polished"

const B...

Continue reading...

How do I navigate to another page in React or Vue?

An article, posted more than one year ago filed in , , , , , , , , , & .

Congratulations, you started working with one of the popular front-end frameworks. Both Vue and React are excellent choices to create rich and reactive applications. But sometimes, you 'just' want to show the user another page. Whether it is a simple about page, or another 'section' in the app. In this post I will cover both Vue en React and, little bonus, “React on steroids”, NextJS.

It is important to know that you need a router to make in-app pagination work. If you look up router and your favourite framework you're probably find a way to do it, accompanied with some ways to actually not do it. Hence, here I'll focus on the right way.

While you can make everything clickable (or touch-able), it is important that enabling navigation between pages was already a core concept when the web was invented. Even when writing webpages using React, Vue, or most other JavaScript frameworks, it ends up as HTML to the browser (with JavaScript & CSS). HT…

Continue reading...

Should I use React or Angular?

An article, posted about 3 years ago filed in , , , , , , , & .

To put it in some context: these days recruiters call you whether you know this or that framework. Well not really, really well. But it is just JavaScript. Or ECMAScript (or a flavour of it by Microsoft called TypeScript). But above all it is just a tool to get stuff done. Not every job needs a bulldozer. And besides the bulldozers React and Angular there is Vue.js and plenty more. Choose your tools wisely.

Continue reading...

Twitter launches a new web app

An article, posted about 3 years ago filed in , , , , , , , , , , & .

Targeted at those with low spec phones, Twitter today launched Twitter Lite, a product build on a modern suite of technologies that should be ring a bell with most front-enders today.

The new Twitter frontend is built using React (nb. made by Facebook), Redux, Normalizr, Globalize, Babel, Webpack, Jest, WebdriverIO, and Yarn (they have written about how they built it.

It is a good thing to see a large company not giving up on the open web. I’ve added the new Twitter Lite app to my phone (running iOS) and see if it can replace the native app (as I did with Facebook before). My first impression is pretty good. Most importantly, as promised: it loads faster, even without support for ServiceWorkers (while iOS 1.0 only allowed for web apps, its level of support is kind of bleak when compared to the efforts made by Google and Firefox). It could use some animation …

Continue reading...

Learning from failures: off-line support in a rails-app

An article, posted about 4 years ago filed in , , , , , , , , , , , & .

As a web-developer you typically assume that your users are always using your app on-line. When asked a year ago to start developing an app for the art-consulting firm QKunst I was, however, specifically asked for a tool that had to work in bunkers. Bunkers where having a solid internet connection was typically the exception. No problem, I read about HTML5 and offline app-cache: I thought I could fix that. More about that soon.

How I face a challenge

When faced a (technical) challenge I typically search for the easiest way out: what would be the slightest change I’d have to make to my battle tested set-up to accommodate for the new challenging feature. In my case this battle tested set-up starts of with the Ruby on Rails stack, which builds on techniques that align well with how I believe the web should work too. RESTful (proper HTTP-messaging and URLs), semantic, CURL-able. And all graceful…

Continue reading...

Should I use styled components?

An article, posted more than 1001 years ago filed in , , , , , & .

This was originally posted at CoffeeAndOrange

You may have asked yourself if you shouldn’t invest more time getting started with this thing called styled components (or CSS-in-JS). They get heavily promoted in modern front-end application frameworks. And sure, they look interesting.

While it depends may be the only right answer, sometimes you might be simply making things more difficult than really needed. You’re fixing the wrong problem.

Take for example the SCSS code.

$blue = #5DBCD2;

@mixin button-styles($bg-color, $color) {
  background: $bg-color;
  color: $color;
  border: none;
  border-radius: 0.20em;
  &:hover{
      background: darken($bg-color, 6%);
      cursor: pointer;
  }
}

.button {
  @include button-styles(#ddd, black)
}

.button--primary {
  @include button-styles($blue, white)
}

To pair with a simple component along the lines of:

const Buttons = props => ...

Continue reading...

murb blog