DEV Community: Nadya P

Despite burnout and the plague Nadya coded

Nadya P — Tue, 09 Mar 2021 00:04:58 +0000

The past year was very difficult for me both with my tech career and beyond. I experienced burnout for the first time after switching to a company where there was a lot of added stress and pressure. While I am grateful for everything I learned the combination of switching managers three times and switching teams twice in addition to all my responsibilities and the beginning of a global pandemic was just too much.

I also discovered, through TikTok constantly recommending me ADHD videos (and then discussing it with my therapist) that I probably have ADHD. I noticed that I was having a hard time focusing and forcing myself to complete assignments, especially if the work wasn't interesting to me. I have to admit its pretty crazy to think you could have had something affecting you your whole life and you only find out about it in your 30's, but apparently it happens with women and ADHD a lot. In fact after beginning to talk to more of my women friends in tech I discovered a lot of them have it.

Also turning 30 made me think that there is more that I want to do with my life that I haven't gotten to do. In particular, I've always loved art and done a lot of drawing and painting growing up.

So I decided this year to make a lot of big changes.

The first was to leave my corporate tech job and become a part time web development bootcamp instructor for a fully remote program.

The second was to enroll in a year long mastery of art program that teaches you to become a professional artist.

Both decisions have done wonders for my self esteem and overall health. I love teaching students and passing on the knowledge for them to succeed. As a self taught developer myself it feels great to work with other people coming into tech from non traditional pathways. I'm also filling in all the gaps in my technical knowledge and feeling more confident because I can explain concepts I used to struggle with more.

Because my job is part time, its not overwhelming to add on a program like the Milan Institute Mastery of Art (even though its still intimidating as a year long program with an expected commitment of 20~ hrs a week). I don't necessarily plan to become a full time artist but the thought that I can finally express myself creatively and create a lifestyle where I can work in technology but also explore my other passions is a huge difference.

Actually since starting the Mastery of Art I have been experiencing a rekindled passion for coding and web development that I had started to lose over the past few years. When we spend so many hours of our week just doing one thing and then we are too tired when we get home to do anything else, it can certainly sap us of our passion. That is what I have learned and I think many of us don't learn it or are too afraid to take a leap of faith because of fear and outside expectations.

This year really challenged me and there were times when I really thought I might quit coding for good. I suppose by quitting the corporate tech sector some people might think that I quit, but that does NOT mean I quit coding. I still love to code. I think no matter what life throws my way, even if I stop working as a bootcamp instructor, I will always have coding in my life. Maybe I will create my own app and sell it. Maybe I will just make fun games like the ones I made in the past on the side. Regardless I will always knows I have my coding skills to lean back on if I get into a bind financially. I feel so lucky that I have this skillset where there are so many jobs and opportunities - part-time, remote, freelance - everything.

How to Build the Pattern Matching Game in Hellblade Senua’s Sacrifice with Javascript

Nadya P — Fri, 15 May 2020 15:40:13 +0000

In my last Learn to Code with Games post we talked about replicating the hunger meter in The Long Dark. Today’s post is about replicating a feature from Hellblade: Senua’s Sacrifice . Hellblade is one of the most harrowing journeys into a mentally ill person’s mind that I have ever seen in a video game. If you haven’t played it, I highly recommend checking it out. You don’t even have to worry about getting addicted because the game has a concrete beginning, middle, and end. One of the unique aspects of Hellblade is a mini puzzle game that involves finding a shape in nature that matches a shape carved into the various runes in the world.

I decided to recreate a simple version of this mini puzzle game with Javascript in Glitch. You can look at it right away here or give it a shot yourself first. In this tutorial we will be using HTML5 Canvas and vanilla Javascript to draw our image and the shape to our canvas, as well as to detect where the user has placed their mouse to see if they have discovered where the shape is matching the pattern in the background image. To avoid excessive complexity, I am using a simple triangle as our shape.

Thankfully the HTML is very simple, just two things we need to do. First we need to do is create a canvas element with and give it width, height, and an id as shown below. The width and height should be roughly the size of our image. We will use the id to identify the canvas in Javascript.

Second we need to add our image so our canvas can access the image data. However I will also add a hidden class because otherwise we will see our image twice, since it’s going to appear inside our canvas. We want to give our image an id as well, since the canvas also needs to access it. I called it “trees” because well, its an image of trees. The below code will go inside your

tags.

<img id="trees" class="hidden" src="https://cdn.glitch.com/eb083ff0-5e3b-41d0-be19-711a1dcd89f5%2FDSC0063-1024x680.jpg?v=1589402686658"/>
canvas width="800" height="600" style="border:1px solid #d3d3d3;" id="canvas"></canvas>
<script>Our Javascript will go here, or in a .js file if you prefer </script>

Then in order to make your image be hidden, you will want to add this inside your

tags.

<style>
.hidden {
  display: none;
}
</style>

Worry not, even though the image is hidden our magical canvas will still be able to access the data to display it in all its beauty. Wonderful! Now our HTML file is set and we can focus on the Javascript. The first step is to identify our canvas and get the context, which is what lets us run functions to actually change what is displaying.

let context;
let img;
let canvas;

window.onload = function() {
  canvas = document.getElementById("canvas");
  context = canvas.getContext("2d");
  img = document.getElementById("trees");
  context.drawImage(img, 0, 0);
};

I’m declaring the image, canvas, and context variables at the top because we are going to need to access them throughout the code. Having a window.onload makes sure that we don’t try to fetch the canvas before it is loaded into our browser. In the first line of the function, we are getting our canvas, which we need in order to get our context. Then we are getting our image and drawing it to the canvas with context.drawImage. This function takes our image, and then the x and y coordinates (which start from 0 at the top left corner, so in this case our image will take up the whole canvas). If our context was in 3d space instead of 2d, we would also add a third value for our z index, the perspective plane.

The picture we are using for this exercise

So what’s next? Let’s think a little about what we data we need in order for this to work. So far all we have is an image in a canvas. We want there to be a shape that the user can move around on top of the image. While allowing the user to drag the shape around would be nice, the easiest option is to just make the shape follow the user’s mouse around.

In order to do that, we will need to get the coordinates of the users mouse. This is actually the trickiest part, because canvas is not very sophisticated with the data it provides by default. We have to do some math to account for the location of the canvas on the window. The function below will do that for you.

function getPosition(el) {
  var xPosition = 0;
  var yPosition = 0;

  while (el) {
    xPosition += (el.offsetLeft - el.scrollLeft + el.clientLeft);
    yPosition += (el.offsetTop - el.scrollTop + el.clientTop);
    el = el.offsetParent;
  }
  return {
    x: xPosition,
    y: yPosition
  };
}

This function accepts the canvas element and returns the x and y coordinates of the canvas in relation to the browser window. We will call this function inside window.onload to get our canvas position, which will then be used to get an accurate mouse position. Don’t worry too much if you don’t understand all of it. If we were using another framework such as P5js this extra math wouldn’t be necessary at all.

The important part is next. We are going to add what’s called an event listener, which is a function that will get called every time the window detects a user interaction. We can define what user interaction we are listening for. In this case it will be moving the mouse. While we’re at it let’s also call our getPosition function to get our canvas position and add our mouse coordinate variables to the top, since we will need to access them soon.

let context;
let mouseX = 0;
let mouseY = 0;
let canvasPos;
let img;
let canvas;

window.onload = function() {
  canvas = document.getElementById("canvas");
  canvasPos = getPosition(canvas); // getting our canvas position 
  context = canvas.getContext("2d");
  img = document.getElementById("trees");
  context.drawImage(img, 0, 0);
  canvas.addEventListener("mousemove", setMousePosition, false);
//the line above is listening for when the user moves their mouse, and will call the function "setMousePosition" 
};

Olay so now we have an event listener but this code will not run because the function setMousePosition doesn’t exist yet. That is where most of the magic is going to happen. We will need to redraw our shape every time the mouse moves. We will also need to check if the shape is in the spot where it matches the pattern, so we can tell the user they have found it! You can add this function below window.onload.

function setMousePosition(e) {
  mouseX = e.clientX - canvasPos.x;
  mouseY = e.clientY - canvasPos.y;
}

The above code will get us the current coordinates of the users mouse on the canvas. We are passing in e which stands for the element that is being passed into the function, in this case our canvas element. The subtraction is happening to account for the offset of the canvas position on the browser window, as mentioned earlier. Now we can actually draw our shape!

function setMousePosition(e) { 
  mouseX = e.clientX - canvasPos.x;
  mouseY = e.clientY - canvasPos.y;

  context.beginPath(); // tell canvas you want to begin drawing lines

  context.moveTo(mouseX, mouseY); // move where the cursor starts the line 
  context.lineTo(mouseX - 25, mouseY + 125); // draw first line
  context.lineTo(mouseX + 25, mouseY + 125); // draw second line

  context.fillStyle = "#FF6A6A"; //set the color
  context.fill(); //fill shape with color
}

As you can probably tell from my comments on the code above , there are several steps to drawing a shape. First we have to tell the canvas we want to draw lines withcontext.beginPath and then we need to move our cursor. Since we want our triangle to follow the mouse, we move our cursor to the same coordinates.

I want my triangle to be a bit elongated, so when I define the end coordinates of my first line I want them to be just a little bit to the left (-25) and farther down (+125). To keep my mouse centered to the top of my triangle, I set my other line coordinates to be the same amount, but in the other direction on the x coordinate (+25). The final line goes back to our original coordinates, so you don’t need any additional code to complete the triangle shape. Now we can set the fill style to the hexadecimal code for a sort of salmon-y color. You have to call the fill function in order for that color to actually be applied to your shape.

That’s not right….

We’re getting close but if you run the code now you might see something is a little strange! Instead of having a triangle that follows our mouse we seem to be painting the canvas. That is because the canvas is constantly drawing more triangles every time we move our mouse and the canvas isn’t getting cleared. Luckily clearing the canvas is pretty easy.

function setMousePosition(e) {
  mouseX = e.clientX - canvasPos.x;
  mouseY = e.clientY - canvasPos.y;

// add the lines below

  context.clearRect(0, 0, canvas.width, canvas.height); //clearing canvas
  context.drawImage(img, 10, 10); //drawing our image again since that got cleared out

  context.beginPath();

    context.moveTo(mouseX, mouseY);
    context.lineTo(mouseX - 25, mouseY + 125);
    context.lineTo(mouseX + 25, mouseY + 125);

  context.fillStyle = "#FF6A6A";
  context.fill();

}

The clearRect function takes four values, x and y coordinates which define the upper left corner of the rectangle, as well as a height and width. If we provided something smaller than the canvas height and width only a portion of our canvas would get cleared, but we want to clear all of it. Of course this clears our image as well so we need to draw that back to the canvas again. This all needs to happen before we draw our triangle or it will get covered up by our image.

Now you should have a lovely little elongated salmon triangle floating around on top of our forest image, following our mouse obediently. There is only one thing left to do. We need to give the user some indication when they have “discovered” the pattern. There are a lot of fancy things that could be done here. We could display some text to tell the user they have found the pattern. We could add some fancy animation like in the actual Hellblade game. But for the sake of brevity and to give you freedom to experiment with canvas on your own, lets just change the color of our triangle. This code will be added to the bottom of oursetMousePosition function.

 if(mouseX > 635 && mouseX < 640) {
    if(mouseY > 20 && mouseY < 30) {
      context.fillStyle = "#FFFFFF";
      context.fill();
    }
  }

Here we are checking our mouseX and mouseY coordinates to see if they match with the coordinates where we know our shape is in the image. You may notice there is a range of 5 pixels in both the x and y coordinates, because it is actually quite difficult to get your mouse on 1 or 2 specific pixels.

I took the liberty of figuring out the coordinates for the image in our tutorial, but if you want to do this with a different image or a different shape you will need to add some console.log statements to your mouseX and mouseY so you can gauge where the shape should change colors. I’m changing the color to a simple white, though you can obviously change it to whatever color you choose. Check out my version on Glitch below.

Thats it! Now you can plug in any image and see if your friends can figure out if they can find the pattern. It’s obviously not too difficult with the shape and image I provided, but it can certainly be made more difficult with a larger image or a more unusual shape. I recommend checking out the following tutorials if you are interested in expanding your knowledge of drawing shapes and images with the canvas element:

Drawing Shapes

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes

Transform + Text

https://eloquentjavascript.net/17_canvas.html

Build a Drawing App

http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/

Working with Video

video + canvas = magic

If you enjoyed this article, consider following me on Twitter @nadyaprimak or if you need more tips on breaking into the tech industry, you can read my book “Foot in the Door”in paperback or Kindle now.

The post Learn to Code with Games: Hellblade Senua’s Sacrifice appeared first on www.nadyaprimak.com.

Apps for Artists: Lets Build More of Them

Nadya P — Fri, 08 May 2020 14:41:51 +0000

I’ve been in a creative slump lately. I think this is a common but rarely discussed problem for people who transition from arts careers into programming. On one hand, having a well paying remote job means you don’t have to worry about being a starving artist and probably still have some free time to make art. On the other hand, there can be periods of time where work takes up all your time and you don’t have the energy at the end of the day to make art.

Since we are all in this quarantine crisis, I’ve been trying to tap into my creative side again but it hasn’t been easy. I enrolled in an illustration course on Domestika for discovering your artistic style and have been stuck on the very first project – drawing myself as an animal. It seemed like it should be a fun experimental thing but whenever I had a moment the thought of putting pencil to paper filled me with a strange horror. I had no idea why. I think I was terrified that all of the creativity had been drained out of me and there was nothing left, but I’m still not sure.

My art professor from college once told me that I was one of those types of people that needed to create. If I didn’t create, I would go insane. I think she was right. I also think there is a class of developers who identify as artists but want the flexibility and benefits that a job in the tech industry provides. So they look for developer niches where they can express themselves creatively. One of these niches that I have been dabbling in lately is that of building apps for artists.

In previous blog posts I talked about creative coding frameworks that can be used by programmers to create art, but in this post I am talking about software that doesn’t require coding to be used at all. I think we are seeing growth in the world of apps for artists, which is fantastic. I hope that we continue to see growth because creating art brings joy and by extension, so do tools that allow people to experiment with creating art in new ways.

Electric Zine Maker

The first tool I wanted to talk about is Nathalie Lawhead’s Electric Zine Maker. It can be downloaded on itch.io. I’ve talked about Lawhead’s work on the blog before, because I am a big fan and enjoy Nathalie’s experimental art games and early internet aesthetic. I had tried to make glitched out art before using phone apps like the aptly named Glitch on Android, but the effects were always limited and I felt like having an application on my computer would give me more freedom.

Enter Electric Zine Maker. There are SO many tools inside this app, it blew my mind. The capacity for glitch art was practically endless. I also appreciated that the interface was not one of polish and gleam but rather had the same early internet aesthetic that Lawhead’s games had. It felt like the interface itself was talking to me, telling me that apps for artists can be FUN and that I shouldn’t take it or myself too seriously.

I felt the app also fit perfectly into the underground culture of zine making as well. Unlike art books with glossy paper that you might find in MoMa, zines are extremely personal and scrappy, often made by hand and scanned by one person for distribution. Lawhead captured the essence of that culture in the way the interface was laid out and the types of tools that are available. It gave me so much joy to play with the Electric Zine Maker, that I even want to make some zines now myself.

Microdose VR

Unfortunately this tool is still in limited rollout so I was not able to download it myself but I can say with great confidence that it is extremely cool. Basically Microdose VR is an application that allows you to create psychedelic larger than life moving visuals in virtual reality. Its also designed to be paired with music and dancing for the ultimate rave experience. However, I think it can also be used in other contexts, from meditation and relaxation to self reflection.

I first discovered Microdose VR just a week ago when I tuned into a audiovisual live stream of a Bassnectar concert. I was stunned by the art and asked my friend who had linked me about it. Words cannot express my disappointment when I saw that I needed a seed code in order to actually download the software to start making art myself. Nevertheless, there was plenty of art to view on their Instagram account so I went and followed them there, and also joined their Discord channel.

Another thing that is special about Microdose VR is that it opens up the rave scene to people like me who are not very comfortable in large crowds. It turns the rave from something that has always been perceived as a shared experience into a personal experience. Honestly it’s one of the most delightful things I’ve seen come out of the VR world since I got my HTC Vive over a year ago. Of course I appreciate the 3D art tools like Tilt Brush but if my impression is correct, Microdose allows you to hit the ground running a lot faster with the ability to generate thousands of different moving textures, patterns, and shapes.

Of course I could end up eating my words if I download the tool and find out that the interface is terrible, but judging from the reaction of other artists it seems like they are doing a good job and responding to user feedback with rapid iteration.

Pose

Featured a few weeks ago on Product Hunt, Pose caught my eye because of its awesome demo video and its charming simplicity. There are a decent number of tools out there for drawing the human body with a digital model, but Pose pairs the process down to the essentials and makes it easy to move your figure around into any position you want. Even though it lacks the anatomical details of some competitors, Pose makes up for it with the ability to change other aspects.

You can make the shoulders of your figure farther apart, for example. You can make them taller or shorter. Also, the lack of anatomical detail makes Pose perfect for illustrators who want to make more stylized art. It might not be obvious for people who don’t make art very much, but even professional artists use references for their work to keep things realistic, and it can be difficult to find a figure in just the right pose for what you are trying to draw.

But Pose isn’t only useful for professional artists. It makes drawing the human form approachable to almost anyone. It can help beginner artists understand how the body moves and play around as they improve. I also can appreciate the affordable price point, because as we know artists aren’t exactly rolling in dough.

Obviously there are many other apps for artists out there that I didn’t talk about, but I felt these three were a good range to highlight the type of stuff that is out there. I’ve been grateful to have these tools to help me explore my creativity and get back into making art. I think more developers should make apps for artists like this because we so often overlook artists and creative folks, preferring to make tools for corporate America.

You might not make as much money, but I guarantee you will have more fun making apps for artists like this. There is still so much more space for experimentation and art making with technology that the sky is really the limit. You could also discover a whole world of creating that you didn’t even know existed. Especially for developers who have a creative side and come from artistic backgrounds, making tools like this is a great way to go back to your roots. Or maybe you will be like me and play with some of the tools that are already out there. Either way, its a ton of fun and I highly recommend it. Remember you can be creative and be in tech, they are not mutually exclusive. Don’t let your creative side die.

The post Apps for Artists: Lets Build More of Them appeared first on www.nadyaprimak.com.

How to Build the Hunger Simulator in The Long Dark with Javascript

Nadya P — Fri, 24 Apr 2020 17:12:35 +0000

Before I became a programmer I loved to play games. I played games for many years before I even knew the most basic concepts about coding. However these days I see that people are trying to introduce their kids to programming and looking for ways to make programming concepts more approachable. I think that using existing games people love is a great way to do just that. That is why I focused on how I could learn to code with games when I was starting my career. In this tutorial I will show you how to do that by walking you through the process of extracting a feature from a video game called The Long Dark and recreating it on your own.

If you are reading this you might already have at least some interest in The Long Dark, and may have played it. But I will briefly explain the game just in case. The Long Dark came out on Steam several years ago and had a beta release that was primarily a survival simulator. The game takes place in the Canadian far north where a mysterious phenomenon has caused all of the power to stop working.

In the original simulator, your goal was essentially to survive as long as possible by staying hydrated, nourished, rested, and avoiding freezing to death. You could choose between different environments to try your luck in, some which have a range of man made shelters and some which have nothing but a few caves dotting a barren landscape teeming with aggressive wildlife.

An example of some aggressive wildlife. You can see the health meters at the bottom left

By releasing a minimum playable version of their game early, The Long Dark developers gave players something to continually look forward to and give valuable feedback on as they added more features to create something truly spectacular. Now the game has a fully fleshed out story mode with multiple seasons and difficulties in addition to special challenges. Whether you’re developing a game or an application for a startup, the idea of slowly adding on features and polish over the course of time is the most logical and sustainable way to build a good product. It goes to show that when you learn to code with games like The Long Dark, you might be surprised by how many lessons will transfer over from games to other types of development.

It goes to show that when you learn to code with games like The Long Dark, you might be surprised by how many lessons will transfer over from games to other types of development. Examining games from a developers perspective and extracting a feature to recreate can also help you get into video game coding, so it’s a win win.

While its good to talk about strategy and general practices like building off of something small, I want to get into actual coding in this post. After all you can’t learn to code with games unless you actually write some code! In particular, I want to show you how we can take a feature from a game like The Long Dark and try to replicate it with Javascript code. I suggest starting with something simple, like a hunger meter. We could define a variable like fullness.

let fullness = 100;

Why fullness and not hunger? Certainly nothing is stopping you from calling the variable whatever you want, but in my mind it is easier to call it fullness because then I can set it to 100 and know that means “completely full.” Whereas if I used hunger, I might be confused. Does 100 mean 100 percent hungry? Hunger doesn’t make as much sense to measure by percentage as fullness.

In The Long Dark, you get hungrier the longer you don’t eat. That means we need something to measure time. Since it’s a video game, time also goes by a lot faster than in real life. So let’s say every 30 seconds translate into 1 hour. We could use a Javascript function like setInterval that would get called every time 30 seconds have passed. You can read more about the function and test it out here. Note the double slashes in the code below indicate comments.

let fullness = 100;

setInterval(function(){ 
   fullness = fullness - 5; //subtract fullness by 5 percent
   console.log("logging fullness", fullness);
}, 30000); // 1000 is 1 second (in milliseconds)

By assigning fullness the value of itself minus 5, I am essentially decreasing fullness by 5 percent. Then I am logging out the new fullness value to the console, so I can confirm that my function is working. Having to wait 30 seconds to confirm my function is working can be a little bit annoying, so you can reduce the number of milliseconds to 1000 temporarily for testing purposes.

If you’re using a coding editor in the browser such as Codepen(I’ll be including a Codepen link a little further down) the console can be opened up by clicking on the “console” button in the bottom left corner of the editor

So now we have a fullness value that decreases over time, but what about eating? In The Long Dark you can eat all sorts of things. If you scavenge you can find canned beans, peaches, even dog food (ew) to eat. Or you can go fishing or hunting. Each type of food has a different number of calories which affect how much your fullness meter gets filled.

For now, let’s just create four foods. A granola bar, some canned beans, a pound of deer flesh, and a rainbow trout. Let’s say 200, 450, 800, and 150 calories respectively.

const trout = 150; //use const to declare a variable when you never change the value of the variable
const deer = 800;
const granola_bar = 200;
const beans = 450;

Now you might be thinking we have a problem, and you would be right. If we are counting our fullness as a percentage and our food in calories, how will we add them together? Looks like we will have to make some changes to our existing code, after all. The average man needs to eat about 2,500 calories per day. For the sake of simplicity, let’s say that is the number that constitutes 100% fullness.

const maxCalories = 2500; // maximum calories you can eat
let currentCalories = 2500; //calories you need to eat per day
let fullness = 100; // still keeping percentage for display purposes
const trout = 150;
const deer = 800;
const granola_bar = 200;
const beans = 450;

setInterval(function(){ 
   currentCalories = currentCalories - 60; //subtract fullness by 60 because we burn 60 calories per hour while sitting
   fullness = (currentCalories/maxCalories) * 100 //calculate fullness percentage
   console.log("logging fullness", fullness);
}, 30000); // 1000 is 1 second (in milliseconds)

Above you can see I’ve added two new variables, maxCalories and currentCalories, which make it very easy to do our math in setInterval to calculate the fullness percentage. Just divide currentCalories by maxCalories and multiply by 100. We also are subtracting 60 calories every 30 seconds because that is how many calories we burn per hour when we are sitting. Now we are ready to add an eatFood function. This one should be very simple. Just updating currentCalories, right?

eatFood(food) {
   currentCalories = currentCalories + food;
}

At first glance this would seem to be enough, but ultimately we will want to display the fullness data and update it every time currentCalories changes. In that case, it makes sense to create a function for updating fullness as well, to avoid rewriting the math multiple times. Let’s take a look at the whole thing again (minus the variables).

setInterval(function(){ 
   currentCalories = currentCalories - 60; //subtract fullness by 60 because we burn 60 calories per hour while sitting
   updateFullness()
}, 30000); // 1000 is 1 second (in milliseconds) 

updateFullness() {
     fullness = (currentCalories/maxCalories) * 100 //calculate fullness percentage
    console.log("logging fullness", fullness);
}

eatFood(food) {
   currentCalories = currentCalories + food;
   updateFullness();
}

I moved the console.log message into the updateFullness function so that you can see what happens to fullness when you eat food. In my Codepen example, I have buttons that the user can click to eat the different kinds of food, but since I am sticking to Javascript for this tutorial there is another way you can call the function in the code for now.

Just like we called updateFullness inside the setInterval and eatFood functions, you can call eatFood by typing eatFood() and just adding whichever food you want to eat inside the parenthesis. That means eatFood(beans) would pass the beans variable into function.

If you throw in a couple of eatFood() functions at the top of your code, you will notice that your log statements will become problematic. This is because we don’t have anything checking for fullness being greater than 100 percent. We can fix this by adding an if statement inside the updateFullness function.

We don’t want this to happen, since you cannot be more than 100% full

updateFullness() {
    if( (currentCalories/maxCalories) * 100 <= 100) {
        fullness = (currentCalories/maxCalories) * 100
    } else {
        fullness = 100;
    }
    console.log("logging fullness", fullness);
}

This if statement will make it so that fullness gets updated to 100 if eating the additional calories would make fullness exceed 100 percent. Otherwise, the same calculation will be performed as usual. In my Codepen example, I also introduced a death state where if your fullness gets to 0 you can no longer eat food and your status displays as dead. The logic for that is very simple, just checking if fullness is 0 and then setting a variable dead to true. Then inside the eatFood function you add another if statement preventing currentCalories being added unless dead is false.

Another thing you will notice in Codepen is additional if statements for judging what to display for the current hunger status as well as for what color the health bar is. I’ve essentially added a simple GUI for users to interact with. If you want to add this functionality, check out these resources for creating a progress bar and buttons . The only additional Javascript that I am using is document.getElementById and changing the style and innerHTML of the selected element. You can read about that here and here.

There is a lot more you can do from here. You could create a hydration meter using some of the same code we already have. You could get closer to replicating the functionality from The Long Dark by adding a general health bar that begins to go down only when your hunger becomes very low. That would be more realistic since you obviously don’t immediately die when you didn’t eat 1 days worth of calories. I encourage you to explore what you can build on top of this code and can’t wait to see what you make! Hopefully this has helped give you some ideas of how you can learn to code with games.

The post Learn to Code with Games: The Long Dark appeared first on www.nadyaprimak.com.

Hydra Tutorial For Live Coding Visuals

Nadya P — Fri, 17 Apr 2020 00:12:35 +0000

In my last post I wrote about the first session ofSpacyCloud’s Live Twitch stream from two weeks ago. The twitch stream was an all day event where the first half of the day consisted of a variety of workshops around creative coding topics, while the second half featured performances from various audio visualization artists and creative coders. Unfortunately I could not attend all the events, but I wanted to write in detail about both the Hydra event and P5JS event. You can read the P5JS post here. Now let’s dive into some live coding visuals!

The Hydra tutorial on SpacyCloud was taught byZach Krall, a graduate student at Parsons School of Design with an impressive portfolio of projects. Though I had been experimenting with creative coding since college and knew about Processing, the language that P5JS was ported from, I had never heard of Hydra before. Just the fact that it was something new peaked my interest, but when I saw the home page for the Hydra-editor I was pretty much sold. Every time you load Hydra, a different visualization appears on the screen, with the code that wrote to make it overlaid on top. You can copy and paste the code, so in a way each new visualization is like its own mini tutorial.

Zach Krall’s personal website

It turns out that all of the coding for Hydra happens in the browser, and the background of the entire browser window changes to display the product of your code. Personally I prefer this over the two panel system that most web coding editors use, because when it comes to visualizations you want to be able to see them in as large a display as possible. However I could see some people not liking this, because the code is a bit harder to read, even though it does have a background color applied.

Hydra was created by Olivia Jack who wanted to build a visualization engine that took its inspiration from analog televisions. It did that and a lot more, because with Hydra you can connect to other machines and each output your own video stream that can then be modified by others.

Probably the hardest thing about starting out with Hydra is wrapping your head around some of the paradigms, which are pretty different from your typical application. In Hydra, you typically start with a basic visual preset or texture, like noise, voronoi, or oscillation. Check out these basic visuals below. Note that while these screenshots are static, within Hydra all of these are moving visualizations.

A basic oscillation visualization is drawn to the browser with osc()

A basic voronoi visualization is drawn to the browser with voronoi()

A basic noise visualization is drawn to the browser with noise()

You can also pass values into the function to change it. For example, if I write noise(100) instead of just noise() the gray matter gets much smaller, like specks of dust rather than blobs. If you pass noise(100, 100) the specks of dust will start moving around the screen MUCH more quickly. The same can be said for voronoi and oscillation. First number defines the density of shapes, the second defines the speed of movement. Be careful passing in large numbers for the speed, it can be quite painful on the eyeballs.

In order to execute the code you need to hit Shift + Ctrl + Enter on the keyboard. You might have noticed the code inside the screenshots include a second function chained on called out() . This function is basically telling the browser to output everything in front of it in the chain. If you remove out()nothing will render to the browser and you will only see a black page.

We’ve covered voronoi, noise, and oscillation. There’s one more basic render and that is shape(). Drawing a shape in Hydra is simple enough. The number you pass into the shape() function defines the number of sides for the polygon. So, shape(3) is a triangle while shape(4) is a rectangle, and so on.

You can also specify how large each shape is and how blurred its edges are by passing in 2 more numbers into the function.

You might be wondering, what could one possibly do with a simple shape in the middle of the screen? That is hardly interesting to look at. I also thought it was a little bit odd that you couldn’t place multiple shapes or define that border and size of the shape like you can do in most creative coding languages. However, I was pleasantly surprised after some experimenting, as hopefully you will be too.

One of the easiest things to do is create a tile pattern with the shape. You can do this by chaining a repeat()function, where the numbers you pass into the function define how many times the shape is repeated.

If you write repeat(10,10) like in the screenshot above, you get the shape repeating ten times both in the vertical and horizontal directions. If you write repeat(10) then you will have the shape repeat ten times in the horizontal direction, but not vertical. This function is one of the geometry functions, which you can read more about in the documentation.

So how might you apply color to these shapes? If you were using voronoi, noise, or the other automatically generated textures, its very easy. You just chain a color() function where you pass 3 values corresponding to the amount of red, green, and blue.

A pure red oscillating texture

Because you cannot apply color directly to a shape, the workaround is to use a blending function withshape() and applying color within the blending function. For example, you can blend the red oscillator above with the rectangular tiles in the other screenshot.

Now you can see the rectangles are overlaid on top of the oscillating red texture. There are multiple blending functions, and each one has a different effect. I won’t go into detail on all of them because this post is getting lengthy and I am wary of the cognitive burden,

Suffice it to say there are 6 blending functions in total, called operators in the documentation. The other 5 are add, diff, layer, mask, and mult. If you’ve ever experimented with layer effects in Photoshop, some of these should sound familiar. Depending on the complexity of your visualization, these operators will sometimes output the same result. You are most likely to notice differences when using a range of color and texture.

Let’s take the our oscillator and jazz it up a bit. Rather than using the color()function to apply a simple red color, you can actually pass 3 values into the osc()function directly. The first still specifies the number of oscillating rows, while the second specifies the speed they move across the screen, and the third specifies the range of color. Lets say we use the diff() operator and also tweak our rectangles by making them a bit larger and blurrier. What might that look like?

Now we’re cooking with gas. Just a few extra functions and things are much more interesting. There are many variables we can tweak to experiment even with this relatively simple visualization. For example, what happens if we change the oscillator to a voronoi or a noise generator?

Alright, so it looks like we lost the cool colors but got a more interesting texture in return. Are there other ways to bring back color besides the ones I showed? Absolutely! The colorama() function which brings all sorts of psychedelic fun. It’s the last function I wanted to demonstrate because it can spice up pretty much any visualization, and is probably the quickest to get interesting results with.

I hope by now you have the hydra-editor open in several tabs and have virtually lost interest in this post because you are too busy experimenting. Hydra is seriously one of the most absorbing and exciting creative coding tools I’ve had the pleasure of working with, and the goal of this post was to give you enough knowledge that you can hit the ground running.

Of course there is tons of material I couldn’t cover, and for that I want to leave you with a few references.

Hydra book is a very detailed guide that goes into pretty much every function Hydra has to offer, with lots of screenshots to help you along the way: https://naotohieda.com/blog/hydra-book/

Olivia Jack’s documentation is also nothing to shake a stick at, and has lots of coding examples that you can copy and paste to experiment with. There are also more Hydra tutorials listed here: https://github.com/ojack/hydra#Getting-Started

The Github repo includes a section with a whole list of resources which you can check out here: https://github.com/ojack/hydra/blob/master/examples/README.md

If its community you’re craving Hydra also has a facebook group with over 500 members: https://www.facebook.com/groups/1084288351771117

I hope you enjoyed getting your feet wet with live coding visuals. Good luck and happy creative coding!

If you enjoyed this article, consider following me on Twitter @nadyaprimak or if you need more tips on breaking into the tech industry, you can read my book Foot in the Door in paperback or Kindle now.

The post Hydra Tutorial For Live Coding Visuals appeared first on www.nadyaprimak.com/blog.

Beginner P5JS Tutorial - A SpacyCloud Live Workshop Retrospective

Nadya P — Thu, 09 Apr 2020 17:28:24 +0000

I had the immense pleasure of attending several creative coding workshops on April 4th. They were streamed live on the SpacyCloud Twitch channel. There were additional sessions involving Hydra, Raspberry Pi, Haskell, and more. However for this post I want to focus on the first session which was a P5JS tutorial. In this post I hope to translate the P5JS tutorial into a written format, for posterity and to share what I learned. I'm going to review what was taught in the live session. Hopefully SpacyCloud will have another live stream in the future so I can catch up on what I missed. Here is the landing page for the event schedule.

Although I have used Processing years ago when I was in college, I knew I was very rusty which is why I decided to tune into Leandra T's P5JS tutorial stream. Originally branded as a creative coding language for artists, Processing is mainly used to create generative art, visualizations, and immersive installations. P5JS is basically a version of Processing that is ported to Javascript. Processing was developed my MIT and is built on top of Python. Naturally people wanted to be able to show their generative art online, so it didn't take long for there to be a huge demand for Processing that worked with Javascript instead of Python. Since P5JS has taken off there is tons of code online that people are sharing, making it a lot easier to learn.

That being said, it’s still nice to have someone walk through every step with you. That is what Leandra did. After showing us an example of what we were going to make, Leandra dived right into the online P5 editor. Whats great about this editor is you can do all of your coding online and see the results of your code side by side. She went over some of the basic functions, such as setting the canvas and background, and drawing shapes.

In the above code (to be more precise, a screenshot from the aforementioned P5 editor) you can see two functions, setup and draw. The setup function is called once when the application first runs, while draw is called constantly every frame (at least 24 times per second). What that means is that while it looks like the circle is static, it’s actually being redrawn constantly. However our eye cannot perceive that so it looks as though the circle is always there.

As you might have guessed, createCanvas is only called once and the two numbers you pass are the pixel width and height of the canvas, respectively. The canvas defines the area within which you can draw. Inside the draw function, background is what defines the background color of your canvas. If you pass 1 number, you will get a shade of gray as if you passed 3 RGB (red, green, blue) values. That means that background(220) is just shorthand for background(220,220,220). Each value can be as high as 255 (white) or as low as 0 (black).

Then of course you have the ellipse. In the screenshot above there are only 3 values passed to the ellipse function: x coordinate, y coordinate, and radius. However, you can actually pass in 4 values, which is why the function is called ellipse rather than circle. Passing in 4 values means you can stretch or squish the shape because you are passing the x coordinate, y coordinate, width, and height.

So far this is pretty boring. Luckily, it only takes a few tweaks for things to get a lot more interesting. Instead of passing the ellipse static values you can pass in things like mouseX, mouseY, or random. Passing in mouseX to the first value of ellipse and mouseY to the second value will make it so that you are essentially painting circles across the canvas wherever you move your mouse, because the ellipse will follow your cursor. If you pass random instead, the computer will generate a random number every frame and draw the ellipse to those coordinates.

You need to at least pass random a maximum number, so that it knows the range within which the random number can fall. If you want circles to cover the whole canvas, you can use random(width) for the x coordinate and random(height) for the y coordinate because P5JS stores the width and height of the canvas to those variables. Also make sure you move background out of the draw function and into setup, otherwise you will only ever see 1 circle on the canvas because the background will continuously be drawn on top of it.

What the canvas will resemble when you pass in random(width) and random(height)

Using mouseX and mouseY will be more like “painting” with the shape

Okay so now we’ve got lots of shapes on the canvas, but where is the COLOR?! Much like you can provide the background 3 values that reflect red, green, and blue you can do the same for shapes with the fill function. For example, if I pass fill(255, 0, 0) I will get a completely red circle like below.

But what if I pass random values instead? What do you think will happen?

Now we’re cooking with gas. Leandra went through similar steps in her live tutorial, to make sure everyone understood the basic principles and the most commonly used functions in P5JS. One of the most popular uses is to create visualizations that respond to sound. These are obviously a huge thing at raves and concerts, and they are easy and fun to make. The first step is to make sure you have the sound library linked in your P5 editor.

On line 5 in the above screenshot there is a url pointing to p5.sound.min which is the P5JS sound library. If you click the little arrow above the code it expands to view the files that you see on the left hand side. Click on index.html and confirm that you also have the p5.sound.min script on line 5.

The next screenshot illustrates the additional code you will need in order to setup the mic and start receiving data from it that you can use for your visualization. Basically, you have to setup some variables at the top so that you can access your mic anywhere in the code. The variables start off empty but then you pass the actual mic in your setup function and start it so that it actually runs. Finally, you need to get useful data from the mic so you call getLevel to get the loudness which you can use for visualizations. You can confirm that the mic is working by adding a console.log statement so you should see values being returned below your code when you run it.

I know that my mic is working because I am seeing values in my console at the bottom

We’re getting really close now. Only a few more steps to go before the finish line. Now that you know your mic is working, you can try passing in the micLevel and playing some music to see how the visualization responds. You can also introduce a few more functions, such as stroke and strokeWidth. The role of stroke is to define the color of the border of your shapes. Like fill, you pass in 3 values for red, green, and blue. On the other hand, strokeWidth is for defining the thickness of the border. You can see an example below integrated with micLevel for some cool effects.

We’re at the final step. It’s going to involve a slightly more complicated programming concept, so bear with me. This concept is called loops, and in particular we are going to use a for loop. Basically you define a variable, like num, and that variable can increase or decrease until you reach a specified stopping point. Most of the time, for loops are used to count upwards by 1 to a designated end point. So a for loop like for(let num=1; num <= 8; num++) { console.log(num) } will output 12345678. Hopefully that makes sense. There is plenty of reading online about for loops if you are still confused.

Unfortunately it doesn't look that cool in a screenshot. It will look much cooler for you when you actually have the code in P5JS yourself and play some jams! So first, let me put the code here so you can actually copy and paste instead of manually typing everything out. This was the exact code that was written in the original P5JS tutorial.


let mic;
let micLevel;
function setup() {
  createCanvas(400, 400);
  mic = new p5.AudioIn();
  mic.start();
}

function draw() {
  micLevel = mic.getLevel();
  background(5);

  stroke(255, round(micLevel * 800), round(micLevel*255));
  strokeWeight(micLevel * 200);
 // background(220, 0, 0, 100);



  for(let i =0; i < 6; i++) { // for loop counting from 0 to 6 
    fill(random(250), random(100), random(255), 255); //1 circle is drawn with every loop, so 6 circles total

    ellipse(i*60 + 40, micLevel*5000 + random(50), 50); //micLevel for the y value caues the circles to go up and down with the volume, i*60 means a new circle is drawn every 60 pixels along the x axis
  }

}

I also tweeted out a video of my own code and music so if you don’t feel like it or don’t have time right now to tinker with the code here is a short video. Make sure you turn the sound on!

// Detect dark theme var iframe = document.getElementById('tweet-1246484591004745728-591'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1246484591004745728&theme=dark" }

Hope you enjoyed this P5JS tutorial. Stay tuned for another retrospective on SpacyCloud live workshop about the hydra-editor!

The post SpacyCloud Live P5JS Workshop Retrospective appeared first on www.nadyaprimak.com/blog

What it Means to be a Creative Coder

Nadya P — Mon, 30 Mar 2020 17:30:37 +0000

Programmers rarely agree on whether or not coding is a creative profession. My interest in coding always stemmed from what I could create with the code. Seeing an interesting visual result from my efforts is usually the most satisfying part. Most programmers are less concerned with how their app looks and more concerned with the functionality. Usually, as long as the app works the way it is supposed to, most programmers are satisfied.

Of course that is an overly simplified model. Programmers often care about how the code is written, whether it is reusable and easy to understand for other programmers. One could argue that deciding on which tools to use and how to organize the different parts of the code involve creativity as well. Creativity is a broad term and I’m not here to make a commentary about whether or not programming is creative. This post is rather about people who identify with the term creative coder. Namely, folks who got into coding because they are interested in how they can express themselves creatively with technology.

A beautiful procedural artwork made with Processing by Pierre Marzin. View the original and code here.

There are a lot of good examples of creative coders in some of my other blog posts, here and here. Nathalie Lawhead is one of my personal favorite creative coders. Their work lies at the intersection between games and interactive art. They draws a lot of their inspiration from old flash games and early net art. Games like What Remains of Edith Finch, which are sometimes called “walking simulators” by the gamer community for being primarily focused on storytelling can also fall into the category of creative coding.

Then there are folks who make all kind of interesting art with code on communities like Codepen. From unique loading screens to animated menus to scrolling backgrounds, these are also inherently creative. It’s hard to make a list of every kind creative coding out there because technology is constantly evolving. Tools like Processing and OpenFrameworks allow for especially dynamic and immersive art to be created, from moving and morphing fractals to particles replicating the flocking of birdsor cell division, the sky is the limit for what kind of art creative coders can make.

I am a lot more passionate about programming when I am working on something like a game or interactive art project versus enterprise software. Tackling technical challenges can be fun occasionally but I am much more interested in the act of creation and the product I am creating. I am especially excited if the product I am making involves other creative aspects.

The house that you explore in the game What Remains of Edith Finch.

I think that is what differentiates creative coders from other types. What made them interested in coding was not the technical challenges or the logic puzzles but the excitement of creating something that is immersive and captivating. Creative coders may or may not be software engineers in their day job. Some are front end developers, fewer are back end developers. For me UI developer was especially attractive as a day job because it merges design and development. Even in these jobs, though, as I write about in another post, sometimes there is not as much creative expression as one might hope for.

That is the other thing that distinguishes creative coders. They always have that powerful longing for creative expression. Creative coders might also enjoy other things like drawing or music or writing. Personally I enjoy all of these things, and didn’t do any programming of my own for many years. Technically, I did tinker with web development in middle school but my first object-oriented programming code wasn’t written until college.

An astonishingly detailed artwork made purely with CSS by Ben Evans. View the original and code here.

Some creative coders have never even worked for a corporation in their lives. For instance, there are artists who started collaborating with technologists years into their career and discovered a new passion they didn’t know existed. They might have learned to code in their 30’s and used it to create generative art or experimental experiences. Frameworks like Processing have made coding a lot more approachable even for artists and folks who have traditionally felt ostracized from the world of code.

Unfortunately, being a creative coder can put you in a weird limbo between the world of programmers and the world of artists. I felt this very acutely in my career, as someone who graduated with a Visual Arts degree and then began working as a software developer.

Abstract art made with Processing by Takawo. See the original and code here.

On the programming side, there is still a lot of gatekeeping, especially at the corporate level that makes creative coders feel unwelcome and unwanted. Programming interviews are often designed to test your knowledge of algorithms that are typically taught in computer science classes. Unfortunately, since creative coders often come from non traditional backgrounds the chances that they are familiar with these algorithms is pretty small.

There are also negative stereotypes among some programmers about creative folks specifically that will put them at a disadvantage as well. Some programmers out there believe that you are either a logical person or a creative person, basically concluding if you are good at art you cannot write code and vice versa. Obviously, this is ridiculous, but those who believe it can be hard to persuade.

Particle generation made with Open Frameworks by Julian Vidal.

Sadly, these gatekeepers sometimes succeed in convincing people and so some of them never even try to experiment with coding. These same gatekeepers are usually also the kind that make it harder for folks minorities in tech to have their accomplishments recognized. Usually this means if you’re a minority and identify as a creative coder, the path to recognition and respect can be even steeper.

As if it wasn’t bad enough that gatekeepers in the programming world tend to look down on creative coders, there is a similar issue for these coders being recognized by the art community. First of all, the percentage of galleries that showcase generative art, immersive experiences, or experimental games is still very low compared to the galleries that showcase works of painting or sculpture. The few galleries that do, like Artechouse, can be extremely particular about who they choose to showcase. To be chosen for exhibition is akin to winning the lottery, probably even more difficult than landing a programming job at Google or Facebook.

One of the Miami exhibits at Artechouse from their Instagram page.

If you identify as a creative coder, you might be feeling a bit depressed after reading all of this. The thing is that regardless of how much gatekeeping or frustration creative coders face, they make some of the coolest projects on the internet. Once you make that first hypnotic generative art piece or that game that you’ve had in your head since you were 10, you won’t feel the same afterward. Ultimately, if you are a creative coder you know it’s so much fun that you would be doing it regardless.

The post What it Means to be a Creative Coder appeared first on www.nadyaprimak.com.

Nevertheless, Nadya Coded 2020

Nadya P — Mon, 09 Mar 2020 15:02:23 +0000

Every year brings new challenges as a woman in software engineering. This past year it has been a big struggle with imposter syndrome because I switched from being a front end developer to full stack. The funny part was, I hadn't even planned on that but a recruiter reached out to me from a well known company and I decided to give it a shot.

Not only did I switch from front end to full stack, but I had to learn a new front end framework as well. I went from AngularJS to React and Redux, but I also had to start learning Typescript and ES6. Of course there was also a whole bunch of other things like Node, MySQL, Storybook, microservice architecture... the list goes on.

After working in tech for 4 years I thought I had gotten over the worst of my imposter syndrome since I had started to feel very comfortable with AngularJS, and though there are plenty of jobs where AngularJS is still being used I wanted to at least be familiar with one modern framework. However, what I had in mind was something more like swimming to the deep end of the pool, and what actually happened was a lot more like being thrown out of the pool and into the ocean.

I had to swallow my pride and ask lots of questions despite my fear of looking stupid. I had to resist the urge to beat myself up when one bug led to another which led to another which led to another. Also force myself to interrupt my coworkers when they would launch into a long explanation of something that I already knew. The worst part was when I was stuck on a bug for over a week and the issue ended up being not in the repo code at all but a typing error inside the database.

Six months in things are getting a little bit easier. I have a handle on React and Redux isn't kicking my ass quite as hard. It still feels a little disingenuous to call myself a full stack developer but I remind myself that all these terms mean different things to different people and as far as my manager is considered, I am now ramped up.

Part of me still longs to break away from the corporate world and make my own way. I have taken baby steps in that direction by blogging a lot more, writing a book, making more side projects, and interacting more on twitter. However I still have a long way to go. My next few step is finishing my 50+ creative resources for front end developers that people reading my blog can receive if they sign up for my mailing list. After that I am going to make a landing page for a teaser about an imposter syndrome course to see if I can generate enough interest to make it worthwhile.

Sharing my knowledge with people who want to break into tech is more rewarding than a corporate job because I know I am giving back to people who need it. I especially want to help more women in tech because I know how hard it is constantly doubting yourself, feeling like you don't belong, and trying to resist the urge to apologize every time you make a mistake but doing it anyway. Despite all of this I have continued to code because it is also rewarding AND empowering to be able to build something and say with full confidence "hey, I built that." I want to give other women that feeling so they can go into the tech industry with their head held high.

If you want to check out my blog, its www.nadyaprimak.com/blog. There are posts about learning to code by making games, common career woes faced by software engineers, and stuff about my own coding journey.

Should senior software engineers be promoted to engineering managers?

Nadya P — Thu, 20 Feb 2020 16:43:46 +0000

I'm curious to hear what fellow members of the DEV community think about the typical career ladder for engineers. Personally, I think its odd that we train engineers to be technical individual contributors for years and then have them pivot into roles as managers that

they may not want
they may not like
they may be unfit for

Curious to hear from devs who have been promoted to managers themselves, what kind of training is offered at your company for this transition, or alternatives to this career ladder that maybe would work better?

Work Culture Toxicity in Tech

Nadya P — Thu, 13 Feb 2020 16:21:48 +0000

I have a confession to make: I was on Twitter over the winter holidays when I should have been spending time with my family. What was the trending topic that caught my eye, you might ask? Last minute Christmas gift ideas? Pictures of pets in Santa hats? No, but I wish I could say it was one of those things. Instead, it was about work culture toxicity in tech.

It started with this:

Pretty harmless, right? Of course tech twitter wasn’t going to let this stand without controversy.

I’m not 100% sure if these were the first tweets to start off the debate about work life balance, but they were major players. The fact that this debate sprung up during the winter holidays. The only significant chunk of time off most Americans get, already says a lot about the toxic work culture we have in this country.

What makes it worse is that tech elevates this capitalist propaganda, glorifying workaholic ism. I’ve encountered many people in the tech industry who share this attitude. They are the last ones to leave the office, and they judge you if you don’t work the standard 9-5 hours. I worked at one company where my coworker was asked by his boss to talk to me about arriving to work earlier. He believed that working later hours was a privilege only seasoned developers ought to have.

At another company I worked at we had an AMA with the CEO and someone asked about working from home. The CEO’s response was “sure you can work from home, but you won’t be working for this company anymore.” Its so common for developers to tout all the unorthodox benefits that working in tech can offer. Often the first benefit that is discussed is work from home, but there are many companies where that is not allowed.

Of course, the above examples are far from the worst ones. In game development working 80+ hour weeks is not uncommon, especially during crunch. It’s also not uncommon in early stage startups. Consulting is another area where workaholics runs rampant. I had a stint at a consulting company that didn’t last long because I saw my coworkers burning out. They were actually suffering physical symptoms for months on end.

There are plenty of companies who abuse their engineers like I described above. They can get away with this abuse a lot more easily when they brainwash engineers. Brainwash them to perpetuate the belief that working weekends and nights is the way to a successful career.

Some engineers believe that they have to work extra long hours because they are making more money than people in other industries. However engineers are not like lawyers. They do not charge their clients by the hour, so working those long hours does not actual equal more pay. Certainly it’s not fair that teachers and social workers make way less money than software engineers. But working longer hours out of guilt does not do anything to make the situation less fair. It also won’t make the company you are working at appreciate you more. If anything, they will just start taking your extra hard work for granted. But don’t take my word for it… here are some more tweets that say it a lot better:

I’m going to end my post with this tweet from the creator of Ruby on Rails. Here he responds to someone who agreed with Ryan Selkis about working long hours. Except he took it even farther by saying workaholic ism = changing the world. If anything exemplifies work culture toxicity in tech, it’s this guys hot take.

The post Work Culture Toxicity in Tech appeared first on www.nadyaprimak.com.

Your Loudest Engineer is Not a Genius

Nadya P — Tue, 11 Feb 2020 21:56:18 +0000

People tend to glorify confidence. In interviews, we tend to think more of the person who expresses themselves loud and bold, with their held head high. This tendency is especially true among Americans, the most obvious evidence being the current President of the United States, Donald Trump. After all, most psychologists agree he is profoundly full of himself. Despite his failures in business and real estate, he continues to believe he is the smartest man on Earth. Unfortunately there are many fields where people like Trump get promoted and software engineering is no exception.

Official portrait of President Donald J. Trump, Friday, October 6, 2017. country (Official White House photo by Shealah Craighead) – Our Narcissist in Chief

I wish that the tendency didn’t extend beyond politics, but it does. Entitled, loud, and opinionated engineers get promoted faster than their more subdued peers, regardless of actual skill level. Managers without technical knowledge have no other way to evaluate the skills of these developers. So they end up judging engineers the same way they judge managers.

I’ve seen this first hand in the six different programming jobs I’ve had thus far. It was difficult for me to gain any significant respect in the companies I worked at because I was not outspoken. Over the years I’ve learned that I need to open my mouth more. I’ve gotten better at self advocacy, but it still bothers me that silence is mistaken for a lack of competence.

Here’s something I want any manager reading this right now to consider. What if the quiet engineers are not incompetent, or shy, or lack social skills? What if they are just being careful to speak up because they want to verify accuracy? What if they feel intimidated?

When you are starting out as a developer, especially if you are underrepresented in tech, it’s difficult to speak up about things. Even if you know someone is saying something patently false, its easy to hesitate about correcting another developer. They might get angry and hold a grudge against you, who knows? Getting the confidence to confront another developer can take months, even years. Some developers never gain that confidence at all, even if they are competent.

Lots of developers have imposter syndrome, especially when they are starting out. They don’t always confront the senior engineers, even if they know they are wrong. (image source)

I’ve had this happen on a number of occasions. The most memorable was when I was discussing a UX issue with a backend developer who tended to dominate all of the conversations. Despite knowing nothing about UX, this developer consistently argued with me about every choice I advocated for. When I pointed to research and specific examples from my classes, this developer would fire back. He argued he saw the UX choice in interfaces that he had personally used (like JIRA – yes, JIRA). It became quite heated on several occasions.

The promotion of loud engineers is a problem because the more those loudmouths get promoted, the more people are afraid to challenge them. Since they were prone to interrupting other developers even before they were promoted, the problem gets a lot worse when their ego grows.

The other problem with promoting such engineers is that it validates a certain communication style. That is one of blurting out the first thing you believe to be correct, without proper investigation. Over confident developers are notorious for jumping to conclusions. If your team sees that the loudmouth engineers are the ones who get promoted, they are more likely to adopt this communication style themselves. Is it helpful to blurt out the first idea that comes to your head? In brainstorming situations, sure. But when you are trying to fix a difficult bug it can derail the problem solving and send the team down the wrong path.

To be clear, I don’t want to sound like I am demonizing anyone who leans toward the chattier side and likes to talk. A team of engineers that over communicate is better than the opposite. The problem lies specifically in the situation where one overzealous and egotistic engineer drowns out the other voices on the team.

Now that the new year has started, it’s the perfect time for companies to reevaluate their promotion strategies and consider fresh approaches. Sometimes quiter developers need a little bit more encouragement. They might not be sure if they can train people or be confident enough to lead a team. That doesn’t mean that they would automatically make a worse leader than the engineer who is always talking.

Is it possible the loud developer who thinks they are a genius will leave the company if they aren’t promoted? Certainly. But the rest of the developers will be grateful, and happier at work. They are more likely to go to the modest leader for questions, and learn more. It will also be easier for them to explain what they are struggling with without feeling stupid.

Maybe you believe your loud software engineer is the next Elon Musk (image source)

There’s one more thing. Maybe you are reading this and going: okay, but what if my loudest engineer really IS a genius? Maybe they have a PhD in physics, or four masters degrees, or they wrote their own game engine and sold it to Bethesda. Even if that is the case, consider deeply if their personality is really good for leadership.

Ask the following questions. Are they the kind of person who is willing to delegate tasks, or do they think they can do everything themselves? Might they become a bottleneck in the future if given too much control? Are they actually good at explaining technical concepts to juniors or do they like to overcomplicate things to make themselves sound smarter?

I know not everyone reading this is going to take my advice. Maybe it’s not practical, and there are too many other problems to deal with. My goal with this article was to highlight why these patterns in promotion are not as great as they might seem at first. Even if only a small fraction reading this actually change their promotion practices, I will feel like it was worth it to write this. As a developer myself, I know that having a positive relationships with my manager and lead engineer makes a world of difference.

The post Your Loudest Engineer is Not a Genius appeared first on www.nadyaprimak.com.

What is a UI Developer?

Nadya P — Mon, 10 Feb 2020 20:26:55 +0000

The world of technology is a complicated one. With titles like “rock star”, “ninja,” it can be hard to take job descriptions seriously. It doesn’t help that many hiring managers ask for ludicrous credentials. Is a UI Developer a real thing? Maybe they have job descriptions like this:

Could you also fly us to the moon?

Job descriptions for UI Developers can look like the one above. Like full stack developers, UI developers are expected to be familiar with more than one area of expertise. While full stack developers know frontend and backend, UI developers are familiar with the front end and how to design user interfaces. In some cases they also know how to conduct user research.

Don’t take the excessive list of requirements seriously. It’s like the hiring manager’s letter to Santa Clause. Don’t do yourself the disservice of not applying because the requirements seem excessive. The person who wrote the job description has nothing to do with the people you will be working with.

I know a lot about being a UI Developer because it has been my title throughout most of my career. When I got my first job with that title I had about a year’s worth of experience with AngularJS. In addition, I had a game portfolio illustrating my programming skills, a certification in Interaction Design, and a bachelors degree in Visual Arts. It might seem like a lot, but I had two years to build my game portfolio and four to complete my degree.. during which I only look about 12 credits worth of actually programming.

There were jobs in which I was doing the work of a UI Developer without the actual title. Tiny startups usually used the title of “Software Engineer.” It didn’t matter to me, because the important part was that I was getting to do the work that I loved. In the long run I worked at a lot of smaller companies. At big companies such positions rarely exist, because hiring managers can afford to hire specialists for everything.

At this point I could rant about how specialists are perceived to have more value than generalists in the American job market. Luckily, Emilie Wapnick discusses that in her TED Talk about multipotentialites with much more eloquence than I could.

This is the outlook many hiring managers have on “generalists” even if its really just a handful of skills like design and front end development. They think that the quality of the work will suffer.

Even though it is less common for large companies to hire UI developers, that doesn’t mean that such positions never crop up. For example, I was hired as a contractor for Deloitte to work on a project that involved customizing an application for an existing client. The application was focused on data visualization and had a number of complex and confusing widgets. They wanted someone with a design and front end skillet to make those widgets simpler.

Downsides to being a UI Developer

Over the years I have noticed some downsides to being a UI developer. The organizations which want to hire a developer with design skills don’t have any dedicated design resources. They also often think of design as an afterthought.

It can be an unspoken assumption that the UI developer will make some small improvements to the design and focus on code. If, in addition to having no design resources, the organization has few front end developers. Some companies even hire a UI Developer that they expect you to be a one person show, coding and designing everything with zero support.

Being a one person show is usually not a whole lot of fun

I don’t recommend taking on roles like that unless you really want a challenge and you like the people at the company. When you are working that hard on a project, it’s easy for resentment to build up. It will build up fast when you know the whole thing would fall apart without your contribution. Make sure you have some experience under your belt and you know what you are getting into.

In lieu of design resources, some organizations allow all of the developers to be involved in deciding what the user interface will look like. If you enter an organization like that, you may find yourself arguing with a lot of other people about every little thing. On one hand it can be invigorating at times to have to defend your reasons for making a button blue. On the other hand some developers do not have any design training,. That means reasoning with their opinion about what they find to be aesthetically pleasing can be frustrating, especially for small adjustments.

If you are considering a career as a UI developer, know that the job descriptions can be intimidating. But they are often a wish list that doesn’t reflect reality. If you enjoy working on a mix of design and coding tasks, it could be a great fit for you. Most companies that offer UI developers roles will be medium to small sized, and often don’t have designers on the team. This can lead to some downsides. Like arguing with other developers about design decisions and having to convince upper management that the design is more than some small tweaks.

If you can get past these downsides, though, I would recommend applying for some UI developer positions. Don’t forget, they can hide beneath other titles. Make sure you read the descriptions before dismissing them.

The post What is a UI Developer? appeared first on Nadya Primak's Creative Coding Blog.