RSS Feeds for GitHub Project Releases and User Activity

As an extra to RSS feed for youtube channels and GitHub projects, Pawel notes that it’s also possible to get a feed for the releases published in GitHub Projects. GitHub gives us RSS feeds for project releases and tags. Thats my preferred way of finding out about my followed projects fixed bugs and new features. …

React Native Bottom Sheet (Slide Up Panel)

A common pattern in Mobile Apps is to have a Bottom Sheet / Slide Up Panel. React Native Slack Bottom Sheet is a wrapper around Slack’s native PanModal component for iOS. import SlackBottomSheet from 'react-native-slack-bottom-sheet'; <SlackBottomSheet topOffset={100} unmountAnimation={false} initialAnimation={false} presentGlobally={false} backgroundOpacity={0} allowsDragToDismiss={false} allowsTapToDismiss={false} isHapticFeedbackEnabled={false} blocksBackgroundTouches={false} interactsWithOuterScrollView > <View style={StyleSheet.absoluteFillObject}> <ScrollView> <Lorem /> </ScrollView> </View> </SlackBottomSheet> …

Tweet from the Firefox Address Bar by adding a Bookmark

In succession to Tweet from the Chrome Address Bar by adding a Custom Search Engine, you can also do this in Firefox. Simply define a bookmark (containing a %s wildcard) with a linked keyword and you’re good to go: Name: Compose Tweet Location: https://twitter.com/compose/tweet?text=%s Keyword: tweet You can now use the tweet keyword to start …

Tweet from the Chrome Address Bar by adding a Custom Search Engine

TIL: Chrome allows you to define a Custom Search Engine (CSE) by which you can search sites. The cool part is that you’re not really limited to search only, and that you can abuse these CSEs to become more productive. In this post I’ll show you how to tweet from the Chrome Address Bar. 🦊 …

Prism – Turn any OpenAPI file into an API server with mocking, transformations, validations, and more.

Prism is an open-source HTTP mock server that can mimic your API’s behavior as if you already built it. Mock HTTP servers are generated from your OpenAPI v2/v3 documents. Installation per NPM/Yarn # NPM npm install -g @stoplight/prism-cli # Yarn yarn global add @stoplight/prism-cli Once installed, serve your OpenAPI spec as follows: prism mock petstore.yml …

Building The New Facebook With React and Relay

With the new Facebook design that got anounced just a few days ago, this video by Ashley Watkins is worth a look: Ashley discusses some of the technologies and strategies powering FB5, the new facebook.com. Topics covered include Facebook’s approach to CSS-in-JS, data-driven dependencies, phased code downloading, and more.

Performant front-end architecture

This post describes some techniques to make front-end apps load faster and provide a good user experience. We’ll look at the overall architecture of the front-end. How can you load essential resources first, and maximize the probability that the resources are already in the cache? Performant front-end architecture →

classnames-components – A classnames component wrapper to speed up styling React components

Geoffrey has created a handy package to quickly create React components that are built of an element with some CSS classes applied to them. Handy for when you’re working with CSS libraries such as Tailwind. import cc from 'classnames-components'; // using arguments const Header = cc('h1')('font-sans', 'text-3xl'); // using an array const Intro = cc('p')(['font-serif', …

Multi-line Highlights in CSS

These lines aren’t injected using ::after or the like, but are done via backgrounds. The key CSS property you’re looking for is display: inline; though, as set on the p elements; without it, it won’t work. That last swipe effect also uses box-decoration-break clone; so that each line animates in parallel.

A Practical Overview Of CSS Houdini

Adrian Bece writing for Smashing Magazine: Houdini, an umbrella term for the collection of browser APIs, aims to bring significant improvements to the web development process and the development of CSS standards in general. Frontend developers will be able to extend the CSS with new features using JavaScript, hook into CSS rendering engine and tell …