aarongarciah

▽ Managing CSS Projects with ITCSS

Source

• Video Harry Roberts - Managing CSS Projects with ITCSS
• Slides https://speakerdeck.com/dafed/managing-css-projects-with-itcss

Core concept

• Start with generic and end with explicit.
• Write CSS in specificity order.
• 📈 The Specificity Graph must be always trending upward.

aarongarciah

▽ Dressing ITCSS

Source

• Video Daniel Fornerlls - Dressing ITCSS
• Slides https://danifornells.github.io/dressing-itcss/#/

Layers

01. Settings

• Configuración del núcleo

aarongarciah

const Component = styled(
  'div',
  {
    // a. Seamless
    backgroundColor: 'primary',
    padding: '0 1',

    // b. With a prefix
    backgroundColor: '$primary',
    padding: '$0 $1',

aarongarciah

macOS Recommended Apps

• iTerm2 (+ oh-my-zsh + agnoster-zsh-theme)
• Rectangle Window manager
• Numi Calculator
• Kap Screep capture
• Linear Screen rules
• PixelSnap Measure things on screen
• Muzzle Silence notifications while screensharing
• Lungo Keeps your Mac awake

aarongarciah

javascript:(function(){var a=document.querySelectorAll('[data-eventchip]');Array.from(a).forEach(function(b){var c=b.querySelector('[aria-hidden="true"]');if(c){var d=c.childNodes;Array.from(d).forEach(function(e){if(window.eventNamesHidden){var f=e.dataset.oldText;f&&(e.textContent=f)}else e.dataset.oldText=e.textContent,e.textContent=''})}}),window.eventNamesHidden=!!!window.eventNamesHidden})();

aarongarciah

React Alicante 2018 Talks

Conference Day 1

• 2018 - The Year of Web Components, Dominik Kundel
• The Lonely and Dark Road to Styling in React, Sara Vieira
• Next Generation Forms with React Final Form, Erik Rasmussen
• The ABC of Coded Style Guides, Henning Muszynski
• Testing, Testing, 1, 2, NaN, Gant Laborde
• Lambdas, lambdas everywhere..., Flavio Corpa

aarongarciah

###Fluid properties (via)

@mixin fp($property, $min, $max, $start: 320, $end: breakpoint('desktop'), $clip: true, $clipAtStart: true, $clipAtEnd: true) {
	$start: $start / ($start * 0 + 1);
	$end: $end / ($end * 0 + 1);
	$multiplier: ($max - $min) / ($end - $start) * 100;
	$adder: ($min * $end - $max * $start) / ($end - $start);
	$formula: calc(#{$multiplier + 0vw} + #{$adder + 0px});
	@if $clip and $clipAtStart {
		@media (max-width: #{$start + 0px}) {

aarongarciah

See what you’ve been working on today (tweet by @csswizardry)

git log --since="00:00:00" --no-merges --oneline --author=<you@email.com>

http://wesbos.com/git-hot-tips/

git add -p

Rather than git add everything or individual files, this -p will allow you to step through each change, or hunk, and decide if you’d like to commit it. This is really handy if you have made two different changes to the same file and want to commit them separately.

aarongarciah

⚡Battery API 🔋

Playing with the Javascript Battery API. Some fast tests. Amazing stuff can be achieved!

The percentage and the level of battery change in real time. The color of the level bar will change accordingly with the battery level. And the bolt symbol will show/hide depending if the power adapter is plugged.

Learn more: https://davidwalsh.name/javascript-battery-api https://developer.mozilla.org/en/docs/Web/API/Battery_Status_API

aarongarciah

var scrolling = false;
$(window).on('scroll', function(){
	if( !scrolling ) {
		scrolling = true;
		(!window.requestAnimationFrame)
			? setTimeout(autoHideHeader, 250)
			: requestAnimationFrame(autoHideHeader);
	}
});