DEV Community: Jamie Swift

Boost Your Productivity: Best Software For Dev Teams

Jamie Swift — Thu, 22 Sep 2022 08:24:47 +0000

We are slowly approaching the end (!) of 2022. How would I sum it up? For me and my team, the last months were a continuation of the constant learning and adapting to the trends that completely changed the way we used to work (remember the habit of actually going to the office and wearing pants to work…?!). The beginnings weren't easy, but the challenges we faced pushed us into searching for convenient software that could help us handle the new normal. In this short post, I would like to share with you the discoveries I made this year in the field of developer tools.

GitLive

This tool is for all you team players out there, GitLive makes Git LIVE. It adds a tab to your IDE where you can see your fellow collaborators, if they are online, what issue and branch they are working on and even their uncommitted changes, all updated in real-time. Any non-stale branch ahead of master/main is considered work in progress and you can inspect diffs of the files changed as well as view the associated issue or pull request.

Their flagship feature is automatic merge conflict detection. Your teammates’ changes show in the gutter of the editor (addition, deletion, modification or conflict) where you can inspect them to see the diff, what branch it’s from and cherry-pick them straight into your copy of the file if you need to.

GitLive can be very useful for larger teams and especially useful for open projects as these features even work across forks. What’s also cool is as the data comes straight from Git, there’s no manual entry required to keep it up-to-date.

Wallaby.js

Wallaby is an integrated continuous testing tool for JavaScript, developed by the team behind Quokka and Dingo (fun fact: they name all their products after native Australian animals 🇦🇺). This distraction-free javascript testing runs the tests as you type and provides the results directly in your editor, right next to your code (unlike traditional test runners that display feedback in your console), even on unsaved files.
Wallaby works really well on bigger projects where it can help you maximize your productivity by allowing you to focus on a specific set of tests, no matter how large your project becomes.

The tool comes with a lot of great features like time travel debugger with edit-and-continue or value explorer and output inspector for viewing runtime values, to name just a few. Plus their docs are amazing and provide you with a vast overview of all the functionality that can really make you kick it off with the product in no time!

GitPod

The problem developers often face is a huge amount of time wasted on setting a development environment. Gitpod aims at automating this cumbersome process by allowing you to spin up fresh, automated dev environments for each task, in the cloud, in no time. By providing always ready-to-code development environments, GitPod eliminates a tone of pain points that we all know too well: project onboarding, context switching, dependencies that no longer work - you name it.

Dropping your local development environment can mean a huge boost of productivity for you and your team. It is open core, so there are some features that you have to pay for if you want to host them yourself, targeted at larger teams, but the free plan is pretty generous for everyone who’d like to try it.

Retool

Retool is an internal app builder. As we all know, setting up internal tooling and applications is time-consuming, repetitive, and keeps developers from the actual problems they are trying to solve. Retool offers a collection of drag and drop components that allow you to build an elegant UI for your app in minutes. Plus, everything in Retool is a JS object that you can easily manipulate; you can also build your own custom React components. Out of the box, Retool will connect to nearly anything with a REST or GraphQL API. A growing library of native integrations makes it even easier to connect with your data sources.

FireHydrant

FireHydrant is a tool that puts out “fires” at work and handles your system reliability. It helps document the system, integrate the tools you already use, and gather data and alerts for handling incidents. With FireHydrant you can automate incident handling workflows e.g. create a new Slack room, status page update or a Zoom bridge.

FireHydrant gives teams the tools to maintain service catalogs, respond to incidents, communicate through status pages, and learn with retrospectives. The paid plan may seem quite costly (20$ per user per month for smaller teams and 44$ per month for teams 5+), but there is a free plan available that lets you test if the platform suits your company’s needs.

Thanks for reading, hope you’ll find the tools I presented above interesting and useful.

Top WebStorm Plugins To Level Up Your Productivity

Jamie Swift — Tue, 30 Aug 2022 08:51:41 +0000

A while ago I migrated from VS Code to WebStorm, and it’s been great. Like all JetBrains IDEs, it comes with a set of built-in features that makes every programmer’s life much easier. Still, even such a great tool can become even more amazing with a little optimization. Since I like experimenting with cool plugins, I thought I would share with you my pick of the tools that really improved my productivity in WebStorm.

VS Code Key Map

This is a real pearl, as it makes the transition from VS Code to WebStorm much easier (or is a life saver if you are switching between both). It lets you migrate and sync your keymaps so you don’t have to learn a new set of key cords to work effectively inside an IntelliJ-based IDE.

You can use it if VS Code keymap is not pre-installed in your IDE. A thing worth noting is that it doesn’t automatically set the keymap to VSCode after installation. You have to set it manually: Preferences > Keymap > Select VSCode

GitLive

This plugin is an absolute must to enhance WebStorm’s built-in Git functionality with real-time features such as online presence for team members and instant merge conflict detection.

GitLive adds a tool window to your IDE where you can see who in your team is online, what issues and branches they are working on and the changes they’ve made on those branches, which contributes to minimizing interruptions and context switching.

Instant merge conflict detection is a real game-changer. Indicators in the gutter of your editor show the difference between your changes and the changes of others. These update in real-time as you and your teammates are editing and provide an early warning of potential merge conflicts. This way you can resolve merge conflicts before they even happen!

AceJump

Do you know the feeling of accidentally bringing your caret to the wrong place while coding and poof, your trail of thought is gone? Let me tell you, it’s not great. Luckily, with AceJump you can quickly navigate the caret to any position visible in the editor. Simply hit "ctrl+;", type a character, then type the matching character to Ace Jump.
It takes a bit of time to get used to it (see a full demo here: AceJump in action), but believe me, once you get comfortable with using it, you would never want to go back.

Quokka

If you are a JavaScript developer, Quokka is a great tool to consider. It is a rapid prototyping playground in your editor, with access to your project's files, inline reporting, code coverage and rich output formatting. It runs JavaScript and TypeScript with instant feedback. Runtime values are updated and displayed in your editor next to your code, as you type. Code runs immediately as you type, on unsaved changes; no need to do anything manually or switch context. Error messages are displayed right next to the code that caused them. Console logs and identifier expression values are displayed inline as well.

Protobuf

This plugin provides complete protobuf support. It’s an alternative to bundled-in Jetbrains Official Protobuf Plugin and IMO it works much better. It supports most of the official plug-in functions and provides a lot of unique advanced features, such as automatic import, code formatting or more complete code prompts. It’s worth noting, that the creators are quite responsive to reported issues or features request which is a big plus for me.

Remember, that in order to use you need to disable Protol Buffer and gRPC, otherwise, it will not work properly. Recommended!

So that’s my selection of extensions for boosting your productivity in WebStorm.
I hope you found something interesting on this list and if you have some feedback don’t hesitate to reach out in the comments!

The best VS Code extensions to supercharge Git (yes, there’s more than GitLens!)

Jamie Swift — Tue, 06 Jul 2021 12:06:49 +0000

Yes, I know, we should all be terminal ninjas, memorising every git command yadda yadda. Or, like the caveman, we could put two sticks together (or in this case, VS Code) and create fire (aka use the UI) to work with Git via amazing extensions that not only make working with Git easier but also extend Git with cool new features and superpowers!

1. Git Graph ^{😎 popular}

Git Graph has to be the most visually appealing way to interact with Git in VS Code, seeing the commit tree like this can help a lot when performing more complex git operations.

It is very customizable and offers you granular control over the UI such as the graph style and branch colours.

You can click on any commit to view details and file changes, and you can even perform code reviews without leaving your IDE!

Installs: 1.4 Million
No. 1 superpower: A user interface to match GitKraken or SourceTree but built directly into VS Code to avoid context switching.

2. GitLive ^{🌟 rising star}

This extension is for all you team players out there, GitLive makes Git, well, live. It adds a tab to VS Code where you can see your fellow collaborators, if they are online, what issue and branch they are working on and even their uncommitted changes, all updated in real-time.

Your teammates’ changes also show in the gutter of the editor where you can compare them to your changes and cherry-pick them straight into your copy of the file if you need to. Pretty cool!

An added bonus with this extension is it adds video calls and screen share to LiveShare, you can place calls directly from VS Code and start LiveShare without copy and pasting links.

Installs: 5500
No. 1 superpower: Get an advanced warning of potential merge conflicts with change indicators in the gutter that show where your teammates are making changes.

3. Git Automator ^{🕰 time saver}

This one is for all you lazy developers out there, specifically the ones that don’t like spending too much time or effort on commit messages. I’ve seen enough commit messages to know that there are quite a few of you out there too.

Git Automator allows you to add and commit files with a shortcut. It also provides auto-prefills for commit messages. When the action is obvious, for example if you have deleted a file, Git Automator will guess the action and add it to the prefilled commit message.

You can also set up some of your own shortcuts and use them to generate automated commit messages.

Installs: 50 000
No. 1 superpower: Auto-filled commit messages!

4. Git Urgent ^{👌 simple}

This one, I put in the category of simple, but effective. With this extension installed, all you have to do is search “Git Urgent” in the VS Code command palette, and you can git add all, commit and push with one command.

Great for hotfixes and other emergency situations!

Installs: 3 500
No. 1 (and only) superpower: Stage, commit and push in a single action

5. Git Tree Compare ^{👍 practical}

Git Tree Compare is a handy extension that compares your working tree against a branch, a tag or commit.

A folder tree structure located in the Source Tab (you can configure it to be shown in the Explorer Tab instead) quickly provides you with context about the files you’ve been working on (very useful in big projects!). Icons displayed near the files’ names give you a quick idea of whether a file was added, deleted or modified.

After choosing the base for the comparison, you can either choose to open All Changes or open Changed Files (files that were added will be opened as well, but changes won’t be shown). You can also choose whether to compare against the selected base ref directly (full mode) or by computing a merge base first (merge mode).

Installs: 93 000
No. 1 superpower: Pull request preparation and merge previews!

6. GitLens ^{🥇 undisputed champion}

Well, we couldn’t really leave it out, could we? With almost 10M installs, GitLens has really become the de facto standard extension for working with Git in VS Code which only ships with a fairly minimal git integration.

They should probably just start bundling it with VS Code (especially as the author is now part of the core VS Code development team!)

Installs: 10 Million
No. 1 superpower: On-demand file annotations in the editor gutter, including blame (shows the commit and author of each line), changes (highlights local changes), heatmap (shows how recently lines were changed).

Conclusion

Although Git rocks, googling and punching in Git commands can get a bit tedious. Hopefully, some of these extensions will reduce the time you need to spend doing that, and help you with much more!

5 CSS tricks to improve your project (or just have fun trying)

Jamie Swift — Fri, 28 May 2021 13:07:21 +0000

Looking for inspiration on how to add a twist to your project design? Take a look at those 5 CSS techniques and have fun experimenting with some bold ideas!

Bring back the 90’s with the background-clip
Crazy shapes with clip-path
It’s all about the details - change text selection color
Add filters to your images
Check the browser support

Bring back the 90’s with the background-clip

Have you ever wondered how to apply a gradient or a texture to the text in CSS? The good news is you can easily achieve that with the background-clip property!
First, we need to apply the background color to our <h1>, then use the value text for the background-clip property and set the text color to transparent.

<h1 class="wordart">The background is clipped to this text</h1>

h1 { 
     background-color: #ff1493;
     background-image: linear-gradient(319deg, #ff1493 0%, #0000ff 37%, #ff8c00 100%);
}
.wordart {
     -webkit-background-clip: text;
     color: transparent;
}

And voilà, the 90’ style WordArt is ready!

Crazy shapes with clip-path

If you like to experiment with your designs, you might want to try the clip-path property. Clip-path creates a clipping region that sets what part of an element should be shown. Anything outside the clip-path (shape’s boundary) won’t be visible.

To create this simple polygon I applied .clipped class on the image and used this path:

.clipped {
      clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

How does it work? Well, the set of two values before a comma are X (horizontal axis) and Y (vertical axis) coordinates.

Let’s consider our initial rectangular image. The path (starting from upper right corner where X =0 and Y = 0) would look like this: (0 0, 100% 0, 100% 100%, 0 100%).

Now coming back to our simple polygon - the initial coordinates start exactly in the middle of the X-axis, so that’s why the first pair is X50% and Y0. From there we want to draw a line to the next point which is in the middle of the Y-axis, so what we get is X100% and Y50%. The next line goes from that point to X50% and Y100%, and so on. It can be difficult to wrap your head around it at first, so the best way is to try it yourself and experiment a little!

It’s all about the details - change text selection color

This is a simple one, but it can add that extra touch to your design. To change the color of the selected text use ::selection pseudo element that will override the browser settings and apply the color you choose.

::selection {
      background: black;
      color: white;
}

Add filters to your images

Thanks to the filter CSS property you can add graphical effects like blur or color shift to an element, for example an image or a background.

Below you can see 4 images. First image is the original with no filters applied. The second one is the same pic with the blur effect on it, then goes sepia effect and saturate effect on the last one. Pretty cool, huh?

.blur {
  filter: blur(5px);
  }

.sepia {
  filter: sepia(75%);
 }

.saturate {
  filter: saturate(10%);
}

Check the browser support

Let’s finish off with a handy CSS-rule @supports that allows you to adjust your declarations for CSS properties depending on browser support. State your condition in the parenthesis - the code will be rendered only if the condition is true. If the browser doesn’t understand a given CSS property the code won’t be generated. You can use @supports not to provide an alternative CSS (just make sure that the browser supports @supports!)

@supports (display: grid) {
  div {
    display: grid;
  }
}
@supports not (display: grid) {
  div {
    float: left;
  }
}

Thanks a lot for reading. For more details don't forget to check MDN Web Docs. Happy CSS-ing!

new title

Jamie Swift — Fri, 28 May 2021 10:43:35 +0000