Rick Fulton’s Post

Lots of learnings from Figma's Move to TypeScript for Mobile Rendering: - Automated Transition Strategy: Figma implemented a gradual migration process that involved creating a Skew-to-TypeScript transpiler. This approach minimized disruptions and maintained development velocity. - Performance Considerations: Despite potential performance concerns, the shift was made viable by improvements in related technologies and by replacing critical components of their Skew engine with those from their C++ engine, preserving performance integrity. - Enhanced Developer Experience: The move to TypeScript opened up access to a vast array of development tools and community support, which facilitated easier debugging and faster feature development. Thank you for sharing, Brandon Lin!

Last year at Figma, I led a super cool project to compile and migrate our mobile rendering codebase to use Typescript! We just published a blog post about it here: https://lnkd.in/g4N5qPrv For years, our mobile rendering code was written in Skew, a custom programming language that compiles to Javascript and enabled Figma to get around WebAssembly’s early limitations. But years passed and technology improved, and we came to the conclusion that to improve developer experience while not regressing performance, moving to Typescript was the answer. We developed a transpiler to perform an automated migration from Skew to Typescript, and moved everything over without disrupting a day of development. The migration taught us a lot about Javascript/Typescript quirks and programming language compilers, and we couldn’t have done this with the help of several other Figmates: Andrew Chan, Benjamin Drebing, Edward Shiang, and Nick Ruff. For more details, please check out the blog post! Huge thanks for Herbert Lui and Alia Fite for their help in getting this blog post up!

Last week, the team at Figma posted an interesting article, https://lnkd.in/ef5tvG8j. The article discusses how they migrated their code from their custom programming language, Skew, to Typescript. The technical details in the post are neat but what really jumped out to me was that Figma had developed a proprietary programming language that compiles to Javascript. Developing a proprietary language is challenging but the real time sink would be in having to develop your own tooling ecosystem. Discounting the compiler, you'll need to develop your own: - Linter and code quality tools - IDE plugin - CI/CD integrations - etc. And then of course the biggest time sink will be having to train new engineers on your proprietary language since they couldn't have seen it before joining your company. Have you worked with a company that rolled their own programming language or framework?

I did not know that Figma was written in an own language - skew. Now they are moving to Typescript and this is a great writeup how: https://lnkd.in/ehTUwdwc #rearchitecture #typescript #figma

Check out this insightful article on how the Figma team transitioned to TypeScript from their proprietary programming language, Skew: 📖 https://lnkd.in/dVkrkiCj #figma #typescript #frontend #webdev #programming

Introducing... ...a 4-part video series where Jared builds a frontend app in increasingly professional coding paradigms.⁣⁣⁣⁣ ⁣⁣⁣⁣ This will be a huge breakthrough for beginning developers in learning how to write code as a professional would - taking into account maintainability and scalability.⁣⁣⁣⁣ ⁣⁣⁣⁣ 𝐋𝐞𝐯𝐞𝐥 𝟏⁣⁣⁣⁣ • Recreate a design from frontendmentor.io.⁣⁣⁣⁣ • When implementing the JS, rely on the DOM nodes themselves as the state of the application.⁣⁣⁣⁣ ⁣⁣⁣⁣ This is the most common sense approach for a newbie. The downside is that for every feature you want to implement, you have to react to a user action, take stock of the DOM elements on the screen, then update the right ones.⁣⁣⁣⁣ ⁣⁣⁣⁣ This will likely require messy, nit-picky logic that gets difficult to maintain as the project grows.⁣⁣⁣⁣ ⁣⁣⁣⁣ 𝐋𝐞𝐯𝐞𝐥 𝟐⁣⁣⁣⁣⁣⁣⁣⁣ • Restructure the JS to represent the state of the application as stored JS data.⁣⁣⁣⁣ • The process becomes: the user does something, we update the state data, and then we render out the UI according to the data.⁣⁣⁣⁣ ⁣⁣⁣⁣ This makes the rendering logic more modular - if things aren’t rendering properly, we can isolate the rendering logic more easily.⁣⁣⁣⁣ ⁣⁣⁣⁣ Also, the rendering logic will be largely the same for new features, so making new features becomes faster as the project complexity increases.⁣⁣⁣⁣ ⁣⁣⁣⁣ 𝐋𝐞𝐯𝐞𝐥 𝟑⁣⁣⁣⁣⁣⁣⁣⁣ • Note that neither approach thus far has led us to a fully functional frontend app.⁣⁣⁣⁣ • We have hardcoded the user’s data, and upon refreshing the browser window, we are back to where we started. The user’s progress is not recorded.⁣⁣⁣⁣ • We fix this by using localStorage as our place to store the user’s updates, allowing us to bring the user right back to where they were if the screen is refreshed.⁣⁣⁣⁣ • We end by noting that by this point, you know all you need to deploy a legitimate and potentially successful application, mentioning the game “2048” as an example.⁣⁣⁣⁣ ⁣⁣⁣⁣ 𝐋𝐞𝐯𝐞𝐥 𝟒⁣⁣⁣⁣ • A massive refactoring journey and paradigm shift to make your code as clean, maintainable, and scalable as possible.⁣⁣⁣⁣ • Starting simply with the latest JS syntaxes and tricks, then going deeper into how to structure your project to be less buggy and more maintainable/scalable as it grows, ⁣⁣by:⁣⁣   • Implementing naming conventions⁣⁣⁣⁣   • Implementing Object-Oriented Programming (OOP)⁣⁣⁣⁣   • Breaking the project into modular folders and files⁣⁣⁣⁣   • Using Webpack to bundle and minify the files for optimization⁣⁣⁣⁣ ⁣⁣⁣⁣ By the end of this journey you will be a significantly better developer who understands more professional levels of thinking, which will help with your future projects and communication in interviews, and separate you from other beginners.⁣⁣⁣⁣ ⁣⁣⁣⁣ Here’s the link to the beginning of the series - https://lnkd.in/gcZVY8Y5 ⁣⁣⁣⁣ We hope you like it! We know it’s long, but it’s worth it!⁣⁣⁣⁣ ⁣⁣⁣⁣ Best of luck, Your CoderComplete Team

📚 Interesting read about Figma's migration from Skew (programming language they invented) to TypeScript

Direct Docker container debugging, memory profiling, dump analysis, Blazor/MAUI preview and hot reload. I personally rarely use VS as my IDE, preferring Rider. It comes down to preference and circumstance at the end of the day. If you're dealing with predominantly console based applications or an API backend then sure, VS code could work for you. It can also work for things like Docker and with far less footprint sure. But you also have to take into account the amount of time it takes to set it up and maintain. Rider/VS out of the box supports the use cases you could need for a given project with automatic support for debugging an application in its Docker container with literally one click from clone to run. Almost all modern PCs/laptops are able to run both IDE's just fine. Optimisation has to be weighed up with the expense of ease of development (which is what it's all about). You could argue that debugging the application inside Docker isn't a requirement, but I would argue that if you're running Windows but deploying to a Linux Docker engine that you're not debugging in a production equivalent scenario where there may be differences (in our case there have been some very interesting instances).

🚀 Supercharge Your Development with Must-Have VS Code Extensions Hey everyone! Whether you're a coding veteran or just starting your programming journey, I'm excited to share some game-changing Visual Studio Code extensions that will absolutely turbocharge your development workflow and code quality. 🔍 ESLint & Prettier: This dynamic duo is a dream team for code quality and consistency. ESLint acts as your code guardian, automatically identifying and fixing potential issues in your JavaScript and TypeScript. Prettier ensures your code follows a consistent style, eliminating formatting debates and keeping your project looking sharp. ✨ Code Spell Checker: Typos can creep in anywhere, even in code comments and strings. This extension acts as your personal spelling bee, providing real-time spell checking to enhance code readability and professionalism. First impressions matter, and clean, error-free code makes a great one! 🔖 GitLens: For those who live and breathe Git, GitLens is a godsend. This extension provides deep integration with Git, offering invaluable insights into your codebase's history. Explore your project's evolution, visualize code authorship, and navigate branches with ease. 💡 Bracket Pair Colorizer: Say goodbye to hunting for matching brackets, braces, and parentheses! This extension assigns unique colors to matching pairs, making code navigation a breeze. Your eyes will thank you for the clearer visual structure. 🛣️ Path Intellisense: Spend less time wrestling with import statements and file paths. Path Intellisense offers autocompletion for filenames and paths, reducing errors and typos while keeping you in the coding zone. 🔍 Quokka.js: For the ultimate in rapid testing, Quokka.js is your secret weapon. This extension provides real-time code evaluation and debugging support for JavaScript and TypeScript. Experiment, test snippets, and see results instantly, all within your VS Code editor. 🖌️ Vetur: Supercharge your Vue.js development with Vetur! This extension provides enhanced support for Vue.js development, including syntax highlighting, IntelliSense, and snippets for Vue components. Bonus: Take Your Workflow Further: 🌐 Live Server: This extension eliminates the need for constant manual refreshes. Live Server provides live reloading of web pages in your browser as you make code changes, keeping your development workflow smooth and efficient. ⚙️ Settings Sync: Ensure you have your preferred VS Code settings across all your devices with this handy extension. No more manually configuring settings every time you switch machines! 🌟 Call to Action: This is just a taste of the amazing extensions available for VS Code. What are your favorite extensions for boosting your development experience? Share your tips and tricks in the comments below! Let's learn and grow together as a community of developers. #VisualStudioCode #VSCodeExtensions #DevelopmentTools #CodeQuality #ProductivityBoost #programming #OnBlick #rigaps

𝐖𝐚𝐧𝐭 𝐭𝐨 𝐬𝐚𝐯𝐞 𝐭𝐢𝐦𝐞 𝐰𝐡𝐢𝐥𝐞 𝐰𝐫𝐢𝐭𝐢𝐧𝐠 𝐜𝐨𝐝𝐞 𝐢𝐧 𝐑𝐞𝐚𝐜𝐭-𝐍𝐚𝐭𝐢𝐯𝐞? 𝐇𝐞𝐫𝐞 𝐚𝐫𝐞 𝐬𝐨𝐦𝐞 𝐭𝐢𝐩𝐬 𝐭𝐨 𝐡𝐞𝐥𝐩 𝐲𝐨𝐮 𝐰𝐨𝐫𝐤 𝐦𝐨𝐫𝐞 𝐞𝐟𝐟𝐢𝐜𝐢𝐞𝐧𝐭𝐥𝐲: - 𝑼𝒔𝒆 𝒂 𝒄𝒐𝒅𝒆 𝒆𝒅𝒊𝒕𝒐𝒓 𝒘𝒊𝒕𝒉 𝒂𝒖𝒕𝒐-𝒄𝒐𝒎𝒑𝒍𝒆𝒕𝒊𝒐𝒏 𝒂𝒏𝒅 𝒄𝒐𝒅𝒆 𝒔𝒏𝒊𝒑𝒑𝒆𝒕𝒔:  Visual Studio Code or Atom are great options that can save you a lot of time by providing auto-completion and code snippets for common React Native components and functions. - 𝑼𝒔𝒆 𝒂 𝑼𝑰 𝒍𝒊𝒃𝒓𝒂����𝒚: NativeBase, React Native Elements, and Material UI are just a few examples of UI libraries that provide pre-built components you can use in your app, saving you time and effort. - 𝑼𝒔𝒆 𝒂 𝒔𝒕𝒂𝒕𝒆 𝒎𝒂𝒏𝒂𝒈𝒆𝒎𝒆𝒏𝒕 𝒍𝒊𝒃𝒓𝒂𝒓𝒚: State management can be time-consuming, but using a library like Redux or MobX can help you manage your app's state more efficiently and save you time in the long run. - 𝑼𝒔𝒆 𝒂 𝒕𝒆𝒔𝒕𝒊𝒏𝒈 𝒇𝒓𝒂𝒎𝒆𝒘𝒐𝒓𝒌: Writing tests for your React Native app is important, but it can also be time-consuming. Using a testing framework like Jest or Enzyme can help you write tests more quickly and efficiently. - 𝑼𝒔𝒆 𝒂 𝒄𝒐𝒅𝒆 𝒈𝒆𝒏𝒆𝒓𝒂𝒕𝒐𝒓: React Native CLI or Expo CLI are great tools that can help you generate boilerplate code for common tasks like creating a new component or screen, saving you time and effort. By implementing these tips, you can save time and work more efficiently while coding in React-Native. #ReactNative #CodingTips #TimeSavingTips Happy Coding 😊 😊