(x-post from r/Web_Design) Stripe Engineer explains design behind their landing page and provides tutorial.
Connect: behind the front-end experience
619
15
17
15
148
details
Share on
Facebook,
Twitter or
Google+
We recently released a new and improved version of Connect, our suite of tools designed for platforms and marketplaces. Stripe’s design team works hard to create unique landing pages that tell a story for our major products. For this release, we designed Connect’s landing page to reflect its intricate, cutting-edge capabilities while keeping things light and simple on the surface.
In this blog post, we’ll describe how we used several next-generation web technologies to bring Connect to life, and walk through some of the finer technical details (and excitement!) on our front-end journey.
CSS Grid Layout ... read the whole story at stripe.com.
CSS Grid + Flexbox Solving Real-world Problems ::
CSS Grid + Flexbox Solving Real-world Problems – Peter Mouland – Medium
Recently I had been given a responsive design that looked complex in the way items changed order and layouts changed at different viewports. This new design looked complex, until we thought of it in terms of CSS Grid and FlexBox.
The challenge for this would be supporting Internet Explorer 11 and Safari 9+.
After highlighting the design complexities, we will show the CSS needed to support modern browsers, then we’ll add IE support and finally get it to work in Safari 9 + 10.0.
The design
Looks pretty straight forward, with a couple points to note:
- The product Variation changes order
- CTA’s must be inline with each other
Laying out events on a calendar can be somewhat tricky. Many years ago, I had a client project where I needed to do a calendar similar to Google Calendar. I ended up using bitwise operators to figure out if there was room to put an event on a particular line. If there’s no room, it placed the event on the next available line.
There’s a lot of looping involved just to place an event on the calendar.
With CSS Grids, I wondered if I could take advantage of its auto-placement to accomplish the same thing.
The HTMLOf course, the first thing to worry about is the HTML. How should I mark up my events?
... read the whole story at snook.ca.Next.js 4 is here
ZEIT – Next.js 4: React 16 and styled-jsx 2
import {COLOR} from './css-config'; export default () => ( <div> Hello there <span>my friend</span> <style jsx>{` /* this style only applies to the span within lexical scope */ span { color: ${COLOR}; } `}</style> </div> )
In this case, COLOR
is a constant, which is supported in 1.x
What’s New With Server-Side Rendering in React 16
What’s New With Server-Side Rendering in React 16 – Hacker Noon
React 16 is here! 🎉🎉🎉
There are lots of exciting new bits (most notably the Fiber rewrite), but personally, I’m most excited about React 16's many improvements that have been made to server-side rendering.
Let’s take a deep dive into what’s new and different with SSR in React 16, and I hope you’ll end up as excited as I am!
First of all, let’s get a refresher on what server-side rendering looks like in React 15. To do SSR, you generally run a Node-based web server like Express, Hapi, or Koa, and you call
... read the whole story at hackernoon.com.Building Inclusive Toggle Buttons
Building Inclusive Toggle Buttons – Smashing Magazine
Editor’s Note: This article originally appeared on Inclusive Components. If you’d like to know more about similar inclusive component articles, follow @inclusicomps on Twitter or subscribe to the RSS feed. By supporting inclusive-components.design on Patreon, you can help to make it the most comprehensive database of robust interface components available.
Some things are either on or off and, when those things aren’t on (or off), they are invariably off (or on). The concept is so rudimentary that I’ve only complicated it by trying to explain it, yet on/off switches (or toggle buttons) are not all alike. Although their purpose is simple, their applications and forms vary greatly.
... read the whole story at www.smashingmagazine.com.Deconstructing the React Component (Functional Programming with React)
Deconstructing the React Component — Jack Hsu
A functional approach to building React applications.
Photo by Mark SebastianIn this three-part series, I want to take a functional approach to building React applications.
There will be mathematical theory sprinkled throughout the series, and hopefully by the end of it you will pick up some useful techniques!
Series contents:
- Part 1 - Deconstructing the React Component
- Part 2 - The Reader monad and read-only context
- Part 3 - Functional state management with Reducer
Functional programming – category theory in particular – teaches us a lot about program construction. Much of the tools that functional programmers reach for are very generalized, and widely applicable to various domains. It is this
... read the whole story at jaysoo.ca.The simplest way to design drop quotes with CSS? Grid Drop Quotes. via @meyerweb
Eric's Archived Thoughts: Grid Drop Quotes, Revisited
In last week’s Grid-Powered Drop Quotes, I overlooked a potential problem with the styles I created. Fortunately, Philippe Wittenbergh caught it and pointed it out, and we both hit on the same solution.
The problem-in-waiting is that the big drop quote will force a gap between the first child element of the blockquote and the second, if the first child is short. You can see this in the demo below (external version also available), where I made the first paragraph only a few words long. If you select the “Borders” option, you can see the problem more clearly.
The solution is to have the drop quote span multiple rows. The original CSS went something like this, simplified for the sake of clarity:
... read the whole story at meyerweb.com.CSS Grid Cheat Sheet
CSS Grid Cheat Sheet
57
100+
8
21
4
35
details
Share on
Facebook,
Twitter or
Google+
Auto Line Number Span
Auto Line Number Span
Auto Line Number Span
Auto Line Number Span
justify-self info_outline auto start end center stretch
align-self info_outline auto start end center stretch
Stateful functional React components without runtime overhead
GitHub - roman01la/babel-plugin-stateful-functional-react-components: Stateful functional React components without runtime overhead
✨ Stateful functional React components without runtime overhead (inspired by ClojureScript) ✨
Compiles stateful functional React components syntax into ES2015 classes
WARNING: This plugin is experimental. If you are interested in taking this further, please open an issue or submit a PR with improvements.
Why?Because functional components are concise and it's annoying to write ES2015 classes when all you need is local state.
Advantages- No runtime overhead
- No dependencies that adds additional KB's to your bundle
Input
const Counter = ({ text }, { val } = { val: 0 }, setState) => ( <div> <h1>{text}
Deep dive CSS: font metrics, line-height and vertical-align
Deep dive CSS: font metrics, line-height and vertical-align
Line-height
and vertical-align
are simple CSS properties. So simple that most of us are convinced to fully understand how they work and how to use them. But it’s not. They really are complex, maybe the hardest ones, as they have a major role in the creation of one of the less-known feature of CSS: inline formatting context.
For example, line-height
can be set as a length or a unitless value , but the default is normal
. OK, but what normal is? We often read that it is (or should be) 1, or maybe 1.2, even the CSS spec is unclear on that point. We know that unitless line-height
is font-size
relative, but the problem is that
The broken promise of Web Components
The broken promise of Web Components
23
100+
13
1
10
details
Share on
Facebook,
Twitter or
Google+
Disclaimer: I talk a lot about React here, but you can substitute your favorite library: Inferno, Preact, Vue, snabbdom, virtual-dom (or non-js libraries and frameworks like Elm, Om, etc.). Similarly, replace Polymer with Vaadin, or X-Tag, or…
Also, read Rob Dodson’s excellent response to this article: https://robdodson.me/regarding-the-broken-promise-of-web-components/
Brief, incomplete, and mostly incorrect history of Web ComponentsAncient timesBy 2011 Internet had grown. It had Facebooks and Gmails, and Twitters, and Asanas, and Google Docs, and countless other online things that could no longer be called sites, or Single Page Applications. They were, for all intents and puposes, applications. As simple as that.
... read the whole story at dmitriid.com.Pretty cool interactive solar system with Three.js
Three js - Interactive solar systemcssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv
var container, stats; var camera, controls, scene, renderer; var info; var cube; var sphereTab = []; var objects = []; var parent2; var sun; var sun2; var sun3; var currentcolor; var cubeNul; var earthPivot; var earthPivot3; var mesh; var planetViewed = 0; init(); animate(); $(window).on('load', function() { TweenMax.to($('#welcome'), 1, { css: { opacity: 1 }, ease: Quad.easeInOut, }); TweenMax.to($('#social'), 0.5, { css: { bottom:'20px' },delay:0.5, ease: Quad.easeInOut, }); TweenMax.to($('#border'), 0.5, { css: { height: '200px', }, delay: 0.5, ease: Quad.easeInOut, }); }); function hideWelcome() { TweenMax.to($('#welcome'), 0.5, { css: { opacity: 0 }, ease: Quad.easeInOut }); TweenMax.to($('#welcome'), 0.5, { css: { display: 'none' }, delay: 1, ease: Quad.easeInOut }); } function init() { camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000); camera.position.z = 68; controls = new THREE.OrbitControls(camera); controls.maxDistance = 300; controls.minDistance = 30; scene = new THREE.Scene(); var geoSphere = new THREE.SphereGeometry(Math.random() * 1, 20, 20); for (var i = 0; i < 500; i++) { // randRadius = Math.random()*30+10; lumiereS = new THREE.MeshPhongMaterial({ emissive: '#fff' }); sphereTab.push(new THREE.Mesh(new THREE.SphereGeometry(Math.random() * 1, 20, 20), lumiereS)); } var posX = -3000; var posY = -3000; for (var i = 0; i < sphereTab.length; i++) { sphereTab[i].position.set(Math.random() * 600 - 300, Math.random() * 600 - 300, Math.random() * 600 - 300); scene.add(sphereTab[i]); } //////Sun//////// var pinkMat = new THREE.MeshPhongMaterial({ color: 0xF66120, emissive: 0xF66120, specular: 0xFFED22, shininess: 10, shading: THREE.FlatShading, transparent: 1, opacity: 1 }); var pinkMat2 = new THREE.MeshPhongMaterial({ color: 0xF66120, emissive: 0xF66120, specular: 0xFFED22, shininess: 10, shading: THREE.FlatShading, transparent: 1, opacity: 1 }); var geometry = new THREE.IcosahedronGeometry(3, 1); var geometry2 = new THREE.IcosahedronGeometry(2.5, 1); var geometry4 = new THREE.IcosahedronGeometry(3, 1); // material var material = new THREE.MeshPhongMaterial({ color: 0xffc12d, emissive: 0xffc12d, shading: THREE.FlatShading }); var material2 = new THREE.MeshPhongMaterial({ color: 0x26D7E7, emissive: 0x26D7E7, shading: THREE.FlatShading }); var material4 = new THREE.MeshPhongMaterial({ color: 0xacacac, emissive: 0xacacac, shading: THREE.FlatShading }); sun = new THREE.Mesh(new THREE.IcosahedronGeometry(10, 1), pinkMat); scene.add(sun); objects.push(sun); sun2 = new THREE.Mesh(new THREE.IcosahedronGeometry(10, 1), pinkMat2); sun2.rotation.x = 1; scene.add(sun2); objects.push(sun2); sun3 = new THREE.Mesh(new THREE.IcosahedronGeometry(10, 1), pinkMat2); sun3.rotation.x = 1; scene.add(sun2); objects.push(sun3); earthPivot3 = new THREE.Object3D(); sun.add(earthPivot3); var radius = 16; var tubeRadius = 0.03; var radialSegments = 8 * 10; var tubularSegments = 6 * 15; var arc = Math.PI * 3; var geometry3 = new THREE.TorusGeometry(radius, tubeRadius, radialSegments, tubularSegments, arc); var material3 = new THREE.MeshLambertMaterial({ color: 0xffffff, emissive: 0xffffff, shading: THREE.FlatShading, }); mesh = new THREE.Mesh(geometry3, material3); earthPivot3.add(mesh); /// planet blue /// earthPivot = new THREE.Object3D(); sun.add(earthPivot); var earth = new THREE.Mesh(geometry, material); earth.position.x = 15; earthPivot.add(earth); objects.push(earth); ///// planet green //// earthPivot2 = new THREE.Object3D(); sun.add(earthPivot2); var earth2 = new THREE.Mesh(geometry2, material2); earth2.position.x = 20; earthPivot2.add(earth2); objects.push(earth2); ////planet violet /// earthPivot4 = new THREE.Object3D(); sun.add(earthPivot4); var earth3 = new THREE.Mesh(geometry4, material4); earth3.position.x = 26; earthPivot4.add(earth3); objects.push(earth3); // lights light = new THREE.DirectionalLight(0x4f4f4f); light.position.set(4, 4, 4); scene.add(light); light = new THREE.DirectionalLight(0x4f4f4f); light.position.set(-4, -4, -4); scene.add(light); //render renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.sortObjects = false; renderer.setClearColor(0x131A3D, 1); renderer.setSize(window.innerWidth, window.innerHeight); stats = new Stats(); container = document.getElementById('container'); container.appendChild(renderer.domElement); window.addEventListener('resize', onWindowResize, false); info = document.getElementById('contentTitle'); subtitle = document.getElementById('subtitle'); description = document.getElementById('description') var univers = document.getElementById('univers'); } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); render(); } function setFromCamera(raycaster, coords, origin) { raycaster.ray.origin.copy(camera.position); raycaster.ray.direction.set(coords.x, coords.y, 0.5).unproject(camera).sub(camera.position).normalize(); } function onMouseDown(event) { raycaster = new THREE.Raycaster(); mouse = new THREE.Vector2(); mouse.x = (event.clientX / renderer.domElement.width) * 2 - 1; mouse.y = -(event.clientY / renderer.domElement.height) * 2 + 1; setFromCamera(raycaster, mouse, camera); var intersects = raycaster.intersectObjects(objects); currentcolor = intersects[0].object.material.color.getHex(); if (intersects.length > 0) { console.log(currentcolor); switch (intersects[0].object.geometry.type) { case 'IcosahedronGeometry': if (currentcolor == 0xF66120) { if (planetViewed == 0) { hideWelcome(); planetViewed = 1; TweenMax.from($('#content'), 0.5, { css: { left: '-500px' }, delay:0.5, ease: Quad.easeInOut }); TweenMax.from($('#border'), 0.5, { css: { height: '0px' }, delay: 1, ease: Quad.easeInOut, }); info.innerHTML = " <span>Sunny</span> Icosahedron,"; description.innerHTML = "Alive for <span>204895</span> years<br/><br/><div>Click on the other planets to learn more ...<div>"; } if (planetViewed == 2 || planetViewed==3 || planetViewed==4) { planetViewed = 1; TweenMax.from($('#content'), 0.5, { css: { left: '-500px' }, ease: Quad.easeInOut }); TweenMax.to($('#border'), 0.2, { css: { height: '200px' },delay:1, ease: Quad.easeInOut, }); TweenMax.from($('#border'), 0.5, { css: { height: '0px' }, delay: 0.5, ease: Quad.easeInOut, }); info.innerHTML = " <span>Sunny</span> Icosahedron,"; description.innerHTML = "Alive for <span>204895</span> years<br/><br/><div>Click on the other planets to learn more ...<div>"; } } if (currentcolor == 0x26D7E7) { if (planetViewed == 1 || planetViewed==3 || planetViewed==4) { planetViewed = 2; info.innerHTML = " <span id='couleur'>Blue</span> Icosahedron,"; document.getElementById('couleur').style.color="#26d7e7"; description.innerHTML = "<br/><br/><div>Click on the other planets to learn more ...<div>"; TweenMax.from($('#content'), 0.5, { css: { left: '-500px' }, ease: Quad.easeInOut }); TweenMax.to($('#border'), 0.2, { css: { height: '200px' },delay:1, ease: Quad.easeInOut, }); TweenMax.from($('#border'), 0.5, { css: { height: '0px' }, delay: 0.5, ease: Quad.easeInOut, }); } } if (currentcolor == 0xffc12d) { if (planetViewed == 1 || planetViewed==2 || planetViewed==4) { planetViewed = 3; info.innerHTML = '<span id="couleur">Yellow</span> Icosahedron'; description.innerHTML = "<br/><br/><div>Click on the other planets to learn more ...<div>"; document.getElementById('couleur').style.color="#ffc12d"; TweenMax.from($('#content'), 0.5, { css: { left: '-500px' }, ease: Quad.easeInOut }); TweenMax.to($('#border'), 0.2, { css: { height: '200px' },delay:1, ease: Quad.easeInOut, }); TweenMax.from($('#border'), 0.5, { css: { height: '0px' }, delay: 0.5, ease: Quad.easeInOut, }); } } if (currentcolor == 0xacacac) { if (planetViewed == 1 || planetViewed==2 || planetViewed==3) { planetViewed = 4; info.innerHTML = '<span id="couleur">Grey</span> Icosahedron'; document.getElementById('couleur').style.color="#acacac"; description.innerHTML = "<br/><br/><div>Click on the other planets to learn more ...<div>"; TweenMax.from($('#content'), 0.5, { css: { left: '-500px' }, ease: Quad.easeInOut }); TweenMax.to($('#border'), 0.1, { css: { height: '200px' },delay:1, ease: Quad.easeInOut, }); TweenMax.from($('#border'), 0.5, { css: { height: '0px' }, delay: 0.5, ease: Quad.easeInOut, }); } } break; } } console.log('Down'); } document.addEventListener('mousedown', onMouseDown, false); function animate() { ; var timer = 0.00001 * Date.now(); for (var i = 0, il = sphereTab.length; i < il; i++) { var sfere = sphereTab[i]; sfere.position.x = 400 * Math.sin(timer + i); // sfere.position.z= 500 * Math.sin( timer + i * 1.1 ); sfere.position.z = 400 * Math.sin(timer + i * 1.1); } sun.rotation.x += 0.008; sun2.rotation.y += 0.008; sun3.rotation.z += 0.008; earthPivot.rotation.z += 0.006; earthPivot2.rotation.z += 0.01; earthPivot3.rotation.y += 0.007; earthPivot4.rotation.z+=0.008; requestAnimationFrame(animate); controls.update(); render(); } function render() { // } renderer.render(scene, camera) }
Deep dive CSS: font metrics, line-height and vertical-align
Deep dive CSS: font metrics, line-height and vertical-align
Line-height
and vertical-align
are simple CSS properties. So simple that most of us are convinced to fully understand how they work and how to use them. But it’s not. They really are complex, maybe the hardest ones, as they have a major role in the creation of one of the less-known feature of CSS: inline formatting context.
For example, line-height
can be set as a length or a unitless value , but the default is normal
. OK, but what normal is? We often read that it is (or should be) 1, or maybe 1.2, even the CSS spec is unclear on that point. We know that unitless line-height
is font-size
relative, but the problem is that