Posts

#csspills Per avere un Debugger CSS Layout istantaneo basta applicare questa breve riga di codice in console:

for(i=0;A=$$("*")[i++];)A.style.outline="solid hsl("+(A+A).length*9+",99%,50%)1px"

delinea ogni elemento DOM sulla pagina con un colore esadecimale casuale.

SPRITE SVG

Il servizio icomoon.io, che sicuramente conoscerete in tanti, implementa in maniera ottimale l'inclusione degli svg con il metodo dello sprite.

I vantaggi più evidenti sono:...
- Avremo una sola http request
- il formato vettoriale è perfetto per qualsiasi densità di schermo
- Le svg sono facilmente customizzabili via CSS

Lo sprite in questione non è altro che un SVG con all'interno tanti symbol ognuno dei quali ha un ID univoco. Nel vostro html per richiamare il singolo symbol basterà fare:

<svg class="icon icon-xxx">
<use xlink:href="#icon-xxx"></use>
</svg>

See More
Using IcoMoon you can easily search and download vector icons or generate fonts (icon fonts). This tool can also be used for icon set management. It can generate icon fonts, SVGs, PDFs, PNGs and sprites.
icomoon.io
Photos
Videos
Nuovo logo laboratorioCSS
7
10
Posts

#csspills Quando si creano componenti in SASS e BEM è molto utile salvarsi una variabile $root in testa al componente (lo scope è locale), cosi da poterla riutilizzare all'interno dei vari elementi o modificatori rendendo il tutto più modulare.

Ho creato un piccolo codepen per illustrarvi meglio il tutto

...
codepen.io

Ignoravo l’esistenza di alcuni di loro... e voi invece, li usate tutti o vi limitate al semplice .log?

A simple guide to consoling effectively through javascript debugging
dev.to

Atomic Design: Pensare a Componenti Modulari

L'Atomic design è una metodologia creata da Brad Frost composta in 5 differenti fasi che unite ci aiutano a creare un sistema di interfacce, in maniera gerarchica. In questa talk esploreremo le caratteristiche e le potenzialità dell'Atomic Design e da quali agenzie e grandi aziende viene utilizzata.

meetup.com

Ecco il programma completo del #CSSday2018!!!

'arduino-sass' - Custom SASS framework, dal design all'implementazione (Stefania Mellai)

Layout Saga - in the web application era (Alessandro Violini)

...

Uno stile per ogni occasione (Andrea De Carolis)

Web font mania – nel bene e nel male (Giulia Laco)

Super fast transitions (Giacomo Zinetti)

Incapsulamento e theming: le nuove frontiere dell'ultima sfida CSS (Massimo Artizzu)

Media Queries Next Level (Carmine Alfano)

Come Javascript ha cambiato il CSS (Davide Di Pumpo)

Modifichiamo le nostre SVG grazie ai CSS (Andrea Barghigiani)

See More
Nato come evento interno ad una track del JsDay e dallo stesso team di organizzatori dietro a Kerning, il CSSDay vuole dare una dignità alla tecnologia che rende tutti i siti più leggibili, interattivi ed anche belli da vedere.
2018.cssday.it

Cosa c’è di meglio che testare i propri siti su device veri? ... in realtà nulla.
Però qualche servizio online che ci facilita la vita esiste... ad esempio: http://sizzy.co/

A tool for developing responsive websites crazy-fast. Preview changes on multiple devices instantly.
sizzy.co

Dai soliti fullstackbulletin ci arriva questo articolo su BEM e in generale sulla name convention che ci è piaciuto molto:

I have heard lots of developers say they hate CSS. In my experience, this comes as a result of not taking the time to learn CSS.
medium.freecodecamp.org

Una serie di linee guida opinionate per scrivere Sass sano, manutenibile e scalabile. Tutto tradotto in italiano 🇮🇹 !!!

Ragionare in maniera scalabile è un’ottima metodologia per non ritrovarsi tra le mani di punto in bianco un monolite di cemento armato da usare come corpo morto da ormeggio .

Organizzazione di file e cartelle (7:1 / itcss), bassa specificità, poche dipendenze, componenti riusabili, utility classes ("Separation of Concerns" ma senza impazzire 😉 ) e name conv...ention (BEM) sono alcune delle regole da seguire per vivere sereni.

Eccovi alcuni link:
- 7:1 :: https://github.com/HugoGiraudel/sass-boilerplate
- itcss :: https://csswizardry.net/talks/2014/11/itcss-dafed.pdf
- specificità graph :: https://github.com/StefanoVollono/specificity-graph
- BEM :: http://getbem.com/
- utility classes :: https://blog.mariano.io/css-utility-classes-how-to-use-them…

Fateci sapere nei commenti che approccio e che metodologie utilizzate nei vostri progetti CSS!!

See More
Una serie di linee guida opinionate per scrivere Sass sano, manutenibile e scalabile.
sass-guidelin.es

Video gratis da inserire nei vostri siti.

Beautiful, free videos for your homepage background
coverr.co
Questo che segue è un piccolo riassunto su cosa aspettarsi quando si utilizzano unità di misura relative (percentuali, em, rem, vh etc...).
Quando dichiariamo un font-size o un width con un’unità di misura relativa, ci si deve aspettare che sia calcolata in relazione a qualcos’altro. L’engine del browser ovviamente le calcola per noi e ce le mostra convertite in pixel nel tab “computed”.
Conoscere...
Questo che segue è un piccolo riassunto su cosa aspettarsi quando si utilizzano unità di misura relative (percentuali, em, rem, vh etc...).
Quando dichiariamo un font-size o un width con un’unità di misura relativa, ci si deve aspettare che sia calcolata in relazione a qualcos’altro. L’engine del browser ovviamente le calcola per noi e ce le mostra convertite in pixel nel tab “computed”.
Conoscere...

A tutti gli sviluppatori mobile in ascolto:
3 pacchetti di libri a 3 prezzi differenti a partire da 1 dollaro.

Pay what you want for ebooks and video courses and support charity!
humblebundle.com

Stasera da Mikamai un bel talk da non perdere!

Tonight from mikamai a nice talk not to be missed!
Translated

Canvas, CSS animations, Virtual DOM e tante altre cose super
powerfullose e cosa fa quotidianamente un frontend developer
oggi? Webapp che visualizzano tabelle ...su tabelle...
Eppure ci sono tantissime funzionalità HTML, CSS e JS che
possono permettere a qualunque frontender di esprimere il
proprio estro creativo tramite codice.
Non saranno per forza skills spendibili sul posto di lavoro...
ma è giunto il momento di re-imparare a divertirci!. Con Salvatore Laisa e grazie ai nostri Sponsor Mikamai, JetBrains e Crebs

See More
Jan 30 7:00 PM UTC+01 · Mikamai
meetup.com

Che vi piaccia oppure no, Bootstrap4 è in versione stabile.

La differenza che c'è tra una libreria e un framework è che una libreria, essendo una dipendenza, è sostituibile in qualsiasi momento con un'altra che fa la stessa cosa. Un framework invece è l'essenza stessa del progetto.

Noi portiamo avanti da sempre l'idea che se un progetto non deve fare niente di meno e niente di piu di quello che bootstrap è in grado di fare, perchè non usarlo? Questo significa che però il pro...getto nasce e vive seguendo al dettaglio i dettami imposti dal framework stesso. Non ci si può inventare robe strane o cominciare a fare override come se non ci fosse un domani, perchè sicuramente non è la strada giusta.

Questo concetto è ovviamente applicabile a qualsiasi tipo di framework, che sia Bootstrap o Angular. Se si intraprende una strada, bisogna percorrerla senza deviazioni. Altrimenti è meglio partire subito con una soluzione custom!

Quindi, vi piace? vi serve? USATELO!

See More
The most popular HTML, CSS, and JS library in the world.
getbootstrap.com