User Interface


Ask Me Anything: Front-End Edition
What questions do you want to ask a Software Engineer about Frontend Web Development? I will try to answer your questions to help you get started.


Search Engine Optimization - Essentials for Web Developers
Search Engine Optimization (SEO) can boost your page in search engines and boost your traffic. Every web developer should know about these basic optimizations.


Framer motion useViewportScroll when element is in viewport
Framer motion `useViewportScroll` can create a parallax effect as the page scrolls. Here's how to scroll when an element is in the viewport area.


Framer Motion useViewportScroll 100% height parallax bug
Framer motion has a great method (useViewportScroll) for creating a parallax scrolling effect. If your parallax is not scrolling, here's what you need to know.


Safari webkit-text-fill-color does not render in Flexbox
Using -webkit-text-fill-color can create a knockout text effect, and render a gradient as text color. Consider this edge case with Flexbox and knockout text.


Improve Text Contrast with Chrome's Color Picker
Text color contrast is how we see words on a webpage against the background. Here is what I learned while trying to optimize text accessibility on my website.


Should I become a Web Developer?
Here's what you want to know about web development, whether it's a good career path, and when's the best time to break into the industry.


Render Less React @ React Boston 2018
Rendering takes time: mutating the DOM, calculating styles, and applying the layout. This presentation will give you a high level overview of virtualized rendering, and how to render massive layouts with performance in mind.


Epic Reactions with React, MongoDB, and Next.JS
Reactions are an epic way to add engagement to your blog posts. Here's how you can add epic reactions using React, Next.JS, and MongoDB.


Optimize SVG images for the Web
SVG graphics are great for creating faster web applications. Optimize your SVG vector images to make your web app more responsive.


Animated CSS Border Gradients
CSS Gradient Borders are possible with this one technique. You can even create CSS gradient border animations with a little CSS magic.


When do I need a CSS Framework?
A CSS framework gives web developers the presets to handle layout, forms, buttons, theming, and common interface patterns.


Color Theory: Accessible Complementary Colors
Complementary colors feel vibrant and make things on the page pop. Luckily, there are tools out there we can use to generate accessible, complementary colors.