{Carrer web log}


Blog about web design & development

One Page 2020 Calendar Print Version

Wednesday, January 22, 2020 { 0 Comments }

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

Monday, January 21, 2019 { 0 Comments }

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

Wednesday, October 17, 2018 { 0 Comments }

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





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

Monday, July 16, 2018 { 0 Comments }

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

Monday, June 04, 2018 { 0 Comments }

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

Monday, May 28, 2018 { 0 Comments }

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

Monday, May 21, 2018 { 0 Comments }

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



RSS IconTwitter icon Twitter icon Twitter icon

About Me <<<

Name: Vladimir Carrer
vladocar [at] gmail.com
Location: Verona, Italy
I'm a web designer, developer, teacher, speaker, generally web addicted ...

My projects <<<

§§Previous Posts <<<

Hand Drawn Icons
Photoshop Wireframing Kit Ad
 

§Archives <<<

Other Profiles <<<

View Vladimir Carrer's profile on LinkedIn

Content is licensed under a Creative Commons Public Domain License