Moving from React to Vue, two years later
When I first met ReactJS, it was love at first sight. We built beautiful UIs for years together with our firstborn, Redux. I felt like nothing would get between us. Not even when a younger, skinnier version came along (Preact). Life was good. Everything changed when ReasonReact showed up on our block. I was curious, of course. Didn’t act on it, though. Why would I? We’d run into each other a lot since we shared the same circles. One day, the temptations got too strong. What was I thinking? Nothing about what I was doing felt right, at first. I was leaving a lot behind but for some weird reason, I knew I’d end up here anyway. I mean, it’s not like we’re splitting apart. React will still be there, but so will Reason... I’m here to announce my love affair.
MDN Web Docs
The test() method executes a search for a match between a regular expression and a specified string. Returns true or false.
The writing of Brent Jackson
Introducing Logpoints and auto-attach to make debugging easier and simpler to use in Visual Studio Code
react-notifications-component - Highly configurable and easy to use React Component to notify your users!
A peek under the hood
One of the most significant design opportunities in recent history was announced with a simple blog post on Apple’s website. “Let me just say it: We want native third-party applications on the iPhone, and we plan to have an SDK in developers’ hands in February,” Steve Jobs wrote. On a quiet Thursday morning less than a year later, the App Store opened to iPhone users with a selection of just over 500 apps. Few contemporary innovations have changed how we live our lives and interact with the world around us more than iPhone apps. The creators of the first 500 available at launch had the unique opportunity of shaping the design direction and interaction methods of the millions of apps created since. To celebrate the App Store’s 10th anniversary, let’s study the visual evolution of 10 original App Store apps. The Apps For the purpose of this piece, I’ve focused exclusively on notable visual changes to apps that were available to download on day one and are still receiving updates today. While many of these apps are also available for iPad, this review highlights changes to iPhone versions. (Click on any photo to view a larger version.) iTunes Remote Apple set an example for other developers right out of the gate by publishing some of their own software on the App Store. Two of the first apps created were the game Texas Hold’em and Remote, a simple utility for controlling playback of your Mac or Apple TV’s iTunes library over Wi-Fi. While Texas Hold’em was pulled from the store in 2011, Remote lives on today. From the beginning, Remote’s design was heavily influenced by the look and feel of the iPhone’s iPod app (today called Music). In fact, the Now Playing view was essentially identical in appearance. Version 2.0 brought a new icon designed by Louie Mantia. The two apps began to diverge at iOS 6, when the stock Music app was completely redesigned and featured a volume slider that responded dynamically to the movement of your iPhone. Remote kept a more stock appearance. The icon was again updated to match the styling of iTunes 11 on the Mac. Remote’s first major ground-up redesign came with iOS 7. In contrast to the Music app’s stark white theme, Remote featured a dark, blurred background that was tinted by the color of your album artwork. In 2016, Apple released the Apple TV Remote app for the 4th-generation Apple TV, a logical step forward that appeared to replace Remote. Shortly after, Remote was renamed iTunes Remote. While the app continued to be available for download, it remained practically unchanged until this past June, when it received a completely new design and support for the iPhone X’s taller display. iTunes Remote’s refresh returns to a much more visually conservative look reminiscent of the iOS 11 Music app, but forgoes large titles and cards in favor of traditional navigation. Instead of a red tint color, iTunes Remote uses blue to match the updated icon. Facebook In contrast to iTunes Remote’s modest changes, the Facebook app has been continuously redesigned over the past decade with increasing frequency. A comprehensive visual history of the app would fill a small book, so I’ve chosen to highlight eight of the more significant changes. Facebook’s adventures on the iPhone actually began before the App Store existed. The service was initially available as one of the iPhone’s first web apps in October 2007. Version 1.0 in the App Store is barely recognizable as Facebook today aside from the signature blue navigation bar. Even the icon is missing the signature white “f.” The app’s News Feed was essentially an embellished table view above a tab bar with five icons: Home, Profile, Friends, Chat, and Inbox. Version 2.0 built on the same concept, adding two more layers of navigation underneath the main title bar. Facebook 3.0 was first previewed in July 2009, and introduced a 3×3 grid of icons to help solve the app’s ballooning navigation. Early screenshots show an entirely blue tiled grid, but this design was never released in a public build of the app. In October 2011, Facebook 4.0 was an early adopter of the “hamburger menu” for navigation. The app’s popularity hastened the embrace of the controversial design element across countless apps and websites in following years. After version 4, Facebook’s design timeline becomes significantly more challenging to follow. The app’s look began to iterate faster, and changes were often rolled out incrementally instead of being held for major releases. In April 2013, Facebook experimented with “Chat Heads” in the iOS app, moveable profile photos that expanded into chat windows when tapped on. iOS 7’s new look necessitated a redesign that saw the reintroduction of a tab bar for navigation. Tab bar icons are still regularly redesigned and relocated between updates. Some of Facebook’s design challenges come from their operational scale. Unlike many smaller apps, Facebook must offer a consistent experience to its customers on a large number of platforms, not just Apple’s. An update in August 2017 attempted to unify the design of the News Feed across iOS, Android, and the web with comments styled to look more like a Messenger conversation. Things Things began development as a task management tool for the Mac, but ended up hitting 1.0 status on iOS first. Cultured Code, the app’s developer, noted in their launch post that the original version was built in just over a month – a deadline that seemed impossible. Things 1.0 lacked a way to sync with the Mac version and had tagging disabled, both critical features. Despite the stressful launch, the same basic hierarchy of the app persists to this day. An excellent Flickr album documents the app’s early design stages. The first major visual refresh came in August 2012 when Things 2.0 was released. A fresh coat of paint shed the stock iOS look, and little graphical embellishments gave it unique personality. Things 2.5 in September 2014 refreshed the app’s UI again with a flatter look and lighter color scheme. A redesign was originally planned for Things 3, but development took longer than expected. Things 3 released in May 2017 was the most significant change the app’s look yet. Virtually every icon and UI element was re-drawn while preserving the underlying layout. In the update’s launch video, Cultured Code specifically highlights how animation was used to give the app an all-new feel. The redesign earned Cultured Code an Apple Design Award in 2017. OmniFocus Even in its infancy, the App Store was well-stocked with task management apps. Both Things and OmniFocus, from The Omni Group, have been available since day one. Although both apps provide similar utility, each has taken unique design directions over the past decade. OmniFocus for iPhone initially used simple table views with custom iconography for navigation, winning an Apple Design Award in 2008. The Omni Group redrew all of their artwork and the app’s icon in June 2010 in response to the iPhone 4’s Retina display. One of the app’s largest changes came in June 2011 when Forecast mode was added. A glossy date picker just under the navigation bar became a defining UI element, even when the gloss was dropped in 2013 for an iOS 7-era redesign. The new flat look relied heavily on text tint colors for spatial awareness. An update in spring 2015 brought a darker app icon to the iPhone with softer edges on the check mark. Every icon since 2012 has included an Easter egg that even longtime users might not know about. Zoom in and you’ll notice that the carbon fiber texture is actually made up of tiny, repeating Omni logos. The most recent major update to OmniFocus came this past May with OmniFocus 3.0. While many of the changes were engi…
yarn - :package::cat2: Fast, reliable, and secure dependency management.
Front-End-Performance-Checklist - :video_game:The only Front-End Performance Checklist that runs faster than the others.
Document an AutoSizer solution built with react-measure (based on the Resize Observer spec, can be polyfilled). This seems like a more future-friendly way of detecting resize. For the moment, I hav...
:hammer_and_wrench: Standard Tooling for Vue.js Development
A flexible and beautiful Select Input control for ReactJS with multiselect, autocomplete and ajax support.
next.js - Next.js is a lightweight framework for static and server‑rendered applications.
building-react-from-scratch - Code for my React Rally talk.
The online code editor tailored for web applications
The online code editor tailored for web applications
Title: Interactive Record/Replay for Web Application Debugging During debugging, a developer must repeatedly and manually reproduce errant behavior in order to inspect different facets of the program’s execution. Existing behavior reproduction tools support replay via linear pause/play controls, but none is designed for interactive, random-access exploration during debugging tasks. In this paper, we present Timelapse, a developer tool and record/replay infrastructure for disseminating and debugging behaviors in web applications. Timelapse is integrated with the browser and introduces negligible runtime overhead when capturing behaviors. Developers can use Timelapse’s user interface to interactively browse, visualize, and seek through recordings while simultaneously using familiar debugging tools such as breakpoints and logging. Testers and end-users can use it demonstrate failures in situ and share captured recordings with developers, improving bug report quality by obviating the need for detailed reproduction steps. Together, our tool and infrastructure support systematic bug reporting and debugging practices. Brian Burg is a Ph.D student in the Computer Science & Engineering Department at the University of Washington. He is advised by Michael Ernst and Andrew Ko. He is interested in tools, techniques and designs that help programmers understand and debug software more effectively.
The Page Lifecycle API brings app lifecycle features common on mobile operating systems to the web. Browsers are now able to safely freeze and discard background pages to conserve resources, and developers can safely handle these interventions without affecting the user experience.