1 Hour with Bulma CSS Framework

Today I checked out Bulma, a CSS framework based on Flexbox to build web app faster. It doesn’t come with any JavaScript dependencies, which I consider a plus, because I want to use Vue.js and don’t need jQuery.

To sum it up in one sentence: It looks promising, but isn’t quite there for my particular use case. It has a few rough edges here and there.

The idea that HTML elements by itself don’t add any styling and everything is styled through CSS classes is new to me. It makes the HTML code quite verbose. Not sure whether or not I like it, but it’s different.

A. Font is too light

Apple’s system font San Francisco is set to light (font-wight: 300) and I find it almost unreadable on my non-retina MacBook Air. This can be fixed easily though by overriding the respective variable $weight-light: 400.

B. The docs are somewhat incomplete

  • Installation was easy, but I couldn’t find an actual example page. Do you have to use .container within a section or the other way around? When do you use the level component? When the grid? I understand there’s a learning curve to such a complex framework, but the docs didn’t really help to figure things out.
  • Overriding variables in the suggested way results in Sass errors, because the variable name $orange is not set.

C. Inline forms a bit clunky

Inline forms with labels on the left side (not above) input fields is what I need. The only way to achieve this is with a grid layout. Nothing wrong with that, because it’s the same in Bootstrap, but I actually had a hard time to get this to work. There are too many modifiers with unclear results so that I gave up after a while (has-addons, is-expanded, field vs. control, where does a control-label go, etc.)

I tried to implement the same form in Bootstrap and got better results much faster. I found Bootstrap’s classes less confusing.

Will try again

The best way to evaluate a CSS framework is to start with the requirements that are non-negotiable for the project. It’s easy to (mis)judge a framework by the pretty things and I really do like many components in Bulma.

I might consider Bulma again in the future for another project that is less heavy on form and input control usage than my current project. Until then, I can imagine that more full-page examples would help a lot, such as templates for a blog, shop, marketing page, a signup form, an admin area.

Simple Ionic 2 TODO App

This is a small todo app to demonstrate how to separate application logic and business rules from Ionic 2 as a framework. Almost all the logic is in a directory called core with no outside dependencies.

See Ionic 2 Todo app on GitHub.

Ionic 2 interacts with the core app through a single point of entry, the ItemController.

For a todo app, this example might be a bit over-engineered, but it serves as a starting point for a more complex app I’m developing.

Please read my other post Towards A Clean Architecture for Ionic 2 Apps to understand what I’m trying to achieve.

The app is extremely light on UI stuff. There’s basically a Timer that triggers a dummy interaction after 3 and 5 seconds. But that’s not the point of the project.

Continue reading Simple Ionic 2 TODO App

Static site generator Hugo doesn’t allow URLs without trailing slashes

I checked out Hugo – a fast static site generator. Why use a static site generator? Because why would the server have to rebuild the page for every visitor instead of building it once? Especially, if content doesn’t change often. A static site generator compiles the website once and it’s served much faster to visitors.

Anyways, while Hugo seems like a great product, there’s one downside:

As of beginning of 2017, there is no support for removing trailing slashes from URLs, because every page generated by Hugo is a folder with an index.html. No mod_rewrite or anything.

Continue reading Static site generator Hugo doesn’t allow URLs without trailing slashes

Towards A Clean Architecture for Ionic 2 Apps

I have one requirement for my new Ionic 2 app: The core needs to work without Ionic 2. It will be released as native apps for Android and iOS, but also as a Single-Page-App (SPA).

Ionic 2 is optimized for iOS and Android and not made for Web apps. Thus, I need to separate as much logic as possible from Ionic 2 and create a core application that can be interacted with through an Ionic 2 layer or an SPA.

This requirement forces me to think about a clean architecture when writing Ionic 2 apps.

I haven’t found the perfect solution yet, but stumbled across a few interesting ideas, concepts and articles that I want to share with you.

Even if you won’t make a Web-app, I hope you can take a few ideas from this post.

Continue reading Towards A Clean Architecture for Ionic 2 Apps

iA Writer 4 – Why use it?

I use iA Writer for almost all writing. Three reasons:

  1. iA Writer feels right. This is the most important point. I like the interface, the font, the simplicity.
  2. iA Writer works with raw text files. This lets me process files with Marked 2 or any other Markdown editor. It’s especially important if you run a blog with Jekyll or some other blog engine that converts Markdown to HTML itself.
  3. Auto-saves all files in its library, so nothing is lost. Although sometimes my files get a bit unorganized.

Continue reading iA Writer 4 – Why use it?

Hybrid app development is complicated

The other day I read on Hacker News something like:

I wanted to get into Web Development. Is it really that ugly, hard, and annoying?

I thought: What’s the problem? It ain’t that bad, but to be honest, it really is quite difficult.

Web development in 2016 means: Doing a lot of JavaScript. Setting up your JavaScript stack takes time and knowledge and sure, you can get away with a bit of jQuery and Vanilla JS.

Since I decided to make the new version of my app entirely hybrid, I’m intrigued by Ionic 2, Angular 2 and TypeScript.

Sure, you can punch out a stupid small app in no time with Ionic 2, but something with a bit more complexity requires a few more brain cycles. Obviously, my new app has to be maintainable, needs sync across devices, I want a web UI in addition to the mobile apps and all of a sudden, I find myself in the same mess as the guy who asked on Hacker News.

Doing a hybrid mobile app in 2016 means to learn:

Continue reading Hybrid app development is complicated

How to Draw Sharp Lines on a HTML5 Canvas for Retina Displays

Two ways to get 1px wide sharp and crisp lines for retina displays:

  • Scale the canvas to twice the size (context.scale(2,2);) and then draw a 1px wide line like so: context.lineWidth=0.5
  • Use all device pixels and draw the image twice the size. This is the approach I focus on in this blog post.

Here is how to draw super sharp lines on an HTML5 canvas for retina displays: Continue reading How to Draw Sharp Lines on a HTML5 Canvas for Retina Displays

React Native: Cannot connect device to packager (npm start)

I just started to give React Native a try. I followed the tutorial, changed localhost to my MacBook’s IP address, but for some reason, I couldn’t connect my device (iPhone 5) to the React packager server, which I started via npm start in the React project’s root directory.

The error in Xcode was a timeout:

http://192.168.1.5:8081/index.ios.bundle?platform=ios&dev=true&hot=true
2016-06-22 17:03:37.615 [error][tid:main][RCTWebSocketManager.m:84] WebSocket connection failed with error Error Domain=NSPOSIXErrorDomain Code=60 "Operation timed out"

I noticed that I couldn’t open the packager server from Safari on the device as well (http://192.168.1.5:8081), which I found odd.

Then I tried to find a solution for the search term ios safari connect local webserver and this is the answer:

http://stackoverflow.com/questions/12657651/connect-device-to-mac-localhost-server

If your iOS device can’t connect to the React Native packager server, although everything is set up flawlessly, JUST DISABLE AND ENABLE YOUR MAC’S WIFI.

Stupid thing, but it works. I just wasted an hour on this 😤