I’ve just counted - I’ve been basically trying an experiment to become a morning person and fit the schedule for three months now. Turns out it’s not that easy.

Read More

The idea

Lately I’ve been struggling with my free time projects simply because I do not find time for them. I’ve become more lazy with the autumn that’s for sure, I always do, but work is taking a significant amount of time from my usual day. Sometimes it feels like work and sleep is everything I do, though looking at my time tracker at work would probably show arguably different data — I show up at work quite late - between 10 am and 11 am.

There are two days in a week when I have to stay at work till almost 9 pm because I have classes from 9 pm to 10 pm. I could of course shift my schedule to adjust to such times, which I did for a week or so, but I could not do anything “useful” after work - chores and sleep - that’s it. I mean staying up till 2 am is what I usually do, but I can tell now for sure that it is not the time to work. So the experiment I’ll be conducting is to do it the other way around - have my free time spent on my ideas early in the morning.

Read More

I’ve been working as a front-end developer for almost a year now. I still wonder which approach should I take to write my CSS code when I start a new project. It is a bit frustrating when you think that you should know what is best, but you are not entirely sure that it is the best one for the project.

I’ve came across an article about modular and scalable CSS techniques. The closest thing to OOCSS to me was when we were using our own similar technique to one project at BWS. Of course it was not perfect, we ended up having up to 7 classes for one container (one class for each: text alignment, text size, text color, background color, etc.), but it was quite maintainable and strangely enough (at this point I mean), it was working for the developers and the manager. Actually the last designs were converted to HTML so quickly due to those classes that the team could not believe I’ve managed to to that in such a short amount of time. Sadly, I was discouraged from using this technique in my current workplace. However, I’ve been using SASS lately for all our projects and it’s a bliss. I could write a very similar CSS code that we did in BWS and SASS would save us from having too much classes for elements. And that would pretty much be OOCSS.

Actually up until now I thought that OOCSS means writing CSS modules with descendant selectors depending on one main object like “.header”. Never have I been so wrong (probably). And it is a common practice in our workplace. So the major problem I see with my CSS code is that I’m using a lot of descendant selectors. It’s time to fix this.

Have you ever used Web Workers? If you haven’t, remember that there’s a limit for how many web workers you can use and each worker should be closed after it finished its code.

Me and my colleague came across a strange bug in IE10 using BlackAndWhite jQuery plugin - images would stop showing up if there are more than 25 on the page. Turns out, the script is using a Web Worker to convert images to grayscale and IE10 has a limit of 25 workers. Browsers do not close Web Workers automatically, plus IE10 has its own method for closing the worker thread.

See W3C standard and IE10 specification.aspx) for more details. Or just the see the commit we’ve proposed for BlackAndWhite plugin, it should contain all the information you need regarding this issue.

Both techniques require PSDs of a quite skilled designer who is consistent with his/her work and manages spacing and other details to be the same throughout all the files. Of course, the designer should be familiar with Photoshop etiquette. Otherwise I would probably decide on details just by looking at the browser and Photoshop and would not use any overlay tools, because it would be just a waste of time.

Starting from scratch

This technique is quite easy and you can test cross-browser.

I’ve tried using CSS and images as CSS backgrounds - that did not work out too well. Once you’re done, you’ll have to remove both the divs and the CSS (both files and tags inside HTML). I think probably the best way to do this is to create only one absolute overlay div with inline styles and image inside, because you would have to comment it out before delivering HTML.

<div style=”position: absolute; z-index: 999; opacity: 0.3; -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=30)”; top: 0; left: 50%; margin-left: -750px;”>
  <img src=”image.jpg” style=”max-width: none;” width=”1500”>
</div>

Such technique helps you achieve pixel perfect designs faster. Plus the development process is faster and easier as well, especially with Live preview in Brackets.

Editing existing projects

Usually I end up changing designs when the project has a demo website with running CMS. However, I use this only on Chrome and just check other browsers for big inconsistencies.

You could, of course, play with template files like in technique above, but that’s not very efficient. I prefer using Chrome and it’s tools. One of such tools is PerfectPixel. I bet there are more, but unfortunately each one of them has its own quirks.