DEV Community: Christian

Solving Leetcode's #1 Problem

Christian — Sat, 01 Aug 2020 00:09:51 +0000

The first problem on Leetcode's website is the "Two Sum Problem". It says that, if you're given an array of integers and a target, return the indices of the two integers in the array that add up to the target. Let's say that you were given the array [2, 7, 11, 15], and the target 9. The way to get to 9 is by summing the integers at index 0, 2, and index 1, 7, so the function should return [0, 1]. (You can find this problem here.)

I was inspired by this Algorithm a Day series to go through solving this problem, step by step. Just as the author of the series does, I'll first talk about how I want to approach this problem. Then, I'll work through a solution to this problem, coding it in JavaScript.

How to approach the Two Sum Problem

The brute force way to solve this problem is to have two nested loops. The first loop would go through each element of the array, and the inner loop would check every other element of the array, and see if their values sum to the target. This approach is considered "brute force" because it's not optimized, and therefore would be very slow.

Therefore, a better approach to the solution would be to only go through the array once, and to check what the "complement" of each element in the array is. By "complement", I mean what is the difference between that element and the target. For example, let's say we're given the array [1, 2, 3], and the target 5. The complement of the first element, at index 0, is 4, because 5 - 1 = 4.

We can then build a hash. The keys of the hash will be the elements of the array, and their values will be the index in the array that that element is found. The reason we want to keep track of the index of each element is that the question asks for the indices of the two elements who sum to the target.

Rather than storing every element and its index in the hash, we can check if the "complement" for that element has already been found in the hash. If it has, then we know that those two elements sum to the target, and we can return those indices.

This approach only requires us to go through the hash once, which would solve the problem in linear space (O(n)) and linear time (O(n)).

How to solve the two-sum problem using JavaScript

The first thing I'll do is build an empty hash, which I'll just call hash. Then, I'll create a for loop, which will go through each element in the nums array.

var twoSum = function(nums, target) {
    let hash = {};
    for (let i = 0; i < nums.length; i++) {
        //...
    }
};

Inside the for loop, I'll create a variable called complement. complement will be set equal to the difference between target and nums[i].

var twoSum = function(nums, target) {
    let hash = {};
    for (let i = 0; i < nums.length; i++) {
        let complement = target - nums[i]
        //...
    }
};

Now here is where the logic comes in. We want to see if the key complement is found in hash, which we can check with if (hash[complement] !== undefined). If that's the case, then we can return an array of two elements: i and hash[complement], which is equal to the index of the element complement in hash.

Otherwise, if complement is not a key in hash, then we can simply initialize a key in hash whose key is the element we're currently on, and value is the index, i.

var twoSum = function(nums, target) {
    let hash = {};
    for (let i = 0; i < nums.length; i++) {
        let complement = target - nums[i]
        if (hash[complement] !== undefined) {
            return [i, hash[complement]]
        } else {
            hash[nums[i]] = i
        }
    }
};

Feel free to let me know if you have questions about how I solved this!

The Two Most Important Traits for Working on Anything with Anyone

Christian — Sun, 26 Jul 2020 23:08:48 +0000

I recently just concluded a freelance project with a group of really talented people that I'd started with back in January and this last Friday was the last official meeting I had with them. My work as a developer cam to a close when we had a "post mortem" (sort of a morbid way of saying last meeting, but hey) and the project manager spearheading my work wanted to hear my and the other developers input on the successes, shortcomings, and overall thoughts of the work so far.

It was something I'd never encountered but although my work on the application is mostly finished outside of some input for any future developers, the manager wanted a better sense of where to take things in the future. And that meant revisiting the course of our work.

It was a tremendously cathartic experience to hear from others what occurred, what was learned, and what could be done better. Over and over again, what smacked me in the face about being an effective developer, designer, project manager, or whatever when trying to birth something into existence is being laser focused on what are the most essential features of what is being built. This leads me to the first important trait for anything creative...

Essentialism

Before starting something, a personal or client project, a piece of art, a design, or whatever, ask yourself "What am I making?", "Who is this for?", "What are the most important parts of it?". Then once you've answered them, think about them again. Then do it one more time. Keeping a store of meaning and importance at hand is crucial for developing any work because there isn't enough time in the day to build out every single feature with every single nice finely tuned UI animation.

What became so important in the course of the post mortem was that the race towards building an application from scratch was being crystal clear about what could be incorporated into the app and what didn't need to be. Or, when a designer handed off mockups, if there were certain designs that were more important than others, then what exactly were they?

I've been lucky enough to have had the chance to work worth more established teams in the course of contract work, but this was the first chance I've had where the application was built from absolute scratch while working with a project manager who defined the goals of what he wanted for the application. Especially because I was contracted out to work towards a functional proof of concept or minimum viable product, I had the chance of really shaping that initial feature list.

Why this is such an important trait to have, is that it saves you time and improves the end product. Allocating time on unnecessary features means you'll spend time on things that don't matter or will distract from the features that are important for what is being built. You have to think like an artist that cuts out all extraneous noise in a scene or portrait. An artists is like a technician that highlights the beautiful elements and removes all those features that simply just don't matter.

However, this is only part of the way to building something...

Communication

Even though you may have that laser focused idea of your end goal in mind, you also need to be able to communicate that to others. If you're a designer handing off a mockup to a developer then it's crucial that you communicate that vision you have or that hierarchy of importance. Developers are craftsman that can jerry rig and hack their way to a solution. But, again, time is a factor that can bite you.

Effectively communicating the essentialism is just as important as knowing those essential qualities to begin with. If things are lost in communication, then developers have no way to know what to build and vice versa. Developers who can't communicate a hierarchy of time so that project managers and designers understand what to strip away as a result are the worse for it.

So those are the two most important traits I found to have when in the course of my last contracting project. Refining your essential idea of the product and then being being able to communicate those qualities are hugely important for any designer, developer, manager, or anyone trying to build anything at all.

Let me know if you have any input these or can think of any additions.

More on SEO with Gulp and Images

Christian — Sun, 19 Jul 2020 19:40:34 +0000

This is gonna expand on my last post about using Gulp for compressing css, javascript, and images by just diving into a little more depth about what we can do with images. Specifically, google page speed insights recommends that images be sized appropriately for serving. We can definitely resort to a Content Delivery Network (CDN) to serve and size our images appropriately, but we can also use some gulp plugins to do some of the things we want.

Responsive

If you'd followed along on the last post, then you'd have seen some basic image compression using Gulp with

gulp.task('imagemin', function() {
    return gulp.src(baseDir + '/assets/*')
    .pipe(imagemin([
        imagemin.mozjpeg({quality: 75, progressive: true}),
        imagemin.optipng({optimizationLevel: 5})
    ]))
    .pipe(gulp.dest(targetDir + 'public'))
})

This takes images found in a specific directory and pipes them through the gulp-imagemin package, with some options, and saves them into a new directory that the site can then serve.

If we want to properly serve the images in the correct resolution, then we need to properly crop them to work on the different viewports. Luckily, for us, there is gulp-responsive that can make several different cropped versions of our files so that we can serve them.

You first install gulp-responsive

npm i gulp-responsive --save-dev

Then we create a task

var responsive = require('gulp-responsive')

gulp.task('image-responsive', function() {
    return gulp.src(targetDir + 'public/*')
    .pipe(responsive({
        '*.png': [
            {
                width: 200,
                rename: { suffix: '-200px' }
            },
            {
                width: 500,
                rename: { suffix: '-500px' }
            },
            {
                width: 800,
                rename: { suffix: '-800px' }
            }
        ]
    }))
    .pipe(imagemin([
        imagemin.mozjpeg({quality: 75, progressive: true}),
        imagemin.optipng({optimizationLevel: 5})
    ]))
    .pipe(gulp.dest(targetDir + "public"))
})

This is just going to source our images in the directory and create a 200px, 500px, and 800px version for us, then optimize and store them in our target directory.

The tricky thing, however, is that we need to use the srcset attribute or picture tag in our html so that the browser knows which image to use to display.

In mine, for example, I have:

 <picture>
          <source srcset="./public/perlin-200px.png" media="(max-width: 200px">
          <source srcset="./public/perlin-500px.png" media="(max-width: 500px">
          <source srcset="./public/perlin-800px.png" media="(max-width: 800px">
          <img class="img-loading" src="./public/perlin.png" alt="Flowing line art">
        </picture>

I took this from Mozilla's picture tag docs here. The media attributes are acting like media queries where that source, if true, will be loaded into the img tag. Thereby sourcing the correct image for the viewport width.

Using Gulp to Optimize Your Site Speed and Improve SEO

Christian — Mon, 13 Jul 2020 00:20:33 +0000

If you've ever done anything like run your websites through Lighthouse or any page speed insights tool you might be disappointed to realize that it's slow. Like... really slow.

One of the major drawbacks of a slow load speed is that SEO is impacted.

For my website just built with plain ol' js, css, and html, and hosted on github pages, I'm not compressing, or minifying, or concatenating any of images, html, css, or javascript. Granted, it's something I worked on right after getting out of my bootcamp. But I'm in the process of switching it over into a CMS, specifically Craft, for it's very developer friendly setup. I thought about Wordpress because I've used it for some client projects with website builders. But Craft won out.

And when moving things over, I'd come across using Gulp.js, a javascript task runner, to help make the workflow really easy, automate tedious tasks, and improve webpage speed. So let's get into it.

Installation

The installation for Gulp is fairly straightforward, where you'll have to install the gulp-cli package in your global npm so that you have access to some nice CLI tools at your disposal. I'm gonna assume you are familiar with npm and frontend development in general.

You'll run this in your terminal if you have npm installed on your machine.

npm install --global gulp-cli

If you're in a Wordpress project or another template based CMS or a non framework style frontend directory, you'll need to initialize the project first in the root directory that your template or theme or website is located in.

npm init

and can optionally run the command with the default "yes" flag that doesn't require any input from you.

npm init --y

This will create a "package.json" file in the same directory that you initialized with npm. Heads up you'll also want to include a "gitignore" file so that git knows not to save the "node_modules" folder because that thing is HUGE. Here's a link all about it.

Then in the directory that you initialized, whether it's a React, vanilla javascript, Wordpress site, or you name it, you'll run:

npm install --save-dev gulp

This just installs gulp as a developer dependency for your project.

And finally, you'll just need to create a file in the project called "gulpfile.js". This is just gonna hold the gulp tasks we'll use to automate our tasks for us.

Now what's awesome about gulp is that there's a ton of smart people that wrote awesome gulp plugins that will minify our css, js, or html and just pipe in the files that we want into the plugin.

I'm going to show you the process of using gulp on my personal site to speed up performance.

Image Compression

Basically, my page images are enormous and compressing them down will see a huge bump in performance. The gulp plugins I used for this can be installed with

npm i gulp-imagemin --save-dev

Now in our gulpfile we'll have

'use strict';

var gulp = require('gulp')
var imagemin = require('gulp-imagemin')

The "use strict" flag is a javascript convention to prevent weird quirks in the language. I'd seen it was common convention to append this in a gulpfile and just went ahead and did it.

Now to use image min we'll have the code

var baseDir = "./src"
var targetDir = "."
gulp.task('imagemin', function() {
    return gulp.src(baseDir + '/assets/*')
    .pipe(imagemin([
        imagemin.mozjpeg({quality: 75, progressive: true}),
        imagemin.optipng({optimizationLevel: 5})
    ]))
    .pipe(gulp.dest(targetDir + '/images'))
})

The syntax above amounts to telling gulp we want to have a task named "imagemin" and input a function that does some stuff. Specifically, our function for this task will use the "gulp.src" attribute that is basically saying "Hey we want to pull out files or a file and begin doing some stuff to it." For me and my sake, I wanted gulp to look in my src folder and look for all files within an assets folder. That's what the "*" symbol is saying. When we move onto CSS and JS, then we'll need to tall gulp to only look for files of a specific type.

From there, gulp will then pipe those files into the imagemin plugin we installed. I've fed it some basic options for compression "imagemin.mozjpeg({quality: 75, progressive: true})" and "imagemin.optipng({optimizationLevel: 5})" which will just compress the png and jpeg files I input differently. The default compression options don't do all that much so be sure to tweak either with what I have or something else on the web.

Then finally the last line says to pipe the outputted compressed files into the target directory under the folder "images". This will be the nice compressed images I'll use to insert into img tags in the html.

So for your own case it should look a little something like

gulp.task('imagemin', function() {
    return gulp.src([Directory where images are])
    .pipe(imagemin([
        imagemin.mozjpeg({quality: 75, progressive: true}),
        imagemin.optipng({optimizationLevel: 5})
    ]))
    .pipe(gulp.dest([Directory where you want outputted images to live]))
})

To run this all we have to do is type

gulp imagemin

into our command line in the project directory.

Of note, there is a plugin for gulp that allows you to output different image size dimensions for responsive viewports. For example you can output an image for small screens, medium screens, and large screens. You can take a look at that here.

CSS

Like with the above example, we'll install a css min plugin by running

npm i gulp-clean-css --save-dev

and our gulp task will look something like this

var cleanCSS = require("gulp-clean-css");
gulp.task('css', () => {
    return gulp.src(baseDir + '/css/*.css')
      .pipe(cleanCSS({compatibility: 'ie8'}))
      .pipe(gulp.dest(targetDir));
  });

Then just like imagemin above, we run "gulp css" in the command line.

Just like our previous imagemin example, this one will use the same baseDir variable I specified (keeping it DRY) and will look for any files in the css directory and with a css file type. Then we pass that file into the cleanCSS plugin and then pipe it out into whatever directory we want the css to end up in.

JS

Finally, we have the option of minifying our javascript and even transpiling our ES6 into ES5 with babel. I'd found some examples of minifying javascript and others about compiling. But the nice thing about gulp piping is that I was able to just chain these processed together. For minifying your js you'll install

npm i gulp-uglify gulp-concat gulp-rename --save-dev

and if you want to transpile using babel you can intall

npm i @babel/core @babel/preset-env gulp-babel --save-dev

These working all together in my code look like

var rename = require('gulp-rename')
var babel = require('gulp-babel');
var uglify = require('gulp-uglify')
var concat = require('gulp-concat')

gulp.task('js', function() {
    return gulp.src(baseDir + "/js/**/*.js")
    .pipe(babel({
        presets: ['@babel/env']
    }))
    .pipe(concat('concat.js')) //this will concat all the files into concat.js
    .pipe(gulp.dest(baseDir + "/concat")) //this will save concat.js in a temp directory defined above
    .pipe(rename('index.js')) //this will rename concat.js to index.js
    .pipe(uglify()) //this will uglify/minify uglify.js
    .pipe(gulp.dest(targetDir + "/js"));
})

This is a little bit more of a mouthful but we just remember that the gulp.src attribute takes in where our files are and making sure that they have a ".js" filetype to them, piping them into the babel transpile plugin, then a concatenate plugin that shoves all the files into one single file. We then save the concatenated file into a temporary directory. Next we pipe the file into uglify which uglifies/minifies the javascript and finally saves that file into our desired target directory.

PHEW.

Well we round this out with a good ol' "gulp js" to compile and voila, we optimized and compressed all our big code into really small, speedy code for the web. And what do you know:

Thanks so much for sticking with me if you've made it this far. Gulp is a really cool tool that can accomplish a TON if we get the right plugins.

Why Your Design Works or Some Laws in Gestalt Psychology (Part 2)

Christian — Sat, 04 Jul 2020 00:33:09 +0000

So continuing off from last week, we still have three more Gestalt laws to go through to get our fundamentals. We'd covered figure-ground, similarity, and proximity. The short of them are that we will see contrast in an image or design where certain objects seemingly pop out at us. An example of this was the image of the two faces or the vase depending on how the background and foreground was colored.

Next, similarity was that we'll perceive similarity in objects that resemble each other. We looked at how to use this to our advantage by having consistent -- or inconsistent -- styling to better lead users.

Finally, the last we covered was proximity, which was similar -- heh -- to similarity but that physical closeness would lead to feeling of similarity as well. Grouping UI cards of a specific type infers that these cards have a similar significance to one another. Further, we can manipulate these almost "duh" concepts to be more clear about our designs.

So onward!

Number 4: Closure

This is a really interesting concept within design but amounts to the observation that our minds will seek out order. Here's a good example of this:

So the obvious of this image is that we have a a really large triangle in the middle, with a few scattered shapes around it. However, there is no clear lines that draw the triangle. The large shape is inferred with pieces taken off from the outer lying shapes.

This concept is used in all sorts of logos or icons in UI design. Typically it lets designs and designers get away with a less is more sort of approach.

We can think of a loading screen moving in a circle and that motion infers something to us. Even though it's just an arc revolving around an axis, we draw significance out of that motion by filling in the physical gaps in the design.

Another good example I'd come across was how an image hiding on the side of the screen infers that we as users need to swipe or scroll to see it. What is in fact just an obscured picture, we'll infer that there's something more left out then what's actually present. So, interestingly, this applies to actions as well.

Number 5: Continuity

This is the principle that says our eyes will naturally be guided by continuous objects of similar kind. Think, navigation bar with similar styled links or card arrangement or even text. Left aligned text is nice because the continuous placement is easy for our eyes to read.

We seem to like it when there's a clear flow of information or objects in a design, preferring it over haphazardly placed things. This really hits home when you start to question why we'd want this over not? Couldn't the world have easily been arranged in something not sensible or if we'd even have feared continuity?

Number 6: Order

All other laws we've covered so far sort of underscore this last one. Gestalt Psychology is the study of how we, as people, make sense of the world. Which leads us to be very clear with one thing, we first and foremost see and interpret an order in the world.

We don't perceive where there is no significance, or that is just full of objects that have no relationship to one another. Instead, we see patterns and information in a way that almost reaches out at us.

Understanding the almost patently obvious but deceivingly deep ways that we see and make sense of the world can make our designs better. We can choose to represent information this way or that because we'll have an understanding that these concepts lay a ground for all the ways that we perceive order.

Getting clear on what is the intention of our site can mean that we can guide an experience and lead to a better outcome.

Why Your Design Works or Some Laws in Gestalt Psychology

Christian — Sat, 27 Jun 2020 01:32:45 +0000

Over the last few weeks I've tried to learn up on being a better designer, combing through texts and other written material. Before I'd just take from different sources of inspiration for my designs that operated in the same space or had a similar sort of branding to what I was making/designing. With the help an inner eye towards what is good v. bad, I'd gotten away with not reeaally knowing why one design works or doesn't.

Obviously there's gotta be some rational reason why, some sort of harmony of elements or what have you. What I'd stumbled upon in trying to understand better was come upon the mouthful that is Gestalt Psychology. Just so I don't lose you, this is some fancy term that examines why it is some things in a design work, and why others won't. I won't get into the details, but if you've ever wondered why a movie makes sense to us -- because really a movie is just a series of still photos shown one after the other at a specific speed or frames per second -- then you've done some Gestalt Psychology.

Or behold these trippy guys:

Why is it you see a lightbulb here? There isn't really a lightbulb there. Just a lightbulb stem and a hand. Yet there's something implied or more to the image than just the hand and the bulb stem.

Or how about this one:

This is a gif of a dog walking. But is it really? They could just be dots moving in such a way to infer or trick us into thinking that a Dalmatian is walking smoothly.

Gestalt is important for design because it tries to understand how someone makes sense of the world and the appearance. We can use it to better unify elements that are meant to be similar or infer something larger than the sum of its parts. Lucky for us, we have some nice laws to examine design in a way to visually communicate our ideas better.

Number 1: Is It Two Faces or Just a Vase?

This is typically the first principle of Gestalt that people will go over and it goes by the name of "Figure-Ground." Essentially this the concept of separating an object in the foreground from something in the background.

An illustration of this is with the classic two faces or vase illusion:

What's going on here is that there's a strange play on your eyes. When you see a vase, it stands out as an object emerging out of the picture, or emerging out of the ground of the black backdrop. Hence figure, vase, and ground, black background. While when you see two faces, the reverse is the case. The faces form the figure sitting on top of the white background.

Think about this in terms of contrast. If we have a hero section for a landing page, and there's little contrast between text and the background, then we won't have a clear figure-ground relationship. Contrast will pop off the page so that users can more easily identify what is the necessary item on the page. It will seem like it's reaching off the page.

Number 2: Similarity

This one seems to be pretty straightforward. We'll draw meaning from objects with similar characteristics. Objects that share color, size, or shape will be grouped together more so than other objects. Kinda obvious right? Well, it is and it isn't. Using this law is important to stimulate a design to be more consistent. Why does a larger element in a nav bar look off? Well it simply just doesn't fit in with the rest. But getting very clear on what elements are similar and which aren't means you'll be able to better guide a user.

Styling all links similarly means a user can glide through a site. You could even disrupt that style with something to draw attention to that element. Harnessing an understanding of similarity can be crucial and is one of those concepts that are so deceptively deep.

Number 3: Grouping

Grouping is similar, so to speak, as similarity but focuses on the actual distance between elements. Placing elements together creates a balance between those elements. We'll draw meaning and significance from physical closeness of objects. Contrarily, bringing objects farther away from one another mirrors a feeling difference as well.

Having a grid of components that are ordered and close to one another means that they relate to each other that much more. Again, sort of obvious but illustrating a deeper truth that explains why grouped information feels right.

Knowing this means we can better make decisions about what characteristics should be grouped together for objects. We design a page with an intention and this can trickle down into how we use grouping to have the user make sense of the objects we put in front of them.

We still have three more to go, but so as to not bore you too much I'll stop off here. Be sure to check back for a continuation of Gestalt and why it makes your design make sense.

Creating a Custom D3 or P5 Hook in React

Christian — Fri, 19 Jun 2020 23:44:56 +0000

I'd recently been exploring how useful custom hooks in React could be and decided to try my hand at them to conserve and maintain code like any good programmer. I'd realized that the solution for integrating D3 is just about the same way to integrate p5 (useRef with useEffect to let d3 and p5 do their DOM magic) so I went about coding a custom hook to port these two bad boys into any current or future React apps I work on.

To the Races!

Now the short and sweet of it is this guy right here:

const useDOMControl = (domFunc) => {
  const domRef = useRef()

  useEffect(() => {
    domFunc(domRef.current)
  })

  return (
    <div ref={domRef}>
    </div>
  )
}

The typical way of declaring a hook is prefixing the name with "use" (e.g. "useEffect", "useState", etc.) and so I've named this guy "useDOMControl" because that's exactly what's necessary for us to use P5 or D3 within React. There are some other solutions for D3 that make use of D3 for solely calculations and no DOM manipulation, but this way keeps d3 stuff somewhat insulated from React and the virtual DOM. For P5, we need to resort to instance mode and feed it a reference node in the same exact way that D3 does.

Walking down line-by-line, we see that the hook takes in a "domFunc" variable as an argument and applies that argument within our useEffect hook. This domFunc will contain exactly the kinds of things we'd normally do within a D3 visualization or p5 instance mode sketch. But that's getting ahead of ourselves.

Then we declare a reference variable called "domRef" using React's useRef hook. This just let's our other libraries have a node or reference insertion point. It's important that we pass "domRef.current" into domFunc or our DOM function because ".current" gives the actual HTML node we want. And finally, we return some jsx of a div that has the ref attribute equal to the value of our useRef hook variable.

That's pretty much all there is to the actual hook, but a use case must follow a specific pattern.

P5

Getting into the actual component, I've written an App component that makes use of our custom hook and writes a very simple p5 sketch:

function App() {

  const p5Function = (p5Ref) => {
    const sketch = p => {
      p.setup = () => {
        p.createCanvas(400,400)
        p.background(0)
      }

      p.draw = () => {
        p.fill(255)
        p.ellipse(p.width/2,p.height/2,400)
      } 
    }

    new p5(sketch, p5Ref)
  } 

  return (
    <div className="App">
      {useDOMControl(p5Function)}
    </div>
  );
}

So from top to bottom we initialize a p5 function that takes in a DOM node as an argument. We pass in this p5 function into our useDOM control hook in the App return line because the hook itself returns jsx, specifically a div containing our p5 sketch or d3 visualization.

The rest of the p5 function declares a p5 sketch in instance mode saved as "sketch" and then passes that instance mode sketch into a new p5 instance along with the HTML node variable we're using as an argument. Remember that we pass the p5 function into the useDOMControl hook, which then calls it with the useRef variable. Hook inception, I know.

D3

The same sort of pattern applies here where we'll create a d3Function that takes in the HTML node where it'll be placed:

import alphabet from "./assets/alphabet.csv"

function App() {

const d3Function = (d3Ref) => {
    d3.csv(alphabet).then(csv => {
      const data = Object.assign(csv.map(({letter, frequency}) => ({name: letter, value: +frequency})).sort((a, b) => d3.descending(a.value, b.value)), {format: "%", y: "↑ Frequency"})
      const color = "steelblue"
      const height = 500
      const width = 500
      const margin = ({top: 30, right: 0, bottom: 30, left: 40})
      const svg = d3.select(d3Ref)
        .append("svg").attr("viewBox", [0, 0, width, height]);

      const y = d3.scaleLinear()
      .domain([0, d3.max(data, d => d.value)]).nice()
      .range([height - margin.bottom, margin.top])

      const x = d3.scaleBand()
      .domain(d3.range(data.length))
      .range([margin.left, width - margin.right])
      .padding(0.1)

      const yAxis = g => g
      .attr("transform", `translate(${margin.left},0)`)
      .call(d3.axisLeft(y).ticks(null, data.format))
      .call(g => g.select(".domain").remove())
      .call(g => g.append("text")
          .attr("x", -margin.left)
          .attr("y", 10)
          .attr("fill", "currentColor")
          .attr("text-anchor", "start")
          .text(data.y))

      const xAxis = g => g
      .attr("transform", `translate(0,${height - margin.bottom})`)
      .call(d3.axisBottom(x).tickFormat(i => data[i].name).tickSizeOuter(0))

      svg.append("g")
          .attr("fill", color)
        .selectAll("rect")
        .data(data)
        .join("rect")
          .attr("x", (d, i) => x(i))
          .attr("y", d => y(d.value))
          .attr("height", d => y(0) - y(d.value))
          .attr("width", x.bandwidth());

      svg.append("g")
          .call(xAxis);

      svg.append("g")
          .call(yAxis);
      return svg.node();
    })
  }

  return (
    <div className="App">
      {useDOMControl(d3Function)}
    </div>
  );
}

This one is a little bit complicated with respect to the actual d3 material but I just adapted a Mike Bostock bar chart to show there isn't much of a problem here. We're able to select the HTML node and append all the svg goodies that we want to make a full fledged graph.

Hope that was helpful and useful. I've done a blog in the past about integrating p5 and React but with class components. As you can see, a functional approach is even easier and provides some nice reusability for a code base.

How to Sell Yourself as a Developer

Christian — Sat, 13 Jun 2020 01:01:11 +0000

Over the last week, I've been more and more pulled towards the idea of establishing myself full time as a freelance dev. I won't get bogged down in the reasons (freedom to explore your own niche, self-reliance, being your own boss, etc.), but one of the standout take aways from reading about different people's journey into the freelance was one thing. Value.

It's one of those mindless cliches by this point that part of the employment process is communicating your value. However to me and surely most other people as job seekers, this doesn't really hit home. It's unclear what value really means in the hiring process.

One of the unfortunate results of the job seekers journey is the trials and tribulations of being rejected, then taking it sort of personally. "What was I missing?" "Why didn't they want me?" "Was I not a fit culturally?" Surely these are sometimes good questions to ask yourself and these have crossed my mind in the last few months.

But it hit me plain in the face when doing more reading about the freelance business model and putting in bids on different projects. In this kind of stripped down contract environment, being valuable means how you will improve this persons business. Plain and simple. Stripped of all emotion, an employer has a need for a developer or designer to accomplish a job and you are there to fix that problem.

Emotion tends to get tangled in the hiring process because we're sometimes really excited about the opportunity or the work, that we focus on how this is the best position ever and we'd be so glad to have it. The idea that you, although a human being in your own beautiful right, are there to solve a problem is an after thought.

For example, I recently interviewed for what I thought was an amazing opportunity. It was right smack dab in the part of tech I most want to be a part of. I was very enthusiastic during it and the person I was speaking to told me that I was a great cultural fit for the company. The problem, however, was that he had a specific problem he needed solved. And in retrospect, I did not do a good enough job explaining why hiring me was going to solve it.

Business when stripped of all the large offices and mountains of bureaucracy, is fairly simple. There's a service that clients pay money for, and the cost of having that service shouldn't be more than what you can gain from it.

Now to the Selling

So once you understand that you as an employee, developer, and so on are there to solve an employers problems, then we can start the conversation of how to sell. Value amounts to how much you can solve their problem or add to their business. Do they find a specific part of their business annoying or pesky? Can you make that part easier for them? Are they unsatisfied with a particular aspect of their business like their site design or functionality? Can you solve those design or functional issues?

Approaching an interview from the lens of solving an employers problems will help you better understand where they are approaching the hiring process. Cultural fit is important but so is being effective.

Now to begin to understand how to sell yourself, means you have to understand yourself and your skills much better. Also, that means approaching the right opportunities where the value you offer is seen rather than glossed over. Are you a developer designer that can work more intimately with UX/UI designers? Then probably communicating value to an employer with backend issues won't go over as smoothly.

Selling yourself means understanding the employer employee relationship and what special niche or combination of skills you possess and seeking out opportunities where those skills are valued. With all three of these in place, you can more easily zero in on what makes you a good candidate over others. You are a good fit for the job because you are X and their problem Y requires somebody like yourself that can make those issues easier or non-existent.

I'm obviously not perfect on this by any means, but I thought I'd share some great gains in conveying value. Thanks

A Tip to Make Your React Code Better and Cleaner

Christian — Mon, 08 Jun 2020 01:22:27 +0000

Bootcamps are great at distilling a massive amount of information into a bite sized 15 week chunk to get you up to speed and ready to build entire web apps from scratch. However, what they aren't good at is affording you the time to really develop an application to its fullest potential. Of course real world work is a lot like that, time constraints and the pressure for a product mean cutting the full vision into something more manageable.

Nevertheless, I'd recently returned to one of my favorite projects I'd done during my time at a bootcamp, a project called Virtual Canvas, and spent another three weeks completely overhauling the styling and flow of pages so that users had a more seamless, professional, and overall better designed experience that showcased what I'd worked so hard on.

Along the way, I'd converted all my CSS styling to SCSS or SASS and rather than bundling all the styling into one index.scss or app.scss file to work with, I took a more modular approach to styling and included scss right next to my javascript components. And honestly, this vastly improved my file structure and pushed me to think more like in a React way. This leads me to my current tip for vastly improving your approach to React code...

Make it Inconvenient to Write Components

Let me explain. When I'd first began writing components in React, there was tendency not to treat components in a reusable way. It's almost as if you're writing new components whenever the need arises without heed towards whether you could actually accomplish more needs with one single component. Unfortunately, components are sometimes needless created for the sake of that moment rather than thoughtfully designed to scale or suit many different needs.

And when I'd chosen to bundle my js component with the accompanying sass file into an accurately named folder (ex. putting "Button.js" and "Button.scss" into a Button folder) it very much forced me to think of this component in a way that is reusable. Plus it adds wayyyy more steps to creating a component since you have to create several more files than just some javascript.

Also, this modular file structure is a visual reminder that this component holds its own insulated logic and is wholly different than the components written before it.

How About a Use Case

When refactoring my original code, there were several instances of form components appearing in different areas of my React app. One form component for signing in, one for logging in, and so on. Obviously shooting through a three week project means you have to cut some corners, but I thought this was a good opportunity to write a form component. However, there were many forms throughout my app, including signin, login, or create canvas forms all with different labels and inputs and internal state.

However, they all sorta had similar logic within them, just with different names. This led me to write this form component that will change the internal state, labels, and inputs given different props I write in:

import React, { useState } from "react"
import "./Form.scss"

const Form = props => {
    const [data, setData] = useState({})

    const renderInputs = () => {
        return props.inputs.map(input => {
            return (
                <div className="field"> 
                    <label htmlFor={input.name} >{input.name}</label>
                    <input placeholder="" type="text" id={input.name} name={input.name} />
                </div>
            )
        })
    }

    const renderPassword = () => {
        if (props.hasOwnProperty("password")) {
            return (
                <div className="field">
                    <label htmlFor="password" >Password</label>
                    <input type="password" id="password" name="password"></input>
                </div>
            )
        }
    }

    const handleFormChange = (event) => {
        event.persist()
        const {name, value} = event.target
        setData({
            ...data,
            [name]: value
        })
    }

    const handleSubmit = (event) => {
        event.preventDefault()
        props.handleSubmit(data)
    }

    return (
        <form className="form" onChange={handleFormChange} onSubmit={handleSubmit}>
            {renderInputs()}
            {renderPassword()}
            <button type="submit" className="btn-secondary">{props.submitText}</button>
        </form>
    )
}

export default Form

I'll walk through from top to bottom now. We want to make each form controlled so this abstracted form component will start with an empty object as the internal state. The form will take in an "input" array as props as each of these array elements are objects that will construct each of our form inputs.

To render our input fields, we'll map through our input array and output label and input HTML tags and fill the HTML with things this input should describe (I used a name attribute and you can imagine that more specifications can be added to the input objects to specify the input HTML).

Also, since some of my forms required passwords and some didn't, I specified that this form component will accept a password prop that is a boolean. If the password prop is true then make a password field. Don't if false.

Here's what I thought was really cool. Since the state is currently an empty object, then how can state accurately change on to represent the changing form? Well, if we specify each input with name attribute, then the onChange event can pick up the correct input that's been changed completely abstracted away from what is actually in the form. The event will catch the current value and the name of the input, then log the name and the value into the state object. If the inputs were named the same at all then there would be foreseeable issues with this implementation but this can be easily avoidable.

Finally, the submit handler will just submit the data in state to a callback function we've passed down as props called "handleSubmit". This allows us to further abstract away specific implementation details in the form so that we can easily reuse the form across the app with little difficulty and enough customizability to suit our needs as the app scales.

Conclusion

I think practicing with limitations on how many components you can create and even going so far as using a file structure where it's inconvenient to write more components will up you React game significantly. It's a good exercise and forces you into a mindset that approaches scalability and reusability in a good way.

Make Your Website More Compelling with Good UX Copy

Christian — Sun, 31 May 2020 22:16:43 +0000

In the last few weeks I've touched on SEO and branding techniques for developers that can easily up your credibility as a website. It's a shame when developers have steeped themselves in making the best app they can, but have left out a significant part of the puzzle to market their app.

And while I'd personally gotten a lot of traffic from possible employers and clients, I'd noticed that my app wasn't guiding users in the way I'd hoped they would. Unfortunately with one of my less intuitive apps but the one I'm most proud of, users weren't quite sure what was possible.

For a little context, I'd made an app that offers a shared canvas for users to animate shapes collaboratively and input their favorite songs to watch as shapes would animate to the different audio frequencies. A lot of the time, users would get to the point of creating a canvas, but that canvas was left blank with no animations whatsoever.

So although I'd put a lot of care into how things functioned and so on, my UX/UI design didn't appropriately lead users to seeing and interacting with the components I'd written. This caused me to reflect on what I'd done and my research to remedy the situation led me to the basics of UX copywriting. These are good fundamentals for any developer to fall back on when unsure what would be good copy for any site their building.

Good UX copy will help guide users to do what you intend for them, whether it's hire you as a freelance developer, discover the intricacies of your app, and so on.

Be Clear with Your Intentions

This is a bit of a vague statement and ironically doesn't have a very actionable step you can take, but it's crucial. Before you write or design anything for your site, you should be crystal clear on what the goal of this particular page or this particular header is supposed to convey. If it's the homepage of your portfolio site, then your goal should be conveying who you are in as little a time as possible. Your intention is to lead a potential client or employer to contact you.

Or if it's an app, what sort of benefit does the app offer a user? Why might they want to use it? I unfortunately wrote long paragraphs detailing my journey as a developer onto my portfolio page and wrote long text about the different features I'd written for my app. These suffer from unclarity and assume that a user has the time to read through large swaths of text.

Instead, if I wrote with a clear intention in mind, then the text won't be cluttered with unnecessary tangents that bog down the user rather than inform.

Always ask before you write, "What do I want the user to do?"

Concise

What falls out from being intentional in your designs is also being sparse. Design your copy to not repeat or have something unnecessary. A good question to ask when editing down is "Have I already said this or does it not help the user do what I intend?" A long paragraph about my history in academia helps tell my story, but it doesn't help the user understand how I'd be an asset or help them accomplish their web dev needs.

Readability

Is there grammar issues in your text? Is it awkward to read? Having another person read over your text to check for grammar issues or read it aloud is the best way to discover issues with what you've written. This can be a good low hanging fruit to immediately improve your UI copy.

Finally, Benefits Over Features

This was graced on briefly before and I found this on one of design courses videos. But, having "UI/UX Designer" or "Frontend Developer" as a tag line on your website describes a feature of your brand or service. This is a part of "who you are" but doesn't help you stand out among the thousand other people offering the same service. Targeting a market of people looking for a frontend developer with e-commerce experience with a portfolio header of "I build clean online marketplaces for thriving businesses" grabs the attention of someone looking for that service.

This requires that you understand and are intentional about the service that you can offer. So still falls out from the core idea of intentionality. But being clear about what benefit you offer the user will drive and keep traffic on your site longer.

So the core idea you can take from this post is "write and design with intention." The users will know when you don't.

Make Your Website Shareable on Facebook, Twitter, and LinkedIn

Christian — Fri, 22 May 2020 23:41:10 +0000

It's definitely a daunting feeling as a developer to realize that the app you've poured hours and hours into your app and you just aren't getting the kind of traffic you'd hoped for. Well with a little SEO help and designing your HTML in the proper way, that doesn't have to be the case. I'd focused on some very low hanging fruit, SEO wise, in my last post here. For this post I'm gonna cover really quick tags you can put in your HTML right now that make the links to your page much prettier and more accessible.

The Open Graph

The teams over at Facebook came up with what's called the Open Graph Protocol (read here if interested). It's a neat way for you to have a nice shareable version of your website across different social media platforms. You can easily specify the title, description, base URL, and thumbnail image that facebook and company add when you post a link on a status update.

Customizing these tags are important because blank images on a LinkedIn, facebook, or twitter page make you look unprofessional and that much less legit. And we're all legit or quit over here.

What is nice is that the open graph meta tags I'll show below will carry over from the different social media platforms you'll use.

The Basics

The must have open graph meta tags you should use are the title, description, type, url, and image tags. If you're using a frontend framework like React, you'll want to look for the index.html file that your components are injected into. The tags you'll insert look like this:

<meta property="og:title" content="[...Title]" /> 
<meta property="og:description" content="[...Description goes here]"/>
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="[...website_url]" />
<meta property="og:image" content="[...website_domain]/[...image_path]" />

Title and Description

The title and description tags are fairly straightforward. If you're trying to share blogged content on your website then using these might shift from the base title and description.

Type

The type tag is meant to just specify what sort of object this is, in our case with a React App or website, all we need is

<meta property="og:type" content="website" />

But you can imagine that this can be used to specify whether this is a video, audio, etc. The full list of open graph types can be found here.

URL

The URL tag is, from appearances, very simple but it's important to know that this should be what's called your "Canonical URL." What this means is that you can specify pages that have similar or related content under one supreme URL. The use case for a canonical URL is when you have blog posts that are the same content wise, but have separate URLs. Or if you have some page that queries a list of content like on an ecommerce page, then you'll typically want to provide a canonical URL. This is just so that Google and the open graph in this case know that certain pages are all the same. Similar content on multiple URLs waste time for the search engines.

Image

This tag has caused me the most issues because you have to specify an href for the location of your image.

This is an example of how facebook will unpack one of my portfolio projects. The code I've supplied it looks like this:

<meta property='og:title' content="Beat Poems | Machine Poetry"/>
        <meta property='og:image' content="https://christianmkastner.com/beat-poems/src/assets/thumbnail.png"/>
        <meta property='og:description' content="Beat Poems makes your poems a little less ordinary. Input a poem and Bongo Cat will do its own spin on your material. Then let Bongo Cat read it aloud, accompanied with some sweet bongos."/>
        <meta property="og:type" content="website" />
        <meta property='og:url' content="https://christianmkastner.com/beat-poems" />

As you can see I've got all my open graph meta tags and the image tag has the content of my base url and after it has the relative location of the image I wanna use as a thumbnail. I built this website using webpack and so the bundler created an src folder with an assets folder and the actual thumbnail image inside. This tag is highly dependent on where exactly your thumbnail is located so is highly dependent on what you're working with.

For example, a React app has a public folder where you can input images used for actual images and favicons used in the html. This is a place where you can put your thumbnail image to use for the open graph.

Those are some really easy ways to bump up notoriety and professionalism in your app or site. Making sick stuff is only half the battle. Getting it into the hands of people and making it appealing is just as important.

As a lasting note, some helpful tools to make this process easier are the dev tools for the open graph so you can more easily see what your shareable link will look like. All three social media platforms, Facebook, Twitter, and LinkedIn have them with:

Facbook Debugger

Twitter Card Validator

LinkedIn Post Inspector

How to SEO your website in 10 minutes

Christian — Fri, 15 May 2020 22:41:59 +0000

I've recently started to lean harder into considering freelance web development as a viable career path as of late. And with that new avenue, I've been diving into different ways that freelancers promote themselves and use digital marketing techniques to rank higher in search engines (Search Engine Optimization; SEO) to their advantage. What I came across was a couple really simple tips to instantly help your website rank better.

Those Juicy Meta Tags

You know those things at the top of the html doc you're working on? You know, the ones that let you specify a title and do something for viewport scaling? Well, those pesky things can actually help web crawlers and search engines better recognize what your site is really about.

Title

This little guy is probably familiar to most web developers but its possible that it didn't really register as anything really that important. Of course everything has to have a title so just putting up any old thing will do. However, this is what google or another search engine will use to discover your site. Let's take a look at an example of my personal site.

<head>
    <meta charset="UTF-8">
    <!-- META VIEWPORT -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- TITLE -->
    <title>Christian Kastner | Software Engineer</title>

    ...
  </head>

For my site, I have my name separating my title as a software engineer. If we do a little google search for little ol' me, we'll find

That little title tag is front and center here. Hence the significance of this tag is way bigger than just something we slap on there. It now becomes the single largest piece of data that people will see upon a google search. For instance, this blog that you're reading right now will use the title of this blog as a title tag. So we might wanna really think about creating a title that's applicable, descriptive, and related to important terms that users will search for.

Description

This meta tag also takes on significance in the Google arena as it'll lie directly below our title tag and be another very important piece of information that can make or break oncoming web traffic. It's set with

<head>
    <meta charset="UTF-8">
    <!-- META VIEWPORT -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    ...
    <!-- DESCRIPTION -->
    <meta name="description" content="Frontend Software Engineer with a quantitative background, who loves building creative and interactive software">

    ...
  </head>

It uses the self closing meta tag and you must specify the name of "description" for it to be set. Currently because I just applied these markup tags they aren't showing for my result but let's take a look at Spotify.

As you can see, the meta tag with a name of description will appear directly below the title tag and be displayed by google. So putting a nice and short description of your site (People advise to keep it under 100 characters but google allows 160) will help and direct users onto your site. Think carefully about these tags because these are the very first things a user will see even BEFORE they come onto your site.

Keywords

This is a bit of toss up. It's claimed that using the keywords meta tag doesn't really help all that much. Putting it in your html like this:

<head>
    <meta charset="UTF-8">
    <!-- META VIEWPORT -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    ...

    <!-- KEYWORDS -->
    <meta name="keywords" content="REACT, JAVASCRIPT, RAILS, WEB DEVELOPMENT">

    ...
  </head>

Google and other web crawlers will actually store the meta data for your site in a database for easy retrieval when users are searching. Google will quickly generate a list of viable results given the search term, then rank each result in ascending level of relevance.

However, meta keywords have actually fallen out of favor with search engines like google, yahoo, and bing. So if you're really stressing over your keyword generation and thinking those guys are gonna jet you to the top, think again.

Alt Text

You might be tempted to not consider alt text as an important extension of your website, unless you're considering accessibility. But since search engines aren't actually people, they don't see those images when they crawl through your site. The only source of significance for them is the alt text. So thinking about the alt text and how it reiterates the "point" of your site or how it's relevant to users is an important step towards ranking.

Using Proper HTML Tags

With the use of css and styling you can pretty much make a div into anything you want or just spam h1 tags all over your site. But using intelligent and organized markup to segment your page is important for SEO. The reason being that an h1 tag is going to be read as indicative of what the main substance of the page is about. Likewise, dividing up the page using main or section tags brings added intelligibility for SEO indexing and ranking.

This was meant to be a short recap of things you can do right this second to improve your site SEO. From what I've seen SEO is both an art and a science. Thinking hard about who your target audience is and catering to them will pay off dividends if done effectively.