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.

Saturday, 20 January

22:12

An Intro to Color Theory: How to combine colors and set the mood of your designs "IndyWatch Feed Education"

Were able to see different colors because of our retinas innate ability to differentiate frequencies of light waves.

Certain colors or shades evoke different sentiments in people. In this post, I want to give a quick introduction to color theory, ways to combine colors, and tools for designing with colorthat you as a designer can benefit from to make your designs delightful.

Lets start!

Different moods are attributed to different colors and you can use these different colors to achieve different ends.

  1. Red has been traditionally associated with Love, Energy, and Intensity. So a lot of car ads, or anything related to love are some shade of red.
  2. Yellow tends to be used for things to convey Joy, Attention, Intellect. Yellow is an incredibly attention-grabbing colour. However, yellow is not a good choice for the background of your app or as the main interface. Yellow can cause attention fatigue. Its an excellent choice for app icon design or app screenshot design.
  3. Green has been associated with Freshness, Safety, and Growth. This is why youll see most nature, healthy food, related companies use green for their branding.
  4. BlueStability. Trust. Serenity. No surprise why both Facebook and Twitter are blue.
  5. Purple stands for royalty. Wealth. Feminity. Purple tends to be used for women-targeted products. And luxury products.

To see these theories in action, start analyzing advertisements. After all, ads are really well thought-out experiments in persuasion and manipulating human psychology.

Next time you see an ad, try to see what techniques or design principles theyre using to make their design look beautiful and what emotion theyre trying to evoke.

Choosing a color palette is not all about advertising and attention-grabbing, though. Its also about selling your product and appealing to certain instincts or desires that people have.

So the next time youre designing an app/website, the first thing to think about is what emotions you want to evoke and ideas youre trying to convey to the user and pick a colour palette accordingly.

Read this to learn more.

How to combine colors to create color palettes

Now, of course youre not going to use the same color everywhere in your app. Youre going to need combinations of color that go well with eac...

22:01

Designing a font from scratch and submitting it to Google Fonts in 24 hours "IndyWatch Feed Education"

One Day Builds

Im a huge fan of Adam Savages One Day Builds. At the beginning of the day he starts with a pile of materials, and ends up holding something that he once coveted (this one is my favourite).

So with this in mind (and a day off from work), I set myself a challenge

Create an entirely new font, from scratch, and submit it to Google Fonts in under 24 hours.

I had a couple of letters already sketched out in an old notebook. I wanted to create a tall, sans-serif, display font that could be used in posters, or large scale artwork. In my early days at Mens Health, I would have to use fonts like Tungsten or Heron, which were terrible for chunks of body copy, but amazing when used in headlines, or for promotional material (which was my main job there). This was the style I set out to create.

(Very) rough sketches. Ugh.

1pm, Wednesday

I went straight to Adobe Illustrator with the two or three letter styles I had sketched out. I set up five grid lines on my artboard, one each for the descender line, baseline, x-height, cap height and ascender line. I then decided on a width for the capital letters, and from there, the thickness of the stem (e.g. the width of the letter I).

I did a lot of research on letter proportions and ratios, and actually measured some existing fonts, working out how the lowercase letters should relate to the caps. From here, I made some rules:

  • X-height = 2 height of ascender/descender.
  • Stem width = 1/4 capital letter width
  • Lowercase width = 3/4 capital letter width
The rules, illustrated.

From here I created the letters O and B first. I made a decision that any letters that would usually have curves, would have a rounded corner instead. Most letters would be a tall block shape, but with letters like O, B and D, the edges with curves would have rounded corners.

The outside corner would have a 12mm radius, and the inside had 6mm. With these rules agreed, plus a height for my crossbar (across the letter H) I started churning out my capital letters.

...

21:55

How to design a successful e-commerce app: UX lessons learned from Wish "IndyWatch Feed Education"

It doesnt exactly come as a surprise that shopping apps are a rising star on the modern mobile market. Money rules the world and the ability to spend wisely is a big advantage. This is exactly what the apps provide.

Lets start by discussing the buyers behavior when they use a mobile app. Here are some stats:

  • About 30% of the potential customers get frustrated and abandon the app because of the unsatisfying mobile experiencethats a massive figure that shows how important it is to not only develop and launch an app, but also to maintain it.
  • 90+% of all the purchases are made with multiple devices which means that customers switch devices and go from screen to screen while making a purchase in an online shop.
  • Even a slight delay may decrease the chance of a successful purchase. It is hard to believe, but the statistics show that every 0.1 second delay equals roughly a 1% decrease in sales. This proves that the app should be polished, and there is no excuse for faulty performance.

At the moment the share of mobile commerce in the US markets sits just under the 50% mark at about 4547%. This means that new companies have a chance to promote their goods and services in the market. At the same time this means that developers have more responsibility because they have to meet high standards if they want their app to be a successful project.

How did Wish prosper?

In the era of Amazon, eBay and Alibaba being dominant in the market, you need to come up with something absolutely new or perfectly refined in order to gain some popularity and to be able to fight for your own place under the sun. Thats exactly what Wish marketplace has done. The team that developed this app managed to combine these two factors.

Their idea was to launch an interactive wish list that at the same time would allow it to monetize itself by selling the real goods to real people for real money.

Wish currently occupies 5th place on the list of the most popular shopping apps in the USA, just behind two Amazon apps, eBay and OfferUp; it is already ahead of such giants as Walmart and Groupon. Thats a prominent achievement, and we can definitely learn a lesson from their story of success. Lets take a closer look at what exactly the Wish app is.

The concept is not really groundbreaking, but its the refined user experience that makes it shine. The app connects the customers and the merchants all around the world. Currently theres more than 100 million active customers and around 100,000 merchants. Wish positions itself as a bargain aucti...

20:54

How you can build your own VR headset for $100 "IndyWatch Feed Education"

My name is Maxime Coutt. Im 16 and I built my own VR headset with my best friends, Jonas Ceccon and Gabriel Combe. And it ended up costing us $100.

I started programming when I was 13, thanks to my math teacher. Every Monday and Tuesday, my friends and I used to go to his classroom to learn and practice instead of having a meal at the cafeteria.

I spent one year building a very basic 8-bit OS from scratch and competing in robotics contests with my friends.

I then got interested in VR and with my friends we agreed that it would be really cool to create our own world in VR where we could spend time after school. But facing the fact that an Oculus was $700 at the time, we decided to build our own headset.

3D printed parts of the headset

Making VR accessible to everyone?

DARROW; J. R. EYERMAN/THE LIFE PICTURE COLLECTION/GETTY IMAGES

It was because of an anime called Sword Art Online where the main character is in a virtual reality RPG that I fell in love with VR. I wanted to understand every aspect of it.

I bought the cheapest components I could and we started by learning the very basics of the physics and math behind VR (proper acceleration, antiderivatives, quaternions). And then we re-invented VR. I wrote WRMHL, and then FastVR with Gabriel. Putting all of this together, we ended up with a $100 VR headset.

A fully hackable VR headset and development kit

To speed up VR development time, we built FastVR, an open-source SDK for developers that is easy to understand and customize. It works like this:

  • The core headset computes the position of the headset in space;
  • The position is sent from the headset to WRMHL, and part of the CPUs power is dedicated to reading those messages;
  • Then FastVR retrieves the data and uses them to render the VR game.

Everything you need to build the headset has been open-sourced and can be hacked.

Why op...

19:03

How to make your data transformations more efficient using transducers "IndyWatch Feed Education"

Efficient Data Transformations Using Transducers

Transforming large collections of data can be expensive, especially when youre using higher order functions like map and filter.

This article will show the power of transducers to create efficient data transformation functions, which do not create temporary collections. Temporary collections are created when map and filter functions are chained together. This is because these functions return a new collection and will pass the result to the next function.

Imagine having records of 1,000,000 people and wanting to create a subset of names of women above the age of 18 that live in The Netherlands. There are different ways to solve this, but lets start with the chaining approach.

If this approach is new to you, or you want to learn more about it, Ive written a blog post on using higher order functions.

const ageAbove18 = (person) => person.age > 18;
const isFemale = (person) => person.gender === female;
const livesInTheNetherlands = (person) => person.country === NL;
const pickFullName = (person) => person.fullName;
const output = bigCollectionOfData
.filter(livesInTheNetherlands)
.filter(isFemale)
.filter(ageAbove18)
.map(pickFullName);

Below is the visualisation of using the chained approach that creates temporary arrays. Imagine the expense of looping over 1,000,000 records 3 times!

Of course, the filtered collections will be reduced by some amount, but its still quite expensive.

A key insight, however, is that map and filter can be defined using reduce. Lets implement the above code in terms of reduce.

const mapReducer = (mapper) => (result, input) => {
return result.concat(mapper(input));
};
const filterReducer (predicate) => (result, input) => {
return predicate(input) ? result.concat(input) : result;
};
const personRequirements = (person) => ageAbove18(person)
&& isFemale(person)
&& livesInTheNetherlands(person);
const output = bigCollectionOfData
.reduce(filterReducer(personRequirements), [])
.reduce(mapReducer(pickFullName), []);

We can further simplify the filterReducer by using...

13:56

I Built A Jupyter Notebook That Will Analyze Cryptocurrency Portfolios For You "IndyWatch Feed Education"

The amount of engagement in the crypto investment space needs no introduction. With market caps, volumes, and public awareness on the rise, I thought Id put together a simple Jupyter notebook to get a clearer and broader viewpoint into the investment activities within my own crypto portfolio.

TL;DR heres the code ;)

Why Should We Analyze Our Portfolios?

Because were definitely missing important details about our investments by only looking at the total value of our (potentially fat) walletseven though I enjoy looking at Blockfolio from time to time. Because seeing our Ripple go to the moon and overshadow the rest of our investments is likely increasing our financial risk substantially. Because we all want our money to grow, but achieving this by picking a diverse set of cryptos is easier and safer than picking a moonshot that could end up a dud (and make us broke).

And lets face it, the market gains are just too big for us to be left in the dark on the true characteristics of our investment portfolios.

Important Portfolio Characteristics

Now there are several characteristics of our portfolio that we should take a good look at, including return and risk. But a lot of the time were fixated on one and not the other.

We can look at return in several ways: the amount of money weve made from the beginning to the current date, the average rate of money weve made over specific time periods (e.g., annual returns), how much better our investments did when compared to several characteristics of a benchmark (e.g., alpha), and even the annual compound rate it would have taken to get to our current investment based on our starting point (i.e., CAGR).

As important, if not more, is how we look at risk and its effect on return. I dont know about you, but I want to make sure Im making a good return based on an amount of risk I feel comfortable with. If we take on a huge amount of risk to make one particular return when we could have taken much less risk to make that very same return, the path to take for a more efficient investment is clear.

This is where understanding volatility, correlations, and risk-adjusted returns come into play by computing statistics such as standard deviation of returns (or volatility), beta, the...

07:09

What exactly is Node.js and why should you use it? "IndyWatch Feed Education"

JavaScript as programming language and data format (JSON) has changed web development drastically. Integrating Node.js with it to do things on the server as well as in browser is a trend lately. These two sentences, we feel, have to be illuminated and explained for everyone to grasp. So in this article, we are going to talk about why use Node.js, what is Node.js used for and top examples of Node.js in use.

Surely, this is technological stuff for programmers/coders, and some might find the language not quite apprehendable. With this in mind, we will try to make it as light-some as possible and speak in more human terms. We just want to explain what makes Node.js great and what is all the hype about.

First off, the praise is well deserved, as Node decisively eased the work of anyone building web applications. After decades of web request/response paradigm, having real-time 2-way communication is a bliss. That is a communication between the server and the client. And that, in turn, is a model to distribute workloads among service providers (server) and service requests (clients).

On board so far? Great, now some statistical info about the demand for Node.js. It is by far the fastest growing language in use, and it ranks in Top-10 most wanted developer skills. The use of Node.js is mainly for full stack, front-end, and back-end.

What is Node.js?

As weve previously touched on this in Best Node.js examples, Node.js is a JavaScript runtime environment. But what is that, one might ask. By run-time environment, the infrastructure to build and run software applications is meant. To build applications in JavaScript, in this case. Lets see what are the Node.js definition versions.

The company itself describes Node.js as a JavaScript runtime built on Chrome V8 engine. Wikipedia states, that Node.js is an open-source and cross-platform environment to execute code. According to TechTarget, it is
a development platform aimed at building server-side applications. And PCMag tells us that Node.js is a platform with its own web server for better control. That is certainly enough to grasp the main idea.

A brief summary would be as goes:

  • Node.js is a server framework, and is free
  • It runs on Windows, Linux, Mac OS, and so on
  • Node.js utilizes JavaScript on the server
  • ...

01:04

[PODCAST] #539: School Is A Choice A Conversation With A Real Public School Teacher "IndyWatch Feed Education"

Special occasion! Brian Huskie is a public school teacher in New York. He joins me to discuss his discoveries about public school over ten years of teaching, his process of coming to terms with those discoveries, and the solutions he is working to develop. Brian founded a self-directed learning program called Huskie's Heros that we'll ...

00:42

Why I changed the way I think about Code Quality "IndyWatch Feed Education"

80% of the code that makes up the Matrix is unnecessary bloat.

What do you think about when you think about code quality?

Is it consistency? Enforcing a set of standards and best practices on your code through linter rules and formatters? How about ensuring your code has tests that run automatically during your build process? What about pull requests and code reviewsprotecting your master branch from direct commits and having peers review your code?

Theyre some of the things that come to mind for me. Automated processes and manual checks. Smart and efficient. Yet, while theyre all useful, they really only address half of the problem.

We cant automate everything

Automation is crucial for maintaining code quality. Static analysis of your syntax with a linter and automated testing should be mandatory. But I can write code that passes all the automated processes without any guarantee to its actual quality.

Does the code follow established patterns? Does it use existing modules, or does it duplicate code? Is everything named sensibly? Is the code in the right place in the codebase? Will this change have wider, unintended, implications? Does this code actually address/solve what it intends to? Does it even work?

Automated processes cant answer those questions for you (yet). If you (or another human being) arent asking these questions of your code, then youre probably not shipping quality code. Thats why we have code reviews.

A good code review should be about more than the code

Of course a code review should be about the code (its right there in the name after all). But it should also be about the broader questions posed above, and also about the end product.

Ive noticed a tendency for developers to treat code reviews as perfunctory. A rudimentary check of the modified code. A comment on any obvious mistakes (or just picking a nit or two to look busy).

Five minutes, job done. Looks good to me.

But, code that doesnt address the requirements of the task is not quality code. Code that produces console errors or visual bugs in the device/browser is not quality code. Neither of those things can be picked up in a perfunctory code review. You cant adequately review code unless you actually run it.

I propose that a good code review should involve at minimum:

  • Pulling down the branch to a local environment.
  • Building the project (and checking that the linter and tests all pass).
  • Checking that the code runs error free in the target browsers/...

00:38

Callbacks and Promises Living Together in API Harmony "IndyWatch Feed Education"

How to update a callback based API to support Promises as well.

Totally not the answer 

*APIapplication programming interface. Sometimes referred to as a module. It is a collection of methods and variables developers can utilize in their own application.

Watch the accompanying Real Coding episode here 

Callback Functions

Many JavaScript APIs and modules provide a final parameter in their methods for something called a callback method. Most of the time youll see this defined as done, next, callback, or cb (abbreviation for callback). Callback functions are incredibly useful because it enables other developers get more out of your function such as error handling and asynchronous requests. For example, an API method may produce a variety of errors and these errors, if not properly handled, can bring down an entire application. An API utilizing callback methods should be returning all Error objects as the first parameter in the callback. It is assumed that the first parameter in a callback function is always an error instance.

The function below is a simple example. Its purpose is to double the parameter x and return it via the specified callback function. error starts as null. If any of the conditional checks fail, an Error instance is assigned to error . Then if error exists (it is not null or undefined), then we do not double x and we set the variable double as null; otherwise, x is doubled and assigned to the double variable. After everything is done the function doublePositiveOnly will return the callback method with the first parameter referencing the error variable and the second parameter referencing the double variable.

function doublePositiveOnly(x, callback) {
let error
if ( !x )
error = new Error('x must be defined')
if ( typeof x !== 'number' )
error = new Error('x must be a number')
if ( x < 0 )
error = new Error('x must be positive')

const double = error ? null : x * 2
  return callback(error, double)
}

How would you use this function?

doublePositiveOnly(16, function (err, result) {
if (err) console.error(err.message)
console.log(result)
})

Promise Functions

Promise functions in production are easy to recognize as they utilize .then and .catch methods to return information back to the user. Nearly all callback functions can be replaced by promises, so lets rebuild our doublePositiveOnly method using promises.

function doublePositiveOnly( x ) {
return new Promise(function (resolve, reject) {
let error
if ( !x )
error =...

00:31

The iPhone Xs TrueDepth IR Camera: A Universe of Possibilities Beyond Animojis and Face ID "IndyWatch Feed Education"

(Photo credit: Apple)

More than two months after the iPhone X launch, it remains a conundrum for some to put a finger on exactly which features might justify the $1000+ price Apple has given its flagship phone.

Some might wager on the virtually edge-to-edge OLED display, which for the first time on an iPhone, does away with the tactile home button and prominent top and bottom bezels of every previous model. It is admittedly gorgeous.

As it turns out, however, the iPhone Xs most groundbreaking feature is not even discernible at first glance, even though it literally stares you in the face.

Meet the TrueDepth IR Camera

Apple has been dogged by perceptions that the companys product roadmap has grown conservative and predictable in the six years following Steve Jobs passing. The new TrueDepth IR camera, as Apple calls the iPhone Xs secondary front-facing camera, could well help Apple dispel those rumors of complacency.

New to the iPhone X and housed in the black notch at the top of the display, the technology includes a number of high tech components such as a flood illuminator, infrared (IR) camera, and an infrared emitter. The latter emits 30,000 infrared dots in a known pattern when a face is detected, enabling the iPhone X to generate a 3D map of a users face. Notably, the TrueDepth IR camera can do this fast enough to support the creation of 3D motion data as well.

TrueDepth IR can create a 3D map of your face using an infrared camera and emitter. (Photo credit: Apple)

At present, there are currently two supported use cases for the new TrueDepth IR camera on the iPhone X:

  • Animoji, or animated emojithe camera animates a 3D emoji with your captured facial expressions, which you can then send via Messenger or SMS.
  • Face IDthe camera uses a locally stored 3D image of your face to authenticate and unlock your iPhone X. Because it uses 3D image data, its much harder to trick than previous mobile face recognition systems that used a 2D image and therefore could be fooled with a photo.
Animojis are certainly fun, but they only scratch the surface of whats possible. (Photo credit: Apple)

Whatthats it?

Admittedly, the current use cases for this technology are limited.

Animoji are just emoji wi...

00:09

How to get HTTPS working on your local development environment in 5 minutes "IndyWatch Feed Education"

Almost any website you visit today is protected by HTTPS. If yours isnt yet, it should be. Securing your server with HTTPS also means that you cant send requests to this server from one that isnt protected by HTTPS. This poses a problem for developers who use a local development environment because all of them run on http://localhost out-of-the-box.

At the startup Im a part of, we decided to secure our AWS Elastic Load Balancer endpoints with HTTPS as part of a move to enhance security. I ran into a situation where my local development environments requests to the server started getting rejected.

A quick Google search later, I found several articles like this, this or this one with detailed instructions on how I could implement HTTPS on localhost. None of these instructions seemed to work even after I followed them religiously. Chrome always threw a NET::ERR_CERT_COMMON_NAME_INVALID error at me.

The problem

All the detailed instructions I had found were correct for the time they were written. Not anymore.

After a ton of Googling, I discovered that the reason for my local certificate getting rejected was that Chrome had deprecated support for commonName matching in certificates, in effect, requiring a subjectAltName since January 2017.

The solution

Well be using OpenSSL to generate all of our certificates.

Step 1: Root SSL certificate

The first step is to create a Root Secure Sockets Layer (SSL) certificate. This root certificate can then be used to sign any number of certificates you might generate for individual domains. If you arent familiar with the SSL ecosystem, this article from DNSimple does a good job of introducing Root SSL certificates.

Generate a RSA-2048 key and save it to a file rootCA.key. This file will be used as the key to generate the Root SSL certificate. You will be prompted for a pass phrase which youll need to enter each time you use this particular key to generate a certificate.

openssl genrsa -des3 -out rootCA.key 2048...

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