Carrer Blog

GPT-3 and CSS Frameworks

2021-04-27T00:42:00.005+02:00

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:

<div class="three"> </div> <div class="three"> </div> <div class="six"> </div>

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.

Don’t use CSS Reset use CSS Set

2020-06-24T12:58:00.000+02:00

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.

Take a look.

https://vladocar.github.io/Basic.css/

One Page 2020 Calendar Print Version

2020-01-22T12:13:00.000+01:00

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.

3 CLI tools based on Node.js

2019-01-21T00:00:00.000+01:00

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 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.

Install:

npm i -g keywordsextract

Demo:

keywordsextract --url https://en.wikipedia.org/wiki/Search_engine_optimization --n 3,4

https://github.com/vladocar/keywordsextract

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.

Install:

npm i -g pdfsave

Demo:

pdfsave --url https://www.lipsum.com

https://github.com/vladocar/PDFSave

Scribble Font for Prototyping & Wireframing

2018-10-17T08:11:00.002+02:00

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

ramd.js - Small JavaScript library for making TODO-like web apps

2018-07-16T12:50:00.000+02:00

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.

You can find ramd.js here:

https://github.com/vladocar/ramd.js

Katana.scss - CSS Layout System made with Flexbox

2018-06-04T00:46:00.002+02:00

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.

Enjoy!

You can find Katana on GitHub:

https://vladocar.github.io/Katana/

or

https://github.com/vladocar/Katana

Flexy CSS Framework

2018-05-28T01:11:00.002+02:00

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.

Here is the Flexy Demo:

https://vladocar.github.io/flexy/

It can be dowloaded on GitHub (also you can find more demos):

https://github.com/vladocar/flexy

nanoJS - JavaScript for DOM manipulation

2018-05-21T12:21:00.000+02:00

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.

Syntax example:

$(".someClass").css("background-color:green;").html("Hello World");

Compatibility:

IE9 and later.

Credits

I want to thank for Bjørn Rosell for forking picoCSS and making it chain-able.

You can find nanoJS here:

https://vladocar.github.io/nanoJS/

or here:

https://github.com/vladocar/nanoJS

SMART CSS GRID

2018-05-02T08:20:00.001+02:00

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.

You can find the project here:

https://vladocar.github.io/SMART-CSS-GRID/

or

https://github.com/vladocar/SMART-CSS-GRID

1 Line CSS Framework

2018-03-12T00:10:00.001+01:00

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.

Here are some demos:

Demo1

Demo2

Demo3

You can download the demos on GitHub or here.

Hand Drawn Icons V.2

2015-11-04T18:27:00.001+01:00

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.

Enjoy!

www.handdrawnicons.com

Illustrator Wireframing Kit

2014-10-08T11:13:00.001+02:00

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.

Download Illustrator Wireframing Kit or here.

Hartija - CSS Print Framework (Update)

2014-09-17T07:11:00.002+02:00

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 CSS:



<link rel="stylesheet" href="print.css" type="text/css" media="print">

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; }

Download Hartija CSS Framework on GitHub

Photoshop Wireframing Kit - Update

2014-03-12T00:06:00.001+01:00

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.

Modern Logo Mock-ups

2013-11-28T00:57:00.002+01:00

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 objects in 300 dpi resolution.

You can use the more than 50% early Black Friday and Cyber Monday discount:

Modern Logo Mock-ups

Also all my other products have 50% discount for one week period:

Hand Drawn Icons

Photoshop Wireframing Kit

Custom Logo Land

In the search of ideal line-height

2013-10-23T02:12:00.000+02:00

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.

Demystification of the iOS7 Icon Grid Design

2013-06-20T00:47:00.000+02:00

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 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.

The circles dimensions are based on Golden Proportions.

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.

>>Download the Photoshop file here

Free for personal and professional use.

Hand Drawn Icons 1.2 Update

2013-06-05T02:44:00.001+02:00

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.

http://www.handdrawnicons.com/

Clear Flash Ads with one line of jQuery

2013-03-19T13:44:00.000+01:00

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.

ClearAds - Drag or Save this link to your bookmarks

Use this bookmarklet to eliminate all annoying flash ads from any website.

Cheers

Writability - Write in your browser

2013-01-31T08:03:00.001+01:00

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.

I've started from the basic Jose Perez solution and some comments of other people and I combined that with my knowledge from my previous web typography projects like (Better Web Readability Project - CSS Library, Azbuka - CSS Typographical Base Rendering Library, Clipr - bookmarklet for better reading and the final result is Writability.

Here it is Writability - Minimal Distractions Free Browser Text Writing Tool

Just put this code inside your browser url tab:

You can use additional formatting like bold, italic in some browsers (Example you can use Cmd+B (bold), Cmd+I(italic) on Safari for Mac)

I've tested this solution on Safari, Chrome, Firefox for Mac and Firefox for Windows.

Here is how this solution works on Safari:

Comments or suggestions?

Custom Logo Land - Logos for Startups

2012-11-28T03:54:00.001+01:00

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 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.

Any question or comments?

Link http://www.customlogoland.com/

One Line CSS Mobile Framework

2012-08-30T03:21:00.000+02:00

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.

The solution is: width:auto;

.row { margin: 10px }

You don't believe me that this will work?

>> Here is the demo

Let us examine the code:

/* You don't need to specify float:none because is default, but in some cases you need to overwrite some previous float */

float:none;

/* The default state of the width is auto, you don't need to write this except if you want to overwrite some previous width statements */

width:auto;

/* In we want later to use position:absolute starting from that element we need: */
position:relative;

/* We can use px,ems,% for the margins */
margin:10px 20px;

/* And we can also add padding, border and rounded corners and other things .. */

padding:10px;
border: 10px solid #ccc;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
clear:both;

Problems with this solution:
If we have images they in some case break out from the layout.

To fix this problem we can use:

/* float:left or right */
float:left;

This solution can fix the image problem but will open another problem in some cases (little text) the layout will not take entire screen.

Other solution:
Using max-width and min-width with that is bigger than the biggest image. This solution will work but is not handy.

The final solution:
overflow: hidden;
You can read more here.

>> Here another demo

We can use this solution not just for android but for every other phone with decent HTML, CSS support.

This solution also works great with mobile Responsive Layouts.

>>Here is the Responsive Layout Demo1

>>Here is the Responsive Layout Demo2

>>Here is actual Android Working App build with this CSS Solution.

Conclusion:

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:

.anynameyoulike, ul>li {
width: auto;
float: none;
overflow: hidden;
margin:10px;
}

You can also add padding, borders, rounded corners, shadows …

This solution also works for making Responsive Layouts.

Let me know if you have any questions, suggestions or comments.

URL to QR Bookmarklet

2012-06-11T00:28:00.000+02:00

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 and the simple web services read more here http://www.webmaster-source.com/2010/10/11/generate-qr-codes-on-the-fly-with-the-google-chart-api/

Here is the code used for this bookmarklet(jQuery):

Or pure JavaScript code:

Save some precious time and use this bookmarklet:

URL to QR - Drag or Save this link to your bookmarks

To remove the QR code from the web page simply Refresh the web browser.

If you don't know what is Bookmarklet here is the Wikipedia link

Update: thanks to Gergely Iharosi for the Close Button https://gist.github.com/2909104

Semicolon Drama ; {

2012-04-20T01:31:00.000+02:00

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?