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 up some boring repetitive code creation. GPT-3 works great with well structured code that has clear naming logic. I tried to train it to generate layout HTML with clear class syntax. I used my Smart CSS Grid Framework because it has simple naming logic.
CSS Classes are named from one to twelve because it is a 12 grid system. The logic is the total of each row should be always 12 or something like this 3 + 3 + 4 + 2 = 12 The idea was, when I write something like this: 3 | 3 | 6 To receive something like this:
After a couple examples GPT-3 started to work almost perfectly even with more complex layouts.
Here is the text I used to train GPT-3:
Important to keep the “temperature” to 0, we don’t want GPT-3 to be creative.
This is a super simple example of how GPT-3 can be used to generate repetitive HTML code. Basically all CSS Frameworks follow certain rules that can be easily used for GPT-3 training.
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 for the bravest. For every IE browser we had a special layout hack, if the layout wasn’t px perfect it would brake. Probably the worst thing was that there were no browser profiling tools. So everything was based on trial and error.
In those chaotic times CSS Reset was born and it was loved by everyone. It served as a bridge gap between various browsers. Everyone used CSS Reset, it became so popular that people forgot why it was implemented in the first place. The main debate between web designers was what kind of CSS reset we should use. Advising against use of CSS reset was considered CSS blasphemy.
What is the purpose of CSS reset today, in the chromium dominated browsers market?
Just as a reminder, Chrome used Apple's open source WebKit browser engine to later create the Blink browser engine. So, Safari and Chrome have the same origins.
Chromium (Chrome, Edge, Opera, Brave, Vivaldi) + Safari have total browser domination. Firefox has only 8% market share in the desktop/laptop market.
In addition, the differences between Firefox, Chromium and Safari are negligible.
Conclusion: CSS Reset is obsolete.
What you may not know also, is that every browser has its own default CSS. So there’s no need to reset something that is already set with the default styling.
Let's take some random HTML element like H1 tag. Often we make the mistake to define the same element over and over. First H1 element is defined by the browser default CSS then it’s reseted in the CSS Reset and it’s set many times over before it's rendered.
My suggestion is to set the HTML elements once and try to stick with that setting. Always minimise the number of element settings and resettings.
Make your own default.css where you define colors, dimensions, round corners and all the important HMTL elements that you are planning to use. If you do not plan to use the H6 tag or some form or table tags don’t put them in your defaut.css.
Here is my take on this problem:
It’s called Basic.css and it sets the common styles without resetting anything. It’s also ultra-light, at less than 1 Kb.
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).
keywords-extract
Command line tool for keyword extraction. This Node.js project works mainly with two node modules "node-readability" that filters only the main text clearing the noise from the main text and "gramophone" module that filters the keywords from the texts.
PDFSave
PDFSave uses node-readability for clearing all non essential content. Later with pdfkit converts the HTML to lightweight PDF. PDFSave is text only, it doesn't save images or other multimedia content.
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 TODO-like web apps.
I'm taking about RAMD.js or Render - Add - Modify, Delete simple JS library for making web TODO projects. It is only 0.65 Kb minified and compressed.
It is based around "simplified virtual DOM" that is JavaScript Object listing the essential element properties. It is internal database that can be managed or stored locally or on the server.
You can use RAMD.js for making “list” applications and you can save the "simplified virtual DOM" in the browser or on the server. All is made with simple JavaScript functions that you can modify and personalise.
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 have super dynamic layout system with 20 lines of .scss.
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 be 1000px or 89%, 70em or whatever you prefer. Also the gutter(margin) can be easily customised and supports nested columns. But probably the coolest feature are the fluid columns, you can add one or more fluid columns in one row and the grid will auto correct.
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 greatest quality. It is super customizable and you can add or remove methods directly in the library without braking the structure. All methods are unrelated so adding or removing one will not affect the library. You can make your custom library directly in the main code.
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 background. It probably is most logical system if you are starting with HTML + CSS layouts. Also it generates much cleaner HTML avoiding unnecessary nesting.
Why I build the SMART CSS GRID system?
Because with just with few lines of CSS code you can make super powerful layout system. The theory is that CSS Grid doesn’t need another grid system because is already a grid system. This is true and the purpose of this project is not to make another grid but to reutilise CSS Grid in a smart way. Basically using few CSS classes that you can reutilise in your entire project, rather than making custom CSS for every layout. Don’t repeat yourself.
This project is also meant as starting point. You could and you should change the main .css file directly. You can easily change the main width of the layout that currently is 960px or change the grid margins with any number or unit that you like. Because this is project is only 36 lines of code you will understand what the code does in less than 10 seconds.
What you can do with this system?
You can build 1 to 12 column grid with any size and any grid margin size. You can merge rows, you can swap column places, if necessary any column sell can become entire grid using the .nested class. It is responsive layout and you can personalise its behaviour. You will write less HTML because it uses cleaner CSS architecture, no unnecessary HTML column nesting.
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:
.dp50 {width:50%; float:left}
Just one CSS class, that is doing all the work. You can also make it responsive but it will no longer be one line system.
Like I said before this project was made for fun and I don’t recommend it for production. Mainly because of unnecessary div nesting.
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 functionality. For me the process of drawing was magical experience almost like meditation. There is some hidden beauty in the hand drawn art, so un-perfect yet pleasing and beautiful.
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 & Drop functionality. So you have 350 Illustrator shapes & icon to be used for rapid illustrator prototyping.
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.
The "magic" is in media="print", this CSS file will be used by the browser only when you print. You can also use it inside CSS like @media print { .. }.
Only work you need to do is hide the stuff you don't need in the final print. Basically you hide some id and class in the CSS like: #navbar, #footer, .someClass, .otherClass { display : none; }
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.
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 objects in 300 dpi resolution.
You can use the more than 50% early Black Friday and Cyber Monday discount:
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 defended that concept in the past.
I conduct several experiments in photoshop examining different typefaces in the search of common logic, searching what parameter should be using for determine the quality of good line height.
The question is what is ideal line-height size?
In my opinion that will be the minimal amount of distance between the lines where our "eye" wouldn't jump (mix) one line from the other.
In other words we will have clear track for every line in the text without confusing and mixing the lines in the reading process.
How can we determine the ideal line height?
I started with the idea of most repeated letter size in the text or the size of the small letters like a, e, i standardized with x-height.
I think that the x-height can be used like a measure for ideal line height. That is the safe distance between the lines based on most repeated letter size.
So the formula is quite simple:
line-height = font-size + x-height
Helvetica, Arial 1.52
Futura 1.51
Georgia 1.48
Lucida Grande 1.53
Optima 1.47
Palatino 1.47
PT Serif 1.50
Times New Roman 1.45
Verdana 1.55
Tahoma 1.55
Other things to consider font-size is "not" font size, what I mean in the english alphabet the longest letters may be smaller then the font size, example the letter "j" in Helvetica probably the highest letter is english alphabet is only 93px in 100px font. Based on this calculation 93px the height of the j letter + 52px the height of the x letter is 145px line height for Helvetica.
The point of this article is know your font and alphabet and apply the line-height based that font.
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 also think that grid system is poorly used by Apple, the default iOS 7 icons are lacking consistency and contrast (probably the Apple will change that in the future).
The grid system can probably best understand by starting with the biggest 1024px x 1024px icon, I will use that size like default measure.
The grid system is basically based on 64 x 64, 16px x 16px square blocks.
You can see on the picture how the rectangular 512px x 320px with golden golden ratio is used for the calculation of the circles.
I played with the Golden Ratio and various Grid System for years and my personal believe that the iOS 7 grid system is meaningful and very well designed.
I've used Photoshop to replicate the icon and grid design, the grid is made with Photoshop Guides (View > Show > Guides). I tried to make everything as px perfect as possible. If you have any suggestions let me know.
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. Basically now you have two icon sets one with gray icons and the other with almost black icons.
*If you already purchased the icons you have free update, you need to go your download link inside your confirmation mail.
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. Naturally there are no privacy issues because you work locally inside your browser.
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 this project is born, affordable logos for everyone.
I think there is real need for logo templates that are generic, versatile and can be used multiple times in various projects.
I think that this project can be ideal for:
- People who are making startups and need something inexpensive or the idea is "under development" and they need present the initial project to potential investors.
- Developers who are making WordPress, Drupal, Joomla templates and they need a Logo for their demo template.
- Logos for developers for their open source projects.
- Logos for app developers.
- Logo for your clients with low budget.
- Or you simply like some of the logos and you think that it can right for your project.
You can use the logos endless times for your personal or professional project and you can even sell one of the logos in the template and make money.
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 made me think how can I made simple and effective CSS layout that I can be used like a baseline in my future apps.
I was simply trying to make one column layout with fluid body and fixed margins.
If you have some experience with CSS you will know that mixing px and fluid layout is always hard to achieve with CSS.
How can this be done in CSS?
Probably there are several solutions for this problem but I wanted to implement the solution that will work in almost every browser. Naturally we need this solution only for the Mobile Browsers.
Building layouts for mobile phones in most cases is one column grid if we don't know the size of that device like in case of many Android Phones it can be smart to use elastic column with px margins.
To achieve that in CSS we have this bulletproof solution:
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.
