Blu Frame logo with a stylized BF monogram in black and cyan.
Blu Frame logo with a stylized BF monogram in black and cyan. Dark Mode.
New look, same values. 🫂
Tech that’s accessible for non‑tech teams ♿. Humans + AI agents working together 🧑🤝🧑🤖.
Welcome Primrose our Business Development Partner! 🎉
blufra.me
#Design #AIAgents #Branding #AI
OpenAI Codex shipped CLI 0.64.0 and it’s loaded:
- config RPCs,
- git-aware sessions, compaction + plan events, unified exec cleanup
- Windows sandbox hardening
- experimental exp-* models
We’re rolling these into our stack immediately 👀
#OpenAICodex #DevTools
reddit.com/r/codex/c...
We asked OpenAI GPT‑5 to scaffold a Storybook YouTube embed… it Rick Rolled us (yes, THAT video id). Absolutely crying. Screenshot attached. #dev #frontend #storybook #ai #YouTube #rickroll
🔍 #GraphQL Pro Tip: Pagination! 📈
Handle large datasets efficiently and improve query performance.
- Fetch data in chunks 📦
- Reduce load times ⏲️
- Improve user experience 👉
Implement strategies like `limit-offset` or `cursor` pagination and keep your data flow streamlined! 🚀
🚀 #React Pro Tip: Enhance Performance with Memoization! 🎯
Use React.memo(). Optimize your components. Prevent re-renders
- Improve render performance
- Reduce unnecessary updates ⚡️
- Boost app efficiency 💪
Focus on what truly matters and keep your app running smoothly! 🧠
#React Pro Tip: Use Context API for State Management! 🤝
Share data between components. Perfect to manage global state and reduce prop drilling
- Share state between components 🤝
- Avoid prop drilling 🚫
- Simplify state management 📈
Context API makes your code scalable and maintainable ! 🚀
GraphQL Pro Tip: Use Introspection for Schema Discovery! 🎉
Introspection in #GraphQL allows you to discover your schema at runtime. Feature is enabled by default
- Discover types, fields, and directives 🤔
- Get detailed information about your schema 💡
- Automate schema documentation 📝
🔍 #GraphQL Pro Tip: Leverage Directives! 🚀
Directives can modify query behavior and enhance your schema's capabilities
- Use include and skip to conditionally fetch data
- Tailor your responses dynamically
- Define custom directives
Harness the power of directives in GraphQL! 📈🔧
🚀 #React Pro Tip: Optimize Performance with Lazy Loading! 🎯
Use React.lazy and Suspense to load components lazily. Not all components need to be rendered immediately.
- Load components only when needed
- Faster initial load times
- Reduce bundle size
Boost your app's performance! 🧠💡
One answer is that we are all using military technology. The internet was first called ARPAnet, developed by DARPA as a military system. As many other technologies before. Then people found an everyday life application. Like the one we are on now. My guess is that is why. They see the application
🌟 #React Pro Tip: Optimize Rerenders with Memo and useCallback! ⚛️
Use `React.memo` and `useCallback`. Prevent unnecessary re-renders. Keep function references stable. 🚀
- Reduce updates
- Enhance performance
Maximize your app's performance! 🚀✨
🌟 GraphQL Pro Tip: Use Aliases for Clarity! 📝
Aliases in #GraphQL let you fetch the same field multiple times with different arguments
- Fetch data with varying arguments
- Maintain clear responses
- Simplify complex queries
Keep your data clear and organized! 💡✨
Hi! 😀
A GraphQL fragment for Category
Use your Category fragment in your query
🌟 GraphQL Pro Tip: Use Fragments for Code Reusability! 📚
Fragments in #GraphQL allow you to reuse parts of your queries. They make your code clean and maintainable
Maintain consistency across queries and reduce duplication
Keep your code DRY! 💡✨
If we want tech to build a better world we need an open codebase and set of components everybody can use and share
Up at 2am. On a Sat night. Working to realize our dream of using tech to make a better planet for everybody #Typescript #React #UI
Hi! 😀
Screenshot of a React component named Bio that renders a user’s bio with optional profile image, name, and social links. It uses various styled components and conditionally displays content based on the provided props, with ARIA attributes for accessibility
Screenshot of a React component named SocialLinks that renders a list of social media links. It checks for props like Instagram, Facebook, Twitter X, and YouTube, and conditionally renders links if they are provided
Diving into accessible design with React! 🌟✨ Crafting smooth, inclusive experiences for everyone, thanks to the power of #ARIA! 💻👩🎨 Let's make the web a friendlier place, one component at a time! 🌐🤝 #ReactJS #Typescript #Accessibility #Inclusivity
🤣 And did you ever use it in a Next.js and unit tested while importing ANOTHER app from your mono - an ESM/CJS UI library built with `tsc`?
THAT is a lot of fun to configure with Jest! 😀
`@bluframe/blublocks@2.6.3` is now released! 🎉
🔹 BluBlocks: Our internal UI library, always open sourced.
🆕 Includes:
- Toggle Component
- Cards & Breadcrumbs
- Prepublish scripts
As always feel free to contribute! 🌟
🔗 github.com/bluframe/blu...
#OpenSource #UI #React #Typescript
Amazing idea! 💡
Hi! 😀
Radio Group React Typescript Component with ARIA
Revamping our UI with some crisp React components! 🎨👨💻 #ARIA makes sure everyone gets to enjoy the fun—because accessibility isn't optional, it's essential! 💪🌟 #ReactJS #Typescript
Hi! 😀
--no-verify?? 🤣
Our experience? We don't overthink it. Both options are good. We choose one approach, keep an eye on it early-days so if it appears the other option suits our codebase better we can switch quick and we don't need to move around too many things 🤣
For types to export no-brainer. For types internal to a package... the way we do it is look at 2 options:
* keep it in the file where it is needed first and then from other files do import { HomeVideoReview } from "components/HomeVideoReview"
* keep it in "/types" if it is reused A LOT 😀
For our UI libraries in our mono? We declare Typescript interfaces in each file. We export the ones we need on other packages and build at build time
That way for the other packages - say a Next.js frontend - we just import { Carousel } from "@bluframe/site-ui" and we have our type available for us
Let it rain ✨ & celebrate OSS 🚀
Quote this post to keep the appreciation train going! List 3 OSS repos with links, star them on GH and star all repos of our quote train 🤩
- Blu Frame 😊 github.com/bluframe/bluframe
- React Select 👍 github.com/jedwatson/react-select
- Strapi ✅ github.com/strapi/strapi
Hi! 😀
TypeScript and JavaScript are related but different. JavaScript is the core language! TypeScript adds static typings. Most TypeScript libraries do originate from JavaScript! So... TypeScript is like a superset of JavaScript. Does that help? 😊