Ugly sweater CSS: The Child

Last time I made a ugly sweater based off of a LEGO figure. No fig this time but I reused the sweater design and added a new character. Poe Dameron wearing a gaudy sweater. It has a pic of bb-8 on it.

The Sweater

The sweater is almost the same as the one in the BB-8 post so I won’t go into depth about it again. The only change was to switch the seams from black to white. Design tip if you are reusing NONFUNCTIONAL code or following a tutorial change something. Always explore what can be done.

 Reuse of code

BB-8’s bottom is a sphere. I noticed I could reuse that part of code for another character. I altered the shape by changing the `border-radius`. It was 50% all around. I removed it from the top, making that part flat. The bottom still has `border-radius` applied so it is rounded.

.cradleBody {
background-color: white;
height: 50px;
width: 120px;
border-top-right-radius: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid black;
border-top: 0;
overflow: visible;
flex-direction: column;

Next I added a rectangle to show the lip of the cradle.

.cradleLip {
background-color: white;
height: 12px;
width: 128px;
border: 2px solid black;
margin-top: -66px;


An Alien

Next I built the body from a couple of rectangles, `childRobe` and `childRobeCollar`. I used the lower one to hold the blocks for the Child’s hand. `justify-content: space-between;` forced the hands to set at each end of the `childRobe`. There’s no border on it so it blends in with the body.

.childRobe {
background-color: #d7bfa6;
height: 40px;
width: 88px;
margin-top: -70px;
margin-right: -108px;
display: flex;
justify-content: space-between;

.childRobeCollar {
background-color: #d7bfa6;
height: 50px;
width: 94px;
margin-top: -90px;
margin-right: -92px;
border-top-left-radius: 34%;
border-top-right-radius: 34%;
border: 1px solid black;

And I’ll form the Head

Next the head: the head is made of two rectangles modified with `border-radius`. The ears are one long rectangle that was moved under the head div by adjusting the margins. Then the head sits on top. Then the eyes add some expression. The Child and cradle are wrapped in a div called The child. The `filter: drop-shadow(0 0 1.5rem white)` give the glow effect to the character. CSS

.childHead {
background-color: #88af90;
height: 40px;
width: 60px;
border: 1px solid black;
margin-top: -150px;
margin-right: -76px;
border-top-left-radius: 34%;
border-top-right-radius: 34%;
display: flex;
justify-content: space-evenly;
overflow: visible;

.childEyes {
background-color: black;
height: 14px;
width: 14px;
border-radius: 50%;
margin-top: 8px;
display: flex;
justify-content: center;
align-items: center;

.pupil {
background-color: white;
height: 4px;
width: 4px;
border-radius: 50%;
margin-top: -8px;
margin-right: -4px;

Final step is to add the back to the cradle. This is two semi-circles like I used for the cradle body. I just adjusted the height and width till it formed a good backdrop. The child from star Wars in a floating cradle. And there is the final version of the Child made with CSS. This was another fun build hope you enjoyed it. -$JarvisScript git push

HacktoberFest 3 down one to go.

I made progress on my Hacktoberfest goals. I had two more pull request accepted. I added to a user groups’s site and I did a bit for coder education.
The user group had requested an favicon for their site. I took their logo and modified it to appropriate size. And placed it in the requested folder. Then I added the link so the favicon would appear. The site was made with Eleventy. I’ve never used it before so I got to read code and learn a bit.

progress bar of 4 rectangles. 3 of them are filled in one is empty
My other contribution was adding some coding questions to a bot. I have a “Time I learned” log and pulled some things from there. I keep the log to give me blogging prompts. This time I just used it to make some questions with answers. I added them to the questions array. The maintainer approved them so maybe my trivia will appear on screen in the future.

I have one more PR to meet the goal, but I won’t stop there I’ll keep looking for ways to help open source. I’d like to do some accessibility work.

How to build your GitHub Profile page

Something New

GitHub now has updated profiles. You can create and style your own bio that will appear above your repos.

screenshot from new GitHub profile page.

The Build

Step one create a new repository, give it the same name as your GitHub username, use the exact same spelling and casing.  We’re talking software, so strictly equal here. ChrisCodes is not the same as Chriscodes.

It should tell you that the repo name is available. A message will pop up that reads.


You found a secret! ClJarvis/ClJarvis is a ✨special ✨ repository that you can use to add a to your GitHub profile. Make sure it’s public and initialize it with a README to get started.

  • Select Public
  • Check Initialize with a README
  • Click “Create Repository”

Step two: GitHub will now create the Repo and you can build your Profile in the README. README files use Markdown text. You can use Markdown to add images, links, and lists. GitHub has some of it’s own markdown tags. These allow you to add tables, emojis, and links to pull requests. But you knew all that from creating great detailed READMEs on your repos, right?

You can edit on your local machine or directly on GitHub. I did mine directly on Github. You can preview by clicking the “Preview Changes” tab.  It’s on GitHub so if you want to experiment, create a new branch and build.

screenshot from a fithub page.
Screenshot of test edit window on GitHub.

It may take a while switching between the edit tab and the preview tab to get (not git) it exactly how you want it but you can always come back and build upon it. You can add images so add screenshots of your work and add links to your projects.

Stuck for what to write?

What to write in a bio is often one of the most challenging things to do. There are a few writing props for what to write as comments in the README. Tell about yourself, what you like to build, and share your contact information.

Here are some ideas to get you started:

- 🔭 I’m currently working on ...
- 🌱 I’m currently learning ...
- 👯 I’m looking to collaborate on ...;

What did I Learn?

This was a new way to show who I am directly on GitHub. I liked adding a visual item to the page. It’s a pretty straight forward process and nice way to help you stand out.

Side Projects: Teaching a child to log into an App

The Challenge

My son needed to learn how to log in to a program for his school. Previously they had used QR code cards but for the new school year, he would have to manually type in a username and password. So I decided to build a login page for him to practice at home.

The Build

I looked at the app he would be using, the interface was a basic login form with an option to show the password.  I searched for  login examples and  found a Python and flask tutorial that was close to what I needed.

As I worked through the tutorial, I noticed some of the code snippets were formatted incorrectly. The code appeared in plain text not as code. Instead of showing brackets {} , there was unicode for the brackets. All the indentation was lost, everything was aligned left.

I wrote the correct syntax and got the basic functionality to work. It was just a basic white with black text form. After adding some styling and instructions it looked like the following image.

The School app had a show password option.  I added a some JavaScript and a checkbox.

I used a template for the CSS. Then modified it to the school’s color scheme. This satisfied  my initial concept for the app but I want to add replay value.

Adding a Reward

I had my son test it He was able to log in easily but all I had after log was the words “Welcome to book nook.” I wanted to keep him practicing so I looked for a way to encourage repeated use of the app.

First, I tried some CSS animation. It was neat but the same thing every time. Then I decided to try randomly displaying text. I added 10 inspirational quotes about reading. I made an array of quotes, then used Javascript to display them when a button was clicked.

function inspireQuote() {
	var randomNumber = Math.floor(Math.random() * (quotes.length));
	document.getElementById('inspire').innerHTML = quotes[randomNumber]; = "block";


The quote box is hidden till the button is clicked, another click replaces the quote.

What did I Learn?

This was a fun satisfying build. I learned some Flask and how to show a password with JavaScript.

Nashville Software School Hackathon. (Skill++)

First annual Nashville Software School Hackathon

Over the weekend Nashville Software School held it first annual school Hackathon. The purpose of the hackathon was for current students and alumni to meet, mix, and build projects. It was helpful to for new students to see how a hackathon works and for the former students to give back to the school.

The teams were built to include a mix of skill levels and created so no one from the same cohort would work together. My team included a couple of students that were just a month into their programs, one that was finishing the front end portion, one that graduated a couple of months ago, another that is about 2 months into backend course,  Me that graduated early last year and our team lead that graduated in 2015.

The Challenge

To kick off the event, everyone gathered in the Hackery, the large open space on campus. We we were given a brief introduction and then challenged to build.
Our team went to our assigned location and began brainstorming on what to build. Greg, our team lead asked “What would have helped you early on, what did you have trouble with?” We came up with list of problems areas and decided to focus on JavaScript functions, because if you don’t understand functions it will be hard to code.

We brainstormed possible solutions we could build in the time limit. We decided to use the similarities between music and code and to help explain JavaScript functions. We chose “Total Eclipse of the Heart” to show repeated lyrics as reusable code and explain parameters.

We whiteboarded a basic layout of the app. Greg wrote  some user stories, that we could break down in to tickets. About then was the call that the building was closing, we could continue to code but everyone had to leave for the night. So we planned to write more tickets over night, Angela worked on a Mock up.

We met back in the morning with new ideas and more tickets. We divided the project and started building, We did some paired programming. We talked to each other and shared ideas. We even had a visit from NSS Coach Steve. I was part of his first cohort. Slowly throughout the day our app came into focus. The application worked and it looked good.

Demo Time

Time was called, then all teams headed to the hackery. There were monitors set up on desks arranged in the center of the room. The teams presented their projects in science fair style. For alumni it was a reminder of demo day for current students a glimpse of what was waiting down the line.

man at desk. his monitor is facing out to demo a website.

This was different from demo day instead of sharing project with potential employers we were sharing with fellow developers, friends and family. I walked around and saw all the projects. The projects included git hub quizzes, flash cards, a resume builder, a read the room mixer app, and a Pokemon based CSS quiz. The apps were amazing.

Some of the instructors and staff were judges. I was very nervous when my old TAs came around. They saw my code back when I didn’t how to use the command line. Did Joe just say impressive?

Michael demos our project to Zoe, Joe, and Lauren. Super nervous Joe and Zoe were my first TAs.

Then students, alumni, friends and family got to vote for their favorite the judges would consider that in the scoring.

Design and ease of use: Judges look at the apps as a whole – does it look good? Does it have a consistent feel from one page to another? Is it easy to use? Is using it intuitive?

Functionality: Judges look at the apps as a whole – does it work? Are there some cool features? Do the features make sense? Is the app useful?

Public Opinion: friends and family got to vote for their favorite application.

Then we waited..

Finally the judges, organizers and staff came out. They thanked everyone for attending and talked about some new stuff for the school data science, front end & UI class.

and then they announced they winners. …..

And the Ducks go to

Third place went to Git Good for an application that let the user practice Git commands.
Second Place went to Total Eclipse, our app! Holy variables, batman! Man did that feel good.

The Team, Front row: Michael, Heather, Javon, back row: Chris, Greg, Kelly, not pictured Angela.

We even got trophy, a gold duck for rubber ducking!
You can see the app here.

First Place went to TIL. An app for sharing “Today I learned” items. It had  Slack integration and voting.

What Did I Learn

It was a great weekend.  We took an idea and 25.5 hours later we had an app. It felt good to build something that could help aspiring new developers. The school hackathon was the Brainchild of Coach, but it was organized by the Alumni. I was a member of the planning committee it was great to see this from start to finish.

I learn new shortcuts, a way to write tickets using user stories and some new git tricks. But more importantly I got to give back to the community.

Interested in reading more on the event, checkout the NSS Blog and see the winning three applications.

/* Your Comments? */

-$JarvisScript git push

Easy Roller Dice Review

I received some gaming products to review from Easy Roller dice. The Ohio based company sent me two polyhedral dice sets.


Easy Roller Dice Co. is made up of table top gamers and educators.  We create awesome products for gamers, teachers and other professions.

We’re constantly looking to increase our collection with things that are awesome and fun.

Some of us here started gaming in the late 80’s and early 90’s playing D&D 2nd Edition though we’ve played other editions and even jumped all the way back into 1e.

We love table top gaming, a good beer and getting together as much as possible on gaming night.
-EASY ROLLER website.

Ten piece dice set with bag



First of all the dice are beautiful. They have a cool brown hue with some marbling. The dice have a nice solid weight and heft. They feel good in your hand makes good solid thunk when they land on the table.  The numbers are clear and easy to read. The dice come in several colors. 

The set comes with a nice looking bag. you always need a bag for your dice.


10 piece set includes:

4 D6s, 1D4, 1 D8, 1 D10, 1D12, 1D20, and a 1 percent dice

I keep them on my desk. My 5 year old son likes to play with them rolls the on the desk and adds the numbers. Sometimes times he asks me the numbers. He likes to roll and see who gets the highest total.

Metal Dice

These might be my new favorite dice. They are gorgeous looking. The metal has an awesome copper color. They sound great landing on the table. And like the other set, they feel good in your hand.

The set includes a cool storage case. It has a faux leather look and the inside has foam with cutouts to keep the dice from rattling around. You can remove the foam and store three sets of dice, or about 21 dice.


The Easy Roller Metal dice set includes 1D4, 1D6, 1D8, 1D10, 1D12, 1D20. and a percent dice. They also come in gun-metal and Rose Gold. The gun-metal dice have color options for the numbers Red, Green, Yellow, Orange, Electric Blue, Powder Blue, Pink, Purple, Gold, and White.



These are some great dice. I look forward to gaming with them.

Other Products

They sell bulk dice, 7 and 10 piece sets, dice bags, dice cups and mats and beard oil.

Word of advice on the metal dice. If you want a fair game, don’t let Magneto use them.

Lego Magneto cheating in RPG with metal dice

Easy Roller dice is a mail order company based in Ohio.

Craft Content 2017: Angus Nelson Keynote

Craft Content 2017 was held today. Craft Content Nashville is an “unconference” for digital content creators. It was my second year to attend the event.

The Keynote was by Angus Nelson I met Angus last year at the pre-event mixer. Good thing I met him at the mixer otherwise I would have missed his 2016 session. There was another session, I had planned on attending but after talking to him I changed my mind. His session then and today’s Keynote were inspiring. last year’s take way was too take chances.

This year he had the opening Keynote. The Keynote message was create something and put it out there. Get it written then get it right. If you spend all your time trying to perfect it in the first draft, (totally having to fight that right now) you’ll won’t published it. If you’re afraid to publish till it is perfect and wait till it is right you’ll never publish. No one will see your idea.

“Edits are for the final step of content, not the first.”  Angus Nelson

One of the many great quotes from his speech is “Whatever scares you, do that.” With that in mind post your blog, share your pictures, or write that book.

/* Your Comments? */

What will you create today?

-$JarvisScript git push

3.31 World Backup Day

March 31 is World Backup Day. The annual reminder to do something we should be doing daily, backing up our files.

The site World Backup Day has tips, stats, and advice for backing up. They state that 30% of people have never backed up their files. They even have a backup day pledge.

“I solemnly swear to backup my important documents and precious memories on March 31st.”

Take the pledge and backup your files.

Why was March 31 chosen for World Backup Day? Because the next day is April 1st and you don’t want to be a fool. ( reminder April 1st is tomorrow, trust no one, the jokers are on the web)

UX Class & Case Study

I enrolled in the UI & UX for digital products course at Nashville Software School. It was a great experience for me. I got a taste of Agile, user interviews and digital design process.

I learned how to build a case study and how to frame a problem. I used interviews to see if what I thought was a problem really was something that needed to be fixed. Once I solidified my problem, I interviewed a few people and took that information to build my prototype and user persona.

This is a condensed version of my process. I have a full walkthrough of my UX Case Study on my portfolio.

My project

I proposed that people ran out of prescription pills and could use something to remind them to call the pharmacy before the bottle was empty. My resulting project was Medicine Minder an app that would send the user an alert to call the pharmacy when their prescription was low.


I sketched a basic paper prototype in a note book. It took several iterations to get everything I wanted on the design. Then I showed to some people got some feedback then I moved on to a wire frame.

Paper sketch to interactive prototype.


I built a wire frame using the prototyping tool, UXpin. The interactive prototype allowed users to experience the proposed functions of the app. I was able to get feedback in person and online. The feedback helped to refine my concept.

OnBoarding screen

User receives an alert when the pill supply is calculated to be down to a few days supply.

Alert message to user.


Studying UX has helped me focus my process. The idea that “You are Not the User” was repeated throughout the class. As a Designer I should focus on what the user’s needs are. They will be the one using a product daily, it’s their experience that matters.