lmorchard - Pebbling Club 🐧🪨

How to fix Storybook screenshot testing | Tiger Oakes

tigeroakes.com
2024-12-04T22:02:41.175Z
webdev storybook css html react testing

Notes

As an alternative to Chromatic, I’ve been using Storybook’s Test Runner to power screenshot tests for Microsoft Loop. We configure the test runner to run in CI and take a screenshot of every story. However, the initial implementation based on the official Storybook docs was very flaky due to inconsistent screenshots of the same story. Here are some tips to reduce flakiness in your Storybook screenshot tests.

Unfurl

{ "expires": 1733436149462, "status": 200, "bodyLength": 42752, "author": "Tiger Oakes", "date": "2024-12-04T00:00:00.000Z", "description": "Reduce flakiness in Playwright screenshots", "image": "https://tigeroakes.com/twitter-default.png", "logo": "https://tigeroakes.com/favicon_x512.png", "publisher": "Tiger Oakes", "title": "How to fix Storybook screenshot testing", "url": "https://tigeroakes.com/posts/storybook-test-runner-screenshots/", "lang": "en", "duration": 236, "cached": true, "cachedAt": 1733349749698 }
Preact builder | Go Make Things

gomakethings.com
2024-11-27T23:47:54.646Z
preact webdev react

Notes

You select the Preact stuff you want in your build, and whether you’d like to use ES modules or an IIFE. The tool spits out a file you can host locally and instructions on how to use it.

Feed

Unfurl

{ "expires": 1732837673067, "status": 200, "bodyLength": 43862, "author": null, "date": "2024-11-26T14:30:00.000Z", "description": "Last year, I wrote about a mostly vanilla JavaScript way that I like to use Preact.\nNo JSX. No build steps. Just load a file into the browser and go!\nIn the article, I noted one hiccup I ran into with this approach… While the Preact docs provide a load from CDN option as their default, the signals() method is not part of that documentation.\nAfter some digging, I found a CDN that includes all of the methods we need.", "image": "https://gomakethings.com/img/og.png", "logo": "https://gomakethings.com/img/favicon.ico", "publisher": "Go Make Things", "title": "Preact builder", "url": "https://gomakethings.com/preact-builder/", "feed": "https://gomakethings.com/feed/index.xml", "iframe": null, "lang": "en", "video": null, "audio": null, "duration": 444 }
I don't have time to learn React - Keith Cirkel

www.keithcirkel.co.uk
2024-11-25T18:51:59.654Z
webdev web react compsci

Notes

When I mentor early career developers and they ask me what they should learn, I can't say React, they don't have time. I mean sure, pick up enough React to land you the inevitable job doing it, but it's not going to level up your career. Anyone with $5,000-$10,000 can make their way through a bootcamp and scrape their way through an interview, but it's a competitive market and it's usually quite evident when your interviewing a bootcamp candidate. Stand out by picking up some more fundamentals

Feed

Unfurl

{ "expires": 1732647112890, "status": 200, "bodyLength": 12934, "author": null, "date": "2024-11-21T00:00:00.000Z", "description": "Learning React is not worth my time, maybe it’s not worth your time either.", "image": "https://www.keithcirkel.co.uk/images/preview/i-don't-have-time-to-learn-react.png", "logo": "https://www.keithcirkel.co.uk/i-dont-have-time-to-learn-react/#26BCED", "publisher": "Keith Cirkel", "title": "I don’t have time to learn React", "url": "https://www.keithcirkel.co.uk/i-dont-have-time-to-learn-react/", "feed": "https://www.keithcirkel.co.uk/feed.xml", "iframe": null, "lang": "en", "video": null, "audio": null, "duration": 654 }
Welcome to Solito | Solito

solito.dev
2024-11-20T20:18:39.349Z
mobile webdev react reactnative

Notes

Solito is the missing piece for using React Native with Next.js to build powerful cross-platform apps.

Unfurl

{ "expires": 1732220317057, "status": 200, "bodyLength": 26384, "author": null, "date": "2024-04-13T10:29:42.000Z", "description": "<img", "image": "https://solito.dev/img/og.png", "logo": "https://solito.dev/img/favicon.png", "publisher": "by fernando rojo", "title": "Welcome to Solito | Solito", "url": "https://solito.dev/", "feed": null, "iframe": null, "lang": "en", "video": null, "audio": null, "duration": 526 }
Liskov's Gun: The parallel evolution of React and Web Components – Baldur Bjarnason

www.baldurbjarnason.com
2024-10-16T18:39:01.093Z
webdev webcomponents react

Notes

Web apps are the only open and standardised GUI software development and distribution platform that’s available to us. Discarding them out of spite or annoyance is exactly the sort of situation that the phrase “don’t throw the baby out with the bathwater” was coined for.

Feed

Unfurl

{ "expires": 1729190239569, "status": 200, "bodyLength": 107353, "author": "Baldur Bjarnason", "date": "2024-10-08T10:42:00.000Z", "description": "Because this essay is over 11 000 words long(!) I’ve made a convenience EPUB file for offline reading. (EPUB only! No PDF this time.) You can download it over on the fulfilment service I use, Lemon Squeezy, with the option to pay what you want if you feel the urge to support my writing.", "image": "https://www.baldurbjarnason.com/favicon-96x96.png", "logo": "https://www.baldurbjarnason.com/dark-bird.svg", "publisher": null, "title": "Liskov’s Gun: The parallel evolution of React and Web Components", "url": "https://www.baldurbjarnason.com/2024/liskovs-gun/", "feed": "https://www.baldurbjarnason.com/feed.xml", "iframe": null, "lang": "en", "video": null, "audio": null, "duration": 1475 }
How I Built My Blog • Josh W. Comeau

www.joshwcomeau.com
2024-10-15T18:26:38.918Z
metablogging react webdev components

Notes

Over the years, my blog has become a surprisingly complex application. It’s over 100,000 lines of code, not counting the content. Migrating everything over was a big project, but super educational. I’ll share my honest thoughts on all of the new technology I used for this blog.

Feed

Unfurl

{ "expires": 1729103194450, "status": 200, "bodyLength": 519211, "author": "Josh W. Comeau", "date": null, "description": "I recently launched a brand new version of this blog, and in this post, I share how it’s built! We’ll examine the tech stack and see how all of the pieces fit together, as well as dig into some of the details to see how they work.", "image": "https://www.joshwcomeau.com/images/og-how-i-built-my-blog-v2.png", "logo": "https://www.joshwcomeau.com/favicon.png", "publisher": null, "title": "How I Built My Blog • Josh W. Comeau", "url": "https://www.joshwcomeau.com/blog/how-i-built-my-blog-v2/", "feed": "https://www.joshwcomeau.com/rss.xml/", "iframe": null, "lang": "en", "video": null, "audio": null, "duration": 1108 }
What Is React.js?

briefs.video
2024-09-02T19:39:25.024Z
react webdev javascript imported:raindrop

Notes

Highlight:Its proponents can be weird, it takes itself far too seriously, and its documentation is interminable. These are some ways that some people have described Christianity. This video is about React.js. A video from Webbed Briefs

Unfurl

{ "author": "Heydon Pickering", "description": "A video from Webbed Briefs", "image": "https://briefs.video/assets/images/thumbnails/what-is-react-card.png", "logo": "https://briefs.video/assets/images/favicon.svg", "title": "What Is React.js?", "url": "https://briefs.video/videos/what-is-react", "lang": "en", "cached": true, "cachedAt": 1728192761760, "expires": 1728363552277, "status": 200, "bodyLength": 18535, "duration": 2088 }
CodePush

microsoft.github.io
2016-03-10T06:13:01.000Z
deployment mobile react imported:pinboard

Notes

CodePush is a cloud service that enables Cordova and React Native developers to deploy mobile app updates directly to their users’ devices.

Feed

Unfurl

{ "description": "CodePush Blog", "image": "https://microsoft.github.io/code-push/assets/images/fbshare.PNG", "logo": "https://microsoft.github.io/code-push/assets/images/icons/android-icon-192x192.png", "publisher": "CodePush", "title": "CodePush", "url": "https://microsoft.github.io/code-push/", "feed": "https://microsoft.github.io/code-push/atom.xml", "lang": "en", "cached": true, "cachedAt": 1728193493841, "expires": 1728364116170, "status": 200, "bodyLength": 9318, "duration": 2544 }
AppHub

apphub.io
2016-03-10T06:12:41.000Z
react native dev ios javascript deployment imported:pinboard

Notes

Use git push to instantly update React Native apps in production.

Unfurl

{ "author": "Benoit", "date": "2024-08-14T16:03:19.000Z", "description": "Bienvenue sur Apphub.io, un site réalisé par des experts de casino en ligne pour les amateurs des jeux d’argent en ligne. Vous trouverez ici tout ce que vous devez savoir sur les casinos en ligne, des meilleurs sites aux jeux les plus populaires. Nous avons des critiques de tous les meilleurs casinos en ligne en […]", "image": "https://apphub.io/wp-content/uploads/2022/08/Jeux-de-Casino-150x150.png", "logo": "https://apphub.io/wp-content/uploads/2022/11/cropped-icons-PNG-512x512px--192x192.png", "publisher": "Apphub.io", "title": "Bienvenue sur Apphub.io - Votre comparatif de casinos en ligne", "url": "https://apphub.io/", "lang": "fr", "cached": true, "cachedAt": 1728193498786, "expires": 1728364116171, "status": 200, "bodyLength": 122196, "duration": 8896 }
Exponent — with React Native

exponentjs.com
2016-03-10T06:12:19.000Z
development ide react native imported:pinboard

Notes

Exponent brings together the best of web (development speed, fast iteration cycles, easy deploys, automatic cross-platform support, and simple sharing with URLs) and the performance and user experience of native apps.

Unfurl

{ "description": "Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.", "image": "https://static.expo.dev/static/share/generic.jpg", "logo": "https://static.expo.dev/static/favicons/favicon-light-32x32.png", "publisher": "Expo", "title": "Expo", "url": "https://exponentjs.com/", "lang": "en", "failed": true, "failedAt": 1728193502327, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds", "cached": true, "cachedAt": 1728193512808 }
Unit testing React components without a DOM – simonsmith.io – Portfolio and blog of a London based front-end web developer

simonsmith.io
2015-06-18T01:53:05.000Z
react webdev apps testing imported:pinboard

Notes

the idea of shallow rendering is to instantiate a component and get the result of its render method, which is a ReactElement. From here you can do things like check its props and children and verify it works as expected.

Unfurl

{ "description": "Update 12/04/17 Airbnb’s Enzyme library\noffers the best solution for shallow rendering Update 04/01/16 Added better examples of skin-deep…", "logo": "https://www.simonsmith.io/icons/icon-512x512.png?v=c061e275622a7099a1451eceffbefa3f", "publisher": "simonsmith.io", "title": "Unit testing React components without a DOM", "url": "http://simonsmith.io/unit-testing-react-components-without-a-dom/?imm_mid=0d3af7&cmp=em-web-na-na-newsltr_20150617", "lang": "en", "failed": true, "failedAt": 1728193583302, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds", "cached": true, "cachedAt": 1728193596724 }

0 - 50 of 11 items

10 25 50 100 250