DEV Community: Dan Fockler

Get your juniors up and running! 🏇🏼

Dan Fockler — Wed, 06 Nov 2019 18:39:33 +0000

In large codebases with new developers it can take a while before people feel comfortable working on projects or tasks by themselves. Getting developers to this stage can take lots of time, but it's worth the effort when many developers can work in parallel. Here are some of the reasons why junior devs may be uncomfortable jumping into the deep end or asking for help soon enough, and ways that you may be able to mitigate these problems and have a more productive happy team.

Coder's Block 📖

Similar to writer's block, is coder's block. You know what you need to get done but you can't figure out the right way to get started. This is especially true for junior devs who may not understand the conventions or established patterns of your project very well yet.

How to Help

Describe the problem together and write up an outline of all the parts that need to change, even going so far as to pseudo code in functions in the real code and let the junior flesh out the details. Make sure to have a good linter that allows the junior dev to get feedback on style automatically. Encourage them to start with TDD to get a smaller feedback loop to start with.

In Too Deep 🚧

This one is similar to Coder's Block, but has a different cause. Sometimes junior devs will take more with a task than they can actually deal with. This can manifest as going days and days with little to no progress made on the task. It causes stress for the whole team because it can seem as if things should be getting done but they aren't, and the junior dev might be afraid to ask for help on the whole item.

How to Help

If you can, try and split the task up into smaller sub-pieces and go through the pieces with them to make sure they understand what each of them means and if they have a clear path forward on the task. Regular check-ins on the progress of the item as a team are helpful to ensure that a person isn't stuck and will allow them to describe what help they may need to move forward.

Excited puppy syndrome 🐶

High confidence and a lack of experience can cause excited new developers down a some weird paths to solutions that you might not have expected them to go down. Some of these paths will be fine, a few will be great, and others will be... not so great.

How to help

Spend time pair programming, and pair code reviewing. It's great to get insight about what the person was thinking, and why they made the choices they did. This will help not only their code, but will also surface ways that you can make the code easier to understand in the future.

Hopefully with these few tips you can help your new devs be happy and productive quickly.

Using Custom Properties to ⚡️Supercharge your CSS⚡️

Dan Fockler — Sun, 03 Mar 2019 01:12:34 +0000

If you've been doing web development for a while you've probably heard of SASS. It lets you do cool things like nesting rulesets, and using mixins. What you may not have realized is that plain old CSS now has one of the most obvious features of SASS, ✨VARIABLES✨! In CSS parlance these are called custom properties.

We know why variables in SASS are useful, but why would they be useful in regular CSS? Let's show some examples.

Theming

Imagine you need to show each of your users a custom color on their profile page, (ala Twitter).

If you use SASS you'll need to generate a custom CSS file for each of your users, YUCK. 'Oh I'll just use Javascript', you say. That's sustainable if you have a few elements that need to change color, but let's say you have lots of CSS! With custom properties you can do this in a snap.

/* user-theme.css */
:root {
  --custom-color: #FF00FF;
}

/* main-theme.css */
.title {
  color: var(--custom-color);
}

.main-header {
  background-color: var(--custom-color);
}
/* ... lots more css in here */

Custom properties let you generate a tiny CSS file that can easily allow you to dramatically change the style of your page with minimal extra work.

Interactive Styling

Another wonderful thing you can do with custom properties, is allowing Javascript to easily modify page styles. Say, adding different color themes or changing text sizes. This becomes trivial using custom properties.

/* main.css */
:root {
  --body-font-size: 16px;
}

body {
  font-size: var(--body-font-size);
}

<!-- Some HTML input -->
<input type="range" onchange="changeFontSize(value)">

// Javascript code
function changeFontSize(value) {
  document.documentElement.style.setProperty("--body-font-size", `${value}px`);
}

Some things you may notice.

Custom properties must have a variable name that starts with -- per the spec, and to reference them you use the var() method in your CSS.
The :root element is used in the examples. You can also scope custom properties to a ruleset and they will be scoped based on the cascade, just like other CSS properties.
Setting custom properties on the :root element will let you use the properties in all of your CSS.
IE decided to sit this one out and does not support custom properties, but all other browsers, including Edge, do.

Custom properties are a really cool feature for designing dynamic themes and styles using basic CSS and JS. Happy styling! 💇

Programming Intuition

Dan Fockler — Wed, 09 Jan 2019 21:47:32 +0000

Often when I'm programming I'll have questions or ideas that aren't fully formed logically, but nonetheless help me find bugs or think up code design solutions.

Does anyone else have these sort of intuitive leaps when programming? How do you cultivate them, and bring them into your work more clearly?