Forem: Stefan Cosma

The YAGNI principle, as explained by AI.

Stefan Cosma — Thu, 23 Feb 2023 07:41:34 +0000

The YAGNI principle encourages programmers to only implement features necessary for the current iteration of a project. Focusing on the MVP can reduce complexity, technical debt, and make code easier to maintain and refactor.

The bellow article is an experiment. It was written entirely by an AI to better understand the capabilities, comprehension of user inputs and reliability of current AI language models. Enjoy!

When it comes to software development, it's common for developers to overthink and over-engineer their code. However, sometimes less is more. That's where the YAGNI principle comes in. In this article, we'll take a closer look at what YAGNI is, how it can be applied in JavaScript development, and why it's an essential principle for writing clean, efficient, and effective code.

What is the YAGNI Principle?

The YAGNI principle is a development principle that encourages developers to only implement features or functionality that are essential to the application's current requirements. In other words, if a feature or functionality is not currently required, there's no need to implement it because, "You Ain't Gonna Need It." YAGNI is closely related to the KISS (Keep It Simple, Stupid) principle, which advocates for simplicity and clarity in code over complexity and cleverness.

How YAGNI can be applied in JavaScript?

The YAGNI principle can be applied in every stage of the software development process, from planning and design to implementation and testing. In practice, this means developers should only implement the features that are necessary to meet the current requirements of the application. This allows developers to avoid overcomplicating their codebase with unnecessary or premature functionality.

To see YAGNI in action, let's consider an example. Suppose we're building a simple web application that allows users to register and login. Here's some code that violates the YAGNI principle:

In this example, we have a User class with a large number of fields and methods, many of which may not be needed in the current version of the application. For example, isDeleted and updateProfile may not be essential at this stage of development. The result is an overly complex and difficult to maintain codebase.

A better implementation of the User class would be to only include the essential fields and methods required for the current version of the application. Here's a YAGNI-compliant implementation of the User class:

In this implementation, we only include the fields and methods that are necessary for registering, logging in, and logging out users. This results in a simpler, more maintainable codebase that's easier to read and understand.

The YAGNI principle is an essential development principle for writing clean, efficient, and effective code. By only implementing the features and functionality that are essential for the current requirements of the application, developers can avoid overcomplicating their codebase with unnecessary or premature functionality. By applying YAGNI in JavaScript development, developers can create a simpler, more maintainable codebase that's easier to read and understand.

As we can see in the above text, the AI managed to do a pretty good job in explaining the YAGNI concept, but as any good AI language model that uses advanced machine learning algorithms, it needs a really good input so that it can return the most accurate result. With that in mind, these "magical" tools that popped up on everyones radar, since Nov 2022, are becoming increasingly better at understanding user inputs and generating the appropriate responses.

What are your thoughts on the matter? I would love to hear them.

How To: Interview a developer, as a developer!

Stefan Cosma — Thu, 10 Nov 2022 09:14:13 +0000

Author note: This article focuses on the interview process for a Frontend position and was inspired by a post, I interacted with, on LinkedIn.

You now have a new responsibility within your company. The HR/Recruiting department needs your help in assessing candidates, for a technical position within your company. Luckily they've come to the right person because they know you have the soft skills and technical expertise to do just that.

But you, a senior developer, know nothing about interviewing other developers. Fortunately, for you, there are several resources on the web that can help you with that. From using CodingInterview.com as a basis for your interview or requiring that the candidates finish a certain challenge on LeetCode.com, there are multiple ways you can create your process of assessment. You could even use this great article as a starting point.

Of course, if you work in a big tech company there is a procedure for coding interviews. Still if you work for a small company then most probably that procedure is missing and you have to help the Recruiting department implement it.

My approach

Below is my process, for assessing the knowledge of a candidate. I have "perfected" this approach throughout many many interviews.

Since I'm not interested in the recruitment part, I assume that the candidate has already been screened by the Recruiting department, so depending on the time allotted for the technical interview, I structure the discussion so that it does not exceed more than 1 hour. I receive in advance a resume and hopefully a public Github or some VCS, to look over some code written by the candidate.

If the person is of Senior level, then it is more a technical discussion rather than a coding interview. So far, from what I have experienced, a Senior level candidate not knowing what they are talking about has never happened, but it doesn't mean it will never happen.

If they are of Junior or Regular level, then the coding interview process begins.

Setup

I use Notion (which is a great tool by the way), where I have the whole process structured on several pages. This includes a database for evaluation (I don't store any personal data, I score the candidate from 1 to 5, set a skill level, type of focus: Frontend, Backend, FullStack, and finally some notes), technical questions for different programming languages (usually JavaScript and PHP), frameworks and lastly coding challenges that help me in determining the candidate's ability to solve a problem or if they can explain a particular solution.

Process

The whole discussion is very informal. I start by asking the candidate what tools, frameworks, and libraries they use and what they prefer to focus more on: frontend or backend. I ask these things so that I can get an idea of what the person knows, not what is written in the resume, since we all know that resumes are sometimes bloated and because I want to know if the person might be a good fit with one or more of the ongoing projects within the company.

As I mentioned at the beginning of the article, the interview is for a Frontend position, so depending on the above answers, I either start with basic JavaScript questions, and depending on the resume we go through questions about Angular / Vue / React, move on to CSS, or start with questions about PHP, databases, and OOP. Finally, I ask about a VCS, usually about Git.

Here is an example of a fundamental JavaScript question I usually ask in interviews:

Another question I could ask is:

What is the difference between undefined and not defined in JavaScript?

Here is a great article explaining this.

If I can't form an educated opinion about the candidate, since the above questions were language focused, I can switch to more agnostic things like Data Structures or Algorithms. Depending on the candidate's skill level I could also ask about stuff like Hoisting, Closures, or SOLID. If they focus more on the Backend, then I could be asking about stuff like Singletons, Prototypes, or even deadlocks.

The above was more theoretical, now I move on to ask practical code questions.

I start by showing the candidate a piece of code and ask them to solve a certain problem for me, and I make sure to mention that they can write pseudocode, because I'm more interested in assessing analogical reasoning, problem-solving rather than exact code, my reason being that the time allotted for the interview might not permit it and also:

Remember - the goal isn't to see how fast they write the right answer. I'm trying to learn about how they work and communicate.

Here is an example of a problem I would be asking, in an interview:

If they know how to solve the above problem, then it's all good, if not, I propose several solutions and ask them to explain how they work. This will allow me to understand their "train of thought" from start to end.

Conclusion

If the candidate doesn't know about a certain paradigm/concept or how to solve a practical problem, I try to briefly explain it, if the time allows it. I do this because the person is already stressed and I try to leave them with more knowledge than they came in with.

If there is still a need after the coding interview session, I have prepared some homework, for example: develop a small app with whatever frameworks, or libraries they want, put it on a public VCS, CodeSandbox, or StackBlitz so that I can evaluate it and see that it works correctly.

After the interview session is over, I provide feedback to the recruiter in a short, concise email, that covers all the assessed points.

This is my interview process. I know it's not perfect but so far it seems it got the job done and I helped in hiring some great developers. Please feel free to point out any flaws you might see in this approach or if you have any feedback you can find me at @stefanbc.

Cleaning up Plex with Google Scripts

Stefan Cosma — Fri, 29 May 2020 19:02:38 +0000

Just as the title implies, this tutorial is going to cover what it takes to automatically cleanup a Plex media server, using Google Scripts. I am aware there are other ways to do this, but this tutorial is tailored specifically for Google Scripts.

Table of contents

Setup
Code
Execution
Notifications

Setup

Head over to the Google Script dashboard and create a new project. Before we start writing any piece of code we need some prerequisites, for our project.

Open the View menu and click on Show manifest file. This will allow us to add dependencies and other scripts to our project. Now you can open the appscript.json file and add this line before the last }.

"oauthScopes": ["https://www.googleapis.com/auth/script.external_request"]

This line gives us the ability to make external requests from our script to the Plex media server.

After adding the line above, open the File menu and click on Project properties and open the Script properties tab. You will need to add multiple key/value properties.

TOKEN
BASE_URL
IFTTT_WEBHOOK

The last one is optional and we will cover it in the last point of this tutorial.

I'll start with number 2, which represents the Plex media server base URL. The server needs to be accessible via the Internet or else our script won't work at all. For point number 1 you'll need to do a bit of digging.

In Plex, open the page of any piece of media (this represents the last child of that media, whether it's a show or a movie). Next to the Edit button you should see three dots. Clicking on those should open a menu like in the bellow picture.

Click on Get Info and then in the modal that pops up, in the bottom left click on View XML. This will open the media metadata in the form of XML, in a new tab. From the URL of that tab you can extract the X-Plex-Token which coincidentally is the last parameter in the URL.

After we have points 1 and 2 we can start writing the actual code, for our script.

Code

I'll paste the code in it's entirety and then we can go over it line by line.

// Gets the script properties
const script = PropertiesService.getScriptProperties(),
      baseURL = script.getProperty("BASE_URL"),
      token = script.getProperty("TOKEN"),
      webhook = script.getProperty("IFTTT_WEBHOOK"),
      section = 4;

// Main constructor method
function constructor() {
  let response = UrlFetchApp.fetch(
      `${baseURL}/library/sections/${section}/allLeaves`,
      { method: "GET", headers: { "X-Plex-Token": token } }
    ),
    jsonObject = xmlToJson(response.getContentText()),
    videoContainer = jsonObject.MediaContainer.Video;

  if (videoContainer) {
    let watchedVideos = [];

    if (Array.isArray(videoContainer)) {
      watchedVideos = videoContainer.filter((video) => video.viewCount == 1);
    } else {
      if (videoContainer.viewCount == 1) watchedVideos.push(videoContainer);
    }

    if (watchedVideos.length > 0) {
      let watchedTitles = "";

      watchedVideos.forEach((video, index) => {
        Logger.log(video.key);

        UrlFetchApp.fetch(baseURL + video.key, {
          method: "DELETE",
          headers: { "X-Plex-Token": token },
        });

        // Notifications
        watchedTitles += `${video.grandparentTitle} - ${video.title}`;
        watchedTitles += "\r\n";

        if (index === watchedVideos.length - 1) {
          Logger.log(watchedTitles);
          Logger.log("Notification sent!");

          let notification =
            `${watchedVideos.length} watched episodes were removed!` +
            "\r\n" +
            watchedTitles;

          let options = {
            method: "POST",
            contentType: "application/json",
            payload: JSON.stringify({ value1: notification }),
          };
          UrlFetchApp.fetch(webhook, options);
        }
      });
    }
  } else {
    Logger.log("No videos to delete!");
  }
}

This first things we need to get are the script properties we setup in the first step, of this tutorial.

Notice there is a variable called section. That represents the ID of the library in the Plex media server. You can get that, by opening the desired library you want to clean and from the URL get the value from the source parameter (hint: it should be the last one).

Next up, we start building the actual function that does the cleaning up.

Using the UrlFetchApp library and the fetch method we call the Plex media server to retrieve all the contents of our library. We parse the XML response to JSON using a method that you can find here. You can add the parsing method to the same file, if you want.

If the videoContainer object was correctly parsed we need to check its type, because Plex will return an object if there is only one child in the library, instead of an array of objects. We're going to check for the viewCount if it's true and add everything we find to an array of objects.

While iterating through the whole array, we make a DELETE type call to the Plex media server, passing the TOKEN , in the headers, and using the baseURL and videoKey as the URL for our call.

That's it. You can run the script by clicking the Run icon and the checking the logs in the View menu. You should see a list of all the items deleted.

Execution

We can automate this script to run at certain times in the day. We can do this by setting a trigger.

In order to set a trigger, open the Edit menu and click Current project's triggers and add a new trigger. Bellow is an example of how you could set it up.

There's no need to run it too often if you don't watch a lot of shows.

Notifications

This step is optional, so you don't have to follow it. I wanted a way to get notified if the script ran and what items were deleted from Plex.

I decided I was going to use IFTTT but you can use Zapier, Automate.io or even one of Google services to send an email.

The code is rather simple for IFTTT. You can find it bellow

// Notifications
watchedTitles += `${video.grandparentTitle} - ${video.title}`;
watchedTitles += "\r\n";

if (index === watchedVideos.length - 1) {
    Logger.log(watchedTitles);
    Logger.log("Notification sent!");

    let notification =
        `${watchedVideos.length} watched episodes were removed!` +
        "\r\n" +
        watchedTitles;

    let options = {
        method: "POST",
        contentType: "application/json",
        payload: JSON.stringify({ value1: notification }),
    };
    UrlFetchApp.fetch(webhook, options);
}

Add this code inside the iteration (after the DELETE call. It's already in the code I shared above). This will create an array of media titles and send them to a webhook in IFTTT that has a recipe set up to send a notification to my phone. You can customise it however you like.

Some points before I end this tutorial:

This project is running on the new Apps Script runtime powered by Chrome V8
If you have any ideas on how to improve the script let me know.

That's it. You can also find the code here and if you have any questions let me know. You can reach me on most social media channels.

Run Ghost inside a Docker container on DigitalOcean

Stefan Cosma — Mon, 01 Apr 2019 20:13:39 +0000

Recently I created a new theme for Ghost, that you can find here and can currently experience on my website. I wanted a way of showing it off, so anyone that wants to contribute to it or just plain use it, can get a feel of what it looks like in a live environment.

Initially I looked at Heroku, but I soon fell into a rabbit hole of errors, because Docker doesn't play nice with Heroku and I didn't like that I would have to jump through hoops just to keep the app online. Keep in mind that this is an open source project and having to pay for keeping the Heroku app was not something I was prepared to do at that moment.

But, Stefan, you already have a server, where you host your website! Why don't you use that? Initially, I wanted to keep my server clean off other systems and just use it for my website. I changed my mind and here we are.

Enough backstory, let's get to the actual implementation. Bellow is my current stack and the process I followed that works for my setup. It may work differently for you and your stack.

My whole stack is like this:

I have the stefancosma.xyz domain registered and I use Cloudflare as a DNS provider.
The website itself is hosted on a DigitalOcean droplet, that runs their Ghost image (an older version but I keep it up to date).

Nothing fancy, right?

So, the first thing I did was to get Docker working on my droplet. After running apt-get update I installed Docker using this:

apt-get install docker.io

Once that was done, I just spun up a new Docker container for Ghost. Luckily there is already a Docker image for Ghost. You can check it out here.

Now the tricky part. I ran this command to expose the Ghost instance in the Docker container, to the outside world.

docker run -d --name name_your_container -p 3001:2368 -e url=https://ghost_url ghost

So, what this command does, is that it runs a new container with a custom name and it exposes the Ghost port 2368 on the host's 3001 port. Of course you can use a different port on your machine, if you so desire. Another cool thing is that this Docker image accepts, as parameters, any Ghost configuration parameters, found here. The Docker image name is ghost.

So now, if you access your droplets IP followed by the 3001 port, you should see a new Ghost instance up and running.

The last thing I did was to spin up a new subdomain inside Nginx and add it to Cloudflare. The configuration I used for Nginx is similar to the one bellow:

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;

    server_name subdomain.domain.com;

    ssl_certificate certificate.cert;
    ssl_certificate_key key.key;
    include conf.conf;

    location / {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $http_host;
        proxy_pass http://127.0.0.1:3001;

    }

    location ~ /.well-known {
        allow all;
    }

    client_max_body_size 50m;
}

Besides the above configuration, I've added a CNAME record with the subdomain name that points to the root domain.

And that's it. All good and done.

Nothing out of the ordinary. How would you have done it differently? Tweet @stefanbc or email me hello@stefancosma.xyz.

Until next time, code long and prosper.

How To: Organise a web developer meetup

Stefan Cosma — Fri, 23 Nov 2018 18:00:00 +0000

Disclaimer: This post was automatically published a few hours after the event so let's hope everything went according to plan.

I recently had the opportunity to organise a meetup, that revolved around the idea of knowledge exchange and community building. I've had this idea for a very long time. Ever since I was working with the team over @koding, where I helped grow the community and before that, when I was in collage, because I couldn't find any clubs or meetups of like minded people around my hometown.

But you may ask why a real life event, instead of creating an online community? Because when you're meeting people face to face you have a better understanding of what they're trying to communicate with you, whether it's feelings of disagreement or just want to share knowledge with you.

This was my first time organising an irl event. Bellow are the steps I followed when I organised the Sibiu Web Meetup.

Overview

In the case of the meetup I organised, I wanted it to be free, with limited seats (because, well, it's not a conference), for anyone interested in web development, web design and all other web related topics. All skill levels are welcome, this includes students, juniors and senior devs. It should be a meetup that revolves around the idea of knowledge exchange and community building. Also this could be a monthly meetup or every two months (still haven't decided on this aspect).

When you start putting the event together, make sure you inform your attendees about all the things that you want to achieve with your meetup and share as much details as possible (when, where and why).

Details

Now let's talk about the actual details of organising a meetup.

The first thing I did, was to see if anyone wanted to talk about the web, at a local meetup. Luckily I have some friends that have held talks in the past and have extensive knowledge about the web. I presented the idea and told them that they're free to talk about anything web related and after some proposals, we came to some consensus on what the talks should be about.

Ok, talks, checked. Now I needed a place to host the meetup. Enter the local university, that was more the gracious into providing a room for the meetup and as an added bonus the students from the Computer Science major would be invited and would get a chance to meet professional developers and gain some knowledge from the field, something I didn't have when I was in collage. Students being able to connect with professional developers is something beneficial to both parties. On one hand the students learn something new and on the other hand professional developers get to share their knowledge with someone else. I know you can find people online that are more than willing to help out but it's something different when you actually meet someone in person.

Place, checked. It was now time to let people know about the meetup. So a small social media campaign was started. This included sharing on all the social media channels and printing some ads for the university to use, so that students could find out about the event. In terms of attendance, I wanted it to be a small gathering of people, not a full fledged event, like a conference might be. If you let them know about the event they will come, even if it's just out of curiosity.

Bellow is a checklist that I've put together, with ideas that I implemented for the meetup, things that you should not forget about, when organising an event.

Speakers

The most important aspect of the whole event.

3 speakers - with ~30 min max per talk + QA session.
Diverse panel of speakers.
1 host - to keep everything in check.
2 hour time frame - have a break after the first two speakers.
Networking with the speakers at the end of the meetup.

Place

Any place is a good place. If it's sunny and warm you can have it outside.

Find a classroom at your local University, a co-working space or even your local pub or cafe. Start small and grow.

Attendance

Make sure that the people who attend are the actual target audience, people that can actually help you into building a community and share knowledge.

Maximum of 30 places. Make sure you have the possibility of growing based on popularity.
Students have priority. Because we want as many of them to actually learn something from the professionals.

Social media marketing

The more people know about it, the larger the community and the more knowledge is exchanged.

Promote on LinkedIn, Twitter, Facebook (Instagram), Reddit etc. Create an easy to remember hashtag and create a Facebook event. Also don't forget to choose a cool title for your meetup.
The social media marketing process will be a collaboration between the parts involved. Get you attendees to share the event if they want to do so.
Use meetup.com as a platform to organise everything.
Use speakerdeck.com to host the presentations.
[Optional] Setup a weekly newsletter with useful web links.
[Optional] Print and pass QR stickers around with a link to the event.

Extra

Anything that can improve the whole experience for everyone.

Creation of a Slack group to share extra knowledge and ask the pros for help with certain areas. Pro-bono mentoring program through Slack.

I want to wrap this app with just a few mentions.

Choose the topics very carefully and try to keep them interesting. Ask the attendees if some of them want to host a talk at the next gathering. Plan your next meetup before the current one takes place. Make sure you choose an easy to remember title for your meetup. And lastly make sure everyone has fun.

If you have any other ideas that you've implemented at your meetups, do let me know @stefanbc, I would love to hear them.

Until next time, code long and prosper!

Image credit: Guillaume Kurkdjian

How To: Use Tomcat in Intellij IDEA Community

Stefan Cosma — Mon, 01 Oct 2018 11:31:20 +0000

Recently I started working on a project that required me to have the backend part installed locally, instead of using a remote backend. The project uses Maven as a build tool and it deploys the code to a Tomcat server.

I got cracking and started configuring the project on my local machine. The first thing I noticed is that Intellij IDEA Community does not have a Tomcat plugin, unlike the Ultimate edition, that has one out of the box.

Many Google searches later I found a few plugins that might do the trick but when I tried using them, the famous NullPointerException happened and I started looking for an alternative. I found some inspiration on Github, but not in the form I wanted, but it was good enough to get me started.

Bellow is a short tutorial on how to setup Tomcat in Intellij IDEA Community to run/debug, and how to use Maven to build your project and then deploy it to Tomcat.

Prerequisites

Install Intellij IDEA Community.
Install Tomcat - For my project I've used Tomcat 8. You can get it from here.
Install Maven.

Tomcat Configuration

Make sure you install Tomcat in a place that doesn't require admin access, for example next to your project.

After that, open File -> Settings and expand Tools and select External Tools.

You can add a new tool with whatever name you want. I named mine, Tomcat. For tool settings, select the catalina.bat file, usually located in the bin folder of your Tomcat installation. For example mine is C:\apache-tomcat-8.5.34\bin\catalina.bat. And last but not least set an argument with the command jpda run. The working directory should be set automatically.

Tomcat External Tool

Start Tomcat

If you go to Tools -> External Tools and click on Tomcat, it should start the Tomcat server.

Maven build and deploy to Tomcat

Now that you're done with the Tomcat configuration you want the ability to build using Maven and deploy to the now working Tomcat server.

To achieve this you'll need to head over to Run -> Edit Configurations, click the "+" and select Maven. Don't forget to name your new configuration. Select your project location and add the following command line.

war:war org.codehaus.mojo:wagon-maven-plugin:upload-single -Dwagon.fromFile=D:\work\project\backend.war -Dwagon.url=file://C:\apache-tomcat-8.5.34\webapps\

What this line does is that it builds the project, using Maven, and then gets the file from the specified path (that's usually configured in your project) and copies it to the webapps folder in Tomcat. Tomcat then knows it has a new version of the file and redeploys it.

Build and deploy to Tomcat

Tomcat Remote Debug

Like all applications you want the ability to debug your backend. To achieve this you'll need to add a new configuration like the previous step. The only difference this time is that when you click "+" you'll need to select Remote.

Give your configuration a name. You'll need to set the Debugger mode to Attach to remote JVM, the Transport to Socket, the Host to localhost and lastly the Port to 8000. That way when you start the configuration, Intellij will connect via Socket to the Tomcat server that emits via port 8000. You can change the port for Tomcat, to something else, in the Tomcat server.xml file, in the config folder.

Tomcat Remote Debug

Once the Tomcat server is started you can run this configuration. Just click on Run -> Debug and then select the newly created configuration.

If you want to keep a record of all the logs when debugging, you can achieve this by going to the Logs tabs in the newly created Remote configuration and set the Save console output to file to the logs folder of your Tomcat installation. In my case it was C:\apache-tomcat-8.5.34\logs*.*.

Tomcat Remote Debug Logs

That is it. @ me on Twitter if you think I've missed something or if there is another way of doing this without installing Eclipse or purchasing the Ultimate edition of Intellij IDEA.

Until next time, code long and prosper!

Visual Studio Code - Tips & Tricks

Stefan Cosma — Sun, 08 Jan 2017 15:13:54 +0000

If you're following me on Twitter you probably know how much I enjoy using Microsoft's Visual Studio Code. So much, that one of my tweets is currently featured on their main page.

But this article is not about how much I enjoy my code editor, it's about what things you can do with this code editor. From useful extensions to shortcuts you probably didn't know about or even making your code editor more light on the eyes, this article is going to showcase some awesome stuff that I found while using it.

Extensions

We begin our showcase with some awesome extensions. Now, I'm not going to share all the extensions that I use because some of them are really project focused, but instead I'm going to share the ones that are more generic and make my life as a developer much more easier.

Auto Close Tag - Automatically add HTML/XML close tag.
Git History (git log) - View git log, file or line History.
HTML CSS Class Completion - Provides CSS class name completion for the HTML class attribute based on the CSS files on your workspace.
HTML Preview - An extension to preview HTML or Jade files while editing them.
HTML Snippets - Full HTML tags including HTML5 Snippets
JavaScript (ES6) code snippets - Code snippets for JavaScript in ES6 syntax.
JavaScript Atom Grammar - The Atom editor's JavaScript text mate grammar.
jQuery Code Snippets - Over 130 jQuery Code Snippets
jshint - Integrates JSHint into VS Code. JSHint is a linter for JavaScript.
Settings Sync - Synchronize Settings, Snippets, launch, keybindings, workspaces and extensions Across Multiple Machines using Github Gist.
Spelling and Grammar Checker - Uses a web service to detect mistakes and suggest fixes - great for Markdown or any text file.
SVG Viewer - Pretty self explanatory.

The extensions that I listed above are some of the ones that I use on a daily basis. If I were to choose that ones that I couldn't live without it would be #1, #2, #6, #9, #10.

For example #10 is a life saver because I'm always switching between my work MB Pro and the MB Air I have at home, so by having a system in place that helps me synchronize my settings is textbook awesome.

Shortcuts

Next up are shortcuts. I usually have a few shortcuts that I absolutely can't live without. For example CTRL + D for multiselect is a must have.

When VS Code came along with it's integrated Terminal and introduced shortcuts for it, I was hooked. If you're like me and hate to always have to switch between the code editor and the Terminal then you're going to enjoy this. I usually tend to avoid to use the trackpad when I write code that's why I'm going to share some shortcuts that will help you while you code and need a Terminal at the same time.

CTRL +` - with this shortcut you can toggle the integrated Terminal.
CTRL + SHIFT + ` - this shortcut will add a new Terminal instance, so you can easily work with multiple things at the same time.
But what if you want to switch between terminal instances? I added a few key bindings so I can easily switch between terminal instances. Of course you can customize them to your liking.

` [ { "key":"ctrl+shift+=", "command":"workbench.action.terminal.focusNext", "when":"terminalFocus" }, { "key":"ctrl+shift+-", "command":"workbench.action.terminal.focusPrevious", "when":"terminalFocus" } ] `

CTRL + Q - In a recent updated the team behind VS Code introduces a new feature. The ability to switch between the different views in the sidebar. Using this shortcut you can easily switch between the Explorer view or the Github view or even the search view.
CMD / WIN + B - I for one like to keep things as light as possible when I'm writing code. With this shortcut you can easily show or hide the sidebar.

The shortcuts I outline above are the ones that I use most often. There are lots of them, that I didn't even mention, and if I did it would overlook the whole purpose of this article. If you know any more, that you think are really useful, let me know and I'll add them to the list.

Misc

Since I can't end the article by talking about shortcuts, here are some more cool things you can do in VS Code. Did you know you can hide the activity bar from the View menu? Well, now you do. This feature was added a recent updated and I can say that it is very helpful, even if one has enough real-estate on his/hers monitors.

What about looks? I, for one, prefer the Spacegray theme. I liked that theme ever since I first found it available while I was using Sublime Text 2. Luckily someone made it available for VS Code as well. Check it out here.

And last, but certainly not least, did you know you can compare files out of the box? I recently needed to compare two different versions of the same file and because they were not on Github, I needed another easy way to achieve this. After a few searches and some extensions later I stumbled upon an article that outlines how you can do that directly inside VS Code. And because I like to give credit where credit is due here is the article in question.

Now, don't get me wrong, I know the things I shared in this article are just a small taste of what VS Code can do, that is why I'm extending an invitation to anyone who is using VS Code to share their experience and their tips and tricks.

Until next time, code long and prosper!

Image credit: Guillaume Kurkdjian

This post was originally published on stefancosma.xyz

Are you bikeshedding? Probably!

Stefan Cosma — Thu, 03 Mar 2016 10:03:49 +0000

You have no idea what I'm talking about, right? That's because not many people use the term bikeshedding. It's not a usual term that people just throw around all the time.

Bikeshedding is when you argue about some meaningless thing and tend to avoid the more important issue at hand.

For example Urban Dictionary tells us this:

Technical disputes over minor, marginal issues conducted while more serious ones are being overlooked. The implied image is of people arguing over what color to paint the bicycle shed while the house is not finished.

Let's take the above image as an example. You see the stick men trying to dump all the water out of the sand castle but avoid the fact that 1. the castle is made of sand and 2. they have a river below their castle that floods said castle.

In some ways it's like procrastination. You waste your time doing/talking about things that should not be your main focus in the first place.

This is a growing issue in the tech community. I've worked on projects where the more important issues, like scalability, were overlooked because we couldn't decide how many items should a query contain.

So, I propose, as Chris Coyier already said in his article, next time you're in a meeting and you see two people arguing about some meaningless thing, yell bikeshedding!

Until next time, code long and prosper!

Stefan

Image credit: Guillaume Kurkdjian

This post was originally published on stefancosma.xyz

Yak shaving. A short definition!

Stefan Cosma — Mon, 23 Nov 2015 08:47:02 +0000

Have you ever started to work on a task and suddenly you realized that said task requires some other little task(s) to be finished beforehand. That's yak shaving for you, the tl;dr version.

You've probably done this multiple times and you did even realize it.

Back in 90s a Ph.D. at MIT by the name of Carlin J. Vieri produced this term to describe

what you are doing when you're doing some stupid, fiddly little task that bears no obvious relationship to what you're supposed to be working on, but yet a chain of twelve causal relations links what you're doing to the original meta-task.

Let me give you an example, that you can relate to.

You're working on an older project. Let's say that you're ready to deploy, but you suddenly realize that you forgot to set up the Digital Ocean droplet. You start setting that up, but it dawns on you that you need a certain version of PHP. Before you start downloading and setting that up you realize that there are some security issues that need addressing with your droplet.

And thus you find yourself in an ongoing spiral of never ending little tasks that divert you from the main task. Another comparison would be something like side quests in an RPG type game.

Why do we do this?

I think it has to do with the human nature. We're not a species that does things instinctively. We don't know what things can come up at any point in time. At least that's how I see things. Any other thoughts on this?

Until next time, code long and proper!

Stefan

This post was originally published on stefancosma.xyz

Switching domains. Is it worth it?

Stefan Cosma — Fri, 23 Oct 2015 19:01:16 +0000

This past month, my personal website has been offline. The domain expired and I didn't do anything to prevent this from happening.

There are multiple reasons why I ignored that aspect.

The most important one was that, the domain provider doesn't have a business plan that includes customer focus and satisfaction. In other words, they do not make sure the customer is always informed and up to date with everything that happens to their account.

For eg. I did not receive any prior notice that the domain will expire soon. The only thing I received was a notice that stated the following: your domain has expired, we tried contacting you via the phone number you provided in your account, and you need to pay this X sum of money in order to get it back.

/start rant

They did not try to call me. I have my phone 24/7 on and next to me. I did not receive any call from them.

Secondly, just by providing your customers with a bill after something expired, without any prior notice, is not a good business tactic.

I know from experience that, people don't like it when you don't send them updates regarding things they're paying for.

So, I'm assuming, that their business model is not focused on costumers, at all.

/end rant

After that whole fiasco was over, I still had a droplet that was in a dire need of a domain.

While I was on the lookout for a new domain name, I started turning off all the services that kept my website in a working condition.

This means that I turned off the droplet, cleared out the nameservers, turned off all the monitoring services that I have active (for some reason I'm using multiple ones, instead of just one) and paused the mailing system.

So powering down everything was easy. This impacted a lot of things. For starters, from an SEO point of view, everything went haywire. It was like my website went of the grid.

This was the situation for about a month or so. Then, about a week ago, I came across this domain, and following in the footsteps of Alphabet I registered it.

The fun part

It took about 3h to get everything back up. Since it was a new domain, and I'm the first owner, the DNS propagation took about ~3h. This was good for multiple reasons and here's why.

First off, hats off to Ghost for making it easy to change domain names. Just by replacing the domain name in the config file and restarting the service was enough.

The Cloudflare setup was just a few clicks and ... done!

Turning on, all the monitoring services, took a bit longer because the domain name was different and I basically had to add every check again.

Setting up the mail service, since I'm using a third-party one, was again just a few clicks.

Now that everything was back up and in working order, there was only one issue left. The SEO aspect. I wanted ... scratch that ... I had to update every public account that I owned to feature the new domain name. This meant that I spent about ~2h editing every account and modifying the website. Twitter, G+, Github and so on and so forth. Don't get me wrong, I'm not complaining about this aspect, because it was a chance for me to get up to speed with every account that I own and has a public profile attached to it.

In terms of website SEO, there was not much I had to do, just adding the necessary things to Analytics and Webmaster tools was enough.

Conclusion

The question still remains, is it worth it? Does switching domains impact you as a person, as an individual that has created a brand around him / her?

Initially I would say, yes, but it all depends on your case. It could mean a brand refresh from a marketing stand point but a nightmare for a technical point of view.

You have to think very hard before making a decision like this and put everything into perspective from a SEO point of view and from a technical stand point. If it's to difficult to change the domain name then stick with it and you should increase your visibility, but that's a whole different discussion.

What's your opinion on the whole matter? What issues have you faced when switching domain names.

Until next time, code long and prosper!

Stefan

This post was originally published on stefancosma.xyz

Working remotely? How to be awesome at it!

Stefan Cosma — Sun, 26 Jul 2015 19:23:00 +0000

You may find yourself at some point in your career when you'll be given the opportunity to work for a company that is not based in the same city or region as you are, but instead, said company is located abroad. So, now you're going to work remotely. This means, that you and your team are not going to be in the same physical office space, but each in their own personal "office".

Now we all know the benefits of working remotely and I'm not going to outline them in this article but instead I'm going to list a few things that can help you achieve greatness when working remotely.

Whether you're working from home or from a co-working space there are a few things that you can do, to make the whole experience more pleasant and to make sure that you and your team are as productive as possible.

Timezones

Make sure you know all the timezones, in which every teammate is working from. Using apps like time.is you make sure that you won't ping your colleagues while they're having their sleepy time. Of course this doesn't apply if there is an absolute emergency, like failed deploys or huge merge conflicts, that require the assistance of a colleague that is in a different timezone.

Schedule

Since we're on the topic of time, you might as well make sure to keep a very transparent schedule. If your colleagues know your daily working schedule, then you won't have any problems. This is really easy to achieve, just set up a public Google calendar with your team and you're good to go. If you keep a very tight and neat schedule then things won't go all haywire, in case of an unforeseen emergency.

While on the same topic, it's worth mentioning that you should differentiate your work schedule from your non-working schedule.

When you're not working, make sure to go outside, experience the world. That will get your creative juices flowing. Weather you're having an intensive creative job or not, going outside will reset your mind and you'll be more productive when returning to work.

Never force yourself to work late hours and always make sure you get enough sleep. As I already mentioned above, you should have a clear schedule that outlines your working hours and your non-working hours. This, of course, only applies if there is no immediate emergency, that requires your attention.

There are a lot of studies out there that explain the benefits of sleep. Of course we don't know the exact reason why we need sleep, but you should be aware of your circadian rhythm and have a clear idea about your sleep pattern. I won't go into details about this, but I recommend a very interesting article on the whole matter.

Office

It doesn't matter if you're working from home or from a co-working space, however it is important to have a proper working space. Now, there are a lot of choices out there to choose from. Here are some of them:

A standard desk and ergonomic chair. I, for one, prefer this chair, from Ikea, and any table that has enough leg room.
A standing desk. This can be any normal desk, where you can place something to keep your computer on a rise and you just ditch the chair.
A combination between a standard desk / chair combo and a standing desk. To be more specific, I'm talking about this
A treadmill desk? Well, you need to get your daily exercise, right? You do. And what better way to achieve this, then running and working at the same time. Personally I don't recommend this one, because your brain won't be able to focus on that many things, while working, and you'll tend to lose focus fast.

Another important thing to remember when working long hours at a desk is to always stay hydrated. Some recommend that you should drink a certain amount of liquids, in any given working day. Personally I believe that you should drink as much as your body asks for. And when it comes to drinking containers I absolutely love this canteen.

Staying connected

We were bound to reach this subject at some point. Now I'm sure everyone has their preferred social networks to stay connected with friends and family, but how does one stay connected with their co-workers?

There are a lot of good apps out there, that offer a lot of features for staying connected with your team. The most popular are Slack and Hipchat. But one has a slight advantage over the other as outlined in this Medium article, that I recommend you read.

It's always good to have a team meeting with your team on a weekly basis. That way you can verbally outline your current tasks and what you're planning on working on. Having short 1 hour sessions with the entire team will give you a clear idea about the things that are getting done. You can use apps like Zoom or UberConferance to host team meetings.

I don't recommend using Skype or Google Hangouts for team meetings because the quality for those is very poor, when it comes to video / audio and the drop-off rate is very high (at least from what I experienced).

Another important aspect when working remotely is to have a access to a good bug / task tracker app. Now, I know each company has it's own system of doing things. Whether you're using an internal build app or something public, that anyone can use, it's important to keep it up to date with tasks and bugs. Make sure your team knows what you're working on and also you'll need an easy way to report bugs and discuss upon them.

I don't have any favorites, but I can recommend a few good apps, that I've crossed paths with. You could try Asana, Pivotal Tracker, Trello, Jira and let's not forget Mantis. All of these are multipurpose, so you can use them for either tracking bugs or tracking tasks.

Recommendations

Before I wrap this up, I have a few extra recommendations.

Make sure that at some point, while working for the company you're working remotely for, you arrange a meet-up with your team face to face or IRL. There's nothing like meeting people in person. Sure, you see them via video but it's something different when you actually meet a person. You observe their body language and thus you'll be able to understand them better, when working on something.

And last but not least, try to use social media to stay connected. you'll find that socialising with your team outside the work realm is going to be beneficial for your work relationship.

Conclusion

In order to be awesome at working remotely, you need to make sure that you have a well established schedule and you're office space is properly organised. I'm not saying you should follow my recommendations, it's your life, you can what ever you want, these are just things I came across while working remotely, that worked for me.

As an added bonus I highly recommend this article, on Lifehack, about making the most of working remotely.

What other things did I miss? Let me know in the comments bellow.

Until next time, code long and prosper!

Stefan

This post was originally published on stefancosma.xyz