Brotzky @brotzky_ Twitter profile

Last Seen Profiles

@dionleeofficial

@everything_pp

@stwmaniax

@FlorianPoitout

@stwmaniax

@thatssooodrea

@BinorRaja

@shiori882663159

@cottagcorewhore

@stw_pdg

@FefeFlp

@Kinspears

@bokeplokalmalam

@AbwHdyd1975

@Antoinette71501

@mini71354306

@aysegulsensoy

@CeeDaise

@EgeKutay6

@kokura_fuse

@clone_vinii

@laine1981

@bokeplokalmalam

@marhobby2007

@yuwcils

@shuvilu

@ajipkasa

@_Helio_NSFW

@mertuaku_idaman

@tele11PR

@Gabysesp

@KenshiAkuma

@JeseniaWhyte

@Annnacpfc

@stw46

@carduelis666

Brotzky

@brotzky_

10 months

Here's how it's done 👀 1. Create an image with multiple steps 2. Use CSS animations to step through each image Code and result 🧵

blanche

@lowblanche

10 months

@brotzky_ The bookmark icon animation still gets me 🤯

2

3

95

27

157

3K

Brotzky

@brotzky_

11 months

All the jokes about OpenAI killing startups with each new release have some validity. We just removed Pinecone and Langchain from our codebase lowering our monthly fees and removing a lot of complexity. New Assistants API is fantastic ✨

71

140

2K

Brotzky

@brotzky_

10 months

The laptop animation on is one I’m most proud of. The secret behind it is our <Sticky /> component that I’ve used everywhere for over 5 years now. Here’s how it works:

40

67

2K

Brotzky

@brotzky_

9 months

Building a Stock Screener is incredibly complex. The amount of data you need is only half the equation. You also have to make it searchable and simple to use. What’s the trick to ours?

43

60

1K

Brotzky

@brotzky_

10 months

Building the dotted background for our charts is simpler than you'd imagine. It uses two CSS techniques and 4 lines of code.

22

58

1K

Brotzky

@brotzky_

10 months

Drag any part of the chart to get exact performance 📈 Here's how we built it:

19

45

1K

Brotzky

@brotzky_

6 months

Want to build better charts? Here's the full breakdown of how I built this one 👇

26

62

1K

Brotzky

@brotzky_

6 months

We added more financial history to Fey. This came with the challenge of building a table that could accommodate unlimited columns. If you’ve ever built HTML tables you know the pain. Here are some details and how we built it:

32

48

1K

Brotzky

@brotzky_

4 months

New onboarding step! Subtle, but the progressive blur is my favorite part. Check out how it's done with CSS:

19

43

970

Brotzky

@brotzky_

11 months

How we made Fey feel fast ⚡️ Our Canvas was painfully slow to render — slowed down by seven charts and data fetching. Despite my efforts, everything I tried kept failing. Until I decided to go simple and to my surprise it worked:

16

54

914

Brotzky

@brotzky_

10 months

Fey is a SPA and this is how fast the initial load is: (it's built on @nextjs )

Guillermo Rauch

@rauchg

10 months

I know there's a belief that "SPAs are good for apps / dashboards". There's a SaaS app I use which sends me notifications. Each time I click their links I stare at their fancy spinner for multiple seconds. Unlike when someone sends me a e.g.: GitHub issue or PR I see the

71

20

588

44

850

Brotzky

@brotzky_

5 months

We figured out how to make AI reliable. Here's how and the journey we went on:

36

46

847

Brotzky

@brotzky_

4 years

This interaction on the new is one of my favourite we've ever built.

38

49

837

Brotzky

@brotzky_

11 months

I've received a lot of questions about how we do the text animation for our new SEC filings feature so here’s the breakdown. It’s probably hackier and more straightforward than you’re thinking. Code below ⬇️⬇️⬇️⬇️

16

51

755

Brotzky

@brotzky_

10 months

Fey’s Watchlist undocked is something else 🥲

13

27

740

Brotzky

@brotzky_

9 months

Yesterday we released all the logos we use in Fey for anyone to use! The website is simple, but getting all the pieces in place wasn't. Here are the most interesting technical details:

26

30

724

Brotzky

@brotzky_

5 months

We ship more with 3 people than with 6, 12, 24, 48. Work with your best friends. Make jokes. Ship often.

35

29

721

Brotzky

@brotzky_

8 months

Sometimes the simplest tricks are the most impressive. Any guesses how it's done?

21

15

678

Brotzky

@brotzky_

9 months

Drag and drop ✨ Never roll your own. It's always a mistake. So what do we use?

19

24

670

Brotzky

@brotzky_

7 months

Charging up 🪫🔋

21

22

637

Brotzky

@brotzky_

4 months

This section came out so smooth 🧈 Here's how each detail was built:

21

23

638

Brotzky

@brotzky_

9 months

Next.js Incremental Static Regeneration (ISR) is extremely underrated. It's how we instantly generate shareable links in Fey. The API is as simple as it gets. Let me show you how it works:

19

31

614

Brotzky

@brotzky_

1 year

Charts are a core to Fey and everyone asks what we use to build them! The short answer is we use . But I'll breakdown some components and code we have to make our charts.

25

35

604

Brotzky

@brotzky_

11 months

How we changed Fey’s auth to load instantly using Next.js (without SSR). Our stack - Next.js latest (pages router) - Firebase auth Before we’d run auth before rendering any page which meant we always had 100-400ms splash screen.

21

29

600

Brotzky

@brotzky_

10 months

How we build the crosshair for Fey's charts: We disable the libraries built in crosshair and use our own components. Here's the code:

12

34

572

Brotzky

@brotzky_

8 months

Gradient border with CSS: background: linear-gradient(black, black) padding-box, linear-gradient(to right, blue, red) border-box; border: 1px solid transparent; The gradient can be any type: conic, radial, linear, etc. Codepen:

7

33

558

Brotzky

@brotzky_

8 months

Subtle parallax ✨ Here's the hook I use to achieve this effect:

16

26

515

Brotzky

@brotzky_

11 months

Replacing our Toasts in Fey with Sonner by @emilkowalski_ . Small life improvement and a whole bunch of code we used to maintain is gone 👋.

14

19

510

Brotzky

@brotzky_

1 year

10 years later I still think about the Mac Pro landing page! When it was released in 2013 I remember being so impressed by the video, assets, and techniques they used. To this day I still think it's one of the best landing pages ever made.

17

16

485

Brotzky

@brotzky_

1 year

Fey's development icon is a thing of beauty ✨

17

5

438

Brotzky

@brotzky_

3 years

I wrote about Frontend Engineering and why it's so special. It's a magical role that I love. Why is it so special and what makes a great Frontend Engineer? Read my thoughts:

The art of Frontend Engineering

As the web continues to expand how does Frontend Engineering fit into this landscape and what makes a Frontend Engineer great?

www.narative.co

18

75

435

Brotzky

@brotzky_

10 months

So you want to build a Command? In Fey, the Command is at the centre of the experience. Getting it right came with a lot of challenges. Here’s how Fey’s works and details:

9

21

428

Brotzky

@brotzky_

9 months

We launched a Newsletter which our team couldn’t build without AI. Here’s why it’s only possible now (and a small glimpse into how it’s done):

14

418

Brotzky

@brotzky_

11 months

Everyone I talk to is moving over to Cursor — the AI-first Code Editor. Seems like @anysphere really nailed it. You can even add your OpenAI key to save costs. Anyone use it? Recommend?

83

8

402

Brotzky

@brotzky_

4 months

Multi select for our new graphing feature

13

10

397

Brotzky

@brotzky_

4 months

This week 🫡

8

15

386

Brotzky

@brotzky_

11 months

After trying @v0 I stumbled upon @Galileo_AI . It’s like v0 except focused on AI Design output instead of code generation. Let’s see what it can do!

11

22

372

Brotzky

@brotzky_

3 months

Charting in Fey is here 📈 We made the complex look simple! Let me show you how:

11

8

361

Brotzky

@brotzky_

7 months

February was intense. We went heads-down and focused on operational efficiency, costs, and infra. The biggest surprise? We were able to use AI to replace a vendor costing $12,000/year. Overall we reduced our monthly expenses by 60%.

9

7

333

Brotzky

@brotzky_

2 years

I love looking at Fey's login screen on desktop.

10

12

316

Brotzky

@brotzky_

9 months

Fey’s Share feature is here 📈 Copy any chart to your clipboard — instantly. Generate a link with a click of a button. The journey to build this feature was a rollercoaster! Here’s how it went down:

16

13

294

Brotzky

@brotzky_

5 years

@awilkinson Doing exactly what you've done before but at a slightly smaller scale for a different company seems really boring as an employee.

4

286

Brotzky

@brotzky_

10 months

And the result

2

6

285

Brotzky

@brotzky_

5 months

Who says download pages need to be boring?

22

12

275

Brotzky

@brotzky_

9 months

The tooltips for our charts 😍

12

6

271

Brotzky

@brotzky_

10 months

How about the pulsing dot? We use that as a subtle indicator to show the market is open. And here's how it's built:

Marcos Passos

@marcospassos

10 months

@brotzky_ How about tue pulsing dot?

1

0

2

5

7

267

Brotzky

@brotzky_

6 months

Remember Arc?

106

2

255

Brotzky

@brotzky_

10 months

Once you have the SVG you can animate through each step like this:

4

6

257

Brotzky

@brotzky_

8 months

We launched "For you" and it's a foundational step towards making finance effortless. The feed surfaces news, filings, ratings, earnings, and more all based on your watchlist. Here's how we built it:

8

257

Brotzky

@brotzky_

4 months

The simple tricks are always the best. The original version of this hero didn't have the faded text as idea only came to us at the very end. Here's how it's done:

3

8

247

Brotzky

@brotzky_

2 years

Just released the pricing page for Fey.

Fey: Pricing

For $30 a month or $300 a year, Fey gives you access to the latest market insights, accurate asset pricing, seamless broker integrations, ad-free news and more.

www.fey.com

21

5

246

Brotzky

@brotzky_

6 months

New charts for EPS and Revenue in Fey! Out of all the charts we've built I think these turned out the best. So many deign details that translated beautifully to production. A peek into how it's made:

9

13

243

Brotzky

@brotzky_

5 months

1. Unmatched Company Overviews 2. Instant Summaries of SEC Filings What makes this different? Glad you asked.

11

7

229

Brotzky

@brotzky_

8 months

When you use the same tech stack everywhere it unlocks so much productivity. We recently added a section to . It was as simple as copy-pasting the code over and applying a CSS transform. The code is very simple to reuse 👇

8

5

229

Brotzky

@brotzky_

5 years

@rauchg @shuding_ I was curious how they did this as well on the iMac page from before. Ended up recreating it here: Load up all the images, render to canvas, scrub through using scroll. The real magic with these effects comes from the assets. Apple has the best assets.

7

19

214

Brotzky

@brotzky_

1 year

We recently deployed a massive improvement performance and it's hard to understate how much of an impact it makes to the entire app. We went from 2-4s to 0s load time! (without SSR) CMD+T → F → Enter → instant load

9

207

Brotzky

@brotzky_

8 years

New blog post! A step-by-step guide to Code Splitting using Webpack and React Router --> 🙏

4

68

200

Brotzky

@brotzky_

9 months

Name a nicer changelog

16

2

189

Brotzky

@brotzky_

6 months

🤏 Small adjustments with 👊 big results Checkout the before and after as we transition to new visual styles across Fey:

11

4

188

Brotzky

@brotzky_

5 years

In almost all my projects I now add a Breakpoints component that displays the breakpoint name and the pixels it's active from. (bottom right of gif) Working on creating a lot of developer experience components to really speed up how we work. Source:

6

23

185

Brotzky

@brotzky_

9 months

Fey's pricing page animation mix-blend-mode is a powerful CSS property.

3

8

183

Brotzky

@brotzky_

11 months

My morning routine since building Analyze • Open Fey • See what's popular • Hit X and get 10-Q summary • Hit N if I want more news • Hit C if I want an overview A delightful way to informed about earnings, markets, and trends. 💖

2

10

175

Brotzky

@brotzky_

10 months

1. Create a 1px by 1px dot using background radial-gradient. Then define the background size and position to create the infinite repetition. 2. Then apply a mask to that dotted grid so it smoothly fades out towards the edges That's it!

2

10

173

Brotzky

@brotzky_

5 months

From initial production tests GPT-4o claims are accurate: 2x faster and 50% cheaper. No changes in prompt or code. Only model updates.

4

2

172

Brotzky

@brotzky_

5 months

Now running GPT-4o on production

Brotzky

@brotzky_

5 months

1. Unmatched Company Overviews 2. Instant Summaries of SEC Filings What makes this different? Glad you asked.

11

7

229

4

5

168

Brotzky

@brotzky_

2 years

Playing with more subtle scrolling details.

5

12

161

Brotzky

@brotzky_

7 months

Honestly, this is best way to start a day. Building is brutal but customer feedback, especially like this, keeps you going.

6

3

162

Brotzky

@brotzky_

6 months

Sometimes you have to work smarter not harder. For analyst ratings, we exported a static SVG for the background instead of fiddling with the graphing library. 3 minutes of work vs 3 hours+

6

1

162

Brotzky

@brotzky_

5 years

I really love how our site looks in Safari dark mode

6

11

159

Brotzky

@brotzky_

2 years

With @nextjs Route Handlers on @vercel , setting up live pricing was super simple on our marketing site 🖤 This used to be a complex custom API from our backend but now it��s a piece of cake.

3

12

157

Brotzky

@brotzky_

24 days

The designer I get to work with everyday.

T. Costa

@tcosta_co

24 days

Dynamic earnings player from Fey 2.0 🎧

23

15

479

10

4

156

Brotzky

@brotzky_

8 months

Leaving feedback in Fey

13

1

152

Brotzky

@brotzky_

7 months

New graph I'm building today

8

4

152

Brotzky

@brotzky_

6 months

DocuSign rebrand was awful. But, it's in Fey now. Along with 3,343 other logos.

4

1

148

Brotzky

@brotzky_

6 months

The easiest way to follow earnings is now in Fey. Let me share some of my favourite details 🗓️

8

1

149

Brotzky

@brotzky_

6 years

🆕 Our redesigned site is powered by @gatsbyjs and we're so happy with the results! As always, source is on Github:

10

15

146

Brotzky

@brotzky_

11 months

Here’s a breakdown of how we use the new @OpenAI Assistants API in Fey. We actually just had a call with their product and API engineer discussing some of these details:

6

9

142

Brotzky

@brotzky_

9 months

Fey's new update flow 🔵 We worked with @avstorm from @iconists to get it just right

11

3

142

Brotzky

@brotzky_

2 years

Simple details are what it's all about.

2

3

142

Brotzky

@brotzky_

8 months

AI keeps taking over Fey. In our For you page, there's a section where we surface a summary of the top news every hour. It's able to parse news, generate a summary, give us the tickers, and nicely formatted. How would you automate this before AI?

8

2

140

Brotzky

@brotzky_

9 months

2024 news in Fey will be unbeatable. First step out today: We've revamped our news page with an improved UI and the addition of "Events" for more concise insights.

6

4

138

Brotzky

@brotzky_

10 months

text-wrap: balance Winner of the best CSS property of 2023 🥇

T. Costa

@tcosta_co

10 months

This has to be the best CSS property introduced in the last 10 years. It solves one of my biggest design gripes in just one line!

7

3

83

5

137

Brotzky

@brotzky_

9 months

CSS Tip 🔳 Repeating grid of squares (circles is easy mode) background-image: conic-gradient(at 92% 8%, #000 90deg, transparent 0 225deg, transparent 0); background-size: 15px 15px; Codepen:

2

6

137

Brotzky

@brotzky_

5 months

Animate CSS filters seamlessly: 1. Create two identical layers 2. Use Opacity to reveal the filter

4

3

137

Brotzky

@brotzky_

1 year

Alright, time to give credit where it's due: @nextjs & @vercel really changed how we build Fey. Our team is tiny (it's just me on eng) but we're able to still able ship an experience that's insanely fast and easy to manage.

8

7

134

Brotzky

@brotzky_

4 months

We’ve launched referrals! Details I love • Clean URLs & finance acronyms (etf, fx, dcf, etc) • Share easily via email or copy the link.

2

4

132

Brotzky

@brotzky_

6 years

@zuph The more time passes the more I appreciate my Arts degree. Who would’ve thought.

1

0

123

Brotzky

@brotzky_

2 years

Will document my progress of migrating frontend to @nextjs here. - Large monorepo codebase - Client code is CRA/TypeScript hosted on GCP - Marketing site already on Next - Goal is to slowly migrate client code to Next (in my spare time)

Fey: Finance is finally effortless.

Explore a new era of effortless financial research at your fingertips. Fey is meticulously crafted, empowering the modern investor with real-time market intelligence.

www.fey.com

5

7

124

Brotzky

@brotzky_

2 years

Connecting your Robinhood account to Fey during onboarding.

7

5

122

Brotzky

@brotzky_

11 months

Fey released the first part of our AI journey ✨🎉 We really focused on two important details: 1. Don't make the user think 2. Don't make the user wait

4

123

Brotzky

@brotzky_

6 months

Fey is fast ⏩ Our tech stack is simple (Next+Firestore) How do we stay fast? - pre-aggregate data into single requests - multi-region db for latency And then smaller details like preloading, good design, edge APIs.

Walter.

@ratecompare

6 months

@viewportui @tcosta_co Fey seems to be really fast! A click and boom new data is shown. What's the back-end data techstack to deliver that amount of data at that speed?

1

0

4

8

1

120

Brotzky

@brotzky_

6 months

Sometimes you need a fun little task after a long day.

3

1

109

Brotzky

@brotzky_

6 months

The question I get the most often: What we use to build charts in Fey? The answer:

Brotzky

@brotzky_

1 year

Charts are a core to Fey and everyone asks what we use to build them! The short answer is we use . But I'll breakdown some components and code we have to make our charts.

25

35

604

8

3

108

Brotzky

@brotzky_

9 months

Released another batch of logos to 🫡 Over 1,900 now!

5

4

108

Brotzky

@brotzky_

3 months

Very excited about this. The “old” Fey already feeling ugly.

T. Costa

@tcosta_co

3 months

Figma isn’t the only one cooking a fresh UI 😏

29

19

879

5

1

105

Brotzky

@brotzky_

2 years

This sequence from @Frame_io .

5

4

102

Brotzky

@brotzky_

7 months

Gone are the days of drowning in news to catch the real story. Fey now tells you the most important news.

6

0

100

Brotzky

@brotzky_

9 months

The hardest and most tedious task was accomplished by @tcosta_co . He manually created over 1000 company logos in Figma. This was him heads down, going to company websites, getting the logos (sometimes not SVG) and drawing them in Figma. Huge task. You have no idea.

7

1

97

Brotzky

@brotzky_

4 months

We've been cooking... 🔜

T. Costa

@tcosta_co

4 months

NVDA's growth is insane 🤣

6

4

155

6

2

98

Brotzky

@brotzky_

9 months

! And these are all the utilities we're using:

5

2

97