Inner Sanctuary
These articles are information that I find worth sharing.
Git is a powerful tool for development. It allows persistence which makes you fearless! Why not leveraging it to work with client? I prefer to show my clients a real website, from the earliest stage. I use vercel to do this with a breeze. Because it supports git branch url out of the box. In this case, I am mentioning the latter. I start with v1 branch. When I make significant changes for clients to check, I create another branch with an incremented number. The result is like this: So they can check the changes across versions. Additionally, you can use a Headless CMS like builder.io to make their content changes by themselves. I am planning to write an article about how to use a headless CMS to leverage client communication.
DorukWhen implementing an UI for requirement, we tend to think about "the page", in other words, top-down approach. Maybe we do that because of Wordpress or other frameworks. Top-down approach is good for identifying architectural decisions early on and allows you to think about user experience. However, when using bottom up approach, we focus on creating robust and reusable components. It allows us for incremental development. You can reinforce this approach by using Storybook as workshop environment and writing tests. Yeah cool... Can we combine them? Yes, you we can leverage aspects of both approaches at different stages of the development. First, start with top-down. Analyze which components are needed. Then, implement these key components bottom-up. Then, iterate it...
DorukSince TailwindCSS uses JIT as default, it is adding styles on demand. It is not using PurgeCSS anymore. To make it compatible with this; in tailwind.config.js file, "purge" is changed to "content". You need to glob format like It sometimes leave you in a strange places when using external libraries For example, I am using Sanity CMS, I have using "portabletext" library to format my text. When I pass data like this is styling implicitly. TailwindCSS cannot understand it. for example, you have to add this below to your "globals.css" file. Also, when you add a new folder, don't forget to add to tailwind.config.js Or just put it into "src". Since you put src dir to "content", you don't have to worry about anymore.
DorukBest UI library to use with React?
First, lets talk about hardships of dealing with UI. Functionality Lets say you need dropdown in a dropdown. First, you need to implement that logically, without thinking about any UI aspect. After implementing functionality, you will realize another problem arises: Accessibility Every user can use all functionalities. There can be: - Disabled users - Keyboard only users, - Users who use assistive technologies like screen reader. Your dropdown component should support keyboard navigation. This one is hard to do... Responsiveness You have to respect device diversity. Some users will be using mobile devices. Maintainability (The O in SOLID) Don't underestimate it! Its hard to do, since supporting all these functionalities with all accessibility features Uniqueness Don't you think that all MaterialUI just look the same? Or is this a "professional deformation? Theming For example, dark mode Then, lets talk about how to ease these hardships. TYPES OF UI LIBRARIES Style Systems These are libraries that only helps with styling, they don't provide behavioral, functional solutions. Examples: DaisyUI, Bootstrap, TailwindUI Style + Behavioral MaterialUI, Mantine Cons: They are mostly opinionated. What if you need: - Extra functionalities for a component - Unique look for your components Behavioral (Headless Components) These are well tested on multiple browsers, platforms and devices. You can render and style them however you like. This isolation is important. Its as important as using a workshop environment like storybook. In my earlier post, I mentioned about Sanity Headless CMS. It was isolating my concerns. CSS Helpers These only ease the implementation of CSS Examples: TailwindCSS, Sass Conclusion There's no need to say that there's no silver bullet. Now you know which is best for which situation, its better than picking blindly. Thats being said, Im using tailwindCSS ( I am really addicted to it.) DaisyUI for styling sometimes, and HeadlessUI whenever I can. At least, I advise you to use Headless Components. Since it comes without any drawbacks. Helps with accessibility for users, isolation for your precious brain.
DorukA long while ago I was a blogger, I was writing summaries about philosophy books, ideas. In these old days, I was writing them in Markdown format. Then i was serving them to Github Static Pages. I was so passionate that, when I updated my blog, I was checking all the links, fixing broken ones, ... I am grateful that I come to today in one piece! Thankfully, in these days, creating a blog is a breeze! I am using Sanity CMS for content creation. It has a query language called "groq" and trust me, It exists for a reason. this is the query section this is the ordering and this is the projection part. just like SQL with more intuitive syntax! when you have a relation in your data (think it like FK) you can "follow" (or "populate") other entity. Having blog content management separated is a great isolation. You don't have to bring your developer identity with you when you are doing that. Well... Almost... Because when I want to publish this post, I have to build my next.js app again. However, I am sure that there are some solutions for this. Noted for my future self. Speaking of the builds, these blog pages are generated statically (generated on build time) paths are builded statically Note For Future I will try qwik and its builder tool, builder.io And update here their comparison results in aspects of: - ease of use - free plan generosity - CMS page (it says builder does not have CMS page, which is called visual CMS)
DorukHow to publish a React Component Library
Gone, cast away in time Evil yours, now evil mine So, I robbed you blind The voices in my head suggest a less-than-peaceful side Of endless possibilities controlling 935crush the fears of yesterday (You can't save me) barriers our trust will fade I've stood in the dark, been waiting all this time While we damn the dead I'm trying to survive I'm not ready to dieDamned, watch the masses fall Burn it down, control 'em all (Let 'em bleed) make me crawl To daddy's little girl to read the writings on the wall While cast into the nothingness, the final curtain callcrush the fears of yesterday (You can't save me) barriers our trust will fade I've stood in the dark, been waiting all this time While we damn the dead I'm trying to survive I'm not ready to dieThrough the madness we find Loyalty is no match for power Say goodbye to your life Left to rot in your darkest hour Prayers won't help you now As long as you're mine
Doruk