1 Hour with Bulma CSS Framework

 
0 Kudos
Don't
move!

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

 
5 Kudos
Don't
move!

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

Towards A Clean Architecture for Ionic 2 Apps

 
8 Kudos
Don't
move!

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

Hybrid app development is complicated

 
4 Kudos
Don't
move!

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

 
9 Kudos
Don't
move!

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)

 
9 Kudos
Don't
move!

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 😤

Let’s make a Telegram Bot with PHP

 
186 Kudos
Don't
move!

I spend a few days creating a Telegram bot for my SaaS. It serves as a convenient way for my users to enter data. The bot isn’t smart at all, but at its core is a regex pattern matcher which allows entering various health-related data points.

While the Telegram docs try to give you an easy start, I found them lacking. With this article, I want to fill some gaps.

Continue reading Let’s make a Telegram Bot with PHP

Value Objects in Laravel 5 with Eloquent Done Right

 
30 Kudos
Don't
move!

Update April 25th, 2016: I don’t use Value Objects in Laravel anymore. Here’s why.

One idea of Value Objects is to restrict what a programmer can do within the model. For example, an EmailAddress value object cannot be set to an invalid email address.

The advantage is: Validation and consistency of the domain model.

With Laravel however, there are a few things to think about and it took me a while to figure out a good solution.

tl;dr:

  • Use a Mutator to enforce the type of a Value Object
  • Store your Value Object as native value in your Eloquent model
  • Use an Accessor to create a Value Object from the native value
  • Implement __toString() in your Value Object to allow toArray()
  • Use the JsonSerializable interface to allow toJson() conversion
  • Plus: Do all of this automatically without Mutators and Accessors

Continue reading Value Objects in Laravel 5 with Eloquent Done Right