A rather geeky/technical weblog, est. 2001, by Bramus
Scroll-based features tend to involve some bespoke concoction of CSS and JavaScript. But what if we could accomplish something that only uses CSS? Take this ingenious horizontal scrollbar with CSS, for instance. I want to do something similar, but to indicate scrolled sections rather than capture continuous scrolling. In other words, rather than increasing the …
Continue reading “Indicating Scroll Position on a Page With CSS”
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. …
Continue reading “RSS Feeds for GitHub Project Releases and User Activity”
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> …
Continue reading “React Native Bottom Sheet (Slide Up Panel)”
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 …
Continue reading “Tweet from the Firefox Address Bar by adding a Bookmark”
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. 🦊 …
Continue reading “Tweet from the Chrome Address Bar by adding a Custom Search Engine”
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 …
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.
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', …
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.