DEV Community: Erica Pisani

Git Log's Hidden Gems: Using -S and -L for Powerful Code History Search

Erica Pisani — Sun, 10 Nov 2024 21:40:02 +0000

Ever needed to track down when a specific piece of code was first introduced in a project?

As part of some refactoring I had to do recently, I needed to do just that for a variable on a Django model.

I was already familiar with the basic git log command, but I didn't realize until I needed to find this information that git log has additional options available that give me some powerful search capabilities in the history of a codebase.

The first one, and the one that helped me find the answer to my question, was -S, also known as the Git 'pickaxe' option.

git log -S gets Git to show you only commits that changed the number of occurrences of the string that's being searched for. As an example:

git log -S property_i_am_interested_in

In learning about this command in Git's documentation, I also noticed a -L option. This enables 'line log' search, which allows you to view the history of a function or line of code in a given file. For instance:

git log -L :some_method_name:file_whose_history_you_are_interested_in

And, if you need something more specific in your search in either of these cases, both of these options also support regexes.

While source control providers like Github expose some of this functionality in their web interfaces, sometimes you don't want to go through the hassle of leaving the CLI, in which case these git log options can be very helpful.

If you're interested in taking a closer look at the docs, along with some examples, you can check out the official Git documentation here.

Enforcement of function keyword arguments in Python

Erica Pisani — Tue, 22 Oct 2024 03:13:30 +0000

Before starting in my new role a couple of months ago, it had been a very long time since I had programmed in Python.

Incidentally, I kept working in roles over the past several years that involved either full-stack Javascript or mostly Javascript with a little bit of another language (most recently Go).

So it's been fun to stretch my muscles a bit in a different language, especially one as accessible as Python is.

One feature of the language that I'm enjoying right now is the enforcement of keyword arguments to functions using the kw_only property made accessible in the @dataclass decorator.

It makes code that looks like this:

from dataclasses import dataclass

@dataclass(kw_only=True)
class Person:
    name: str
    age: int
    city: str

person1 = Person("Alice", 30, "New York")

raise an error, because the use of kw_only expects to see something like the following:

from dataclasses import dataclass

@dataclass(kw_only=True)
class Person:
    name: str
    age: int
    city: str = "Unknown"

person1 = Person(name="Alice", age=30, city="New York")

Although the error raised:

TypeError     

Traceback (most recent call last)
Cell In[8], line 10
      7     city: str = "Unknown"

---> 10 person1 = Person("Alice", 30, "New York")

TypeError: Person.__init__() takes 1 positional argument but 4 were given

is "clear" in that it will indicate to you that there are too many positional arguments being provided, if you're not familiar with kw_only it can be a bit puzzling because it looks like you're invoking the function properly.

If you come from a background of Javascript/Typescript like I do, or have previous experience with languages like Go or Rust that enforce this using something like structs where you're able to provide the arguments in whatever order you like as long as the properties follow the shape of the object/struct, then this will feel familiar and likely a welcome addition to your Python code.

This is especially useful if you're working with a large number of arguments, some of which may be optional.

How to install a Nerd Font on Warp

Erica Pisani — Tue, 08 Oct 2024 22:25:13 +0000

I started using Vim as my IDE of choice recently, and one of the things I wanted early on was a more visually appealing icon and font set.

I kept reading about Nerd Fonts so I decided to try installing one, but the instructions for doing so were both clear and yet missing some small details that meant that I wasn't able to get set up as quickly as I would've expected.

So here are the literal step-by-step instructions for installing a Nerd Font if you're using the Warp terminal and the Homebrew package manager:

Install Nerd Fonts via Homebrew

brew tap homebrew/cask-fonts
brew install --cask font-<FONT NAME>-nerd-font

Restart Warp

Restart the terminal and go to Warp > Settings > Appearance. There's a section called 'Text' and a dropdown labelled 'Terminal font'.

Your newly installed Nerd Font from the first step will appear in that list, so you just need to select it.

(If using Neovim/Vim) Restart Neovim/Vim

Once I restarted Neovim, the updated font, along with the associated icons, rendered correctly.

A month of using Vim

Erica Pisani — Mon, 16 Sep 2024 10:28:18 +0000

I've wanted to dedicate time to learning Vim for probably a decade now.

When I was just getting started as a junior developer, I remember thinking that the people who used it in their day-to-day were "so cool" and felt a bit of awe at how they achieved what they wanted so quickly without lifting their hands off of the keyboard.

Fast forward to a month ago and I decided to take the leap - I was going to try and use Vim for a solid month and if I liked it, I'd stay with it. If I didn't, I'd switch back to VS Code (which has been my go-to IDE for almost a decade).

The barriers to adopting Vim that I could see going into this:

steep learning curve;
the need for plugins for most of the things that come out-of-the-box in IDEs like VS Code or JetBrains (e.g.: editing multiple instances of a word in a file at the same time); and
choice paralysis because, for better or for worse, there's so many solid plugin options for solving a particular problem that it can be hard to tell for a new person what might be easier to get started with or if one tool is better suited towards a particular workflow than another.

After an initial upfront cost of spending loads of time researching, following a couple of Youtube 'initial setup' videos, reading various Reddit posts, googling "how do I do X in vim" dozens and dozens of times, and just general fumbling around, I feel like I've gotten a decent amount of the basics down.

I'm still spending a little bit of time every week tweaking things or trying to find a new plugin to achieve some functionality that I want, but it's nowhere near as overwhelming as it was at the beginning.

Things I learned

LazyVim is a great bootstrapped config for folks looking to just get started as quickly as possible rather than build everything from the ground up
If you are looking to build from the ground up, this video from the Primagean was helpful even though I ultimately ended up going with LazyVim because I wanted as close to an 'out-of-the-box' setup as I could find.
It does take literally weeks before it starts feeling more natural. You will spend lots of time getting frustrated with how the workflow isn't what you want and spending hours looking for the right plugins to install (and then wrangling with the installation) and keymappings to set.
:h user-manual is a thing in Vim that covers everything. I'd been using Google to figure out how to do things (Reddit in particular was an incredibly helpful resource) and then I stumbled on this at the end of my 3rd week of learning Vim.

Am I happy with my decision to switch to Vim?

Generally, yes.

Don't get me wrong, I still find some rough edges that I need to get used to and learn how to use more effectively (or to find a plugin that addresses things for me), but the main factor that will keep me on Vim is I find that I'm far less distracted and feel calmer using Vim than I was using VS Code.

This was not something that I ever considered would happen when adopting Vim. But thinking about it, I realized that VS Code can be noisy with a standard, out-of-the-box setup.

There are notifications on the bottom right harassing me about something going wrong, some extension they suggest I install based on the language of the file I have open, and various notifications about updates being installed.

Vim has this window that shows up briefly on the top right about plugins with updates that quickly disappears, but otherwise I'm never bothered again until I reopen a new session.

So all in all - I'm currently feeling like this was worth the time investment.

I might feel differently as I start delving more into debugging workflows (VS Code's experience is admittedly pretty nice) but I imagine it's just another thing that'll take a little time to learn and configure.

Edge Side Includes

Erica Pisani — Mon, 25 Sep 2023 14:16:38 +0000

A popular use case for edge computing among web and full stack developers is the injection of dynamic content into static assets and pages.

This technique increases the performance of our applications by allowing us to cache more of our content at the edge or at the Content Delivery Network (CDN), and by reducing the amount of data that needs to be requested and sent to our users from the origin server.

I recently saw a demo of code that leveraged Edge Side Includes (ESI) to inject dynamic content into static pages as the response was streamed back to the user, and it made me interested in how it works and if I might want to consider using it in my applications.

What is ESI?

ESI is XML markup that's embedded in the HTML itself. It takes the following format:

<esi:include src="<url-to-request>" />

As an example, let's say that you have an e-commerce site that has a homepage that is static, unchanging content except for the shopping cart, which differs for each user.

You would use ESI to make a request for the shopping cart content by doing the following:

As an example, let's say that you have an e-commerce site that has a homepage that is static, unchanging content except for the shopping cart, which differs for each user.

You would use ESI to make a request for the shopping cart content by doing the following:

<html>
  <head>
      <title>My Ecommerce Site</title>
  </head>
  <body>
    <div id="content">
      <div id="header">
        <img src="/images/logo.jpg" />
        **<esi:include src="/shopping_cart" />** 
      </div>
      <div id="items">
        <span id="item_1">...</span>
        <span id="item_2">...</span>
        ...
        <span id="item_n">...</span>
      </div>
    </div>
  </body>
</html>

Source for code: Fastly

When the response is returned to the user, rather than see the ESI tag in the HTML, it would be the shopping cart content.

Why is this useful?

ESI allows for the 'mixing and matching' of static and dynamic content at an edge server or CDN.

This is useful because HTML pages mostly contain static content on their pages with a small amount of dynamic elements. At the time that ESI was introduced in 2001, any time dynamic content existed the whole page would have been uncachable and would have had to have been served from the origin server.

By caching the static elements and only requesting the dynamic ones, we'd have the ability to cache the majority of the page and have faster performance on the request for the dynamic elements since they make up a much smaller subset of the page.

Where is ESI at today?

ESI was originally proposed to the W3C in 2001 but was never adopted as a standard.

Various CDN providers such as Akamai, Fastly, and Cloudflare have support for ESI, but the feature sets between them vary. For example, Akamai and Fastly parse the ESI tags for you, while Cloudflare seems to require you to write a (simple) Cloudflare Worker that does the parsing of the tag and insertion of dynamic content.

What are the alternatives to ESI?

Back when ESI was introduced, AJAX requests were considered the alternative approach. Rather than use ESI tags, you would use Javascript to update an empty <span> with the dynamic content on the page.

However, the islands architecture is the best alternative today that has similar outcomes to ESI, but differs in where the dynamic content is injected.

In islands architecture, placeholders are included in the HTML for the dynamic content when the page is being rendered on the server. These placeholders contain both the static content needed as part of the dynamic content and the Javascript needed to fetch the necessary data.

Whereas content is fetched at an edge location or at the CDN with ESI, using the islands architecture in your application means that the dynamic content is fetched using the returned Javascript on the client side.

One thing to note though is that the islands architecture approach renders the static content immediately for a page while the dynamic content is being requested, whereas the ESI approach doesn't return the page until all the content is available for it.

Should I use ESI in my application?

As always - it depends on your use case. There are security concerns to be aware of when using ESI, and the internet is more available (and reliable) than it was in 2001 when ESI was first introduced.

If it were me I'd go with the islands architecture approach due to the sense of 'responsiveness' users would get from having the static content rendered immediately on their pages, but it's worth knowing about ESI in case there's a time when you need to move the injection of dynamic content from the client side to the server side (or edge/CDN in this case).

How edge computing can reduce your software's carbon footprint

Erica Pisani — Thu, 17 Aug 2023 11:02:57 +0000

I think often about how I can apply my skills as a software engineer in ways that contribute to the betterment of society. The climate crisis in particular is one where on an individual level I don't always feel like I can do much.

At the QCon London 2023 conference, my favourite track was "Architecture with Sustainability in Mind". It left me feeling empowered to do something in my day-to-day work by showing how I could build software that has less of an impact on the environment by having both a sustainability mindset (e.g: asking how I could reduce the energy consumption of the software I build) and tools to help measure the impact of existing software.

Some of the talks, particularly Sara Bergman's 'Can Green Software Engineering Help Solve the Climate Crisis?' and Adrian Cockcroft's 'Cloud Provider Sustainability, Current Status and Future Directions', led me to consider how edge computing fits into this, and specifically:

How, if at all, can using the edge reduce the carbon emissions of an application?

Bergman's talk referenced this image from the International Energy Agency (IEA) that shows the increasing usage of data centres with respect to the number of workloads they run, the energy that they consume, and the energy consumed in the transmission of data in general:

As I've spoken about before, edge computing boosts the performance of our applications by processing and hosting data physically closer to our users.

By being closer to our users, edge computing reduces the carbon emissions of our software resulting from energy consumption in the following areas:

Data centre workloads;
Data centre energy use; and
Data transmission network energy use.

It achieves this through the following:

Lower request latencies

Request latency is tied to the energy used in the transmission of data over the network. When we have lower request latencies, this means less electricity being used - and essentially wasted - on waiting for a network response from distant servers.

Idle resources still consume energy so the less time they wait, the better.

Less data in the cloud

More data stored closer to the user (such as in an offline-first application) can mean less data that needs to be stored in the cloud.

This means that you won't need as large of a database which would require a bigger machine (or multiple machines if it's sharded), which reduces the energy needed to store the data at the data centre.

Reduced workloads going to the data centre

A reduction in workloads going to the data centre means that you can potentially reduce the size of the machines that you need to run to handle your application traffic at the data centre.

Smaller machines = smaller energy usage at the data centre.

Smaller energy usage = a smaller carbon footprint.

That's math we like to see.

Wrapping up

Based on the way edge computing operates as an architecture - run application logic and host data closer to our users - we can see that leveraging the edge can reduce the carbon footprint of our software through reduced energy usage.

If we as software developers start adopting the edge where we can - particularly for frequently invoked functionality - we can help in reducing technology's impact on the environment.

I had hoped to try and get some concrete numbers on the carbon emissions of an edge function run on a cloud computing provider relative to a serverless function hosted at a data centre using Climatiq but unfortunately their Cloud Computing API that could potentially help here isn't part of their free Community tier.

If anyone has recommendations on alternative tooling to measure this, comment on the post below!

Finally, if you'd like to learn more about building Green Software, I'd start with taking a look at the Green Software Foundation. They have a bunch of helpful resources and tools.

Why are custom headers missing in "304 (Not Modified)" responses?

Erica Pisani — Tue, 23 Aug 2022 02:35:13 +0000

304 (Not Modified) responses minimize the amount of information that needs to be transferred in subsequent requests made after an initial 200 (OK) response if the resources being requested are unchanged¹.

This has performance benefits for a website, particularly where larger assets such as images are involved.

If you are developing a website that makes use of custom headers in responses, it's worth noting a behaviour with respect to headers that 304 responses have that differ from 200 responses.

If a visitor to the website were to inspect their network requests and look at a 200 response, they can expect to see not only custom headers defined for the response, but the following headers which relate to the caching of the resource²:

Cache-Control
Content-Location
Date
ETag
Expires
Vary

In a 304 response however, the specification details that¹:

... a sender SHOULD NOT generate representation metadata...unless said metadata exists for the purpose of guiding cache updates.

This means that that same request, if the resources are cached on the browser, will receive a response that will generally be missing the additional metadata (in this case the custom headers) since they don't tend to serve 'the purpose of guiding cache updates'.

As an example to illustrate this behaviour, let's use a demo site that Netlify has for the Next.js framework. The specific page that we're interested in can be found here.

Looking at the 'Network' tab within the browser console, the request fetching the image on the page is the one that we'll take a closer look at. It should look something like:

GET https://netlify-plugin-nextjs-demo.netlify.app/_ipx/w_3840,q_75/%2F_next%2Fstatic%2Fmedia%2Funsplash.9a14a3b9.jpg?url=%2F_next%2Fstatic%2Fmedia%2Funsplash.9a14a3b9.jpg&w=3840&q=75

and the 200 response headers:

HTTP/2 200 OK
age: 0
cache-control: public, max-age=0, must-revalidate
content-type: image/jpeg
date: Tue, 23 Aug 2022 01:05:36 GMT
etag: "3b-XMihzCU33fI+mTMhk6V4yc9TZww"
server: Netlify
strict-transport-security: max-age=31536000
x-nf-request-id: 01GB43QGZ949EAFF6HBMX480RG
x-test: foobar
X-Firefox-Spdy: h2

Now if we were to refresh the page, we'll see a 304 response for that request instead:

HTTP/2 304 Not Modified
cache-control: public, max-age=0, must-revalidate
date: Tue, 23 Aug 2022 01:08:03 GMT
etag: "3b-XMihzCU33fI+mTMhk6V4yc9TZww"
server: Netlify
x-nf-request-id: 01GB43W0VGYVR87CHSMZ70T4HQ
X-Firefox-Spdy: h2

Notice how the x-test custom header near the bottom of the list for the 200 response is now missing from the 304 response.

Wrap up

I hadn't realized until recently that the minimization of data in a 304 response extended to the response headers, and so for those who have run into this behaviour and were also a bit puzzled as to why this happens, I hope this quick explanation was helpful.

Happy coding!

Bypassing Git Hooks

Erica Pisani — Thu, 18 Aug 2022 02:43:22 +0000

Git hooks are a useful mechanism for performing code quality checks in your local development environment before committing that code or pushing it up to a remote branch. A common quality check that a git hook can perform is running the project's code linter, such as eslint.

While it can be good practice to have these hooks configured within a project, at times they can be annoying when you're trying to share a work-in-progress branch with a team mate by pushing the changes to a remote branch. In such situations, they can feel like they're an impediment towards getting meaningful work done.

A workaround to this (until you're able to come back and address those issues), is the --no-verify flag, which bypasses these hooks.

It's worth noting that because the use of --no-verify is not able to be suppressed entirely (as far as I'm aware), it's good practice to have the same checks that are performed by the git hooks also be performed as part of a continuous integration/continous delivery pipeline. Doing so will guarantee that code violating quality checks run by configured git hooks are always (eventually) addressed.

Useful Github Search Capabilities for Issues and Pull Requests

Erica Pisani — Mon, 01 Aug 2022 11:48:42 +0000

In my day-to-day I often find myself wanting to search for pull requests and issues that I've commented on without necessarily being the author of the pull request/issue. Fortunately, Github has a couple of pretty useful search options for just this purpose!

Search by commenter

This is a filter I now use multiple times a day when I'm chatting with someone and have a "I know I've been in a conversation about this somewhere on Github already" moment.

The syntax for this is commenter:<a github username>.

Search for a user that's involved in an issue or pull request

More broad than the 'search by commenter' filter mentioned above, this works as an OR between the author, assignee, mentions, and commenter filters.

The syntax for this is involves:<a github username>

Wrap up

If you're interested in taking a look at some of the other search options that Github has (and I highly encourage doing so), you can find their full documentation about this topic here.

Testing a project contained in a monorepo

Erica Pisani — Sat, 02 Jul 2022 21:29:22 +0000

A 'monorepo' is the term used to describe the organization of multiple distinct projects with well-defined relationships into a single code repository¹ rather than having each project be in its own dedicated repository.

Monorepos have been around for a while, but if you haven't worked with them before, figuring out how to test changes made in one of the projects contained within a monorepo in a local or deployed staging environment might not be the most intuitive.

For this guide, we're going to assume that we're dealing with Node projects and packages.

Local environment

To test a project that lives within a monorepo in your local environment:

Run npm link within the directory of the monorepo project that you want to test
Run npm link within a project that has the monorepo project listed as a dependency that you will be using to test the changes made in the monorepo project
Run the test project

If you're interested in learning more about how npm link works under the hood that leads to this working, there's a really great Medium article by Alexis Hevia that can be read here.

Staging environment

If you're looking to test your changes in a deployed environment instead, you'll have to do something a little bit different.

When projects are in their own dedicated repository, it's usually possible to push the changes to a git branch and then reference that branch as the version of the project in the package.json file such as <your organization or user>/<project repository>#<branch> (rather than ^1.2.3).

Due to expectations on the structure of the backing repository needing to match a modules' published structure which doesn't exist in a monorepo project², we instead will create a tarball of the modified project and store the tarball on a predictable path to be referenced as the version of the project in the package.json file.

To do this:

Run npm pack within the directory of the monorepo project that you want to test
Commit the tarball to a git branch that you're using for testing purposes
Push the branch to github
Update the version of the monorepo project to reference the tarball file - "https://github.com/<username>/<repo>/raw/<branch>/[path]/<tarball>" - within the project that has the monorepo project listed as a dependency that's being used to help test the changes
Deploy the test project

Credit for the above workaround goes to Stephen Peck and the gist he made.

Conclusion

While requiring a little bit of work, testing a project contained within a monorepo is not too bad once you're made aware of the setup needed to allow npm to install the modified project correctly.

Hopefully this was helpful, happy testing!

Write how much work is required, not the work itself

Erica Pisani — Fri, 24 Jun 2022 15:56:57 +0000

The format for outlining what work needs to be done to achieve an outcome varies from company to company.

It can be challenging to convey a sense of scope when writing what work needs to be completed, and the result can sometimes amount to ‘do X so a user can do Y’ with the hope that the developer doing the work understands what the writer is getting at or to have a sense of who to ask follow up questions to if they’re unsure.

Writing as a skill has always been important, but as workplaces become increasingly distributed, it’s even more crucial.

Misunderstood Github issues, Jira tickets, or however work is tracked, often leads to wasted time and effort. It also makes onboarding new developers difficult as they won’t have a sense of where pieces of functionality live within a codebase.

Some companies use templates for outlining different types of work such as features, bugs, and chore work (e.g: data migrations), but at others - particularly smaller companies with no formalized process - the format used depends on the individual writer.

A senior developer¹ on a team I previously worked on proposed during a estimation session that instead of writing what the work itself is (“do X so a user can do Y”), we should instead focus on writing how much work is required.

For example, this change needs to apply to X amount of files, and some of these are frequently used code paths with no test coverage so manual testing will be required.

By focusing on how much work is required when writing what work needs to be completed, we can get a better sense of the scope of changes needed to accomplish a desired outcome.

While there will still be gaps in knowledge and work missed when following this format, this tended to give a better sense of scope of the work, which in turn helped feed into better estimations for project planning purposes, and improved the onboarding experience for newer developers on the team.

Deon Groenewald ↩