Blu Frame
@blufra.me
Tech 🧑💻 for a Better Planet 🌱
Re-usable ♻️ Beautiful 🌟 Efficient 💡Human 🫂
https://blufra.me
https://github.com/bluframe
#React #Next.js #GraphQL #Typescript
Re-usable ♻️ Beautiful 🌟 Efficient 💡Human 🫂
https://blufra.me
https://github.com/bluframe
#React #Next.js #GraphQL #Typescript
🔍 #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! 🚀
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! 🚀
January 15, 2025 at 8:00 PM
🔍 #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! 🚀
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! 🧠
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! 🧠
January 15, 2025 at 12:58 PM
🚀 #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! 🧠
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 ! 🚀
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 ! 🚀
December 12, 2024 at 10:00 PM
#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 ! 🚀
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 📝
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 📝
December 12, 2024 at 1:52 AM
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 📝
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! 📈🔧
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! 📈🔧
December 7, 2024 at 4:00 PM
🔍 #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! 📈🔧
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! 🧠💡
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! 🧠💡
December 6, 2024 at 8:00 PM
🚀 #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! 🧠💡
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! 🧠💡
🌟 #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! 🚀✨
Use `React.memo` and `useCallback`. Prevent unnecessary re-renders. Keep function references stable. 🚀
- Reduce updates
- Enhance performance
Maximize your app's performance! 🚀✨
December 4, 2024 at 9:00 PM
🌟 #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! 🚀✨
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! 💡✨
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! 💡✨
December 4, 2024 at 6:14 PM
🌟 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! 💡✨
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! 💡✨
🌟 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! 💡✨
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! 💡✨
December 3, 2024 at 4:33 PM
🌟 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! 💡✨
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! 💡✨
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
December 1, 2024 at 2:09 AM
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
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
November 30, 2024 at 1:14 PM
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
`@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
🔹 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
Release @bluframe/blublocks@2.6.3 · bluframe/bluframe
What's Changed
📝 Toggle Component by @edoardo-bluframe in #54
📚 BLUFRAMEOS-60-Cards-Breadcrumbs-and-Social-Links by @edoardo-bluframe in #55
Full Changelog: https://github.com/bluframe/bluframe/c...
github.com
November 26, 2024 at 1:21 PM
`@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
🔹 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! 💡
Looking for a curated frontend newsletter that goes beyond the basics. Something with:
- Architecture insights
- Performance tips
- Real-world case studies
Suggestions? Let's create feed with best recomendations🤔 #webdev #frontend #typescript #webperformance #angular #react
- Architecture insights
- Performance tips
- Real-world case studies
Suggestions? Let's create feed with best recomendations🤔 #webdev #frontend #typescript #webperformance #angular #react
November 25, 2024 at 8:35 PM
Amazing idea! 💡
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
November 25, 2024 at 6:27 PM
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
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
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
November 22, 2024 at 7:07 PM
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
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
Setting a cache hint in our GraphQL resolver saves us 2 trips to our HomeVideos microservice
November 22, 2024 at 2:45 PM
Setting a cache hint in our GraphQL resolver saves us 2 trips to our HomeVideos microservice
Our co-founder @eddyinblu.bsky.social introduced LITTA to new techs - Storybook first and foremost - and pioneered work in @react.dev, @typescriptlang.org and @nodejs.org. Helped launch a first version of LITTA and set foundations to continue development of their products blufra.me/projects/lit...
November 22, 2024 at 1:55 AM
Our co-founder @eddyinblu.bsky.social introduced LITTA to new techs - Storybook first and foremost - and pioneered work in @react.dev, @typescriptlang.org and @nodejs.org. Helped launch a first version of LITTA and set foundations to continue development of their products blufra.me/projects/lit...
Who wants to have a look at our Carousel component in React and Typescript?
November 22, 2024 at 12:16 AM
Who wants to have a look at our Carousel component in React and Typescript?
Who else keeps their GraphQL schema in a separate package in their mono so that both frontend and GraphQL server import the same typeDefs and queries/mutations?
November 21, 2024 at 4:37 PM
Who else keeps their GraphQL schema in a separate package in their mono so that both frontend and GraphQL server import the same typeDefs and queries/mutations?
Is it okay to post our code here on Blue Sky? Let's try! Here is a React Typescript snippet from our Bio component. Like it?? 😄
November 21, 2024 at 4:36 AM
Is it okay to post our code here on Blue Sky? Let's try! Here is a React Typescript snippet from our Bio component. Like it?? 😄
@eddyinblu.bsky.social led the development of the brand new Royal Opera House website, mentored junior developers and was in charge of spearheading the latest technologies and make sure they delivered a smooth and fresh user experience #React blufra.me/projects/roy...
Royal Opera House
Royal Opera House needed a brand new website to go along with their **Open Up** initiative - the revamp of the entire building to invite more people - opera aficionados and casual onlookers alike - in...
blufra.me
November 20, 2024 at 2:15 PM
@eddyinblu.bsky.social led the development of the brand new Royal Opera House website, mentored junior developers and was in charge of spearheading the latest technologies and make sure they delivered a smooth and fresh user experience #React blufra.me/projects/roy...
We are very happy to bring our web development and design ideas to the wonderful world of Blue Sky!! 💙
November 20, 2024 at 2:12 PM
We are very happy to bring our web development and design ideas to the wonderful world of Blue Sky!! 💙