What are your goals for this week?
- What are you building?
- What will be a good result by week’s end?
- Are you attending any events this week?
- Did you meet your goals last week?
Author: JarvisScript
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. 
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. 
CSS
.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.
CSS
.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. 
CSS
.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.https://christopherleejarvis.com/JarvisScript/?p=237&preview=true 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. 
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.
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.
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
README.mdto 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.
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];
inspire.style.display = "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.
Craft Content Nashville Voice part 2
“You don’t have to create, You get to create!” -today’s opening monologue
“Your audience must be first, foremost” -Alaina Shearer
“Gamification will increase user interaction” Mitch Canter
Final Take away
Don’t be afraid to use your voice!
Craft Content Nashville * Voice
Today I am at Craft Content Nashville. The UNconference is for the content creators and artist in digital media. The theme this year is Voice.
A few of the things I have learned so far today.
For those in leadership position we’re in a wonderful place to shape other view of their own worth. -Hannah Moyer
Skip the backstory. Get Into the story for immediate connection. -Megha Bradley
Embrace the line break. Break paragraphs into smaller ones to make post skimable.
-Pamela Wilson
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.
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?
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.
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.
Summary
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.
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 angusnelson.com. 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