This Dot Blog
This Dot provides teams with technical leaders who bring deep knowledge of the web platform. We help teams set new standards, and deliver results predictably.
You Can’t Mentor Junior and Senior Engineers the Same with Dan DiGangi
In this episode of the Engineering Leadership series, Dan Gigangi shed light on the crucial role that engineering leaders play in promoting a culture of learning within their organizations, focusing on the importance of adapting communication styles, expanding impact beyond coding, setting long-term visions, and navigating the challenges of transitioning from technical roles to leadership positions. One of the key points emphasized by Dan Gigangi is the significance of adapting communication styles to cater to different skill levels. Effective communication is essential for fostering collaboration and ensuring that complex technical concepts are understood by all team members. By tailoring their communication approaches, engineering leaders can bridge the gap between varying levels of expertise, creating a cohesive and productive work environment. Dan highlights the need for senior engineers to make a broader impact beyond coding. While technical expertise is undoubtedly important, engineering leaders should encourage their team members to think beyond their immediate tasks and consider the larger organizational goals. By empowering senior engineers to take on leadership roles and contribute to strategic decision-making, leaders can foster a culture of innovation and drive long-term success. The conversation between Dan Gigangi and Tracy Lee also emphasizes the importance of setting long-term visions and executing strategic plans for career progression. Engineering leaders should guide their team members in envisioning their professional goals and provide guidance on how to achieve them. By creating a roadmap, leaders can inspire their team members to continuously learn and grow, ultimately driving their own career advancement and contributing to the success of the organization. Dan also discusses the challenges and pitfalls of transitioning from technical roles to leadership positions. While technical expertise is a solid foundation, engineering leaders must also develop non-technical skills such as communication, relationship-building, and strategic thinking. This transition requires a shift in mindset and the ability to navigate complex organizational dynamics. By recognizing and addressing these challenges, aspiring leaders can better prepare themselves for the demands of leadership roles. Download this episode here....
Apr 11, 2024
2 mins
Bun v1.0
On September 8, 2023, Bun version 1 was released as the first production-ready version of Bun, a fast, all-in-one toolkit for running, building, testing, and debugging JavaScript and TypeScript. Why a new JS runtime You may ask, we already have Node and Deno, so why would we need another javascript runtime, Well yes we had Node for a very long time, but developers face a lot of problems with it, and maybe the first problem is because it’s there for a very long time, it has been changing a lot between different versions and one of the biggest nightmares for JavaScript developers these days is upgrading the node version. Also, Node lacks support for Typescriptt. Zig programming language One of the main reasons that Bun is faster than Node, is the programming language it has been built with which is Zig. Zig is a very fast programming language, even faster than C) (here is some benchmarks), it focuses on performance and memory control. The reasons it’s faster than C is because of the LLVM optimizations it has, and also the way it handles the undefined behavior under the hood Developer Experience Bun delivers a better developer experience than Node on many levels. First, it’s almost fully compatible with Node so you can use Node packages without any issues. Also, you don’t need to worry about JS Common and ES Modules anymore, you can use both in the same file, yup you read that right, for example: ` Also, it has a built-in test framework similar to Jest or Vitest in the project so no need to install a different test framework with different bundler in the same project like Webpack or Vite ` Also, it supports JSX out-of-the-box ` Also, Bun has the fastest javascript package manager and the most efficient you can find as of the time of this post ` Bun Native APIs Bun supports the Node APIs but also they have fun and easy APIs to work with like * Bun.serve() : to create HTTP server * Bun.file() : to read and write the file system * Bun. password.hash(): to hash passwords * Bun.build(): to bundle files for the browser * Bun.FileSystemRouter(): a file system router And many more features Plugin system Bun also has an amazing plugin system that allows developers to create their own plugins and add them to the Bun ecosystem. ` Conclusion Bun is a very promising project, and it’s still in the early stages, but it has a lot of potential to be the next big thing in the JavaScript world. It’s fast, easy to use, and has a lot of amazing features. I’m very excited to see what the future holds for Bun and I’m sure it will be a very successful project....
Oct 25, 2023
2 mins
How to Create and Deploy a Vue Component Library to NPM
When working across multiple Vue projects that share the same design system, it is more efficient and faster to have a component library that you can reference for all your components within the different projects....
Jul 18, 2022
4 mins
Double Click: Jump on the waitlist for Fig.io's new autocomplete terminal add-on!
Welcome to the Double Click! This is the weekly blog series that shines a spotlight on emerging technologies, technological concepts, and community projects that enrich the JavaScript Ecosystem! This week, I’m sharing a really cool, new tool for your existing terminal that I LOVE: Fig! This add-on provides VSCode-style autocomplete, and is currently being made available for free to those who sign up on their website. When using the Fig add-on, you get autocomplete options in your terminal, showing you everything you need, such as lists of available directories, folders, git commands, branches, components, and more without taking you out of your flow. How magical is it to get more time to focus on your code rather than trying to remember shortcuts and commands in terminal? (LIFESAVER!) Fig is also built to integrate with a number of CLI tools, including npm, Heroku, AWS, GCP, Docker, and more, with plans to add further integrations as the technology develops and new users start including Fig in their tool belt. Other features of this add-on include keyboard-first functionality, allowing developers to quickly use the auto completes without having to touch their mouse, open-source completion specs, which ensure that the Fig add-on always remains up to date and relevant for users, and the add-on runs locally, offering speed and security. I’m already using Fig, and am a huge supporter of any tools that work to remove complexities from my development process. I am excited to see this project grow!...
Sep 9, 2021
1 min
Let's Build a Web App with NPM and Express
To continue where our last article left off, we'll be showing you how to use npm to download and use libraries in your Node.js applications. Open source libraries will help you write less code and be more productive. The npm ecosystem is diverse and has many thousands of useful libraries that you can use absolutely free of charge! We'll be covering how npm is used, show some examples of importing express from npm and how to utilize it for running a custom HTTP server. Installation npm is actually distributed with Node.js as part of the base installation, and this means if you have Node.js installed then you should already have npm installed. If you don't have Node.js installed, you can get it on their website. Basic npm Usage npm's help prompt can be a bit overwhelming, so we're going to go over some of the most important commands you need to know in this article. npm init npm init can be used to set up a new npm package. This is the first step in setting up the structure for your Node.js application. An interactive prompt will ask you a few basic questions and generate a package.json file. The resulting package.json file will look similar to this: ` Everything specified in the prompt was added into package.json, and not much else. Our file won't stay like this for long though as we will be installing a dependency. Dependencies and their versions are tracked in this file. npm install We'll be building a simple express application, so we want to install the express package from npm. This can be done by running npm install express in the project directory. When this completes, you'll notice a new directory called node_modules and a new file called package-lock.json. node_modules contains the code for your dependencies. Since we installed express, the source code for it and all of its dependencies will be in this folder. Looking inside of the folder, you'll see that each dependency is organized in their own directories. package-lock.json keeps track of the *exact* versions of the dependencies that were installed. This file is expecially useful as it can allow deployments of your application to be guaranteed to install the same versions of dependencies you installed during development. package.json uses semvar to track versions instead of exact version numbers, so subsequent setups of your application may have slightly varying versions of dependencies. Semvar has syntax that allows for finer control over what versions of dependencies are acceptable for installation. You can find out more about semvar in the npm documentation. npm uninstall npm uninstall simply uninstalls a package in its entirety. If you changed your mind on installing express for any reason, you can remove it by simply running npm uninstall express. Let's Make an Express App Let's start with a basic hello world program using express and move forward from there. ` Save the above code in index.js and execute it using node index.js. This program will start a working HTTP server that listens on port 3000. We import express by using require('express') at the top of the file, and by calling the express() function it exports to get an application object. We can set up our routes and other configurations on the application object by calling its methods. This example program will return a plain text response of "Hello Express!" when the root of the site is accessed. Any other routes will result in a standard 404 error. Try opening http://localhost:3000 in your browser while the server is running! You could also set response codes and return JSON without much additional code. Let's add a route for GET /headers that returns the request HTTP headers as JSON. ` If you add that new code and restart the server, you should get the following at http://localhost:3000/headers: The response came back as formatted JSON and with our requested status code. req and res req and res are objects that are passed into each route handler. req contains HTTP request details from the client such as headers, cookies, data, urls, etc. The router also uses this object to determine which route handlers to call. A full list of parameters in the req object can be found here. The res object contains information that we wish to pass back to the client. When we first start handling the HTTP request, this object won't have much in it. If want to change the status code or send some JSON data back to the client, we need to do it through res. Changes can be made by calling methods in res such as but not limited to, status(), cookie(), append(), redirect(), json() and send(). These methods can be chained together as they all return the res object they belong to. Let's change our route to return some HTML instead: ` Try accessing the route with your browser to see the HTML return. You can use your browser's developer tools to verify the response headers and status code got set properly as well! Keep in mind that some of these methods will cause express to send a response back to the client when you call them, and you can only do this once. For example, the redirect(), json() and send() methods do this and should always be called against res last. A full list of parameters and methods in the res object can be found here. Conclusion Package managers like npm can be a helpful tool for getting your projects up and running with as little code as possible. The JavaScript ecosystem has thousands of useful libraries at your disposal, and utilizing open source code can improve your productivity. We hope this was a helpful introduction to npm! Next we'll be looking at concurrency within Node.js, and async / await. Concurrency is one of Node's strengths when compared with other languages. Stay tuned!...
Dec 21, 2020
5 mins