Sudoku grid – responsive squares

Admittedly not the most challenging task, but I found it entertaining. Generally speaking CSS is not very supportive when it comes to square based grids. To be more specific, making a responsive one which scales nicely. At the end I even decided to rather go with JS to make the rubrics squares, but I also reviewed the other option of making an equal side grid.



Tagged with
Comment

Caching remote resources – CORS or not

One of the Mobile Web Specialist students I’m mentoring came across the issue of caching remote resources from her Service Worker and I think it’s worth a little explanation. The course project includes some resources fetched from an external service and the application was throwing an exception, as these resources were not cached. It’s actually two issues, but let’s see what happens when we try to cache items from a remote origin.



Tagged with
Comment

SeaBadgerMD theme is now available

It took quite a while to make it ready, but my WordPress theme is now available on WordPress.org. There is still room for improvement and I will try to get back to it in the near future. If you spot any issue or have some feature idea, please feel free to report it on my GitHub repository. It’s a Bootstrap or actually MDBootstrap based Material Design theme. It features fully responsive design and a magazine front page which I plan to further improve.

For more details check out the SeaBadger MD theme page.



Tagged with
Comment

Create a Progressive Web Application

Progressive Web Applications are absolutely awesome and they will just get better and better. In my previous post I have shown how to implement caching using a ServiceWorker. Working offline is a big chunk of PWAs, now let’s add the missing pieces.



Tagged with
Comment

Implementing a Service Worker

I listened to a Udacity course on offline first and it was sometimes fairly hard to follow the implementation of a Service Worker. Since then I became a lot more familiar with this topic and rest assured, offline-first is an awesome experience. And actually, it’s a lot simpler to implement the basic functionality, than I thought.



Tagged with
Comment

Star rating using CSS gradient

I had this idea, that I could use the CSS gradient background to display the ratings of a restaurant. The results might be more interesting, than useful, but it certainly has some pros as well. At the end, it may look something like this:

Hearts and stars filled with gradient

In this example the rating can be set from 0 to 5 with 1/100 increments (or smaller I guess, if that makes sense). Looks the best though if I don’t go beyond 0.5 increments as otherwise it’s not really a pixel perfect solution.



Tagged with
Comment
Landscape from Cuba

Serving optimized, responsive images

Recently I’m fairly busy with Udacity’s Mobile Web Specialist nanodegree and diving deeper in photography, but let’s find some time to show the benefits of responsive images via a working and downloadable example. When serving images you want to make sure the image resizes nicely (responsive) and it’s as small as possible without affecting quality (optimized). Not saying I always do it, especially with CMSs it can be overwhelming to save those few bytes, but it’s still important both for your users and for your SEO.



Tagged with
Comment

The best NodeJS text generator

I needed something like a lorem ipsum generator today and I just made the best NodeJS text generator ever. Or maybe not. Time will tell 🙂 In any case, if you need to generate dummy texts with semi-random words, like:
Integisq dolalinsea legide moricapr, taneli lab adoriqid conacu perarinseru.
Please feel free to get the random-textblock package from npm. Usage is pretty simple, maybe event a bit too simple at the moment, but planning to add a few more features.



Tagged with
Comment

New responsive WordPress theme – SeaBadgerMD

In the last month, in addition to getting more familiar with service workers and offline first, my main pet project was a new WordPress theme called SeaBadgerMD. It’s finally usable and while I plan to add some more features, I hopefully fixed all the bugs which would prevent using it. It’s based on MDBootstrap, which is a Material Design framework built on Bootstrap. Of course I use the Bootstrap grid system, so everything is responsive. If not, please let me know.



Tagged with
Comment

Social login in Express applications

I already created a sample project which implements local password authentication in Express. In this post I extend this application with social login options, including Facebook and Google. And once it’s done, it should be fairly straight forward to add any other authentication strategies to you project.



Tagged with
Comment