Categories
Uncategorized Web Dev

New website and logo showcase: A brand new brand

Yesterday, the newest CodeBuffet website has been put online! The entire website, this blog and logo has been changed. There are a number of nice little technological achievements in the new website, and I’d like to share those with the world!

5 years of CodeBuffet

The new website

The main differences between the new and the old version, is that the new version is completely home-made. The previous version was just a custom WordPress theme.

1 big slide show

The first thing you’ll notice when you go to codebuffet.co, is that you can slide back and forth into different slides while being on the homepage. On some slides, you can scroll down to read more about the specific slide (i.e scrolling down the homepage slide will give you an intro to the company)

I have had this kind of design in my mind since 4 years, but it was only now that I had the feeling that I had implemented in the most practical way. I see this kind of design as quite risky. I wanted to try it nonetheless.

The colors of the page adjusts to that of the content

One of the reasons I wanted a ‘big slideshow’ was to make the portfolio come to life in the best way possible. One of the things that occurred to me when you have such a big space reserved for your portfolio, you basically have 99% content and a 1% frame.

So instead of adjusting the content to fit the page, I decided to adjust the page to fit the content.

2 different slides makes the side adjust it’s color.

There is something very interesting in the way this works: The logo on the bottom-center is not an image, it’s a font. The reason for this is because you can’t instantly change the color of an image in html/css/js without using a canvas or pre-processed (colored) versions of an image (source). Using a canvas with color transitions would be a disaster regarding performance. With a font, I can change and transition the ‘text color’ back and forth to whatever I want, without having performance penalties, even on mobile.

Logo changing colors

Conclusion

Overall, there are some very neat developments being done on this website, it’s by no doubt become a creative outlet for my company’s web development efforts. It’s been up just one day (at this time of writing). I hope you like it, any feedback is welcome 🙂

Categories
Web Dev

I’ve never been so thankful for today’s webdev tools and browsers.

We’ve been seeing countless of rants about JS and about the tons of web dev libraries and modules on npm, especially the horror it causes. I never really agreed with them, but today made me so thankful for today’s web dev economy that if it were a person I would do anything he/she asked for the rest of my life.

I’m currently making a slide show page for a client that is a very large library, that runs custom-made computers and screens from some supplier I forgot their name about.
They have around 6 of those screens in the main lobby.

For them it’s very useful (it has a fully fledged gui where you can tell which screen should show which slides and when)

I was asked to make a custom slide-show page for one of the screens. It should contain information about the visitors who checked in among other stuff.
I started checking out the company that made the displays first (which name I now forgot, was a while ago) and I couldn’t find any information targeted towards developers, no documentation, just a buy button and some features.

So it was clear to me we’re dealing with some kind of very proprietary display. They also didn’t want to move to a more open platform for that particular display, like Raspberry Pi.

I ran a diagnostics page to determine the software it was running.

unnamed

Ouch. I figured it wouldn’t be that bad, I just set up a simple Webpack project with all my favorite preprocessors (Jade, Stylus with Nib, CoffeeScript) and be able to share some code from the other stuff I made for them.

I wish it were that simple… I couldn’t even make rounded corners! I had to download a shim for that (CSS3Pie)
Oh, and the whole script didn’t run unless I installed a polyfill for console.log.

Web fonts? I haven’t even figured that one out yet.

It took me hours to figure this all out, and that including some concessions being made (we removed the partially transparent backgrounds we had in our design)

This really brought me back. I never imagined I had to deal with IE again. I forgot about it. Now I know what it’s like again.