Ovidiu Stoica
/ovistoica
I write about SaaS, web development, freelancing, and marketing for developers
Ovidiu Stoica
4y ago
I've been a web developer for 7 years and explored all frameworks post @reactjs
The one I enjoy the most: @remix_run 💿
Let's dive into it 👇🧵
Introduction
Remix was created by @ryanflorence and @mjackson—The creators of React Router, and later joined by @kentcdodds (@TestingLib and many great courses)
The framework was initially a closed beta costing 250$ for a license but was later released for public usage.
Philosophy
Remix is an edge-first client-server framework built with the end-user and developer experience in mind.
Frameworks take a lot to learn, and knowledge doesn't transfer well.
Remix is built on classic web standards.
Learn Remix => accidentally learn the web
Nested Routes
In Remix, you can render a hierarchy of routes simultaneously.
Every sub-component concerns itself only with what it has to render, leading to better code-splitting and easier to reason about code.
No more Layout components rendered everywhere.
Data Mutation
To write data, you use forms and HTTP.
When the user submits a form, Remix will:
Call the action
Reload all of the data for all of the rendered routes
Bonus: The code below does not require any Javascript on the client to work 🤯
(Un)expected Errors
Your UI function should only concern itself with the *happy path *.
Remix uses special components for error handling. Errors are scoped to the nearest boundary
Unexpected error => `ErrorBoundary`
Expected error => `CatchBoundary`
Styling
Remix embraces CSS stylesheets.
You can scope styles based on your routes to avoid name clashes. CSS-in-JS is supported but not recommended because they are applied at runtime.
The most popular styling solutions are Tailwind and scoped CSS.
Performance
Remix is designed to take advantage of edge computing.
Computation power, but the network is limited, so deploy close to your users serve the minimum size necessary for best experience.
It supports all the modern edge providers.
remix.run/docs/en/v1/guides/performance
Deployment
Deployment is easy.
The team provided starter templates and examples for most platforms so this won't be a problem.
You can focus on building cool features for users.
Remix stacks
Stacks are pre-made tech stacks with deployment and scale in mind adapted to your needs with a music twist
Remix has 3 standard options and provides the ability to create your own stack template (until we run out of music genres)
More here: remix.run/docs/en/v1/pages/stacks
Community
The community is welcoming.
There are dedicated devs in the discord server to help with any issues you have. The team is very responsive.
The founders had communities before Remix (React Router + KCD Community), so it is well managed.
Future & Funding
The team secured a $3M seed round in October 2021 lead by @naval.
The seed gives them 2 years of leeway and more will come since investing in Open Source is growing. No pricing model is established yet.
You can safely bet your next app on @remix_run
TL;DR @remix_run
• Great community
• Built for the edge
• Secured $3M seed
• Client-server model
• Based on nested routes
• Uses Forms for mutations
• Scopes styles to the current route
• Great experience for users and devs
• Is a react framework built on web standards
Ovidiu Stoica
4y ago
Untitled...
Getting maximum value from programming courses 101
Over the past 5 years, I've taken over 50 programming courses.
Want to know a secret?
I use the same 6 rules every time to get full value 🧵👇
Rule #1: Type with the instructor
Why it works?
You engage your brain visually and by typing, creating multiple types of connections.
This leads us to rule #2 👇 .
Rule #2: Create a GitHub repo with your version of the code
Why it works:
You have a reference that you can go back to in the future
You can split lessons by commits to have a better overview
Rule #3: Create a similar project at the end
Don't consult the course material. Why it works:
• You form better connections from recall, not note-taking
• You apply the information in a different context
Rule #4: Spread out the course over 1 hour / day
Don't cram . Instead, do 1 hour / day. Why?
• You retain more information and longer
• You go into more details
• Your experience is better
Do this, and you'll be wildly successful.
Rule #5: Take small parts and apply to your job
If you see packages, frameworks or techniques you can start to apply at your day job, do so!
Your company will benefit from added expertise and you'll get to apply what you learned in the real world.
Great job!
Rule #6: Change it up as you go
Change a key part of the course to engage your brain.
If it's a javascript course, try converting to typescript
Try changing the styling of the app
Use a different DB than the instructor
Don't just follow along blindly.
That's it!
TL;DR: 6 rules to get max value from programming courses:
• Type with the instructor
• Create a GitHub repo with the code
• Create a similar project at the end
• Spread out the course over 1 hour/day
• Take small parts and apply to your job
• Change it up as you go
Don't forget to follow me for more threads -> @ovstoica
Here's another thread from me you might like:
https://twitter.com/ovstoica/status/1509778155346743304
Ovidiu Stoica
4y ago
In the first part, you captured everything that was floating around in your brain in Todoist in the Capture section of your GTD project.
If you stop at this point, you will still gain some clarity from having all the things you kept in your head, laid out in front of you. Good job!
You probably have items looking like this:
Interract on Twitter
Find clients for X
Date with girlfriend
If you took the time to do this correctly, you can expect to have more than 70 entries captured.
"What is the next action on this item?"
Go through each item in part and ask what is the next action on it.
Think of that action and move the item in the
Next actionsection, specifying the action in detail.If no action is found, move the item to
No ActionYou can create a
Specific Datesection, if the next action is either a scheduled meeting or an event
Go through the items in order, so your brain trusts the process
It will be tempting to process preferentially but force yourself to do it in order.
This will make your brain trust that whatever the item that was captured, it will be processed by the system whenever you have your weekly review.
Make your next action be specific and include context in the description.
"Build dashboard" is not an action, but "Research tech stack for new dashboard" is.
Context means:
How much time it would take (<2 mins, <10 mins, <30 mins, > 1 hour)
What tools do you need (Phone, computer, car)
Where do you need to be (Home, office, anywhere)
You can include context using Labels in Todoist. I'll include screenshots.
In the next part, we will cover what to do with items in the No Action section.
Ovidiu Stoica
4y ago
After the first cohort of #ship30, I felt completely overwhelmed and I was working on 5 projects at the same time, managing all of them in my head.
After reading Getting things Done by David Allen, I got completely free. I work the same amount but I get a lot more done and I feel more in control of my daily life.
Here's how to start:
Step 0: Download the GTD book or audiobook
Mandatory step as a lot more details will be included there. Any perfectionist developer that feels overwhelmed will benefit from this.
Step 1: Create GTD Project and include these sections
Capture - Any new unprocessed task/thoughts go here
Next Action - Tasks that are specific planned actions
Specific Date - Calls, Meetings, Plane flight
Waiting For - Tasks that are delegated to somebody or responses
Someday Maybe - Things that would be nice but not a priority right now
Tickler file - Things that will happen but at least 6 months in the future (Concerts, birthdays, project deadlines)
Step 2: Download all your brain in the Capture Section
Take 1-2 days to list all the things that are on your mind and put them inside Todoist in the Capture section of GTD.
Marketing for side-project
Wake up earlier
Buy coffee support
Learn new technology
Don't overthink it. The goal is to empty out all the projects and tasks you were keeping in your brain into an external software where they can be managed.
Part 2 will be about processing all the data.
Ovidiu Stoica
4y ago
Over the last 1.5 years, I navigated between the JS and Clojure ecosystems, having spent the last 6 years in the JS world.
I observed important differences between the two. Here are my initial observations:
#1 Javascript: Fast! Now! vs Clojure: Control & Overview
In the Javascript world, you can start a full-stack app in two seconds while in Clojure you need to think about the tools you'll use.
Javascript advantage: More out-of-the-box functionality
Clojure advantage: More control and easier to fix bugs
#2 Javascript: Fast MVP vs Clojure: Upfront thinking about features
This builds on the previous point. Having more out-of-the-box, you can start building right away with Javascript.
In Clojure, it pays off to think about all the features you'll build in order to save time later on. This technique is also called Hammock-driven development
#3 Javascript: Update packages! vs Clojure: Do we need the update?
As developers, we build upon other people's work.
The NPM registry has 1 million packages with a complex web of inter-dependencies between them. They receive frequent updates which make developers update their project dependencies very often.
In the Clojure world, package updates are done only when necessary: critical bug fixes, new features, etc.
#4 Javascript: Standard tooling vs Clojure: Internal tooling
Because of the size of the JS tools, standard tools arise from the masses that see massive adoption.
Because the Clojure world is smaller and developers tend to create their own tools, many companies have a lot of internal tools geared towards their specific needs.
#5 Javascript: Big framework vs Clojure: Compose small tools
This builds upon the last point.
The standard in the JS world is to have 1 or 2 go-to frameworks for a particular scenario and they are very well documented.
In the Clojure world, because of the Lisp curse, you'll see tons of tools for the same job and many of them are poorly documented. One of the challenges is deciding on the best tools for the job.
Ovidiu Stoica
SaaS From Development Standpoint
4y ago
I've built products on the web for 6 years. My favorite frontend framework? Next.js
One superpower of Next.js is the Image component. Out of the box you get:
Size and format optimization
Lazy loading
Visual stability
Let's look further at all the benefits:
Image size based on device
Users browse the web using their phones, tablets, and laptops, yet images are still a one size fits all.
For example sites load 2000x2000 px images, but phones display it as 100x100 px.
Next optimizes image size based on the device it is shown to improve loading speed.
Load images on-demand
30% of images on web pages are outside of the initial viewport.
With no optimizations, your page will wait for an image even if it won't show it initially. Next doesn't load images that a user will not see on the initial page load until they scroll further down the page.
With this technique, page load speed is increased significantly.
Convert automatically to WebP
When fetching images, Next will convert automatically to WebP.
99.7% of images on websites don't use modern image formats like WebP.
According to Google’s own data, WebP compression is:
26% smaller than PNGs
25-34% smaller than JPEGs
Prevents layout shifting
Images without fixed width & height tend to jump around when the page is loaded.
This is bad for user experience and is associated with dissatisfaction with products. Google actually made Cumulative Layout Shift a Core Web Vital.
Next imposes a fixed size for all images to prevent this issue.
Serve stale while revalidating
Next.js caches all previously served & optimized images.
To improve loading speed further, Images are served stale and revalidated in the background.
6/7 Blur image preview while loading
To improve Time To Interactive (TTI), Next will show a blurred preview of your image to improve the experience for the end-user
7/7 Custom image loaders
If you already have image optimization implementation, you can integrate this seamlessly with custom loaders
Useful for:
integration with your current CDN
Easier to read code
TL;DR: Benefits of using Next.js Image
Custom image loaders
Prevents layout shifting
Load images on-demand
Image size based on device
Serve stale while revalidating
Convert automatically to WebP
Blur image preview while loading
If you found this thread valuable:
1. Toss me a follow for more threads on advanced web development and SaaS → @ovstoica
2. DM me for any questions related to your SaaS
3. Here’s another similar thread you might enjoy:
https://twitter.com/ovstoica/status/1508328142317965319
Ovidiu Stoica
Self Development
4y ago
Do you want to start writing online and build a better future for yourself?
In April, I joined my first Ship30for30 cohort. The experience was transformative.
Here are 10 lessons that stuck for me during this process:
What is obvious to you is mind-blowing to someone else. You have a lot of knowledge. What is self-evident to you might be the missing piece for somebody else. Share!
Double down on what resonates with your audience. Find a good mix of "people enjoy this subject/format" and "I enjoy writing on this topic."
Don't put pressure on yourself. Quantity creates quality over time, so don't expect the quality to come now. Focus on hitting "Publish".
You don't know what people want, so write diversely. The essay you think is mediocre or "evident" will be the one to go viral. Approach many subjects and don't let your mind discriminate against topics.
Write for one person. When you write, picture the one person you address the whole essay. More people will find it interesting that way.
The title and the hook are 80% of the piece. You can have the best content ever, but nobody will give it attention if it is buried under a lousy title/hook because they don't know what they are getting. Be clear about the promise and what the reader gets.
Want to change? Join a community. You are the sum of the 5 people you hang out with. To change, you need to change those people. If you want to be a writer, join a community of writers.
You get proportionally to what you give, so give a lot! People won't engage with you if they see you don't engage with them. Give 10x, then ask for 1x. Chances are you'll receive more.
Make it easy to read. People don't read online like they read books. They skim and then decide if they will stay. Format your text to be skimmable.
"Who am I writing for?"—know your audience. Writing for everyone is writing for nobody. My most viral essay was for "software developers juggle 9-5 and a side-project," but all the readers said, "This applies to me also." The more specific you are, the more people feel connected to your content.