owls

CSS Quirks and Oddities

March 15th, 2018

CSS is a weird language. Some people don’t even want to consider CSS as a programming language. However to me it will always be one, maybe even THE one.

Of course CSS can only be used to style your webpages, but it evolved into the one thing that defines a pleasant user experience. Without styles there would be no layout, without styles there would be no hierarchy, animations, responsiveness, interactions, etc. Of course the majority of these can be executed with javascript, but it never going to be as performant as pure CSS.

However it has its quirks… Some things in CSS just dont perform the way you’d expect them to in certain situations. I stumbled upon this article by Medium about Lesser known CSS quirks & advanced tips, and there they go into detail about some of the weirder things.

Some such weird things are:

  • Vertical padding is relative to element’s width not height
  • Margins overlap, but only sometimes
  • Opacity can change the z-index stacking order
  • Height: 100% may not do what you think it does (because parent element’s height is not set)

One really cool thing I found though is the concept called the lobotomised owl selector. Yes, thats right, the lobotomised owl selector.

*+*

It allows you to setup a default behaviour for all layout elements on your page, so if a new one is added it can already respect those values even before its properly styled. I quite like this idea of setting up defaults, however it is really hard to implement on large project that has been deployed.

design in 2018

Webdesign in 2018

March 15th, 2018

Design is an ever evolving industry, and web design is no exception. The practices that were revolutionary in the beginning of the 21st century, seem archaic by modern design standards. Some may say it is hard to keep up, but there are always those that want to drive progress even further.

I aspire to be one of those people, that is why I jump at every opportunity to learn something new, whether it be code or design. Since I never really studied design, I may not have the keen eye that some of my friends do when it comes to layout, or hierarchy, or just plain taste. However I can tell good design apart from the rest.

Recently I stumbled upon this article on Medium titled 7 Practical Tips for Cheating at Design. Of course I read it and pretty much agree with all the point they’ve raised:

  1. Use color and weight to create hierarchy instead of size
  2. Don’t use grey text on colored backgrounds, make the text closer to the background color is what actually helps create hierarchy
  3. Offset your shadows
  4. Use fewer borders
  5. Don’t blow up icons that are meant to be small
  6. Use accent borders to add color to a bland design
  7. Not every button needs a background color

If you notice, I highlighted #4. That is because I was shocked as to how much cleaner you can make an application by removing borders. I tried it at work and for my personal projects and the results were just great.

Here on my blog I never really had borders, so it was already decent, but I now I see why this is.

Its already 2018 and our standards keep evolving, so good design is no longer a feature, is a requirement.

u.x.

Introduction to User Experience Design

June 20th, 2017

User experience (UX) design is a relatively new field and only came around with the mass adoption of computers and digital technology. It has evolved over the years and is now an essential part of the digital product development cycle. The core mission of UX is to craft digital experiences that not only empower, but also delight users. In this digital era, innovation never stops and with it more and more opportunities for creating user experiences arise.

The question is how does one get into UX design. Is knowledge of coding essential? Or a degree in design? In reality it doesn’t matter, anyone with a keen eye for detail and a passion to make things better can be a UX designer.

But what is UX? UX is both the end result experience a product offers and a set of methods with which to craft experiences. These methods include various user research techniques, crafting user-flows, layout design, and user testing.

In this article I will give a brief overview of a few concepts that will help define the needs of the users, how to work with and adapt to constraints, what it means to create a story that shapes the experience, the innovation aspect of UX and that good UX comes from a lot of testing and being open to input.

Seeing Through the Users’ Eyes

The most important aspect of UX design is to learn that the ways users interact with a product and the experiences they have with it vary wildly depending on their backgrounds and life situations. In order to create a pleasing user experience considerations of the users age, background, physical location, interests, and of course comfort level with technology, need to be considered and designed around.

Read More

flexboxes

CSS Flexboxes

February 26th, 2017

Today I would like to tell you all about this awesome property that CSS got a while back, but is now finally fully supported by all browsers and should be used by all web designers and developers. This property is called Flexbox or display: flex.

Why should you use it, you might ask. The reality of it is, if you have ever tried to centre something vertically and horizontally in CSS, you know the struggle that it is, and you know how after swearing at the screen for 30 minutes, you’d just end up cheating and setting the pixels manually, cause nothing else works. What if I told you that flexboxes allow you to centre an item within a container with 3 lines of code, and it would consistently work across all browsers? Well it can:

display: flex;
align-items: centre;
justify-content: center;

Flexboxes use the concept of a container and items within it, and uses tools like: justify and align to determine the position of the items within the container. Furthermore, you can easily flip the direction (order) of the items using flex-direction, change the direction from row to column and  grow and shrink the items with just a few lines of code. Its that simple.

I have started using flexboxes at work exclusively, and have not even had to write another "margin: 0 auto" in months! Now I am in the process of fixing up the anime club sites with the same stuff, to make them more robust and the code cleaner and more manageable.

If you want to learn more about this, then here is a link to CSS Tricks, a great website for learning about various interesting css properties and selectors.

Also there is a flexbox game, where you can learn how to align elements in various ways. Unfortunately though, they dont show you the code, but you can work it out from the buttons you are pressing on their UI.

And here is an article (with GIFs), that goes over all the flex box selectors and explains how they work.

▹ or ▿ ?

September 7th, 2016

This title may sound a bit strange, but the question behind it is very serious and has caused numerous debates between UI designers.

When a folder or a menu group is collapsed should the arrow point to the right, or downwards?

This is an example of the arrow point to the right when collapsed and downwards when expanded. However not everyone believes in this standard, so UI designers fight that the arrow should be down when collapsed and up when expanded. As you can see in the article image above, the 2 options are both valid, however option 1 (on the left) has dominated the technology space as Microsoft (with Windows), Apple (in macOS) and pretty much all the Linux OSs all use this notation for folders, groups of contacts, and any other kind of grouped lists.

The web however is a different beast and a lot of designers come from print, so they know how things should work in the real world, but no so much how the standards have been set in computers for the past few decades.

Read More

sass

Web, the SASSy way

July 24th, 2016

I’ve been designing and coding websites for a good 4 years now, but only as a hobby in my spare time, nothing serious or professional. It was all basically just simple HTML DOM together with a CSS file defining the look of my sites. Sometimes I would experiment with certain JS features to have menu bars and various animations, but hat was about it. Last year, when I migrated my blog hosting, I had to learn how to set up a web server from scratch using LAMP. And I did, twice: jamiejakov.lv and utsanime.net. Looking back now thats not a great achievement, especially with all the guides out there, but hey, when you don’t know anything, even something as simple as setting up a LAMP can be hard.

And now I think its time for me to learn more about web programming, about the frameworks that are used, about the nifty things that have been developed to make our lives easier and create intuitive and beautiful user experiences. And the first think I am going to learn is SASS.

What is SASS? Its pretty much CSS on steroids. It allows you to declare variables, nest code, add mixins, inheritance and much more. But why listen to me, when they got a clear guide on all the great features up on their website: SASS-Lang. I am just going through the codecadamy tutorial on SASS and am planing on implementing it in my future AnimeSydney and anime@UTS redesigns!

Also it is important to note that SASS is a pre-processor, so the browsers themselves can’t interpret anything form a .scss file. So we must compile the SASS file first, which will transform it into a browser readable .css file. Most text editors for code have plugins for SASS compilation. I, for example, use Coda by Panic.Inc for all my web development and they have a great SASS plugin available for download.

So try it out, see for yourself who much more efficient you will be at coding when you can use variables and inheritance. Happy Coding!

Spotlight Search

June 19th, 2016

If you use keyboard shortcuts, macros and various other workflow automation techniques, then you might consider yourself a power user. However if you have never used Spotlight on macOS and iOS, you are missing out on a great productivity improvement. So what is Spotlight? It is the universal search implementation on Apple platforms. It can search your folders, files, information from within apps like contacts, mail, and even suggestions from the web. But I guess the most used function of Spotlight is to quickly open the application you need. So instead of looking of looking for that one app in Launchpad on your Mac, or numerous screens of your iPhone/iPad, you can just simply launch Spotlight search (cmd+space on macOS, swipe down on home screen on iOS) and start typing the name of the item you are looking for. This can greatly speed up your workflow and just help you find what you are looking for.

Now that you know the basics of Spotlight, here are some advanced tips and tricks (on macOS), which I learned from this article:

  • Cmd + D:  View search term in the built in dictionary app (opens the app).
  • Cmd + L:   Quickly view the term in the dictionary (via Spotlight UI).
  • Cmd + B:   Do a web search in your default browser (opens browser window).
  • Cmd + R:   Open the highlighted results folder in the app which it is in and reveal it in Preview.
  • Cmd + O:   Open the highlighted result in the default program for that filetype.
  • Cmd + I:     Show information about the highlighted result.
  • Hold Cmd:  Show the full path to the highlighted result at the bottom of the spotlight window.

Hope these shortcuts help you improve your workflow and make your life just a bit more productive.

My Home Media Server – PLEX

April 8th, 2016

Continuing on from my previous post about building a home media server, this time, I’ll tell you about a brilliant piece of software called PLEX.

So what is Plex? Its a media player system that automatically organises your media in a very lovely and intuitive interface. So say you got a folder of all your media (iTunes for example) and its jumbled up all over the place. So you would like to easily watch episode 5 of  season 4 of Game of Thrones? Good luck with that, you need to find the folder, then the subfolder wherever it was saved in, find the season, and then the episode. Now imagine that you are off at your  mate’s place and you wanna watch the episode together with him, well then you are out of luck.

Not with Plex. Plex has a number of irreplaceable features:

Read More

My Home Media Server – NAS

April 1st, 2016

Ever since I got my own computer and started watching movies, cartoons and anime, I’ve wanted to have a great collection, and back in the day the only way to do that was to save them on your computer hard drive and view them on that computer. Then I learned about the these really convenient little things called portable (external) HDDs, so I could store my media on that and then view it on a different device, and that worked great… at the time.

Read More

The Apple vs FBI debate

March 16th, 2016

You have probably heard about this case, but for those that haven’t: the FBI have ordered Apple to create a version of iOS that would allow the FBI to access a terrorists smartphone in hopes of finding some valuable clues to the case and possible links to other terrorists. What they affectively want is for Apple to compromise their own security “for this one case” and then “un-compromise” it again. Let that sink in.

Read More