jdsteinbach.com
Planning & Implementing Meaningful UI Animations
https://jdsteinbach.com/css-animation
Planning and Implementing Meaningful UI Animations. Why Do We Animate Elements? Set a client’s site apart. Make it “pop”. Why Do We Animate Elements? Set a client’s site apart. Make it “pop”. Show off dev skill. Why Do We Animate Elements? Set a client’s site apart. Make it “pop”. Show off dev skill. Communicate meaning about content. We Make Up Stories. Whenever things happen,. We automatically invent a narrative. To explain those events. Post hoc ergo propter hoc. What Does Animation Communicate? Craft...
liudong.me
知识体系 · GitBook
http://liudong.me/web/knowledge-list.html
Hadoop 的 Java API. X77E5;识体系. X76EE;标:建立移动web开发知识体系. X65E0;线开发基本概念. X79FB;动端的头部标签和 meta. X5C3A;寸单位 px, em, rem(, vh, vw, vmin, vmax)的区别. Webkit-device-pixel-ratio 等常见的 iPhone 和 Android 屏幕参数. Media query, media type. X65E0;线布局适配. Grid, flex等布局方式. X7B49;比和非等比宽度布局实现. X4E8B;件类型. X624B;势事件 touchstart, touchmove, touchend, touchcancel. Touch事件支持的相关属性touches, targetTouches, changedTouches. X89E6;摸事件 gesturestart, gesturechange, gestureend. X5C4F;幕事件 onorientationchange. X9F20;标事件. MS Pointer事件. GPU 有	...
just4fun.io
Odcinek 12 - O Devtoolsach rozmawiamy z Konradem Dzwinelem
https://www.just4fun.io/odcinek-12-o-devtools
Odcinek 12 - O Devtoolsach rozmawiamy z Konradem Dzwinelem. Bull; June 22, 2016. Bull; 0 Comments. Codziennie spędzamy wiele godzin na pracy z przeglądarką. Kryje ona w sobie mnóstwo przydatnych narzędzi i ukrytych opcji. Dziś chcemy podzielić się z Wami tajnikami DevTools. Rozmawiamy z Konradem Dzwinelem. Google Developer Expertem. Dowiecie się czy trudno jest skompilować Google Chrome, jak użyć mniej znanych opcji oraz posłuchacie o doświadczeniach. Chrome Canary, developerska wersja Chrome.
blog.badalic.com
Destructuring: Pull to refresh
http://blog.badalic.com/destructoring-pull-to-refresh
Destructuring: Pull to refresh. A while ago I built a pen based on Ramotions. Pull to refresh concept. Its a really cool concept and I wanted to see if I can make it work on the web. Seeing as many people liked the end result, I thought it would be interesting to provide a follow up post on how I tackled the challenge and hopefully provide someone with a better understanding of how it all works. This is what we will be replicating. Step #1: Setup the HTML structure. In our case, the structure before we s...
iamphill.com
Fine tune your performance! - Phil Hughes
https://iamphill.com/post/fine-tune-performance
Fine tune your performance! It shows who actually cares about the website or feature they are building compared to people who just want it live. By performance, I don’t just mean loading times, whilst that is a huge factor, I mean the response time to user interactions. The time is takes to render a slider moving or that amazing animation you spent hours working on. It shows you care deeply about every little interaction that a user might take. 60fps is your target! Aim for that 60fps target. Animations ...
csslab.cl
Conoce cómo funciona el browser y optimiza tu código frontend | CSSLab | Laboratorio de ideas web
http://www.csslab.cl/2014/11/26/conoce-como-funciona-el-browser-y-optimiza-tu-codigo-front-end
Conoce cómo funciona el browser y optimiza tu código frontend. Hace no más de 2 años que la tendencia de los usuarios de internet han visto cómo han crecido de manera indirecta las siguientes afirmaciones:. Los sitios han crecido en peso de sus archivos ( CSS. La cantidad de usuarios que utilizan redes móviles (2G, 3G y 4G) ha crecido mucho, pero muuuucho. Hay poca consciencia de que sitios pesados y redes móviles limitadas no son buenos coeficientes de una misma ecuación. Tramo crítico de renderizado.
css-tricks.com
Debugging CSS Keyframe Animations | CSS-Tricks
https://css-tricks.com/debugging-css-keyframe-animations
Debugging CSS Keyframe Animations. August 3, 2015. Creating CSS animations may be about learning the syntax, but mastering a beautiful and intuitive-feeling animation requires a bit more nuance. Since animations command so much attention, it's important to refine our code to get the timing right and debug things when they go wrong. After tackling this problem myself, I thought I'd collect some of the tools that exist to aid in this process. Using Negative Delay Values. See the Pen LVMMGZ. In a fun demo, ...
SOCIAL ENGAGEMENT