Pierluigi Cau

Super excited to be back at the SingaporeJS meet-up next Tuesday, 13 August! I asked Erik Nguyen if I should present a new talk, and he said why not. So, here it is—I’ll be sharing some tips and tricks for frontend debugging using DevTools. With this being a fresh talk, I'll be spending the National Day 🇸🇬 long weekend preparing the slides. Majulah Singapura! Happy 59th birthday, Singapore 🇸🇬! As a web developer, you've likely relied on console.log countless times—but what if there’s a more efficient way to debug? Many of us tend to overlook the full range of powerful features that browser DevTools offer beyond basic logging. In this session, we'll uncover some of the hidden gems within DevTools, introducing techniques and features that can completely change how you debug. We’ll go through everything from debugging hidden elements to using tools like Visual Coverage, Animation Timeline, Performance panels, and more. Expect around 20 tips to take your debugging skills to the next level and make your workflow smoother. A lot of these DevTools features get missed because we assume they’re just common knowledge. Think of this session as an information buffet—I'll present a variety of tools for you to explore. Let's dive in with curiosity and see how we can rethink our debugging approach! Looking forward to seeing you all next week. This is an in-person event at the Rakuten Asia Pte Ltd office in CapitaGreen. RSVP here: https://lnkd.in/gjY5KpgW

47

5 Comments

Rookie CTO mistake: Position the Technology department as a support function. Guilty as charged — I said yes to everyone, keen to prove that nothing is impossible in software. It took me a while to snap out of this limiting mindset. Order-taking to fulfil requests of other departments — that's not what a CTO is for. Technology is a not support function; it is a core driver of business value. As a CTO you're expected to initiate, not react. OK, it might not completely be your fault — the executive management team may not know any better. If so, educate them by showering them with the value you can provide. Drill down into the details of the company's business model.  What are the company's goals and strategies?  What financial constraints apply?  How does each department measure its progress? What is the interplay between the company's core metrics? What market trends is the company reacting to?  What are the biggest risk factors for the company? You'll find that you can contribute significantly in many areas, well before anyone requests a technological solution. By truly understanding the company's problems, you can help fashion solutions in true collaboration with the other executives — rather than just be sent on your way with a list of predefined "solutions" to implement. P.S. Are you a CTO, VP or Dir. of Engineering? — Imagine being able and empowered to deliver high impact business outcomes, every sprint … 👉 DM me the word "OUTCOMES" for details.

131

39 Comments

The most common complaint I hear about serverless is that it "is difficult to test". And this is where I most strongly disagree. In fact, I will try to prove that serverless actually is much easier to test and debug than the more common solution of using a container or a local server. Why do I say this? Simple: a serverless application is built out of isolated functions. Each function is a component, that receives an input and an output, and the services it uses are injected as arguments.   If anyone remembers the basics of the Spring Framework (which is an Inversion of Control, a testing framework at its core), the concept is the same, just at the infrastructure level. With this structure it is extremely easy to write tests: all you need to do is to pass arguments, and, if you are using external services, provide mocks for them. Serverless also makes it easy to write integration tests because the deployment is fast and can be integrated into the test code itself. However, in my experience. people who are used to building with containers are upset by this experience and complain that they "can't debug it". They expect to be able to start the server (which they cannot do with functions) and tweak with the application by interacting with it, often manually playing with the UI. The truth is that they are not used to writing tests at all . They don't do that, period. So they start the whole thing, interact with it often at the UI level and attach a debugger to find out what is wrong.  Of course this is a bad practice because you do not get a repeatable test suite, and what is worse, you have to test the whole thing instead of unit tests. Unit testing an entire server is much more harder than testing functions. So the truth is: is not that serverless is hard to test, it is that you usually do not write tests for your code at all.

21

3 Comments

I was already a fan of Astro 5.0's Server Islands, but then I discovered that we can cache each server island making some really good (and frugal) combinations. A static site + a server-rendered island that's cached exactly how I need it is a really great win for performance and DX. I made a video where we use the Bluesky API to pull latest posts to a Server Island and cache it for 30 minutes (with stale-while-revalidate) for a great experience https://lnkd.in/gj_BN7A7

6

I really can't get over how much component libraries accelerate modern front end development. Take something like Ant Design - almost every single type of element you might want to add to your app - it's just there. Seconds away from using. Combine something like AntD with something like Tailwind and you can spin up an entire UI in HOURS (ok, maybe a day or two). Will it immediately fit your brand guidelines? No, but it can with a little effort. Can it do absolutely everything your designer draws in Figma? No, but like 98%. And with a little Tailwind, yes. Will it save you literally thousands of dollars vs tryin to build it yourself? YES. There are lots of design systems out there and all have pros and cons and even though I love AntD, it's not the right fit for every company, but you'd be silly to not use something like it in a new build. If you're a founder spending money on design and your designer isn't using a component library as a base, they're doing it wrong and you're wasting time and money.

12

9 Comments

The #dagger #typescript SDK is becoming dope, I think its one of the best SDKs because all the wonderful type hinting and docs just work™ in most IDEs https://lnkd.in/gyJ_yXzX

6

1 Comment

My recorded talk at JavaScript Bangkok 2.0.0 is now live! If you want to dive deeper into DevTools, check it out 👉 https://lnkd.in/gmHQS7m9 The video quality is excellent—I can hear myself so clearly! Watching it again has been a great way to reflect and think about how I can improve for the next time. Frontend debugging is a skill that gets better with regular practice, but many developers do not take full advantage of what DevTools can offer. Just like mastering your code editor boosts productivity, getting comfortable with DevTools can do the same. Some of my favourite features are: - LogPoints - Changing program behaviour on the fly - Overriding web content and HTTP response headers locally - Debugging disappear elements These tools have been game changers for me, and I hope they will help you too!

24

📰Introducing Miniflux: A Minimalist Open-Source News Reader🚀 Ever felt overwhelmed by information overload while managing multiple news feeds? Allow me to introduce you to Miniflux - an opinionated, lightweight feed reader that's going to change your life! 😊 Miniflux is written in Go and PostgreSQL, designed for simplicity, speed, and ease-of-use. Its minimalist approach avoids unnecessary features, focusing on the core functionalities of feed management. Why go for Miniflux? - Zero dependencies: Standalone binary ensures hassle-free installation 💻 - Single binary compiled statically without dependency - No ORM or complicated framework: Clean, efficient codebase for developers 🧑‍💻 - Modern Javascript (ES6 and Fetch API): Smooth user experience 🎯 - Extensive documentation: A beginner's best friend 📚 Personally, I've fallen in love with its simplicity. With Miniflux, it's now effortless to browse through different sources and enjoy the news without distraction. I am sure you will find it incredibly useful for your projects too! 💡 Now that you know about Miniflux, I'd love to hear your thoughts on the tool. Have you tried it already? How has it streamlined your workflow? Let's discuss the beauty of minimalism in software development! Feel free to share your feedback or ask questions about Miniflux here 👇 #Miniflux #FeedReaders #OpenSource #GoLang #TechCommunity

5

ElementsKit is good and we build multiple sites with ElementsKit. This is also one of the 3 millionaire plugins. But how about the ElementsKit alternative? https://lnkd.in/gj6-5w-s #ElementsKit #Elementor #Addon #WordPress

5

🎉 Hacktoberfest 2024 is here! But this year, I'm taking a step back from contributing due to health issues and a busy schedule. However, I still want to help others make their mark in the open-source world. If you're a first-time contributor looking for a beginner-friendly project, I invite you to check out my open-source projects: 🚀 SWFT - https://lnkd.in/d4TtX-JH 🔗 ZenLink - https://lnkd.in/dhAnRmWq 💡 Stabl - https://lnkd.in/ddQM934c These projects are designed to be easy entry points for those just starting with open-source contributions. I'd love to help guide you through your first PR and get you into the flow of contributing! 🙌 Feel free to drop a comment or DM if you're interested or have any questions. Let's build something amazing together this Hacktoberfest! 🍂🚀 #Hacktoberfest2024 #OpenSource #FirstTimeContributors #SWFT #ZenLink #Stabl #Community #DevLife

13

Some people ask me why I am such a stickler and a curmudgeon when it comes to #OpenSource. That is a good and valid question. So let me try to answer it. I've been involved in Open Source for over 30 years. Now the term "involved" is so vague and nebulous as to be almost meaningless in this connotation. So let me summarize my involvement. I contributed back in the 80s and 90s to some foundational software projects of the Internet: sendmail, xntpd, BIND/named, various GNU projects and loads of others. I contributed to the old NCSA webserver and was an extremely early addition to the original Apache Group. I co-founded the ASF and served on its board for its first 20years, where I also served as EVP, Chairman and President. Many if not most of the major cornerstones of the ASF I had a major hand in. I've served on other FOSS foundations, and not because whatever company I worked for handed over major $$ in exchange for a board seat, but because of "true" merit (whatever that means). And I am still as active today as I was back in the day. I am considered by many to be one of the remaining *active* elder statesperson of the Open Source movement, a member of the "old guard" so to speak. I take that responsibility seriously. I say all this not to brag (OK, maybe a little bit. I need the self confidence boost), but to also provide some background. Basically, I was there when this all started. I was not only there, but on the front lines with many, many others. I was there defending Open Source; When there was FUD about Open Source, I was one of the people combating that. Back when Open Source was considered this weird little outlier, the underdog, when it couldn't be trusted, when companies called it a "cancer", when every gain had to be fought for, I and many others had to battle to ensure that Open Source was understood, acknowledged and eventually embraced. And we have the battle scars to prove it. The success of Open Source was hard, hard won. So today, when I see people misrepresenting what Open Source "is", or try to redefine it, or make claims about it that were never part of the motivation or the movement, it reminds me of the old days. When people usurp Open Source to the detriment of the community, in attempts to bask in the reflected glow and good will that Open Source was able to eventually win, those old battle scars start to bleed just a little. The fight isn't over, just because the term Open Source is known and popular. In many ways, as Open Source weaves its way into other arenas and avenues, the fight continues and even expands. Open Source succeeded, and continues to succeed, because Open Source is a known and agreed upon entity. It thrived because of the Open Source Definition, not despite it. The phrase "Open Source" means something, and Open Source only continues because that meaning has, well, meaning. It has depth. It has a history and a legacy. And that is worth keeping up the good fight, even if means distain or mockery.

70

14 Comments

With many companies embarking on #GenAI projects, data engineers suddenly have to figure out how to process increasingly large amounts of data, likely in real-time. And many of the technologies in this space are not easy to get started with! The open source Quix Streams library allows you to easily process data in real time in pure #Python. We have also introduced streaming DataFrames that allow you to treat data stream simply as continuously updating tables 👌 Thanks Anton for this awesome guide to help others get started!

13

If you have not checked out #DiagramAsCode systems and specifically #MermaidJS https://mermaid.live/ lately -- you really should do so! They have added so many new diagram types since I'd last checked, making it an incredibly useful tool to have in the bag. There are tons of integrations as well, so you can use this not just to visually explain the current state of a complex system, but also build #automation that would ensure that diagram remains relevant as changes are made to it -- and version it alongside your code! Ahh, this stuff is so cool, I geek out hard about it. :D As one does these days, I see they have built an #AI service based on the OSS capabilities, which seems interesting, but I've not checked that out.

13

5 Comments

So much work I do as a developer exists in YAML. Frequently though, these yaml files do not have the ide hints I lean on when working with code. Eidolon is primarily driven by YAML configuration, so I knew it was important to build these IDE hints into the product to make devs happy and productive. What I didn't know is how simple implementing this feature would be. Like so much of software, by plugging into the right open source project (schemastore in this case), I was able to get this entire feature almost for free. I just had to build out my application specific logic and suddenly my "code" was supported everywhere (sound familiar?) I love this feature, and wrote a small blog explaining how to add this IDE help to your project. Far too many yaml based projects are lacking this. Implement it today, stop wasting your developer's time. https://lnkd.in/g8Kb7rFs

8

Been reading the book "Creating Software with Modern Diagramming Techniques" by Ashley Peacock. Fantastic book on working with MermaidJS to create a variety of diagrams. This bit about the C4 Model caught my attention (in regards to a "context"/C1 diagram): > The litmus test you can use to determine if the level of detail is correct is whether I could show it to my product manager, or anyone nontechnical, and they would be able to understand what the diagram is trying to convey. When working with other devs and managers that wanted to use the C4 Model in the past, they always went heavy on the "UML architecture diagrams" for a C1. I rebelled against it because I thought the system was too complex for what we do (frontend development). I was fighting the wrong fight. It wasn't that the C4 Model is too complex, but how people were implementing it. Just another reminder to myself that I needed to do some better research and learn it more deeply. (these images were taken from a quick google search, but top one is "less complex" than some I've seen in actual, previous projects.)

14

5 Comments

📦 Streamlining Gradle Builds with External Task Files Are you looking to keep your `build.gradle` clean while managing complex tasks? Here’s a quick guide on how to create and use an external Gradle file for your custom tasks! 🚀 Step 1: Create an External Gradle File First, define your task in a separate `.gradle` file. For example, create a file named `custom-tasks.gradle`: "groovy task hello {   doLast {     println 'Hello, Gradle!'   } } " Step 2: Include the External File in Your Build Script Next, include this external file in your main `build.gradle` file using the `apply` method: "groovy apply from: 'custom-tasks.gradle' " Step 3: Run the Task Now, you can easily run your custom task from the terminal: "bash gradle hello " This will execute the `hello` task and output: `Hello, Gradle!` Why This Matters: By organizing your tasks into separate files, you enhance readability and maintainability of your build scripts. This approach allows for better collaboration and easier updates in larger projects. 💬 Have you tried using external Gradle files for your tasks? Share your experiences or tips in the comments below! 👇 ------ GRAMOSOFT Pvt Ltd-Revolutionize Your Business with Digital Transformation - Let Us Help You Go Digital! #Gradle #SoftwareDevelopment #DevOps #Programming #Gramosoft #Gsoft

5

Backstage 1.30.0 just dropped! Here's what's new and awesome ✨ 1. New Frontend System - With this release we've truly taken it to the next level! Now with cool stuff like blueprints for extension creators, better testing tools, and super-flexible overrides. Plugin owners, it’s your time to shine! 2. Backend System Overhaul: Out with the old, in with the new! We’ve cleared out some outdated backend service factories and tidied up the system for a smoother experience. Plus, we’ve made it easier to manage sign-in resolvers across different environments 3. Software Templates go global: Thanks to our community, the Scaffolder now speaks more languages with i18n support. Talk about a global presence! 4. Dynamic Backend Features:Backend features on the fly? Now you can, with our new dynamic loaders. The possibilities are endless! Give it a spin and let us know what you think!

94

I’ve been where so many engineers find themselves today... Feeling stuck, lost, and just overlooked! So, seeing my personal stories resonate deeply, even with non-engineers, and inspire people to take action to overcome their own struggles is such a heartfelt experience ❤️ It took years to distill the 5-step refactoring process into Brain Refactor. And as Kathy mentions in this detailed review, it's all focused on taking action. Here are her 3 favorite parts: ------" 1. Dagna's 5 step refactoring process. It's simple, thorough and she repeats it over and over again in the book with great examples so you won't forget it and see how others have used it. 2. Personal, emotional stories. We all think we're alone in our struggles. We aren't. Dagna shares her own powerful stories, but also that of clients she's helped. Knowing you aren't alone and that others have made progress is tremendous motivation. 3. Her root cause analysis matrix is genius. I haven't seen anything like it before and I love the idea of reflecting in a structured way. Essentially: What's bringing you away from what you want? What can bring you towards what you want? "------ #BrainRefactor

3

I continue to be amazed at how much faster (mostly) vanilla JavaScript is when compared to bloated framework-ism frontends. With my work on Meet Near Me, here is an example of some non-trivial complexity, all with nothing more than HTMX and Alpine.js. The slider here uses CSS scroll snap (mobile-friendly by default) and vanilla JavaScript with a hidden input that tracks "currently selected" state (no `useState()` or virtual DOM, or `useRef()`), it doesn't even use Alpine for state management. It's loaded by a very simple HTMX `hx-trigger="load"` event where the server gets the child events and sends back the carousel as pure HTML / JavaScript. The sidebar uses Alpine for some more complex state management and form validation (nowhere near as painful as React Final Form though!) The "time bound tickets" are managed on the frontend but I make a call to the DB on the backend during form submission to avoid spoofing and explicitly not trust the client (as they could cheat to get a better price).

71

38 Comments