Ir al contenido principal

Entradas

Comprimir excluyendo node_modules

tar --exclude='node_modules' -cvzf folder_name.tar.gz folder_name/
Entradas recientes

object-fit para corregir aspect ratio

Si se tiene una imagen, cuando se establece sus dimensiones con estilos:

.my-img { width: 150px; height: 150px; }
Si la imagen tiene un aspect ratio distinto (a 1 en este caso), se estirará para entrar en la caja.

Yo lo solucionaba colocando la imagen com background e indicando background-size: cover

Hoy encontré otra forma, que me parece mejor:

.my-img { width: 150px; height: 150px; object-fit: cover; }

Deploy react app en gh-pages

https://medium.freecodecamp.com/surge-vs-github-pages-deploying-a-create-react-app-project-c0ecbf317089#.v1mer95aa


npm install --save-dev gh-pagesEn package.json, indicar el url del site para gh-pages:
"homepage": "https://<github-username>.github.io/<project-repo>"En package.json, agregar el comando para el deploy:
"deploy" : "npm run build&&gh-pages -d build"npm run deploy

React Storybook

React Storybook permite desarrollar los componentes en un entorno más simple que dentro de la aplicación.

Esto evita tener que tomar toda la carga del proyecto para avanzar los componentes.

Así, si algo falla, es más facil encontrar dónde es. También, si se me ocurre algo nuevo, es más facil jugar con esa nueva idea.

Actualmente lo estoy probando en mi sistema que corre Windows 7, con nvm 1.1.1, node v6.9.5 y npm 3.10.10

Primero, instalé Storybook globalmente:

npm install -g getstorybook
Luego seguí las instrucciones para usarlo dentro de un proyecto que ya tenía hecho (y que había desarrollado con creat-react-app)

cd myprojec
getstorybook

En esta parte obtuve el mensaje de error:

$ getstorybook getstorybook - the simplest way to add a storybook to your project. • Detecting project type. ✓ • Adding storybook support to your "Create React App" based project. ✓ • Preparing to install dependencies. ✓ • Installing dependencies. ✖ An error occurred while installing …

Links 2017-02

2017-02 How to use spaced repetition with Anki to learn to code faster https://medium.freecodecamp.com/use-spaced-repetition-with-anki-to-learn-to-code-faster-7c334d448c3c#.kr8510uhkHyperApp is a 1kb functional JavaScript library for building modern UI applications https://github.com/hyperapp/hyperappLibreTaxi, free and open source Uber/Lyft alternative to connect passengers and drivers http://libretaxi.org/https://github.com/ro31337/libretaxiTelegram, a new era of messaging https://telegram.org/CoVim, Collaborative Editing for Vim https://github.com/FredKSchott/CoVimHow to write a successful conference proposal https://medium.com/@fox/how-to-write-a-successful-conference-proposal-4461509d3e32#.tdb8phqf4A Beginner’s Guide To Managing Software Development with Kanban and Trello https://www.toptal.com/agile/guide-managing-development-kanban-trelloCSS Grid – Table layout is back. Be there and be square https://developers.google.com/web/updates/2017/01/css-grid

Fixed Position Background Image

Referencia
CSS Fixed Position Background ImageAlternate Fixed & Scroll Backgrounds
Idea La imagen de fondo permanece en una posición fija mientras el resto del contenido se puede deslizar sobre ella.
La imagen va como background en un contenedor.
position: fixed permite fijar la imagen, pero el resto del contenido pasa por detrás en lugar de por delante.Nota: Si se le da un opacity explícito < 1 el contenido sí pasa por delante... pero si es opacity: 1 ya no... por qué será?
El truco se logra con background-attchment: fixed. DemoSee the Pen Fixed Position Background Image by Rulo Kobashikawa (@akobashikawa) on CodePen.