But why hire early career devs? Typical resistance takes the form that it takes too long to train new programmers, takes away time spent on new features for seniors, and you can’t train developers remotely. Well, that’s just not true.
There are a few reasons why I refer to people as early career developers rather than junior developers:
Using the term “early career” rather than “junior” can be more respectful and accurate, and can help to avoid any negative connotations or misunderstandings.
When interviewing early career developers, there are several traits that I look for:
In a large organization, Consistency, communication, and a growth mindset beat raw talent. Consistency is indispensable because it allows them to build on their natural abilities and to maintain high levels of performance over time. Effective communication is essential for building and maintaining relationships, collaborating with others, and achieving goals. It allows individuals to share their ideas, insights, and perspectives, and to work together towards a common goal. A growth mindset is essential because it allows them to be open to learning new things and to be resilient in the face of challenges. It motivates individuals to improve and to seek opportunities for growth and development.
While, of course, you have to screen people who can’t “code their way out of a paper bag”, hopefully your recruiters have done that for you.
Here are some tips:
Onboarding is the process of introducing new team members to an organization and helping them to become productive and effective in their role. Having a good onboarding process helps dial in the whole development process. Faster onboarding for mid-and senior developers. Better documentation. Better abstractions and architecture in the code. All things that accelerate feature development and reduce technical debt.
By providing new hires with the resources and support they need to get up to speed quickly, organizations can reduce the time it takes for them to become fully productive. This is especially important for mid- and senior-level developers, who are expected to contribute to the development process right away.
Effective onboarding can also help to improve the overall quality of the codebase by providing new hires with a clear understanding of the organization’s coding standards and practices. This can help to ensure that code is well-organized, maintainable, and scalable, which can help to reduce technical debt and improve the efficiency of the development process.
Good documentation can be an essential part of the onboarding process. By providing new hires with access to clear, comprehensive documentation, organizations can help them to understand the organization’s processes and systems more quickly, which can save time and reduce the risk of errors or misunderstandings.
A good onboarding process can help to accelerate feature development, reduce technical debt, and improve the efficiency and effectiveness of the development team.
There are a number of mentoring strategies that I have found useful over my years of experience. What is mentoring?
Mentoring is a relationship in which a more experienced or knowledgeable person, called a mentor, helps to guide and support the development of a less experienced or knowledgeable person, called a mentee. Mentoring can take many forms, but at its core, it involves the mentor providing guidance, support, and advice to the mentee as they work towards achieving their goals and developing new skills.
Mentoring relationships can be informal, with the mentor and mentee meeting on an as-needed basis to discuss specific issues or challenges. They can also be more formal, with structured meetings and a defined plan for the mentee’s development.
Mentoring can be a valuable experience for both the mentor and the mentee. The mentor has the opportunity to share their knowledge and experience, and to help shape the development of a new generation of professionals. The mentee, on the other hand, benefits from the guidance and support of a more experienced individual, and has the opportunity to learn from their mentor’s successes and mistakes. It can be a powerful tool for personal and professional growth and development.
I’ll outline several mentoring strategies below:
The Grasshopper method is a learning strategy that involves breaking a complex task or concept into smaller, more manageable pieces and tackling them one at a time.
The grasshopper is known for its ability to jump from one place to another. The method is often used in programming or other fields where there is a lot of information to learn, and it can be overwhelming to try to take it all in at once.
The Grasshopper method involves identifying the essential concepts or skills that are necessary to complete a task or understand a concept, and then breaking them down into smaller pieces that can be learned and practiced separately. By focusing on one piece at a time, it can be easier to absorb and retain the information, and eventually, all the pieces can be brought together to form a complete understanding of the task or concept.
The Grasshopper method can be an effective way to learn new material, especially when there is a lot of information to absorb, and it can be difficult to know where to start. It can also be helpful for learners who prefer to work through material incrementally, rather than trying to take on everything at once.
The grasshopper method can be useful in developing and sequencing a list of onboarding tasks, and be combined with the other methods below.
Pair programming is working together. Sitting down and banging out some code on a shared screen. Taking breaks to talk about anything but work. Getting to know someone. It’s the shortcut to team building, building relationships one by one without the pressure of a meeting.
Code reviews are not my favorite activity. I sometimes wonder what to say. It’s an impostor syndrome moment. Did I miss an error? What happens if I do, how embarrassed will I be? The truth is, if you’ve hired well, most code is good. If something leaps out at you, positive or negative, say it. But the best thing to do if you have read it and understand it, and have nothing to say is to approve it, to keep work going.
However, like all imposter syndrome events, your input is actually critical at the early career developer stage. Things that you think are “nits” or nitpicking might be well needed feedback to the early career developer. Just make sure to say they are not show stoppers and are purely style or educational oriented. A former mentee of mine said:
From my vantage point those small nuances are some of the gold that more Senior Engineers have learned in their years of experience that I am just starting to embark upon. One day I will have those ‘nits’ to share with early career devs, and the cycle of improving code will continue.
Occasionally, a quick check in over chat or 1:1 zoom can surface questions that would not otherwise come out in other work contexts. Positive feedback from peers is critical at this stage to alleviate impostor syndrome in early career programmers.
Regardless of your position, with the strategies above, you can be an integral part of hiring early career developers. It’s an important step for equity and diversity in our profession, and can give your company a hiring edge over the competition when effective policies and practices are in place.
How to get started? Share this article with your peers and your manager, and see what discussions arise. Let me know what you do in the comments here, please. I’d look forward to seeing more early career developers being hired.
]]>Phenomic is customizable. You can choose your own Markdown engine, CSS processor, and CSS in JS, or inline style solutions.
There are some high-profile websites built in Phenomic already.
Hosting Phenomic is as simple as any static site on Aerobatic. Let’s get started.
Prerequisite: Node JS installed
mkdir your-site
cd your-site
npm install phenomic
- you’ll see some errors from npm, which you can ignore for now.
./node_modules/.bin/phenomic setup
(or on Windows, use backslashes)
Setup will ask you some questions, generate a package.json
file for you, and install the base theme.
npm install
to install the dependencies.
Use npm start
to preview your site in your browser. Phenomic includes hot-reloading. The web page updates automatically whenever you make changes in your editor.
Building a Phenomic site is simply npm run build
. This makes your website into the dist
folder.
Login to Aerobatic (if you haven’t already) aero login
Create the Aerobatic site aero create
. This makes a file called aerobatic.yml
in your directory. The file contains the application ID and other configuration information.
Deploy to Aerobatic: aero deploy -d dist
That’s it! Your site should be live at the URL that the aero
command tells you when complete.
GatsbyJS is a similar project worth checking out. We have an article on Gatsby here.
There is also the static site generator webpack plugin.
You can choose a different URL using the aero rename
command. For example aero rename -n "my-awesome-site"
Use one of the many plugins that make Aerobatic hosting unique.
“Ain’t nobody got time for DevOps”
I agree with both conflicting objectives above. Who has time to babysit servers? Not me. I have code to write, and customers to keep happy. I could use just a static site generator like Jekyll, but we need more. I have important Internal customers — the marketing department. People that expect a nice web GUI for their CMS. How am I going to make that happen with a static website?
Why is serverless architecture so attractive? Amazon Web services lists these benefits:
“There are already hundreds of thousands of production systems out there leveraging what is one of the world’s oldest and most successful serverless products: Amazon S3.” — Obie Fernandez
Fortunately, I did not have to write the web GUI for the admin. Contentful already has that. Boom — Done! Contentful keeps my Marketing folks happy on the admin side. It keeps me, as a developer, happy too. Contentful spits out JSON that i can use any way I want. They have SDKs for JavaScript, Ruby, and other popular languages.
I choose to use that JSON from Contentful in a static site generator. Why? Because static sites can be hosted without servers. On Amazon S3, or even better, on Aerobatic.
Aerobatic allows me to accelerate the delivery of best practices in web hosting:
Here’s the Architectural Diagram:
After looking at that diagram, you might be wondering — why we didn’t just go with WordPress? If the reasons above about not managing servers don’t hold purchase with you , consider these:
So, what are the details on making this happen? I chose GatsbyJS because it lets me design my site with React. You can read more about Gatsby in my post on how to host it on Aerobatic.
The key piece of code is a pre-build step that reads the content entries from Contentful, and creates JSON files in the Gatsby site’s file structure, which get turned into pages with a custom wrapper. Here’s what it looks like:
#!/usr/bin/env babel-node
require('dotenv').config()
import contentful from 'contentful'
import fs from 'fs-extra-promise'
// Contentful Config
const apiToken = process.env.CONTENTFUL_DELIVERY_API_TOKEN
const spaceId = process.env.CONTENTFUL_SPACE_ID
const client = contentful.createClient({ accessToken: apiToken, space: spaceId })
async function getEntriesByType (contentType, fields) {
const options = { content_type: contentType, fields }
try {
return await client.getEntries(options)
} catch (error) {
console.log('LegacyPost error: ', error)
return []
}
}
async function renderPost (post) {
try {
return fs.outputFile(
`pages/blog/${post.fields.slug}/index.json`,
JSON.stringify(post, null, 2)
)
} catch (error) {
console.log('Error creating post', error)
return Promise.reject('error')
}
}
async function renderPage (page) {
try {
return fs.outputFile(
`pages/${page.fields.slug}/index.json`,
JSON.stringify(page, null, 2)
)
} catch (error) {
console.log('Error creating page', error)
return Promise.reject('error')
}
}
async function main () {
try {
const posts = await getEntriesByType('legacyPost', { published: true })
const postPromises = posts.items.map(post => renderPost(post))
await Promise.all(postPromises)
const pages = await getEntriesByType('legacyCustomPage', { active: true })
const pagePromises = pages.items.map(page => renderPage(page))
await Promise.all(pagePromises)
} catch (error) { console.log(error) }
}
main()
To understand this code, look at the main
function. It waits for the entries to be downloaded from Contentful. Then, it loops through each entry to a create file on disk for Gatsby to use during the static site build process. I used Promises and ES2016 async/await functions to simpify the async nature of the code used.
Overall, designing a static website / “serverless” CMS system has been worth the effort. I’m happy I don’t have manage and pay for LAMP servers. My users have a decent UI that I didn’t have to design myself. And my site visitors have a snappy, responsive site that can handle any load that they throw at it. I’d encourage you to think outside the WordPress box and consider this architecture for your next CMS project.
]]>GatsbyJS already keeps a list of pages handy ready for you to use. It’s not too much more code to make a site map generator for Gatsby. Most of the work is already done by the sitemap package.
Add this code to your gatsby-node.js
file in your site’s main directory. If you don’t have one you can create it.
Make sure to modify the hostname
property of the sitemap object to use your site.
The pagesToSitemap function maps Gatsby’s pages array into an array of objects that the sitemap package needs.
If I had more time to work on this, I’d grab the changefreq
and priority
and make them part of the page data somehow.
Please leave a comment if you use this (free, MIT licensed) code and let me know if you have improved it!
]]>The current crop of content management systems (CMS) utilizes templates to organize content. Things like Liquid (Jekyll), [S|T]wig, etc. While these work, there is now a better approach — components. The leading web component framework is, of course, ReactJS. See what the React team says themselves about the advantages of components are over templates:
Traditionally, web application UIs are built using templates or HTML directives. These templates dictate the full set of abstractions that you are allowed to use to build your UI. React [and Gatsby] approaches building user interfaces differently by breaking them into components. This means React uses a real, full featured programming language [JavaScript] to render views, which we see as an advantage over templates for a few reasons:
By unifying your markup with its corresponding view logic, React [and thus Gatsby] can actually make views easier to extend and maintain.
I asked Kyle Mathews why he created GatsbyJS, and why he thinks React components are better:
Four main reasons. React components are perfect if you want a “progressive” website as it’s trivial to layer in javascript-driven experiences on top of the static HTML version.
Second, React components are highly reusable/sharable. There’s a huge number of fantastic React components already available on NPM (see js.coach) and it’s very easy to abstract away parts of your site into your own components directory. I’ve seen very noticeable quality/velocity improvements by heavily relying on community components and my own components.
Third, React components solve nasty CSS problems better than anything else I’ve seen. The React community has come up with a number of very creative solutions leveraging the component model. My favorites are inline styles and CSS Modules.
Finally, if you spend most of your time working in React, working with Gatsby and React components feels far more comfortable than some other templating system. Gatsby is designed to feel completely natural to any dev who knows React.
The bottom line is that if you’re already using React for developing sites, you’ll probably want the same advantage for your blog or static site, too!
For your development machine, you’ll need the command line tool:
npm -g install gatsby
Gatsby has some convenient starter templates. Try out the blog one:
gatsby new blog https://github.com/gatsbyjs/gatsby-starter-blog
This will create and install npm packages in a new directory called blog, one level below your current directory
Take a look at your site on your local machine with this command:
gatsby develop
You can almost use Aerobatic’s npm build process out of the box, but there’s one small trick you need to know about, because Gatsby uses babel-register’s require hook
You need to create a separate ‘build-prod’ script that disables Babel’s cache. This is because there is not enough available hard drive space on the Amazon Lambda image to support a full Babel cache. Don’t worry, the build, and the resulting site, are still super speedy.
Here’s the configuration:
"scripts": {
"dev": "gatsby develop",
"build": "gatsby build",
"build-prod": "BABEL_DISABLE_CACHE=1 gatsby build",
"lint": "./node_modules/.bin/eslint --ext .js,.jsx --ignore-pattern public .",
},
"_aerobatic": {
"build": {
"engine": "npm",
"script": "build-prod",
"output": "public"
}
}
So we’ve created some npm build scripts, including the important build-prod
for production. Then, from our Aerobatic config, we’ve specified that we are using the npm build option,build-prod
is the script to run, and that the files it generates go in the public
subdirectory.
Go ahead and make these changes to the package.json
file in your blog
directory. Commit the changes and push to your Bitbucket repo.
Visit your repo on Bitbucket and click on the Aerobatic icon. Here’s an example screenshot of how you should set up your configuration. Choose a new name for your site, and point to the public directory for your files.
After you click ‘Create website’, your site will be deployed and available on the web. If there are any errors in the deployment process, check the deploy logs. And please reach out to us at Aerobatic for support if you need it, we are happy to help.
The code in this blog post should be all you need. Just in case we’ve made our example code available here: https://bitbucket.org/aerobatic/gatsby-demo
If you’re not already signed up for Aerobatic, get started!
Scott Nonnenberg has some must-see tips on using Gatsby. After you’ve deployed your site on Aerobatic, go check it out!
Photo by Eva Rinaldi - http://flic.kr/p/bsTxXB
]]>Secure Socket Layer (SSL) / Transport Security Layer (TLS) certificates enable secure communication. The certificates usually cost $50 to $500 each year. Amazon Web Services (AWS) recently released the AWS certificate manager which enables free certificates. Aerobatic has simplified the process so that novice web developers can make sites secure. Experienced developers will appreciate more advanced features such as wildcards and auto-renewal features.
Many developers have let a certificate expire, bringing down their application for users. The auto renewal feature will ensure that does not happen. Wildcard certificates allow site owners to protect many different sub-domains without tedious extra configuration.
David Von Lehman founded Aerobatic to help simplify a developer’s daily experience. Enterprise developers in the past have had to wait for IT to provision a server. Independent or small business web developers have had to learn how to manage web servers. Neither task is a core competency of a web developer. Aerobatic simplifies complex deployment tasks and brings them within reach of web developers.
The Aerobatic hosting platform removes barriers to getting a site online.
Aerobatic has released tutorial blog posts available at http://aerobatic.com/blog
Photo by @mikepick - http://flic.kr/p/8nB8tX
]]>Remember that JavaScript uses Math.pow — [^](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR) is a bitwise XOR operator that has nothing to do with exponentiation.
Use Pursuit to search for Pow. … Wow, that’s a lot of options. It really depends on the type you want to exponentiate. How about a simple Number? It’s actually the fourth one in the list. Math.pow
Here’s how to use it:
import Math (pow)
pow 2.0 4.0
-> 16
As winter releases its grip on the northern hemisphere, and things begin to chill down south, you may be wondering: Can I store my beer outside? Because, if your fridge is anything like mine, there’s too much food in there for more than a six pack of beer. Ideally, I would like to keep it on the back porch.
I like single-purpose sites. Even better is if the code is small enough to demo in a training class. Inspired by Is it a Jewish Holiday Today, I created http://coldout.beer
ColdOut.beer uses the Weather Underground API. The API is a nice choice for teaching API requests for two reasons:
For deploying the site, Aerobatic was indispensible. First off, publishing the site via git push
is dead simple - something I can handle while lecturing to the class. More importantly, the HTTP Proxy allows me to keep with Wunderground API key secure. Third, having easy staging sites lets me prototype ideas while lecturing, and deploy them for the class to see. Finally, the free SSL certificates give the site a professional feel.
How does the code work? It’s a simple jQuery GET request:
// this URL is set up by the Aerobatic HTTP Proxy
$.get('/api', updater);
function updater(data) {
var temp_f = data.current_observation.temp_f;
var coldEnough = temp_f <= 46;
if (coldEnough) {
$('h2.answer').text('🍺 HELL YEAH!');
} else {
$('h2.answer').text('🌴 No way, José. It\'s only ' + temp_f + 'degrees.');
}
$('span.location').text(data.current_observation.display_location.full)
}
Some things I could do to improve the site (and happy to accept pull requests) are:
Go check out the code and Aerobatic documentation to see how all the features come together, stay cool, chill your beer, and spread the word!
Photo by waitscm - http://flic.kr/p/avT1bH
]]>Assuming you have Haskell already installed, you can type:
cabal update
cabal install -j hakyll
Navigate to the directory above where you’d like to create your blog and type:
hakyll-init blog
You can replace blog
with whatever you like.
If you run into errors, see this more detailed post on installing Hakyll
The file site.hs
holds the configuration of your site, as an executable
Haskell program. We can compile and run it like this:
$ cd blog
$ ghc --make -threaded site.hs
You’ve now made an executable called ‘site’ in your current directory. You can
now use the build
and watch
commands for that executable.
$ ./site build
The command above made a directory called _site
that holds the HTML, CSS, and other site files you can publish.
And to see your site, now you can:
$ ./site watch
which will start a server. Have a look at your site at http://127.0.0.1:8000/.
When you’ve launched your browser you should see something like this:
First, add a few things to a new .gitignore
file:
_cache
site
site.hi
site.o
Then, you can check in your code and commit it:
git init
git add .
git commit -m 'initial commit of blog'
Click on Create New Repository and create a new repo on bitbucket.
Click on Command line and follow the the instructions for “I have an existing project” Basically you are doing:
git remote add origin git@bitbucket.org:BITBUCKET-USERNAME/REPONAME.git
You need to replace BITBUCKET-USERNAME with your bitbucket username and REPONAME with the name of your repo that you created.
If you don’t have the Aerobatic plug-in installed yet, go to the Add-on Directory and install Aerobatic.
Deploying your site via Aerobatic as is a simple as setting up the plugin to point to the _site
directory.
Click on “Launch Website” to view your site. Our example code is hosted on Bitbucket here.
]]>Assuming you have NodeJS already installed, you can simply:
npm -g install hexo-cli
Navigate to the directory above where you’d like to create your blog and type:
hexo init blog
You can replace blog
with whatever you like. Now, follow the commands below. It will install all the dependences that Hexo needs and start a local server.
cd blog
npm install
hexo server
You may see a warning about an optional dependency fsevents
failing to install. It’s o.k. to ignore that. You may also see errors about DTraceProviderBingings...MODULE_NOT_FOUND
. That’s o.k. too.
After hexo server
starts, you should see:
INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop
.
When you’ve launched your browser, you should see something like this:
Now it’s time to generate the static files:
hexo generate
This creates a folder called public
, but don’t worry, hexo deploy
will put that on a separate branch automatically for us.
git init
git add .
git commit -m 'initial commit of blog'
Click on Create New Repository and create a new repo on bitbucket.
Click on Command line and follow the the instructions for “I have an existing project”. Basically you are doing:
git remote add origin git@bitbucket.org:BITBUCKET-USERNAME/REPONAME.git
You need to replace BITBUCKET-USERNAME with your bitbucket username and REPONAME with the name of your repo that you created.
If you don’t have the Aerobatic plug-in installed yet, go to the Add-on Directory and install Aerobatic.
Before we start, you have to modify settings in the _config.yml
file. We are deploying with git, so that is the type. For example:
deploy:
type: git
repo: git@bitbucket.org:BITBUCKET-USERNAME/REPONAME.git
branch: aerobatic
Now, install the git deployment plugin: hexo-deployer-git.
$ npm install hexo-deployer-git --save
Now all that is left is to link the Aerobatic plugin on Bitbucket to the aerobatic
branch that hexo created for us with hexo deploy
and
Our example code is hosted on Bitbucket here.
We love to talk shop! Get in touch with us at support@aerobatic.com or on Twitter @aerobaticapp
]]>