Front End Astronaut

Today we’re embarking on a journey through the depths of Azure Functions and how to harness its power using Node.js, right from the comfort of your local development environment. Whether you're a seasoned Node.js developer or just dipping your toes into the constantly expanding ocean of serverless computing, this guide might be useful if you are a frontend developr and you need or you are willing to work with Azure Functions. What are Azure Function Apps? Before we roll up our sleeves, let's understand what Azure Function Apps are all about. Azure Function Apps are a part of Azure's serverless computing services. Basically, it allows you to run small, event-triggered pieces of code in the cloud without having to be an expert on managing server infrastructure. In a nutshell, Azure Functions are about: Event-driven execution : Your code runs in response to events like HTTP requests, database operations, or queue triggers. Scaling on demand : Azure can handle scaling a...

Introduction Hello and welcome! Today, we embark on a journey into the world of cloud security, exploring a bit of Azure Secret Vault. This Microsoft-provided service is a great solution for developers, offering a secure ambience for storing and managing sensitive information such as API keys, passwords, and certificates. It is always of utmost importance to be sure that our confidential data is meticulously protected from unauthorized access, and Azure Secret Vault serves as an effective protector in this pursuit. In this guide, we will go through the process of bulk uploading secrets to Azure Secret Vault. It might look complex at the beginning, but this walkthrough should make it easy. The Imperative of Using Azure Secret Vault In the vast expanse of software development, security stands as something essential and irreplaceable. Azure Secret Vault emerges as a vital tool in our kit, safeguarding our sensitive information and providing a centralized location for their management. Ima...

In today’s digital age, many of us find ourselves glued to screens for the better part of the day. As a frontend architect, I am no stranger to this reality. My routine involves long hours in front of a monitor, diving into lines of code, writing documentation, reviewing specifications, and jumping in and out of online calls. And it's been like this for more than two decades. However, among this digital whirlpool, the practice of Yoga has been a great companion, helping keep my physical and mental well-being in check. Sitting on a chair typing on a keyboard also affects your spine, your hips, and your body in general. And as someone who has been practicing yoga for years, I started to wonder, could Yoga offer a respite for our eyes too, especially when screen time seems to be an inseparable part of what you do for a living? When I was 24, I developed astigmatism, especially in my right eye. That was in fact way before I started practicing Yoga. I worried about it getting worse with...

Today we're diving into a topic that's as ubiquitous as npm packages in a Node project: Impostor Syndrome. Yep, that awful feeling that you're not good enough, even when your GitHub is lit up like a Christmas tree with contributions. The Frontend Landscape: A Moving Target Let's set the stage. Frontend development is like surfing on quicksand. Just when you think you've caught the wave with React, Vue comes along and says, "Hold my beer." And don't even get me started on Angular. Remember jQuery? Ah, those were simpler times. The frontend ecosystem is a whirlpool of innovation, which is fantastic but also overwhelming. You've got new libraries, frameworks, and tools popping up faster than you can say "Webpack." One day you're the smartest guy for using Sass, and the next, you're outdated because you haven't adopted Tailwind CSS. The Impostor Within: A Tale as Old as Time Now, let's talk about the elephant in the room: Impo...

Pixelay for Figma is engineered to serve as a conduit between static design mockups and fully functional websites. It allows users to seamlessly compare Figma designs with their real-world web counterparts. What sets it apart from similar tools is its user-friendly interface, featuring multiple overlay options. For frontend developers, this tool is really great for achieving pixel-perfect precision, as it highlights any variances between the design and the coded UI, thereby making the development cycle more efficient and reducing iterative adjustments. Designers also gain by witnessing their concepts come to life in the most accurate way, and QA engineers can quickly spot and report any visual irregularities. This ensures that the final product faithfully matches the original design. What can it be used for? Ensuring the accuracy of Figma designs. Pixelay assists in confirming that Figma designs accurately represent the intended website by comparing them to the live site. This is ben...

As I mentioned in previous posts, I currently work as an associate frontend architect at Verndale , and also am a certified Yoga instructor. As a professional who wears multiple hats, I constantly strive to bring balance to my life and share this sense of equilibrium with others. From September 2022 to April 2023, I had the unique opportunity to lead weekly in-person Yoga practices for a group of coworkers. This journey was both enriching and enlightening, and I am excited to share my experiences and insights with you today. Yoga, a practice rooted in ancient Indian philosophy, is an amalgamation of physical, mental, and spiritual disciplines. It is a holistic approach to well-being that transcends the boundaries of age, culture, and physical ability. It has been a transformative part of my life, and sharing this with my colleagues was a cherished experience. Yoga practice at Verndale The practice is not just about being physically fit, but also about fostering mindfulness, enhancing p...

Serverless architecture has been of particular interest in the recent years, being potentially a game-changer in the realm of web development that's making its mark on the frontend landscape. So what's all the buzz about, and why should frontend developers be paying attention? Unraveling the Serverless Concept At its core, serverless architecture isn't a departure from servers as the term might suggest, but rather a shift in focus. It's about building applications without the necessity of managing servers, hence the term 'serverless'. It’s an innovative approach where the developers can focus on writing code, and the heavy lifting of infrastructure management is taken care of by cloud providers. In a traditional web development setup, developers would have to provision, scale, and maintain servers to run their applications. Serverless architecture flips this on its head. When you deploy your application, you only concern yourself with the code. The cloud provide...

The field of web development can be complex, filled with various technologies, standards, and practices. Amidst this complexity, we often look for simplicity: tools that can streamline our work, enhance website performance, and ensure user satisfaction. In this context, let's explore a really nice tool: the Web Vitals Chrome Extension . I've found myself many times working in teams where non-experts needed to understand the measure of the quality of the user experience on a website, and this tool has proven to be very helpful. So, this post is not intended for experienced developers. For them, there is an advanced set of options that include real-time console logging, user timings and more. We'll speak about that in the future :) Web Vitals Chrome Extension in Action Understanding Web Vitals To grasp the significance of this tool, we first need to understand Web Vitals. This is an initiative by Google to provide guidelines for quality signals crucial for ensuring an excelle...

Greetings, readers. The ever-evolving field of web development consistently introduces features that significantly improve efficiency and usability. One such recent advancement pertains to Cascading Style Sheets (CSS), specifically the introduction of individual CSS transform properties. Traditionally, developers had to manipulate multiple transformations using the transform property. This property required the use of various transform functions in a single line, as shown below: .element {     transform: rotate(45deg) scale(1.2) translateX(10px); } This approach, while functional, had its shortcomings. For instance, modifying one transformation without affecting the others was a challenging task. Similarly, overriding a single transformation in responsive design required precise handling to avoid unintended consequences. To address these issues, the CSS Working Group introduced individual transform properties, essentially assigning each transformation its own property: ...

The web development world has been buzzing with anticipation for a certain CSS feature that we’ve all been waiting for - container queries ! Now the wait is finally over. The prototype of container queries was available behind a flag in Chrome Canary for you to play around and experiment with, but now it is widely supported by major browsers. So, what's the big deal with CSS Container Queries? Before we get into the  gritty details of container queries, let's explore why they're so important. In the past, web design has been limited by the constraints of screen size. For instance, if a container is 600px wide, perhaps it has a row-like design, but any narrower than that, it transitions into a column-like design. The limitations have been around transitioning between layouts based on the screen size, rather than the size of an element or its container. Developers often used a system of breakpoints in CSS media queries to adjust styles based on the size of the viewport, not t...

Hello, fellow coders! Today, we are embarking on a journey to uncover the secrets of two fundamental concepts in JavaScript: assignment and mutation. We'll shed light on the differences, the quirks, and the best practices while using var , let , const , objects, arrays, arrow functions, spread operators, and rest operators. Buckle up and get ready for a code-filled adventure! Variables: The DNA of Your Code First things first, let's talk about variables. They're the DNA of your code, the building blocks that hold the data your code processes. In JavaScript, we have three keywords to declare a variable: var , let , and const . While all of them are used for variable declaration, they have different scopes and limitations. The Basics: Primitive Values and Objects Before we delve deeper into variable assignment and mutation, it's crucial to understand the two types of values we deal with in JavaScript: primitive values and objects. Primitive values include numbers, strings...

Greetings, fellow code enthusiasts! If you've been around the block (or the codebase), you've probably spent a good chunk of your time wrestling with modal pop-ups. Yeah, you know what I'm talking about - those pesky little windows that need to pop up for user confirmations, login prompts, or just when you want to show some extra content without navigating away from the page. In the past, we've had to lean on external libraries like micromodal.js or focus-trap , or even concoct our own concoctions to get the job done. And let's not even get started on making them accessible and user-friendly! Well, guess what? It's 2023 and there's a new kid in town - the native HTML <dialog> element. The <dialog> element is the web's standardized way to create a dialog box or an interactive component, such as a dismissible alert or a subwindow, that needs to be displayed on top of all other content in a web page. And it's here to make our lives a whol...

The term "debugging" has a bit of a legendary origin story. It dates back to 1947 when Grace Hopper, a pioneer in computer programming, was working on the Harvard Mark II computer. The team encountered an error that stumped them, until they opened up the machine and found an actual moth causing the issue. They removed the moth and logged the first ever "debugging" process. The moth itself was taped into the logbook, which is now in the Smithsonian Museum . While we may not deal with literal bugs in our machines these days, the term "debugging" has stuck around, symbolizing the process of identifying and removing errors or "bugs" in our code. So, the next time you're debugging, remember you're part of a tradition that traces back to the very early days of computing! In this post, we're about to introduce ourselves to the art of debugging frontend issues. We'll use the most powerful tool at our disposal - the browser devel...