Forem: Vladimir Carrer

Free Figma (Low Fidelity) Hand Drawn Wireframe Kit

Vladimir Carrer — Wed, 02 Jun 2021 12:28:55 +0000

Low fidelity wireframes are sketches of the page layout and the basic navigation. The goal of a low fidelity wireframe is to give you a general sense of the hierarchy of information, the placement of major components on the screen, and the general flow of interaction.

Below are a few good examples of wireframes with low fidelity and download this Figma Free UI Wireframe kit with hand drawn style.

Nowadays, more and more designers are moving away from Photoshop to utilize other software. When you want to make a prototype, you can simply edit the content right inside Figma and collaborate easily with your peers. Also, if you want to go further than the prototype, you could build a fully- featured app with web components and a backend.

Free Figma Hand Drawn Wireframing Kit

GPT-3 and CSS Frameworks

Vladimir Carrer — Wed, 05 May 2021 13:17:54 +0000

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:

text: 4 | 4 | 4
code: <div class="four"> </div> <div class="four"> </div> <div class="four"> </div>

text: 3 | 3 | 3 | 3
code: <div class="three"> </div> <div class="three"> </div> <div class="three"> </div> <div class="three"> </div>

text: 2 | 2 | 2 | 6
code: <div class="two"> </div> <div class="two"> </div> <div class="two"> </div> <div class="six"> 

text: 3 | 2 | 4 | 3
code: <div class="three"> </div> <div class="two"> </div> <div class="four"> </div> <div class="three"> </div>

text: 3 | 2 | 4 | 3 | 4 | 8
code: <div class="three"> </div> <div class="two"> </div> <div class="four"> </div> <div class="three"> </div> <div class="four"> </div> <div class="eight"> </div>

text: 3 | 2 | 4 | 2 | 2 | 8
code: <div class="three"> </div> <div class="two"> </div> <div class="four"> </div> <div class="two"> </div> <div class="two"> </div> <div class="eight"> </div>

text: 3 | 2 | 9 | 
4 | 4 | 12 | 
5 | 2 | 4
code: <div class="three"> </div> <div class="two"> </div> <div class="nine"> </div> <div class="four"> </div> <div class="four"> </div> <div class="twelve"> </div> <div class="five"> </div> <div class="two"> </div> <div class="four"> </div>

text: 3 | 2 | 9 | 
4 | 4 | 11 | 
5 | 2 | 4
code: <div class="three"> </div> <div class="two"> </div> <div class="nine"> </div> <div class="four"> </div> <div class="four"> </div> <div class="eleven"> </div> <div class="five"> </div> <div class="two"> </div> <div class="four"> </div>

text:

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.

SMART CSS GRID - Minimal CSS Framework

Vladimir Carrer — Mon, 08 Feb 2021 09:14:40 +0000

Smart CSS Grid is CSS GRID based fluid responsive layout system with 12 columns.

Minimal. It is only 0.5 KB.
Clear syntax.
No unnecessary nesting, meaning you will write less HTML.
Responsive.
Flexible the main width can be any number or uint ex: 960px, 90% or whatever you like.
Supports rows merging, nesting columns, column swapping..

The project is designed to adapt to any size or any column gap. You can change these values into the main CSS file. Example width: 85% and grid-gap: 20px; or width: 1200px and grid-gap: 14px;

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

Demo 1

Download or Install

You can simply download the library or use:

$ npm i smart-css-grid

You can use PKG CDN:

 <link rel="stylesheet" href="https://unpkg.com/smart-css-grid@1.0.0/smart-grid.css">

Project on Github: https://github.com/vladocar/SMART-CSS-GRID

Screenshoteer - Makes web screenshots and mobile emulations from the command line.

Vladimir Carrer — Mon, 01 Feb 2021 13:34:56 +0000

Tool based on puppeteer.

Installation

npm i -g screenshoteer

You can use screenshoteer like this:

screenshoteer  --url https://www.example.com

or .html localy copy the url path from the browser

screenshoteer --url file:///Users/../index.html
screenshoteer --url file:///C:/Users/../Random-HTML-file.html

And with the help of puppeteer(Headless Chrome) it will generate screenshot of the entire web page.

Parameters:

-h help

--url web page url

--emulate - emulate web device example: --emulate "iPhone 6"

--fullpage - can be true or false. It will take screenshot of entire web page if is true. True is the default parameter.

--pdf - generate additional pdf

--w - width of the Web Page in px

--h - height of the Web Page in px

--waitfor - wait time for the page load in milliseconds

--waitforselector - wait for the selector to appear in page
--el - css selector document.querySelector

--auth - basic http authentication

--no - exclude "image", "stylesheet", "script", "font"

--click - example: ".selector>a" excellent way to close popups or to click some buttons on the page.

--file - output file name (optional, otherwise based on page title and timestamp)

--theme - switch to dark or light color theme

--vd - Emulate vision deficiency 'achromatopsia', 'deuteranopia', 'protanopia', 'tritanopia', 'blurredVision', and 'none'

Examples:

screenshoteer  --url https://news.ycombinator.com --fullpage false

screenshoteer  --url https://www.reddit.com/r/nodejs --emulate "iPhone 7"

screenshoteer  --url https://www.nytimes.com  --emulate "Nexus 4"

screenshoteer --url https://www.reddit.com/r/javascript/ --w 600 --h 800 --fullpage false

screenshoteer --url https://www.reddit.com/r/javascript/ --w 600 --h 0 --fullpage false

screenshoteer --url https://lobste.rs --pdf

screenshoteer --url https://lobste.rs --w 500

screenshoteer --url  https://news.ycombinator.com/item?id=18598672 --el ".fatitem"

screenshoteer --url  https://site.com --auth "username;password"

screenshoteer --url https://www.nytimes.com --no "image"

screenshoteer --url https://www.nytimes.com --no "script"

screenshoteer --url https://www.economist.com/ --click ".ribbon__close-button"

screenshoteer --url file:///Users/../index.html

screenshoteer --url https://www.slashdot.org --file /tmp/slashdot.png

screenshoteer --url https://mxb.dev/blog/color-theme-switcher/ --theme dark

screenshoteer --url https://news.ycombinator.com --vd blurredVision

Github: https://github.com/vladocar/screenshoteer

Minimal Notes - web app build with Vue.js

Vladimir Carrer — Wed, 27 Jan 2021 13:18:46 +0000

There are many notes apps, but I needed something simple that works for me on my laptop.

That is why I made minimal notes that will work in my browser locally.

Everything is stored in your web browser localStorage. All the coding is done with Vue.js and the best part is everything is in the index.html file that is only 4Kb.

I also made Minimal Notes.app for Mac OS users. First I used Electron to package the app. But the file from 4Kb became 400 Mb, with some optimization I achieved around 140 Mb but I was not happy. Then I tried Cordova for Mac and worked perfectly. Now the file is 0.45 Mb that is much better then 140 Mb.

Demo:
https://vladocar.github.io/Minimal-Notes/

The project on github:
https://github.com/vladocar/Minimal-Notes

Basic.css - Classless CSS Starter File

Vladimir Carrer — Mon, 18 Jan 2021 15:01:15 +0000

Basic.css gives you basic CSS formatting and ability to make basic grids with only HTML5 syntax. You can use this project to Set your default styling.

List of features

Lightweight 1kb minified and gzipped.
Basic typography.
Basic forms.
Custom colors.
Dark theme.
Round corners.
Flex Grid without classes.
Flex Grid cards.

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

You can change root css variables with your color palette:

:root {
  --c1:#0074d9;
  --c2:#eee;
  --c3:#fff;
  --c4:#000;
  --c5:#fff;
}

Or adjust the round corners

By default are 8px, use --rc: 0px; if you don't like round corners.

:root {
  --rc: 8px;
}

Override the colors in the dark mode:

@media (prefers-color-scheme: dark) {
    :root {
      --c2:#333;
      --c3:#1e1f20;
      --c4:#fff;
    }
}

How you can use the infinity flex grid?

Use the HTML5 tags section and nested section to make flex grid.

<section>
    <section> 1 </section>
    <section> 2 </section>
    <section> 3 </section>
</section>
<section>
    <section> 1 </section>
    <section> 2 </section>
    <section> 3 </section>
    <section> 4 </section>
</section>

Demo: https://vladocar.github.io/Basic.css/grid.html

Use the HTML5 tags selection and article to make cards.

<section>
    <article> 1 </article>
    <article> 2 </article>
    <article> 3 </article>
</section>

Demo: https://vladocar.github.io/Basic.css/cards.html

How to use this project?

Simply download and personalize the basic.css file.

npm i @vladocar/basic.css

Why should you use this project?

Instead of using CSS Reset you could just Set the basic css formatting and styling. You could even make some grids with the HTML5 tags. Naturally if you want to build something more complex you should use CSS classes and this project works great in combination with other CSS frameworks.

Github: https://github.com/vladocar/Basic.css

Boilerplate README.md Template for GitHub or GitLab

Vladimir Carrer — Thu, 12 Nov 2020 09:04:32 +0000

I hate to always "reinvent" README.md on GitHub that is why I decided to make this Starter README.md template. Also I prefer HTML syntax because I use HTML every day and it has some extra features like center the elements. I also included markdown version.

https://github.com/vladocar/boilerplate-readme-template

Scribble Font for Wireframing

Vladimir Carrer — Mon, 09 Nov 2020 12:02:15 +0000

Scribble Font is a replacement for Lorem Ipsum Text and works great with low fidelity wireframes.

Low fidelity wireframes are quick rough sketches that represent the initial concept (blueprint) of a website or app.

Here is a demo of the Scribble Font with low fidelity wireframe:

The Scribble Font is free (MIT license) and can be downloaded from github:
https://github.com/vladocar/Scribble-Font

Here is also a list of other similar free fonts for wireframing and prototyping