DEV Community: Derek Shanks

The Full Stack Illusion

Derek Shanks — Sat, 13 Mar 2021 01:59:50 +0000

Coming off yet another frustrating Full Stack interview, I wanted to engage the Dev community. Possibly find other developer's drowning in the same ocean I am. Suggestions, idea's, conversation and the all popular rant.

If there are HR / tech interviewers reading this. Hopefully it might open your line of questioning to ensure you achieve the best talents in all layers of the full stack concept.

After today's interview, this illusion of full stack is destructive. The question's, always the same. All algorithmic, all data structure, always obscure disconnected 'error' examples that are without context. Don't get me wrong, it's important to understand these concepts.

There is never any questioning about browser compatibility, no positioning or box model trip ups, no UI / UX related questions. CSS is absolutely discounted. No creative focus whatsoever, my resume shows that I have ThreeJS / WebGL and other canvas based technologies. No camera position, texture, layout or rendering issues. No X, Y, Z position related questions. Areas I would excel and ensure strong candidacy for a potential role with the company. Instead I am left with a huge sense of inadequacy because the interview focused solely on middle and back end only.

Full stack is a broad list of skill sets. It is a utility that extraordinary back end developers dared to venture into front end world. Talented, creative front end developers dared to reach into the back end. With libraries like React and Vue. There is now an enormous inert boulder thrown into the fray that is the intermediate layer.

With most jack-jill-or-jackill-of all trades, you specialize more or less in some areas. It's hard to be an expert in all areas of each stack. My area of expertise, all visual. Just like there are full stack devs out there who would run rings around me on the algorithmic questions. But will swear and rage obliterate their keyboard because there is a rogue 'div' not behaving as much as I will Nine Inch Nails my playlist because my ID's aren't matching what my database records should produce.

I am the dev you come to for a really complex multi state animated navigation system, GSAP is getting out of control. No worries, I'll build a library of re-usable animation functions to keep the bloat down. Need a custom grid system to house images, videos with comments revealing on hover. Absolutely. I gotcha. You want to experiment beyond the stars with anything visual. I am on it. I love visual development. It's why I list myself as UI / UX developer. I also love building fully involved applications.

My last ten interviews, not one of them had any relevant questioning on visual creative focus and not even a mention of animation development or creative ideation of possibilities.

I am writing this from the vantage point of a UI developer, I am sure back end focused developers have points to share that I have missed.

Please, don't say there is a framework for that. There is a point of being experts in a field that exceed what frameworks deliver. Frameworks are nice and efficient to have, but will never solve everything a project needs.

I look forward to hearing the thoughts and experiences of others. I am ranting at this point. Full Stop! I do advertise Dev on my resume. Ha!

An Efficient React + TailwindCSS + Styled Components Workflow

Derek Shanks — Wed, 22 Jan 2020 17:38:03 +0000

Notice December 2nd 2020

With the release of Tailwind 2.0 much of this article is overkill for newly started projects. However, many companies do stay behind on versions to ensure consistency.

If you are staying behind on versions before Tailwind 2.0. Carry on. Otherwise, I’ll be posting a new workflow covering React with Tailwind 2.0.

The Motive

Many can appreciate the problems TailwindCSS attempts to solve, providing low opinions on how to style your application. It comes with a cost of long line of class selectors that tends to overtake the template logic of your application.

Another DEV.to author @ryanlanciaux wrote an article which you can find here Tailwind with React. This started my mad labratory experiments. I was motivated to leverage the fantastic tools TailwindCSS offers.

A CSS library that I have utilized before, Tachyons, has a similar utility class strategy as Tailwind. I implemented an alternative Styled Component concept to manage the utility classes provided by Tachyons.

Combining Ryan's process with my strategy for Tachyons. The two methods arrive at an efficient TailwindCSS workflow. It is setup intensive. Worth the effort for maintaining a clean Tailwind style strategy that will scale nicely as your project grows.

Note: If you just want to dive into the project without having to build from scratch. Scroll to the bottom of the article and run the Create React App template command that will scaffold the entire project and dependencies discussed in this article.

We need a Create React App

First, we need a fresh Create React App install.

npx create-react-app my-new-app

cd my-new-app

Deleting the standard boilerplate from Create React App

The instructions coming next will help you create the following folder tree. Initially you'll want to delete the React boilerplate. logo.svg, index.css, App.css and remove their imports from index.js and App.js.

src
│       ├── App.jsx
│       ├── App.test.js
│       ├── AppStyles.styles.tw.js
│       ├── README.md
│       ├── index.css
│       ├── index.js
│       ├── serviceWorker.js
│       ├── setupTests.js
│       ├── tailwind.config.js
│       └── tailwind.css

We need to install the rest of the dependencies to put Tailwind together with Styled-Components.

npm i --save tailwindcss tailwind.macro@next styled-components babel-plugin-macros postcss-cli autoprefixer

Create tailwind.config.js

Once the packages have installed. We need to initialize tailwind.config.js. We can customize Tailwind properties specific to the needs of our projects. For this example, I have added some configuration to change Tailwinds default 'blue-gray' tint to a flatter grayscale.

npx tailwind init

// ./src/tailwind.config.js
module.exports = {
  theme: {
    fontFamily: {
      display: ["Helvetica", "sans-serif"],
      body: ["Helvetica-Neue", "sans-serif"]
    },
    extend: {
      colors: {
        gray: {
          "100": "#f5f5f5",
          "200": "#eeeeee",
          "300": "#e0e0e0",
          "400": "#bdbdbd",
          "500": "#9e9e9e",
          "600": "#757575",
          "700": "#616161",
          "800": "#424242",
          "900": "#212121"
        }
      }
    }
  },
  variants: {},
  plugins: []
};

Note: You need to move tailwind.config.js to the .src folder. Create React App has ModuleScopePlugin which prevents Tailwind Macro and Babel Macro Plugin from calling the tailwind.config.js from root folder. There are ways around this, It wasn't a critical or urgent enough issue to add these additional steps just to put the config file back into root.

All other build formats that do not include the ModuleScopePlugin can serve tailwind.config.js from root folder as usual.

Create Tailwind.css

Create the following file tailwind.css in .src directory adding the base Tailwind variables that call the utilities from Tailwinds package.

//./src/tailwind.css

@tailwind base;

@tailwind components;

@tailwind utilities;

Create babel-plugin-macros.config.js

We need to address the tailwind-macro package to utilize Tailwinds config file. This allows us to use the tw macro, (we will create this very soon) and allows Babel to read all of Tailwinds utilities.

Create babel-plugin-macros.config.js in your root and copy the following settings into the file.

//./babel-plugin-macros.config.js

module.exports = {
  tailwind: {
    plugins: ["macros"],
    config: "./src/tailwind.config.js",
    format: "auto"
  }
};

Create postcss.config.js

And... finally we need to direct PostCSS to use Tailwind and Autoprefixer during compile. We will leverage this setup in a moment in our package.json file.

Add this file to your root directory.
postcss.config.js and copy the following settings into the file.

//./postcss.config.js

module.exports = {
  plugins: [
    // ...
    require("tailwindcss")("./src/tailwind.config.js"),
    require("autoprefixer")
    // ...
  ]
};

Update your package.json

Home stretch. Add the following scripts to your package.json This will call PostCSS Cli to build and watch while you're developing as create-react-app module reloading updates live. It will also automatically generate index.css for you.

// package.json
 "scripts": {
    "build:css": "postcss src/tailwind.css -o src/index.css",
    "watch:css": "postcss src/tailwind.css -o src/index.css",
    "start": "npm run watch:css & react-scripts start",
    "build": "npm run build:css react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
  }

Phew! Still with me? Awesome.

Note: File naming conventions are a matter of personal preference. I use the .jsx and styles.tw.js extensions for better visual distinction in my editors. .jsx gets the React logo, the .styles.tw.js gets the standard JavaScript logo. It helps differentiate template from the styles. Feel free to name your files however you find most comfortable.

Create AppStyles.styles.tw.js

Let's create our styled component first in the .src directory: Let's just get things up and running making incremental changes to ensure each change works correctly.

// ./AppStyles.styles.tw.js

import styled from "styled-components";

export const AppStyles = styled.div.attrs({
  className: "w-full h-screen bg-gray-100 p-2"
})``;

Create App.jsx

We begin creating our template, copy the following code into App.jsx. You'll notice, styling is a little off at the moment if you're running the app. We'll fix that shortly. We only have part of Tailwind working currently.

// ./src/App.jsx

import React from "react";
import "./index.css";
import AppStyles from "./AppStyles.styles.tw";

const App = () => {
  return (
    <AppStyles>
      <h1>Greetings Earthling</h1>
      <p>
        Welcome to your Create-React-App / TailwindCSS / Styled Components
        template
      </p>
      <h2>Resources / Documentation</h2>
      <ul>
        <li>
          <a href="https://reactjs.org/docs/create-a-new-react-app.html">
            ReactJS
          </a>
        </li>
        <li>
          <a href="https://tailwindcss.com/">TailwindCSS</a>
        </li>
        <li>
          <a href="https://styled-components.com/">Styled Components</a>
        </li>
      </ul>
    </AppStyles>
  );
};

export default App;

Adding 'tw' macro to AppStyles.styles.tw.js

BAM! Things are working nicely so far. Great job! Now, let's add the additional magic to extend the powerful capabilities of using Tailwind isolated behind Styled Components. We'll add the tw variable and import the tailwind.macrolibrary from NPM.

Update your AppStyles.styles.tw.js file with the new code written below.

// ./src/AppStyles.styles.tw.js

import styled from "styled-components";
import tw from "tailwind.macro";

const AppStyles = styled.div.attrs({
  className: "w-full h-screen flex flex-col items-center justify-center"
})`
  & {
    h1 {
      ${tw`font-sans text-6xl font-hairline text-6xl text-teal-500`}
    }
    p {
      ${tw`text-gray-700 text-lg`}
    }
    h2 {
      ${tw`text-2xl font-hairline mt-5 text-teal-500`}
    }
    ul {
      ${tw`inline-flex`}
    }
    li {
      ${tw`mr-5`}
    }
    a {
      ${tw`text-blue-500 hover:text-gray-500 hover:underline`}
    }
  }
`;
export default AppStyles;

Reviewing what we have just added, this setup now allows you to nest your Tailwind classes like you would with Sass. You can run through the entire component template using, class selectors, id's and html tags. It will follow all items from the parent container, each child and / or siblings. Pretty awesome, Right?

If you have the app currently running in the background. You need to restart it in order for all of the config files to compile with Create React App.

On completion of all steps, your file tree should look as follows.

Your root directory:

./styled-tailwind
├── .gitignore
├── README.md
├── babel-plugin-macros.config.js
├── node_modules
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
├── src
└── yarn.lock

Your .src folder

./src
├── App.jsx
├── App.test.js
├── AppStyles.styles.tw.js
├── index.css
├── index.js
├── serviceWorker.js
├── setupTests.js
├── tailwind.config.js
└── tailwind.css

Great Job & Final Thoughts

That was a lot of setup prep work. There are many options you have available for your design workflow at this point. You're not limited to just Tailwind CSS classes. In between the backticks, you can also write normal CSS as follows. It offers lot of design possibilities and excellent opportunities to experiment with complex animations using Tailwind styled objects.



const AppStyles = styled.div.attrs({
    className: "w-full h-screen flex flex-col items-center justify-center"
})`
    & {
      h1 {
        ${tw`font-sans text-6xl font-hairline text-6xl text-teal-500`}
        transform: scale(1);
        transition: all 0.3s ease-in-out;
     }
      h1:hover {
      transform: scale(2);
    }
}
`;

A Create-React-App template.

You don't have to do any of this again. I have created a template that can be used with Create React App. Everything we have installed in this article, will be pre-installed and ready for your next creative spark.

npx create-react-app my-new-app --template styled-tailwind

cd my-new-app

npm run start

Voila! Greetings Earthling!

Making GitHub Gists powerful with GistPad for VSCode

Derek Shanks — Tue, 31 Dec 2019 00:10:01 +0000

As a developer, I am thankful to other devs who create utilities to make coding more productive. Every now and then there are tools that arrive and deserve community excitement.

Many developers have debated GitHub Gists and its usefulness. Nonetheless many still use it. It is a cumbersome process to go back and forth between browser and editor to search for your Gists as it is disconnected from GitHub in an odd way. It's not tied into your main repository profile. Its just there. Gist just exists.

For those who are unaware of what Gists are. Gists are simplified code. Not full application logic. It's for those pesky code patterns that you have to keep checking for syntax. Better even, re-usable code patterns that you utilize often and don't want to keep re-writing.

Docker Compose files
Save VSCode settings
Babel config files
Prettier config files
Postcss config files
NPM package.json objects
Bash commands
Git Commands
Pesky CLI commands
There are many prime Gist candidates across all languages.

Here are a couple of small snippets I have stored. First, a CSS font smoothing property. Autoprefixer does not prefix at compile. I am forever hunting these four lines of code.

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Second: Thought Bubble - Lost in thought! Does the 'and' sit inside of the braces or between the braces on CSS media query? My Gist has the answer.

@media (min-width: 481px) and (max-width: 767px) {

  //CSS

}

My next big project. Produce a file of 'for loops' in all of the tools I use. I use them often, they contain slightly different syntax. Easy to forget. Perfect candidate for a Gist text file.

Enter GistPad

Johnathan Carter @lostintangent on Twitter & @lostintangent GitHub has produced such a tool deserving of mass excitement. GistPad.

The GistPad Extension Microsoft MarketPlace

GistPad GitHub Repository

I don't want to re-invent the docs as Johnathan has meticulously provided great documentation to get you up and running.

Some of the awesome features:

Comes with an icon for the sidebar. This provides a drawer of your Gist files.
You're able to view your own Gists and the Gists you have starred from other developers. You can also leave comments or code suggestions without leaving VSCode.
You're able to capture snippets from your code base and easily push it from your editor to your Gist repository.
An awesome playground utility with connected files like Codepen in your editor. Sometimes you want to test code before you insert into your codebase. As a frontend developer. This is such an amazing tool to have running locally.

Johnathan is eager for feedback and input. He is actively working hard on this. Fun fact: He just pushed some updates to GitHub 38 minutes ago while I was writing this.

If you haven't already abandoned my article in excitement yet. Here is your chance to leave in excitement now. Go get GistPad

Happy New Year
I wish you all a successful and productive 2020!

All images and animation are property of Johnathan Carter and GistPad.

Foo, Bar, Baz - The path to confuse your audience.

Derek Shanks — Sun, 06 Oct 2019 18:10:22 +0000

The Problem

As a developer, I have always been good at memorizing patterns. Therefore, I can whip up applications using various tools. I can usually find documentation which feature patterns that match my knowledge. That is where the problem comes in.

I can consume libraries based on their patterns. However, I still struggle with looking at a blank document. I have been uncomfortable with establishing my own creative pattern with any of the programming languages I know. This is largely due to the vast amount of courses, tutorials and books that I have consumed over the years that included the senseless Foo, Bar, Baz examples.

With any spoken language, you learn words, you phrase them into something sensible using small sentences. Eventually you're able to creatively express yourself.As programmers, we realize that we speak in variables all day long.

You experience moments, input feelings into those moments, store those moments to express later. Variables, without doubt are meaningful to our applications as much as our daily life.

Example: This is the worse program logic in the world and immediately disqualifies me from ever making instructional material at length.

// I am only capturing and hoping to change this awful mess later.

let coffeeMaker = brokenCoffeeMaker; 


if coffeeMaker === brokenCoffeeMaker {
  console.log('#$$&##&@, F-You World, not ready to say Hello yet');

} else {

 console.log('Sing a Disney song all the way to work');

}

To Instructors of Programming Topics & Documentation Teams

First, thank you for taking the time to address a need and introduce us willing learners to various programming topics. It ultimately helps us gain competitive edge towards our future.

Please, rethink your variable naming for instructional material. Your audience would rather learn from code that reads like a story. Trying to figure out what Foo, Bar, Baz or other insignificant variables mean. Destroys the value of the code logic you are trying to share.

Solution: An Awesome Learning Gem for JS Programmers and Instructors

I wanted to share a FREE short length (2hrs) JavaScript course I found on Udemy. This module truly broke the barrier I was suffering with. Creative Programming.

When you look past the lack of syntax highlighting and the instructors use of a very basic text editor (Notepad) as well as usage of ES2015 (It is what Babel coughs out for us right?). My thought process... if this instructor doesn't need highlighting, es-lint and various other useful editor add-ons. I'm going to pay attention

The instructor, Chris DeLeon truly hits the mark on discussing meaningful and sensible variables while breaking down the meaning for every line of code. His use of hard coding values first, then refactoring the code with pre-school literacy level variables provided an impacting learning experience.

Finally, all of the lightbulbs went off in my head. I am watching creative programming. I appreciate now more so than ever, how much control I have during the creative programming process.

While it is a simple game, the programming required introduces some complex logic, motion, variable storage, reconstruction of variables as the application evolves. This is exciting. You get a Pong Clone for your effort of investing only a couple hours.

Code Your First Game: Arcade Classic in JavaScript on Canvas
https://www.udemy.com/share/101r8kAEIYeV5XQXg=/

I am not affiliated with Chris DeLeon, nor do I benefit in sharing this course.

P.S.

//Forget about fixing my earlier variable. Starting over.

const angryDerek = buysNewCoffeeMaker;

// Apologies to any Dev I may have frightened with my terrible brokenCoffeeMaker logic.

Svelte - Simplicity is best.

Derek Shanks — Fri, 04 Oct 2019 21:22:25 +0000

Github Repo

For your review, I created a small web application to show the value of Svelte at even the most basic level of web development, Svelte as a beautiful templating engine. Fork, Clone, Run, Copy, Use, Laugh, Shake your head etc... and enjoy.

I utilized a very small portion of Svelte tools in order to demonstrate re-usability of components. App.svelte, FormInput.svelte and Button.svelte have the code reflecting how easy re-usability is implemented with Svelte.

Note: I did not add functionality to the button or form input. The purpose of the application is to demonstrate templating functionality. As well, the app is not mobile responsive.

dbshanks / devTO-article

A simple scaffold landing page for a DEV.TO article about SvelteJS

Clone the repo. Change my-new-app to what your desired project name is.

npx degit dbshanks/devTO-article my-new-app

Run the npm install.

cd my-new-app && npm install

Run the dev script to play around with the project.

npm run dev

View on GitHub

You can view the live working demo here.

https://dbshanks.github.io/devTO-article

Introduction

There will be plenty of articles and video tutorials about creating complex idea's using the simplicity of Svelte.

I wanted to scale even further back and enjoy the most basic implementation of using Svelte as a design tool.

Not all of us have a need to build complex reactive apps, some of us are still building simplistic landing pages and general purpose online presence.

We deserve code sanity and maintenance friendly design. In the case of the design I have provided from my repo. Most would never utilize React, Vue, Angular and others to implement such a small project.

Svelte is the perfect tool for such a minimal use case. It is the component architecture I believe most of us had dreamt of back in 2015 when 'Component Architecture' was all the buzz and libraries were surfacing up all over Github.

Svelte remains minimal as it is a compiler that gets out of your codebase at production build. Projects like React, Vue and Angular are either libraries or full frameworks. With Svelte our application is just a minified bundle.js file connected to the HTML.

The Application

This is the structure of my SRC folder in a Svelte application. I am still a fan of separating my CSS/SCSS from component logic.

This format should still look familiar, the pattern is utilized in React, Vue and Angular. While Svelte is still young, I wanted to propose the idea of a solid project pattern or best practice concept for folder structures.

src
├── App.scss
├── App.svelte
├── components
│   ├── Button
│   │   ├── Button.scss
│   │   └── Button.svelte
│   ├── Footer
│   │   ├── Footer.scss
│   │   └── Footer.svelte
│   ├── FormInput
│   │   ├── FormInput.scss
│   │   └── FormInput.svelte
│   └── Navigation
│       ├── Navigation.scss
│       └── Navigation.svelte
└── main.js

Adding Preprocessor Support

If you want to add Sass or other preprocessors to your Svelte app. It's a very simple modification. Install the following NPM packages to your SvelteJS project. At this time, I am only able to verify consistency with either .sass or .scss files. Go ahead and experiment.

npm install svelte-preprocess node-sass

Add the following lines of code to replace the plugins section of 'rollup.config.js' file.

    plugins: [
        svelte({
            // enable run-time checks when not in production
            dev: !production,
            // we'll extract any component CSS out into
            // a separate file — better for performance
            css: css => {
                css.write('public/bundle.css');
            },
            preprocess: autoPreprocess() // Add the autoPreprocess package to plugins.
        }),

Add 'svelte-preprocess' to your 'rollup.config.js' imports at the top of the file. svelte preprocess automatically detects the node-sass package and uses it during the development and build process. I leave the global.css untouched with exception to some minimal defaults.

import autoPreprocess from 'svelte-preprocess'; //Add autoPreprocess to import.

Now you're able to do either of the following. Inline your styles in the component directly.

<style lang ="scss">

$primary-color: red;
$secondary-color: blue;

h1 {
 color: $primary-color;
}

h2 {
 color: $secondary-color;
}
</style>

Or if preferred you're able to setup your stylesheet as an import as I have done by importing the Sass files between the style tags of the component.

<style lang="scss">
 @import './componentName.scss';
</style>

Summary

There is a lot of excitement about Svelte and its future as a goto tool for web application development. As demonstrated from my small application on the Github repo provided, the code requirement is minimal to get up and running with Svelte.

On the front end, it is a seemingly simple one page design. On the back end, the site has a fully reactive tool to scale as needed. As developers, we can push a simple application to start. In the future we can further develop a complex application to fit our projects scale requirements.

Hopefully I have enticed some to go and play with Svelte.

This was inspired by an article that Dave Ceddia wrote on implementing Sass into Svelte https://daveceddia.com/svelte-with-sass-in-vscode/