Bad CSS in JS

An article, posted about 5 years ago filed in css, react, style, javascript, standards, simple, simplicity, npm, packages & coffeeandorange.

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...

The academic vs the builder

An article, posted more than 6 years ago filed in bazaar, cathedral, open source, architecture, web, w3c, standards, css, xhtml & pragmatic.

“dichotomies make it easier.”

Just over two decades ago The cathedral and the bazaar by Eric Steven Raymond was published. It talked about software development and kind of suggested that a more bazaar like ‘architecturing’ would improve the way complex systems could be build. Nowadays BDUF is a swear-word. In an ever-changing world, you can’t predict the future. So why design for one year. Experiment! Extend!

When I was visiting the Fronteers conference a few weeks ago I had a short interaction where I apologized for my maybe bit academic bias. I remembered I was still quite fond of some old xhtml standard that never really arrived.

Reading the online resilient web design-essay I was reminded of the continuous struggle between practitioners and the standards co…

Continue reading...

Design considerations for murbCMS

An article, posted more than 19 years ago filed in web, internet, cms, standards, maintanance, xslt & xml.

:murb:CMS is yet another Content Management System build from scratch by yet another designer. So why do I think this one is different? :murb:CMS is…Note to reader (2010): this year I stopped using murbCMS, although I still sympathize with some of the ideas, maintaining it in PHP consumed too much time and frustration.Standards based (XML, XHTML, XSLT)Light WeightSimple designExtensibleWhat :murb:CMS is not about is webbased editing of documents. Well, it could be, but it will not be my primary target. What :murb:CMS is about is a open flow of information. Connecting seperate files, located anywhere, on basis of their metadata.Currently this idea hasn't been implemented yet. Some problems I still have to work around are:linking external files (can't get it work with the sablotron xslt processor yet)automatic linking based on metadata does not occur yetVisionI believe the web should be a heaven for those in search of information. Some may say it already is, but I believe …

Continue reading...

'Embedding' QuickTime

An article, posted almost 21 years ago filed in html, online, video, standards, quicktime, movies & embedding.

There seems to be a problem with embedding quicktime video when XHTML strict is being used. Solving our problem with the <embed>-tag is no option. But do we have, to have quicktime working on (@ Windows machines) for IE as well as Mozilla users, to use non-validating code, or work with javascript workarounds?Update: More up to date information on this matter can be found on age's site. Embedding Quicktime video is not as easy for a webdesigner as one would guess. Simply using the <object>-tag following the rules set by the w3c doesn't work (for Mozilla it does, but not for IE).I try using the data tag for referring to the original content, and the type attribute for assigning the right mimetype.

	<object data="test.mov" type="video/quicktime" style="width:380px;  height:285px;">   
		   <p>Error Text or alternative object, or alternative  image...</p>
  </object>
	
	Result: (Mozilla wor...

Continue reading...

murb blog