Blog about web design and development
Recently I gained access to the OpenAI GPT-3 API . I tried different things like content creation, code translation and other experiments. One of the amazing things of GPT-3 is the capacity to learn from simple textual examples. Programming is one of the most complex and problem solving tasks. But I wasn’t interested in training GPT-3 to program. For me it was more interesting how GPT-3 can speed…
CSS Reset is obsolete. It made sense 10 - 15 years ago when we had IE6, Opera, Firefox and they all behaved differently with very different HTML rendering engines. Making web sites back then was a nightmare, we first made it compatible with IE6 and after that we tested them in Firefox and other browsers. Most of the websites used HTML table tags to make the layout. CSS layouts with float were only…
I really liked the idea of the One Page 2020 Calendar . I decided to make my own printed version. So I did just that: You can download the Calendar in .pdf version here .
screenshoteer Node.js based CLI for making website screenshots and mobile emulations. It can export the results in .png or .pdf. It uses puppeteer(Headless Chrome). For the install: npm i -g screenshoteer Demo: screenshoteer --url https://www.example.com https://github.com/vladocar/screenshoteer keywords-extract Command line tool for keyword extraction. This Node.js project works mainly with two…
I needed better solution for making Lorem Ipsum Text when I was making low fidelity wireframes. That is why I made Scribble - Free Font for making wireframes. Here is the demo: You can download Scribble for free on GitHub: https://github.com/vladocar/Scribble-Font Some other useful fonts for low fidelity wireframing
Few weeks ago I made Minimal Notes - TODO like web app made with Vue.js. Vue.js is great but it felt like overkill using that huge framework for making that simple app. Frameworks like React, Vue or Anuglar are great but we rarely use their full potential. Sometimes we need simple tool for making simple project. I decided to make small JS library for doing just that, simple tool for making…
After my latest CSS project Flexy I was inspired to do CSS Layout system that is even more dynamic. What better way to make CSS dynamic then SASS. That is how the project Katana was born. Katana is ultra minimal CSS Framework made with few lines of SASS. Default parameters are: 12 columns, 15px margin and 94% main width. But you can personalise anything, just change the default numbers. So you…
I wanted to test the limits of the Flexbox layout. In the past I’ve build all sorts of CSS Frameworks but never with flex layout. So I build Flexy. What is Flexy and what it does? Flexy is minimal CSS Framework build with flexbox. It is really small and compressed is 0.33 Kb. Flexy is fluid, responsive and is very easy to personalise. You can personalise the main width any value and unit. It can…
Back in 2011 I made picoCSS ultra small JS library with doing very basic DOM operations. picoCSS was foundation of nanoJS. What is nanoJS? nanoJS is minimal standalone DOM manipulation JavaScript library. It is around 100 lines of code and compressed is around 1.2 Kb. It uses familiar jQuery like syntax so it is simple to learn. Why use nanoJS? First is super lightweight but that is not it…
I love small code libraries that work. Most of todays popular CSS Frameworks are huge and probably an average web site will use only 5-10% of that frameworks code. Yes, you can use tree shaking and caching but how many web sites actually do this? I prefer start small and gradually upgrade. I’ve did some experimenting with the new CSS Grid and it’s specially great if you have graphic design…
I originally made the 1 line CSS framework in 2009 . The point was and still is, you can make CSS grid layout only with one line of code. I made this project for fun but also to prove a point that you don’t always big complex CSS layout system. The trick of this project is that every column can be divided in two. So with this trick we can make 2,4,8,16 column system. Here is the “magic” code:…
Few years ago I made the first version of the Hand Drawn Icons . It started as fun project and today become big 410 + 410 icon collection. Everything is hand drawn in Photoshop using the Bamboo drawing tablet. All the icons are in raster format simply because you can’t achieve that level of detail with the vector formats. Unfortunately the raster icons will not scale like vector icons. Beauty v.s…
I started the Photoshop Wireframing Kit as un supplement for wireframing for the people who use Photoshop as primary design tool. I often get requests for Illustrator Wireframes, so I exported and adjusted all the shapes into Illustrator compatible format. I wanted to make Illustrator even better tool for fast prototyping. I used the Illustrator native support for "Illustrator Symbols" for Drag &…
I has been 6 years from the last Hartija update. Hartija was my first CSS Framework, I never updated it because "It simply worked" in most cases even in browsers like IE6. I decided to add few new features and fixes and also to move everything to GitHub. What is Hartija? Hartija is universal printing stylesheet or best printing CSS practices all in one. How Hartija works? Just use it like normal…
I finally had a time to update Photoshop Wireframing Kit giving the main focus on mobile app prototyping in Photoshop. All the main mobile phone and tablet shapes(Android, iPhone, iPad, Windows Phone are introduced into the Kit. http://www.photoshopwireframingkit.com/ Also some demos. I'm planing to introduce a number of now tools and apps for the Photoshop Wireframing Kit, hopefully this month.
I'm happy to present my latest side project Modern Logo Mock-ups . This project consist of 10 different Logo Mock-ups styles in other words you can present your logo in 30 different combination simulating various environments and styles. I was working at this project almost entire 2013 and publishing different mock-ups styles on creativemarket.com . All is done in Photoshop CS5 by using smart…
I love making typography experiments, browsing the internet I stumble upon one site who had 1,39em line-height (Leading) . That is really unusual number for line-height. In the past I was often using the "golden" height in my CSS Typography Frameworks Azbuka and Better Readability Project but every typeface is different and using one "magic" number for all the typefaces seams wrong even that I…
There's been a lot of talk last week about the Apple iOS 7 and the icon design. Many designers are offering there own icons solutions and redesigning the default iOS 7 icons and I have an impression that The Grid System itself is very little discussed and analyzed. I think that iOS 7 grid system it is a masterpiece. I also think that grid system is poorly used by Apple, the default iOS 7 icons are…
Over the last year and half I had great experience with Balsamiq partnership . Many of my customers are Balsamiq users who use my hand drawn icons to complete Balamiq User Experience. One popular request was Darker hand drawn icons for more compatibility with the native balsamic icons. I did just that, Darker Icon Set with the same icons but with more compatibility with Balsamiq native icons.…
Few years ago I made ClipR distraction free readability bookmarklet based on jQuery. One of first things that ClipR does is trying to eliminate all Flash from the website. That is done with just one line of jQuery: $("iframe,object,embed,input[type=image],ins").hide(); With little help of Ben Alman’s bookmarklet making tool we can transform this simple jQuery into a bookmarklet.…
Yesterday I stubbled upon one incredible post about One line browser notepad by Jose Jesus Perez Aguinaga there are also some very useful and helpful comments on his blog post. The idea is using your browser like minimal distractions-free writing editor. The great thing is you can work locally even without internet. You don't need additional apps and other fancy stuff just you and the browser.…
For several mounts I've been working on my new project http://www.customlogoland.com/ Custom Logo Land is collection of 51 simple handmade logo templates that are easy to personalize. All 51 logos cost $99. Why I made this project? In the past I needed Logo for some of my open source projects, apps and demo templates but I want prepared to buy expensive logo for every single project. That is why…
In the last couple of months I've made few Android Apps with web technology HTML + CSS + JavaScript and PhoneGap to package the apps for the Android Market. Designing for Android is really challenging because you don't have standard screen dimensions like for iPhone or iPad so making px perfect design is practically impossible in Android. The need of having fluid design in Android in several cases…
I thought that it can be handy to have some way to copy web browser url to mobile browser url without wasting time and auto sanding emails. The simple solution can be making the QR code from the current domain and scanning that QR your mobile phone. I made simple bookmarklet that takes the current web browser url and inserts the QR photo inside the browser. It only takes one line of jQuery code…
De gustibus non est disputandum - “There is no arguing about taste.” You made semicolon cry: Ej, JavaScript community we should argue about more important things. Don't you think?