Featured

Are you kidding me?!

Seriously, no more entries since February 2015? Dude, I have to do something about that! So much to do, so much to write …

I already have some posts in draft, some ideas in my mind and so much to tell. But time is something valuable right now and must spend wisely. So stay tuned, I will definitely update this blog in the near future! These are some of the upcoming topics:

  • New theme for Dev On Wheels
    After some conciderations I will update this blog and also implement a new responsive theme for Dev On Wheels. It will have a more modern and less playful appearance and will look a little bit more professional.

    In the meantime, I will use TwentySixteen as a temporary theme.

  • Responsive Web Design Series
    Together with my friend Christian I planned to write a series of posts about Responsive Web Topics. Right now, the first post “Adaptive vs. Responsive Design” is already a scheduled draft and will (hopefully) be published in the next few weeks.

  • New Technologies
    After leaving my former employer I came in touch with many new technologies like AngularJS and dived into new topics like Content Management and editorial work. It gave me some ideas I want to try out on this blog and my other websites. Maybe that will also lead to some extensions I will offer for download later.

That’s it for now. I hope you will stay tuned and continue reading this blog, I am looking forward to see you again!

BR Matt

LESS Layers

Lately I was thinking about a nice way of implementing Twitter Bootstrap and maybe other vendor libraries into my private eShop project. My main problem was: how can I keep it extendable, but yet simple enough to switch parts of the implementation very easily? I came up with a design sketch which might be a little bit over the top, but hey! No risk, no fun!

Some Forethoughts

First of all, I should emphasize that I will focus on LESS files only in this article. Many frontend libraries come with Javascript components too, but I didn’t thought about them yet. But I think that the following approach is also appliable for Javascript as well.

Second, my theme definitely will be extended by another developer or a customer in the future, so it should have a very maintainable structure which is also easy to understand (Note to myself: add some documentation!). I also will need some kind of graduated abstraction so that I can easily refactor parts of my implementation.

Now try to imagine the whole thing as a nice Black Forest Cake with its specific layers. It must be possible to add more layers to the cake as well as adding multiple ingrediences within a layer. So with this picture in your mind, let’s crack on!

Add LESS Layers

Implementing Vendor Libraries

01-vendor-libraries First, let’s add some vendor libraries, e. g. our frontend framework, Twitter Bootstrap. I also added a corresponding file to the libraries directory which contain styles to overwrite Bootstrap defaults. This way, it should be very easy to implement new versions of Bootstrap via Bower or something similar.

To continue with LESS Layers, we need some kind of base for our theme now. After implementing all vendor libraries, this base will contain stuff which will affect the global scope of our theme.

Starting the Theme Base

02-theme-base As a theme base I will definitely need some variables to declare font faces, grids and other stuff I want to store at a central place. Additionally, I want to declare some LESS Mixins. In the past, I saw some implementations with different files for utilities, helpers and so on, but I don’t see the necessity for this differentiation (if you do, please let me know down below in the comments!).

All these files will be imported BEFORE the vendor libraries so that the styles which overwrite e. g. Twitter Bootstrap can use that declarations.

Paint the Bigger Picture

03-theme Now here it comes! I splitted my theme related stuff into global styles and template specific stuff and imported it via a theme.less file (just for convenience purposes).

In my experience you will definitely run into trouble if you work with template related styles only, because that will cause doublettes in your compiled CSS as well as a lot of efford to refactor all that crap. And YES: this. is. crap! Don’t deny it …

The structure of my global styles is kind of copied from Twitter Bootstrap, so you will find a media.less (for images, videos, …) and a typography.less (font faces, lists, blockquotes etc.) file. The structure will be extended as needed.

04-final Next, I added some template based files, meaning that these last styles are specifically only for that single piece/ page. As you can see in the theme.less file, I grouped all page related files so that I can overwrite partials in the main file for that specific page.

At least, you can add some kind of documentary comment on top of your style.less file, e. g. in the WordPress format or with some copyright hints and rules. You should beware of the different comment types in LESS, which is also the reason why I mostly two slashes (“// …”) for comments.

I know, that’s a lot of stuff to swallow. I hope that my explanations were clear, but if you have questions, don’t hesitate and write a comment! Constructive criticism and helpful tips are also very welcome. A .zip download of the shown structure will be provided later on. All files except style.less and theme.less will contain an explanatory comment only, so feel free to fill it with life by yourself.

So, I hope you enjoyed that “little” explanation of LESS Layers, and I am really looking forward for some feedback!

BR Matt

Edit: as promised, LESS Layers as a .zip-Archive. Feel free to download!

Plugetry – WordPress Plugins I should use

I don’t even know if there is a word like “Plugetry”, but it sounds cool … a mixture between Plugins and Sorcery. Today, I want to give a small glimpse into my work with WordPress Plugins, which I am using personally or which I recommend to friends and customers for their websites.

Security

In general, everybody should know how to improve the security of your website, and there are many tutorials on this topic in the internet. I will collect the most important ones in my wiki and connect it to this article later on.

  • Limit Login Attempts – Of course, you know all hacks and tips to secure your WordPress installation, but why wait until some bot breaks through your very well protected “secret” password?! This plugin limits the attempts to two or three wrong inserts.

  • Antispam Bee – Every website should be protected from spam. The most popular solution in the WordPress community is Akismet, I think. Well, in Germany you will run in some legal issues by using it, so I switched to Antispam Bee after a brief chat with a colleague of mine.

Features

  • Jetpack – This plugin collection written by Automattic (the team behind WordPress) contains a huge selection of useful plugins to support you in …

    • … creating beautiful galleries!
    • … publishing in multiple social networks and connect your website with this networks.
    • … implementing internal features like an improved search, related posts, extended widget functionality, wp.me shortlinks and Markdown markups.
    • … additional stuff like publishing via e-mail, spelling and grammar and so on and so forth :)

    In my opinion, there is no better plugin collection to get so many features. After the installation you have to connect Jetpack with your free WordPress.com account and get started with all the magic. Also, all plugins are very well composed so that you can easily add up their functionalities like combining the Tiled Gallery with the Carousel.

    Jetpack has some downsides, of course. But these are mostly well commented in the info boxes in the single features. As an example, you will get a warning that there are some legal issues if you want to use WordPress.com Stats in Germany. But, to be fair, they provides an alternative after the warning! So try it, it’s worth the efford!

  • Yoast WordPress SEO – This almighty beast will boost your SEO a great deal! To be honest, you have to invest a lot of reading and researching to get the most of it, but there exists a really good manual and tutorials about it. After successfully installing and configuring it it will provide lot of possibilities to edit your site SEO as well as article-based keywords, Google snippets and more.

  • Statistics – If you want to have a small overview of your visits, the location of your visitor and more, Google Analytics Dashboard could be your tool of choice. I know the alternative PIWIK, but I didn’t test it so far. Maybe I will update this article later on in this respect.

Performance

  • WP Super Cache – This simple plugin will cache your website. You can configure expiration times, include/ exclude contents and use mobile caching features. I am using a pretty standard configuration right now, but it’s worth to have a look at this plugin.

  • WP-Optimize – If you’re wondering why your website becomes more and more slow while you’re publishing a lot of stuff, it could be that you have a lot of drafts and article versions in your database. WP-Optimize will delete all this overhead and thus accelerate your website again. It also will handle your comments or trackbacks and cleanup your spam.

  • P3 (Plugin Performance Profiler) – P3 is a very useful tool if you are using a lot of plugins and want to know which one is the bottleneck in your setup. This is the easy part, the work is to find good alternatives for that issues ;) Nonetheless it is nice to have!

Other stuff

Right now I am thinking about a collaboration series with two friends of mine, so this website will host articles from Christian and Johannes as well. For this, I will use Co-Authors Plus. It enables me to assign multiple authors to an article and also display separate author pages for each of them. I will additionally use User Role Editor to enhance the possibilities of user roles in WordPress.

At least, I would really love to see which plugins YOU are using for your websites. Presentational stuff like nice galleries, widgets or navigations are equally welcome as administrative stuff or performance enhancers. Please comment a list of your plugins below!

BR Matt

WiP: Projects on the desk

After having some troubled times both personally and professionally, I finally have some time to write a new article on Dev On Wheels. I had some thoughts about some projects in the past, and I think a lot of them are pretty cool. So I really want to keep you up to date – let’s get started!

Refining Dev On Wheels

I am quite satisfied with my own theme “Strictly Me” and my website in general, but there are still some bits and bytes I want to improve. Especially for another project (which I will explain later) I have to do a lot of work and put lots of efford into my little darling:

  • Improving the design – I am still not satisfied how some of the elements look like. Especially the navigation and search is poorly aligned in my point of view, so I have to find a better way of displaying page links, the search form and so on. Also the author box beneath each article will become a new design.

  • Implementing multi-author capabilities – This is more tricky than it sounds! I tried the Co-Author Plus plugin, but I am far from satisfied. It actually creates just a taxonomy “author”, but no real relation between a wp_user and wp_post object. I got multiple problems during list creation, author selection and so on, so I decided to not use this plugin. Right now, this topic will be postponed until I will find a better way or implemented my own plugin (which will be another topic later on).

  • Knowledge Database – Analogue to Related Posts, I will add links to a MediaWiki I will set up in the near future for this website. I want to store all important bits of informations about different topics in a single place, so that it will be easy to read an article in the blog and find related posts, theories or snippets really fast.

Knowledge Database

Do you encountered the problem of having the answer for a problem on your lips, but you forgot where you stored the necessary informations? Great! I ran into this problem several times in the last weeks, and I became really tired of it. After struggling with the server of my hosting provider I finally installed a nice addition for this website: a wiki! Yes, there will be a Dev On Wheels Wiki soon, and I will try to collect some useful tips and tricks there within a great environment for knowledge sharing besides this blog. Stay tuned!

Talks and Presentations

Yes! After having some trouble how to explain specific topics to friends and collegues I decided to have a small series of talks and presentations about Responsive Web Design and advanced frontend techniques which are not familiar to everyone. Or can YOU name three techniques to implement responsive images and explain their pros and cons without thinking? If you had the answer in mind: great! If not, you should scroll down to get one possible answer and visit this website again for more informations later on. I would really appreciate that!

My plan is to have some kind of conversation-like articles on Dev On Wheels, together with my friends and (former) collegues Christian and Johannes. Based on this loose conversions about a specific topic there might be the opportunity to create further articles on that topic.

Frontend Framework

Just as some kind of finger exercise I started a small frontend framework. It has no name (yet), but will see first action when I will start my private website labsch.net again. To incorporate my experiences with LESS, Responsive Web Design and Atomic Design (please read this article from Brad Frost to get more info about Atomic Design!) it will contain a fluid grid, typography, form elements and so on. Very minimalistic, Mobile First and cutting-edge CSS3.

Plugins and other enhancements

A few years ago I was really deep into WordPress Plugin Development, but my interest cooled down a lot. After my shattering experience with Co-Author Plus I want to start again and try to publish some smaller plugins at the beginning. If you have serious suggestions, please let me know!

So, this was a quick one! Nonetheless I had a lot of stuff to say, so bear with me if my language slurred a little bit at the end – it is late and I should go to bed, really … So far, I hope that you are amazed by the news and looking forward to get new stuff from my side! I AM looking forward to see YOU again on this website, so don’t let me down!

BR Matt

By the way, one possible answer to the question above could have been Adaptive Images (serverside downscaled and cached images, no art direction), Picturefill (art direction, but depending on JavaScript and special markup) and HiSRC (loads three different resolutions via jQuery, also depending on JavaScript and special markup) AND of course the “quick and dirty” solution of img { height: auto; max-width: 100%; }. See, that were four! If you want to know more about this topic, please have a look at this article on Smashing Magazine: Choosing A Responsive Image Solution.