IndyWatch Education Feed Archiver

Go Back:30 Days | 7 Days | 2 Days | 1 Day

IndyWatch Education Feed Today.

Go Forward:1 Day | 2 Days | 7 Days | 30 Days

IndyWatch Education Feed was generated at Community Resources IndyWatch.

Monday, 18 September


Homeless iPhone (Part 2) "IndyWatch Feed Education"

Pause. Rewind. Deep dive in the design process.

Two weeks ago I posted about the possibility of an iPhone that has no Home button at all.

With iOS 11 on an iPad you enjoy a whole new app switcher. As a little design challenge, I study how this UI could work on the imminent iPhone 8, and whether it could cater for the absence of Home button.

Today Ive paused the exploration, and Im walking you through the design process. Well review my sketches in detail, see what they reveal about the train of thought (ouch!), and look at a couple of prototype variants that youll be able to download and try.

Being process-oriented, not product-driven, is the most important and difficult skill for a designer to develop.
Matthew Frederick

Sketches and prototypes below are provided as is, they havent been modified at all for the sake of this article. I include raw scans of my large sketch boards, so the post is probably best viewed on desktop or tablet.


I always keep my sketches and notes. Theyre useful to review in slow motion what has happened in the mind, assess the reasoning, and have a fresh look at germinating ideas that were forgotten on the road side.

For this project I used two A3 sheets. Lets comment the key screens:

1. Trying to force-fit the iPad design. In that first attempt, everything is on a single horizontal scroll view. And theres a Home button! False start.
2. Trying again. But stopping fast since clearly, its not going to work. My proportions are completely unrealistic. Lack of discipline.
3. A more realistic ratio. I finally acknowledge its a very long phone Im dealing with (6/13 ratio). Im going to need my imagination. The whole view now scrolls vertically, with apps on 2 columns. An accident happens here: my focus has now shifted to the iPhones Control Centre (that Im probably examining on my iOS 11 phone, as a model for the sketch). Im misled and add the little chevron at the top, meaning swipe down to close.
Sheet 1 of 2
4. A potential conflict. Because I now wrongly assume the UI can be swiped down, I worry this is going to interfere with my vertical scroll. I capture this in a side note: KO since swipe needed to close overlay. I...


JavaScript from callbacks to async/await "IndyWatch Feed Education"

Thomas Kelley

JavaScript is synchronous. This means that it will execute your code block by order (after hoisting*). That is, unless you use a timer or request which are asynchronous.

Asynchronous requests will wait for a timer to finish or a request to respond while the rest of the code executes. Thenwhen the time is righta callback will spring these asynchronous requests into action.

For example, this is synchronous code:


This code will reliably log 1 2 3".

On the other hand:

setTimeout(function afterTwoSeconds() {
}, 2000)

This will actually log 1 3 2, since the 2 is on a setTimeout which will only execute, by this example, after two seconds. Your application does not hang waiting for the two seconds to finish, it instead keeps executing the rest of the code and when the timeout is finished it returns to afterTwoSeconds.

Why is this useful? or How do I get my async code to become sync? may be some of the questions you may be asking and hopefully I can show it to you.

*Hoisting is where before code execution, var and function declarations are hoisted to the top of their scope. You can read more in detail about hoisting here.

The problem

Let us say our objective is to search for a github user and get all the repositories of that user, the thing is we dont know the exact name of the user so we have to list all the users with similar name and their respective repositories.

Doesnt need to super fancy, something like this

So much style, wow! You can find this bootstrap here

For the examples the request code will be done with XHR (XMLHttpRequest) but you can replace it with jQuery $.ajax or the more recent native approach called fetch, both will give you the promises approach out of the gate. It will be slightly changed depending on the approach but as a starter:

// url argument can be something like ''
function request(url) {
const xhr = new XMLHttpRequest();
xhr.timeout = 2000;
xhr.onreadystatechange = function(e...


Why Docker makes sense for startups "IndyWatch Feed Education"

Mandatory container metaphor is mandatory. Credit: chuttersnap

Docker is becoming the standard to develop and run containerized applications.

Long ago, this piece of technology might have made sense to system administrator and PaaS (Platform as a Service) providers. But weve been hearing rather little from startups about their Docker adoption. Particularly the 1to-10-employee-strong ones. This is an impression that somewhat correlates with Datadog HQs recent research:

guess this story could have been more timely written in 2015.

In case youre unsure if its worth the trouble, we thought wed reveal how much adopting a container-friendly architecture has helped our startup. And why you might take Docker for a spin if you havent yet.

The Development Experience

If you work in a small two pizza startup, theres a high chance people in your team are a multidisciplinary lot. Once projects are no longer siloed, youll receive a warm welcome into development environment hell.

Consider a simple scenario of a front-end engineer needing a not-yet-in-production API from a back-end. You could overcome this by making do with mocked data, or setting up staging environments. These are great. But nothing beats the agility of running integrations against the back-end code itself.

Tools like docker-compose did wonders for us. All a newcomer has to do is install a single thing. It is a a large thing. One invocation of docker-compose will have Docker setup everything for you so you can jump straight back into coding.

The declarative nature of these tools provides a simple description of how runtime components talk to each other. This makes reasoning about your top-level architecture all the easier.


As well as being useful in development, Docker also brought us simplicity when packaging our code for production. This is because it makes development and production environments all the more symmetric. That is a point made by 12factor...


Up next: nothing? How information overload is impacting our brains. "IndyWatch Feed Education"

The ol red dot.

15 years ago, I made two major choices before I went to school in the mornings. I picked what cereal I would have (how good were Ricicles?), then sifted through my CD collection before popping one into my Discman for the day.

Thanks for the image, Reddit

Sure, there were some other micro-decisions in there. But with these two major choices out of the way, I could get ready for school and pop down the road to the bus stop, cranking my CD of choice. It was probably ska punk. (And Im not embarrassed by that in the slightest).

Id arrive at the bus stop and hang out, waiting for the bus to come. Listening to my music. Id get on the bus, stare out the window and keep listening. The album would probably be repeating by the time I got to school, disconnected, and went into the music rooms to play guitar.

This is a completely unremarkable story. My mornings were not exciting.

Then vs. now

However, try being a kid going to school today. Most adolescents own at least one device. According to Pew Research Centre, 73% of teens had access to smartphones a couple years ago.

Think of that same journey I took 15 years ago. Today, its not so simple. Armed with a smartphone and a Spotify subscription, the music choice grows from around 50 CDs to over 30 million songs. Even when you manage to choose an album, what are the chances youll keep listening until the end?

Never mind the overwhelming choice of songs. Theres the notifications youll encounter along the way. Vibrate. Facebook memory. Vibrate. Someone mentioned you on Twitter. Vibrate. Someone viewed your LinkedIn profile.

Thanks Meme Generator for this one

Gone are the days of staring out the window. On my tram rides these days, all I see are people staring down, engaged in screen time. Whether theyre playing games, checking on social media, or engaging in notifications, suddenly listening to music isnt the primary activity. Its the supplement, the background music to our own little smartphone worlds.

This matters.

I care about thisbut not because I think we should all be paying...


How I built a Smart Mirror, with a little help from my daughter and her grandpa "IndyWatch Feed Education"

This month I built a smart mirror with my dad and daughter. This project spanned across three generations.

The idea started a few years ago with the novelty of a smart mirror. But before I was going invest the time and money to make one, I needed a practical reason to build one. Recently that reason presented itself.

In our kitchen we have a whiteboard where we list out our dinner plans for the week and I wanted to upgrade it. I submitted a presentation idea for the smart mirror at local tech conference. My smart mirror presentation was selected. This accelerated my timeline.

Programming the Smart Mirror with my Daughter

I needed help with the design of the smart mirror frame

since I live in the digital world designing software that lives in the cloud. My dad is a Mechanical Engineer who lives in the physical world designing the planes we fly though the clouds everyday. While talking with my dad one evening, he suggested to create some initial sketches of the mirror.

Initial Design of Smart Mirror

After a few more conversations with my dad and several design revisions, we settled on a simple box design for the frame. My dad knew more about woodworking than I did, and he had a few suggestions for me.

Like using cabinet draw sides for the sides of the frame as they already came with a groove to hold the glass. And using french cleats to secure the mirror to the wall. This also allowed it to be easily removed for transport.

Revised Design of the Smart Mirror

My wife was a huge support in this endeavor. She helped by sorting through dozens of televisions looking for the right price and features. The size had to be large enough for our kitchen, but not too large to make transporting a hassle. Finally she was able to get a television from Best Buy that had everything I was looking for. And the best part was that it was on sale.

The most noticeable part of the smart mirror is the reflective mirror. Most household mirrors are made from glass. But the biggest downside to using glass is that its fragile and doesnt transport well. I chose plastic as its lighter, more transparent, and more durable.

Its nice to talk to experts and I live in Seattle which has a great local plastic supplier. They were excellent and able to help me select the correct plastic. They suggested acrylic and we even tested the mirror film I had acquir...


[PODCAST] #513: Building Self Directed Learning Communities (With Diane Murphy) "IndyWatch Feed Education"

(FreeCoast Fest - Day 2 - Dover, NH) Diane Murphy taught in public schools for 30 years before she retired early to build BigFish, an innovative self-directed learning community in Dover, NH. I had the pleasure of speaking with Diane at the FreeCoast Festival and of hearing her presentation on BigFish. We sat down to ...


Do You Blog About Math? "IndyWatch Feed Education"

by Mike Licht,

Its carnival time again. Activities, games, lessons, hands-on fun if youve written a blog post about math, wed love to have you join our Math Teachers at Play (MTaP) math education blog carnival.

Posts must be relevant to students or teachers of school-level mathematics (that is, anything from preschool up through first-year calculus). Old posts are welcome, as long as they havent been published in past editions of this carnival.

Click here to submit your blog post

Dont procrastinate: The deadline for entries is this Friday, September 22. The carnival...


Haters gonna hate: what we can learn from Facebooks 2006 news feed redesign "IndyWatch Feed Education"

Imagine youre a software developer. You get put on a team to redesign a core feature of your companys application. You spend months collecting user data, prototyping, testing with users (they love it!), and building the application. And today it goes live.

As soon as your feature goes live, phones start ringing, emails start pouring in, and your CEO has to make a public apology. Because everyone hates the redesign.

Imagine hundreds of thousands of people protest the change. They start anti-your-feature webpages. They boycott your product en masse. Time magazine writes an article dissecting your failure.

Its not this bad. Or maybe it is.

Youd probably start updating your LinkedIn profile and rsum (omitting this fiasco, of course), expecting to get axed as soon as the CEO is done cleaning up your mess.

Now imagine that everyone was wrong. Youd done your research. Youd tested with users (they loved it!). Imagine that, while hundreds of thousands protested, others used the redesigned product and profits soared. Imagine your redesign actually changed the world and how people interacted in it forever.

Its a true story

Its my favorite design storythe story of Facebooks News Feed. I lived in a college town when Facebook rolled out its News Feed feature in 2006. I could literally hear the students rebelling.

Within 24 hours, hundreds of thousands of students nationwide organized themselves to protest the new feature.Time, Sept. 6, 2006

People went hard on Facebook. It seemed like everyone was weighing in and 100% of the response was negative.

The pattern of events in the Facebook world recently is such that it seems like Mark Zuckerberg is writing a How To book about ruining social networking sites.typical sentiment from bloggers in 2006

Of course, we all know the outcome of this story over a decade later:


The News Feed stuck around, the Mini Feed became the Timeline, Mark Zuckerberg became...

Go Back:30 Days | 7 Days | 2 Days | 1 Day

IndyWatch Education Feed Today.

Go Forward:1 Day | 2 Days | 7 Days | 30 Days

Sunday, 17 September


Declarative GraphQL: write less code and get more done with graphql-tools "IndyWatch Feed Education"

Ive been working with GraphQL for a few months now, but only recently began using Apollos graphql-tools library. After learning a few idioms, I am able to mock up a functional API quickly. This is largely due to its low-code, declarative approach to type definitions.

Starting with their example

Apollo has an interactive LaunchPad web site, like the ones covered in my Swagger series. There are several example schemas you can use, and for this article I will use their Post and Authors schema. You can download or fork the code.

I will be rearranging the project folders. For this post Ill download and store it in Github, so I can branch and modify the code through each step. Along the way, Ill link the branches to this post.

The basics

  • declaring schema types

In the Launchpad, youll see a typeDefs template literal:

const typeDefs = `
type Author {
id: Int!
firstName: String
lastName: String
posts: [Post] # the list of Posts by this author
type Post {
id: Int!
title: String
author: Author
votes: Int
# the schema allows the following query:
type Query {
posts: [Post]
author(id: Int!): Author
# this schema allows the following mutation:
type Mutation {
upvotePost (
postId: Int!
): Post

There are two entities defined, Author and Post. In addition, there are two magic types: Query and Mutation. The Query type defines the root accessors. In this case, theres an accessor to fetch all Posts, and another to fetch a single Author by ID.

Note there is no way to directly query for a list of authors or for a single post. It is possible to add such queries later.

  • declaring resolvers

Resolvers provide the necessary logic to support the schema. They are written as a JavaScript object with keys that match the types defined in the schema. The resolver shown below operates against static data, which Ill cover in a moment.

const resolvers = {
Query: {
posts: () => posts,
author: (_, { id }) => find(authors, { id: id }),
Mutation: {
upvotePost: (_, { postId }) => {
const post = find(posts, { id: postId });
if (!post) {
throw ne...


How to build a dashboard for your grill using Arduino and React "IndyWatch Feed Education"

When should I use React? My students at DigitalCrafts have been asking me this question a lot lately.

Were three months into the bootcamp and two days into React. Several students have commented that React has a weird mix that combines the familiar with the foreign.

And naturally so. It looks like a bizarre mix of JavaScript and HTML, while having the one-way rendering sensibilities of Express and Handlebars.

My favorite go-to answer is dashboards. React is great for creating panels that independently update information. It is the kind of UIs that is a nightmare to build using jQuery.

Then they ask, Ok, like what?

And then I show themPitMaster.

PitMaster! Look at it in all its majesty.

First, a confession: I have an unnatural love for barbecue. If Im not eating barbecue, Im making a barbecue. (In the Southern United States, barbecue is a noun, not a verb. It is the process of exposing meat to low-temperature smoke for hours.)

Last Thanksgiving, in anticipation of being extremely lazy, I built a device that monitors the progress of turkey cooking in a smoker. The results were displayed in real time on a web page. Granted, a turkey does not take long to cook when compared to other kinds of meat. And I am really not that lazy, but I had a grander vision in mind.

Picture this: youre 12 hours into an 18-hour smoke, and youd really rather not get off the couch to check the temperature yet again. Besides, you shouldnt open the smoker during the cook, thereby causing a massive temperature fluctuation.

The details of the hardware could fill another blog post, but here is a rough sketch of it.

Poke a food-safe, high-temperature thermal resistor (thermistor) into the food just before you place it into the smoker. A thermistor is a piece of hardware that changes its electrical conductivity as its temperature changes. A long wire runs from the thermistor to an Arduino.

The Arduino runs a program that converts the analog reading from the thermistor to a digital value. A Raspberry Pi polls the Arduino for this value every few 100 milliseconds, logs it to a file, and then pushes it to any client connected via WebSocket.

It may sound fancy, but heres what the contraption actually looks like.

See the red light-emitting diode (LED)? My wife dubbed the contraption Roxanne.

Originally, the UI for displaying the current temperature was, to put it plainly, reall...


How to build the freeCodeCamp Voting App project an in-depth tutorial "IndyWatch Feed Education"

Photo by Johannes Plenio on Unsplash

The voting app challenge on freeCodeCamp was the first freeCodeCamp project in the curriculum that struck me as really hard. I just couldnt do it as easily as all the other challenges. So much knowledge in of so many concepts is necessary to build it.

I didnt find any tutorials or examples that broke this challenge down with up-to-date tools. So I decided to document my process of building it.

In this tutorial, will use:

  • MongoDB
  • Express
  • React + Redux
  • Node.js

also known as the MERN-Stack.

Functionality of the app
I fear not the man who has practiced 10,000 kicks once, but I fear the man who has practiced one kick 10,000 times.
Bruce Lee

What this article is about

I will describe the process of building the voting app for the freeCodeCamp challenge.

This is not an optimized example for building the application. I am open for feedback of any kind. I am still a beginner and also left some things open.

This is not designed as a tutorial! Its simply a documentation I wrote while building the app.


I will divide this article into sections of back-end, front-end, data visualization and the deployment process. The project will be available as open source code on GitHub. That is where you can follow up with commits and the end result.

Development Environment

Packages / Features / Dependencies


  • (...

Wednesday, 15 July


(not so) Wordless Wednesday #3 "IndyWatch Feed Education"

This post contains no Affiliate Links.

     Guess what time of the year it is? School shopping time! Well, maybe not officially, but Walmart put out their school supplies already. The kids and I took a moment to take advantage of some great deals. Alex will be attending the local college and I will be homeschooling Zoey again this year. Need to watch every dime and take full advantage of the sales while they are going on. 

"How much does homeschooling cost?" You ask.

      You can check on our article HERE or by clicking the photo below. 

Are we the only family that gets this excited? 
We <3 your comments! 


IndyWatch Education Feed Archiver

Go Back:30 Days | 7 Days | 2 Days | 1 Day

IndyWatch Education Feed Today.

Go Forward:1 Day | 2 Days | 7 Days | 30 Days

IndyWatch Education Feed was generated at Community Resources IndyWatch.

Resource generated at IndyWatch using aliasfeed and rawdog