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, 15 December

13:31

Reflections on being an indie hacker freeCodeCamp.org - Medium

Reflections on Being an Indie Hacker

Spent a week in Wells, VT to disconnect from work and reflect on all the things!

My name is Tigran and by definition, Im probably a half-indie hacker. Why half you may ask? Because Im a full-time software engineer at Buffer but at the same time Im building an online profitable side-business called Cronhub.

If we think how one of my favorite Internet sites, Indie Hackers defines it, I think I fit into that definition but not quite.

How IndieHackers.com defines indie hacker

I generate money independently through the product Ive created but also have a primary source of income which is my employer. Im a solo founder and have been bootstrapping Cronhub for the past 8 months or so. As you see I may have the rights to call myself an indie hacker, right? If your answer is yes then lets read my story further. Also, Ive written another article if you like to read more about how I work remotely.

I wanted to be an indie hacker for multiple reasons but the biggest motivation has always been my passion for building products. In the past, Ive built other side-projects that were free. I even created a side-project when I was studying at Rochester Institute of Technology (RIT) called Wheelie. It became the official ride-sharing online platform for RIT students. However, Ive shut it down two years ago due losing my interest for the product as well as worrying too much about safety issues. So yes, I love side-projects because its fun and you get to learn a wide range of skills.

Another reason why I started Cronhub is financial income. I understand that money doesnt necessarily buy happiness but it can buy freedom and I think its a big deal at least for me. Not having enough money is always very stressful and making money is usually more fun.

For the past year or so Ive started to value my time a lot and decided if I ever get involved in side-projects it wont be for free. Having a full-time job and a family doesnt give you too much free time so I better justify what I spend my time on. This thinking really changed my perspective on things that I was keen to work on. This article is a reflection of that journey.

The motivation behind this article

The motivation for writing this article is primarily based on wanting to share my knowledge and experience with others who are thinking of becoming an indie hacker. When I started this journey I always enjoyed reading other peop...

09:18

What not to save into a Git repository freeCodeCamp.org - Medium

https://medium.com/media/33cc57e35154ae349a9f32018a462569/href

You should not commit these four types of files into your Git repository.

  1. Files that dont belong to the project
  2. Files that are automatically generated
  3. Libraries (depends on the situation)
  4. Credentials

Files that dont belong to the project

Files like .DS_Store (for Mac OS), Thumds.db (for Windows), .vscode (for code editors) have nothing to do with your project.

They should not be checked in.

Files that are automatically generated

This includes files from preprocessors (like Sass to CSS). You dont check in the CSS. You check in the Sass files.

If you use JavaScript compilers like Webpack or Rollup, you dont check in the generated JavaScript file. You check in the code you write.

Libraries

If you dont use a package manager, you should check in your libraries. This is because if you want to download the library, you have to:

  1. Google for the library
  2. Get to the website
  3. Find the link
  4. Download the library
  5. Put into your project

This process is tedious. If your code needs the library to work, you should check in the library.

On the other hand, if you use a package manager, you shouldnt check in a library because you can install the library with a single command like npm install.

Credentials

You shouldnt store credentials like usernames, passwords, API keys and API secrets.

If someone else steals your credentials, they can do nasty things with it. I almost lost $40,00 to $60,000 because a friend accidentally exposed my amazon credentials. Luckily, the amount was waived.

If you dont want to get into sticky situations like I did, then dont store your credentials in a Git repository.

Thanks for reading. Did this article help you in any way? If you did, I hope you consider sharing it. You might help someone out. Thank you!

This article was originally posted at my blog.
Sign up for my newsletter if you want more articles to help you become a better frontend developer.

...

05:07

A Thorough Introduction to Distributed Systems freeCodeCamp.org - Medium

What is a Distributed System and why is it so complicated?

A bear contemplating distributed systems

Table of Contents

Introduction

  1. What is a distributed system?
  2. Why distribute a system?
  3. Database scaling example

Distributed System Categories

  1. Distributed Data Stores
  2. Distributed Computing
  3. Distributed File Systems
  4. Distributed Messaging
  5. Distributed Applications
  6. Distributed Ledgers

Summary

Introduction

With the ever-growing technological expansion of the world, distributed systems are becoming more and more widespread. They are a vast and complex field of study in computer science.

This article aims to introduce you to distributed systems in a basic manner, showing you a glimpse of the different categories of such systems while not diving deep into the details.

What is a distributed system?

A distributed system in its most simplest definition is a group of computers working together as to appear as a single computer to the end-user.

These machines have a shared state, operate concurrently and can fail independently without affecting the whole systems uptime.

I propose we incrementally work through an example of distributing a system so that you can get a better sense of it all:

A traditional stack

Lets go with a database! Traditional databases are stored on the filesystem of one single machine, whenever you want to fetch/insert information in ityou talk to that machine directly.

For us to distribute this database system, wed need to have this database run on multiple machines at the same time. The user must be able to talk to whichever machine he chooses and should not be able to tell that he is not talking to a single machineif he inserts a record into node#1, node #3 must be able to return that record.

...

04:51

What does yoga have to do with programming? freeCodeCamp.org - Medium

You might be surprised.

source

At first sight, there are a few fields as distant as programming and yoga. One requires sitting or standing behind a desk, deep focus, and highly developed logical skills. The other is all about mindfulness, flexibility, and deep breathing.

I had been doing yoga for a couple of years already before joining a coding boot camp in Lisbon. I was so delighted to see that Le Wagon included a yoga session in a weekly schedule that I could almost feel my neck muscles relaxing when I read it. Being a multipotentialite, I love unexpected combosand the intersection between web development and yoga is one of them. And Ill tell you a secret: Im not alone.

So there were things I expected to get out of doing yoga during the bootcamp:

  1. Increased flexibility after sitting still for hours.
  2. Better mobilitysince Ive had issues with sciatica for years now, I knew I just couldnt afford not to do some form of exercises, and so it happened that yoga met my needs best.
  3. Relax. Since a coding bootcamp = very busy schedule, setting aside an hour or two to only focus on yourself is a great way to unwind.
source

Working as a programmer, you are constantly exposed to shifting feelings. One day you feel like youre on top of the world as that little JavaScript element finally started doing what you wanted it to, the next day you spend hours chasing a bug that turns out to be something as trivial as a typo (refreshing your browser and not understanding why your changes are not being applied, only to discover youve been staring at production, not development, anyone?). This job can be a lot of fun, but you also need ways to handle the frustrations, self-doubt, and short deadlines.

You might carry in your mind the idea that yoga is a stretching activity mainly for women who dont understand real physical activity, as public opinion is often telling you. If so, I encourage you to try it at least once.

Just try to choose a good, experienced teacher rather than one of those slack training-center classes where the main focus is on looking good and not sweating too much. Perhaps, just perhaps, you might change your mind.

During my time at Le Wagon I discovered some unexpected benefits of yoga and was surprised by how regular practice was influencing my progress in learning programming. I happily continue to take advantage of all these discov...

04:46

How I went from stay-at-home mum to Front-end Web Developer freeCodeCamp.org - Medium

Photo by: Matthew Henry

I thought about writing about my personal coding journey many times, but never had the courage to do so. I was dismissive and thought: Why would anyone want to read this?

Developers come from all walks of life. However, I want to talk about learning to code with young children, and the challenges of juggling parenting and studying.

My background

Im not a conventional candidate for becoming a web developer. I went down a humanities route and I have no computer science background. I fell into a career in Higher Education and for over a decade I moved up the ranks in administration. I enjoyed my work but wasnt fulfilled by my career choice.

About seven years ago in search for a new career path, I sought advice to get into a more technical role. So I started learning the web fundamentals: HTML and CSS. I used Codecademy. My first attempt at coding was half-hearted. Fear was the main reason. I feared that the transition would take too long. I also got distracted by my upcoming wedding.

6 years laterone husband, a flat, and two babies under two!

I had my first baby in January 2015. In a nutshell, having my son was a shock to the system and completely turned my world upside down. The sleep deprivation felt like torture and I had difficulty with breastfeeding. I was in a zombie state for the first six months.

As things started to settle down, I found out that I was pregnantagain. This was during my first week back at work! My daughter was born in September 2016. Now I had two babies under twenty months!

Realization, motivation and career change

By mid 2017 at the age of 34, I decided to leave my job. I did this for two reasons. It was no longer financially viable for me to work and have my children in childcare. It was difficult to work full-time, while looking after two young children with a husband who worked away a lot.

The thoughts I had seven years earlier never went away. I could wait until the children were older and start to look for part-time work, or to finally pursue a job in tech. My husband, who already works in the tech industry, gave me the same advice.

Learn the fundamentals: HTML, CSS and JavaScript. With a combination of these three skill sets I knew I could become a front-end developer.

freeCodeCamp and the start of my coding journey

I researched which online learning platform I should follow. I read good things about freeCode...

01:26

Want amazing free coding tutorials? Subscribe to these YouTube Channels. freeCodeCamp.org - Medium

Want excellent free coding tutorials? Subscribe to these YouTube channels.

There are so many great FREE software tutorials and courses on YouTube!

I run the freeCodeCamp ad-free YouTube channel. We have full video courses and tutorials on many popular programming languages and frameworks (including JavaScript, Python, Java, Ruby, C, C++, Angular, and more).

Ive also come across many other YouTube channels that provide amazing free programming tutorials. The free tutorials on these channels are as good or better than ones you would pay for.

In this article I list ten YouTube channels you should subscribe to if you want to improve your coding skills. These are in no particular order.

It can be very helpful to watch tutorials on the same topic from different creators. Learning from multiple perspectives can help you understand the concepts in a deeper way.

There are many great channels that I did not have room for on this list. Let people know in the comment section about other channels they should check out for free programming tutorials.

Coding Train

The Coding Train

It takes a lot of skill to record high quality tutorials live with no editing. But that is exactly what Daniel Shiffman of Coding Train does. His teaches complicated topics in a fun way that is easy to understand for beginners. Once you see the channels introduction video, you will know why you need to subscribe immediately.

Traversy Media

Traversy Media

Brad Traversys passion for excellence really shows off in his videos. His no-fluff style is friendly and down-to-earth. He seems to understand exactly what self-taught programmers need to know. His channel features tutorials on a wide variety of web development frameworks and languages.

Derek Banas

Derek Banas

Derek Banas is truly the jack-of-all trades programmer. He has professional-level tutorials on almost all popular (and some less popular) programming languages. He currently has more subscribers than anyone else on this list and it is completely deserved. His channel is a good fi...

Friday, 14 December

21:44

An introduction to high-dimensional hyper-parameter tuning freeCodeCamp.org - Medium

Best practices for optimizing ML models

If you ever struggled with tuning Machine Learning (ML) models, you are reading the right piece.

Hyper-parameter tuning refers to the problem of finding an optimal set of parameter values for a learning algorithm.

Usually, the process of choosing these values is a time-consuming task.

Even for simple algorithms like Linear Regression, finding the best set for the hyper-parameters can be tough. With Deep Learning, things get even worse.

Some of the parameters to tune when optimizing neural nets (NNs) include:

  • learning rate
  • momentum
  • regularization
  • dropout probability
  • batch normalization

In this short piece, we talk about the best practices for optimizing ML models. These practices come in hand mainly when the number of parameters to tune exceeds two or three.

The problem with Grid Search

Grid Search is usually a good choice when we have a small number of parameters to optimize. For two or even three different parameters, it might be the way to go.

For each hyper-parameter, we define a set of candidate values to explore.

Then, the idea is to exhaustively try every possible combination of the values of the individual parameters.

For each combination, we train and evaluate a different model.

In the end, we keep the one with the smallest generalization error.

https://medium.com/media/d23d26fc0ab9fd97911c98b077b2a6bc/href

The main problem with Grid Search is that it is an exponential time algorithm. Its cost grows exponentially with the number of parameters.

In other words, if we need to optimize p parameters and each one takes at most v values, it runs in O(v) time.

Also, Grid Search is not as effective in exploring the hyper-parameter space as we may think.

Take a look at the code above again. Using this setup, we are going to train a total of 256 different models. Note that if we decide to add one more parameter, the number of experiments would increase to 1024.

However, this setup only explores four different values for each hyper-parameter. That is it, we train 256 models to only explore four values of the learning rate, regularization, and so on.

Besides, Grid Search usually requires repetitive trials. Take the learning_rate_search values from the code above as an example.

learning_rate_search = [0.1, 0.01, 0.001, 0.0001]

Suppose that after our first run (256 model trials), we get the best model with a learning rate value of 0.01.

In this situation,...

17:19

How to make complex problems easier by decomposing and composing freeCodeCamp.org - Medium

Photo by rawpixel on Unsplash

Our natural way of dealing with complexity is to break it into smaller pieces and then put everything back together.

This is a two step process:

  • decompose the problem into smaller parts
  • compose the small parts to solve the problem

We decompose in smaller parts because they are easier to understand and implement. The smaller parts can be developed in parallel.

The process of decomposition is about assigning responsibilities and giving names. This makes it easy to talk and reason about. Once we identify a responsibility, we can reuse it.

Composition is about combining the small parts together and establishing a relationship between them. We decide the way these pieces communicate, the order in which they execute, and how data flows between them.

We find a system hard to understand even if it is split in smaller parts, if there is a high number of relations between these parts. In order to make a system easier to understand, we need to minimize the number of possible connections between its parts.

Object decomposition

Objects are more than state and behavior working together. Objects are things with responsibilities.

Decompose

In How to create a three layer application with React, I take a to-do list application and split the responsibilities between the following objects :

  • TodoDataService : responsible for the communication with the server Todo API
  • UserDataService : responsible for the communication with the server User API.
  • TodoStore : the domain store for managing to-dos. It is the single source of truth regarding to-dos.
  • UserStore : the domain store for managing users.
  • TodoListContainer : the root container component displaying the list of to-dos.

As you can see, when decomposing, I assign responsibilities and give names.

Compose

Next, I compose them together in a single function. This is the place where all objects are created and dependencies injected. It is called Composition Root.

import React from "react";
import ReactDOM from 'react-dom';
import TodoDataService from "./dataaccess/TodoDataService";
import UserDataService from "./dataaccess/UserDataService";
import TodoStore from "./stores/TodoStore";
import UserStore from "./stores/UserStore";
import TodoContainer from "./components/TodoContainer.jsx";

(function startApplication(){
let userDataService = User...

02:13

Picture this: the best image format for the web in 2019 freeCodeCamp.org - Medium

JPEG, WEBP, HEIC, AVIF? This guide will help you choose.

After decades of the unrivalled dominance of JPEG, recent years have witnessed the appearance of new formatsWebP and HEICthat challenge this position. They have only partial, but significant, support by major players among web browsers and mobile operating systems. Another new image formatAVIFis expected to enter the scene in 2019 with promise of sweeping through the whole web.

In this article, well start with a short revision of the classic formats, followed by a description of WebP and HEIC/HEIF. Well then move on to to explore AVIF, and end with a summary putting all the main points together.

Comments on advantages and drawbacks build both on the review of available authoritative reports and first-hand observations during the development and deployment of tools for image optimization pipelines in ecommerce workflows.

Classic image formats for the web with universal support

Lets remind ourselves, in chronological order, of the three most important classic formats for web images.

GIF

GIF supports LZW lossless compression and multiple frames that allow us to produce simple animations.

The major limitation of this format is that it is constrained to 256 colours. This was reasonable back when it was created in the late 80s, since the same limitation applied to existing displays. However, with the improvement of display technology it became apparent that it was not suitable to reproduce any smooth color gradients, like those found in photographic images. We can easily spot the color banding that it produces.

However, GIF allows lightweight animation with universal support. This feature has kept the format alive until today in use cases not sensitive to quality issues, the most typical being small animated images with few or no colors.

JPEG

The king of the image formats for web was developed to support digital photography workflows.

With a usual 24 bit depth, it provides far more color resolution (not to be confused with range or gamut) than the human eye can discern. It supports lossy compression by exploiting known mechanisms of human vision.

Our eyes are more sensitive to medium scales than to fine details. Consequently, JPEG allows us to discard fine details (high spatial frequencies), by an amount controlled by a quality factor. Less quality means less detail is preserved. Besides, we are much more sensitive to details with high luminance contrast than details with only chromatic contrast.

So, JPEG internally recodifies RGB (Red, Green, and Blue) images in one luminance and two chroma channels. This allows us to use chroma subsampling to discard more detail only in the chroma channels. Its worth noting that...

01:40

Learn to build your first bot in Telegram with Python freeCodeCamp.org - Medium

Photo by Florencia Potter on Unsplash

Imagine this, there is a message bot that will send you a random cute dog image whenever you want, sounds cool right? Lets make one!

For this tutorial, we are going to use Python 3, python-telegram-bot, and public API RandomDog.

At the end of this tutorial, you will have a stress relieving bot that will send you cute dog images every time you need it, yay!

Getting started

Before we start to write the program, we need to generate a token for our bot. The token is needed to access the Telegram API, and install the necessary dependencies.

1. Create a new bot in BotFather

If you want to make a bot in Telegram, you have to register your bot first before using it. When we register our bot, we will get the token to access the Telegram API.

Go to the BotFather (if you open it in desktop, make sure you have the Telegram app), then create new bot by sending the /newbot command. Follow the steps until you get the username and token for your bot. You can go to your bot by accessing this URL: https://telegram.me/YOUR_BOT_USERNAME and your token should looks like this.

704418931:AAEtcZ*************

2. Install the library

Since we are going to use a library for this tutorial, install it using this command.

pip3 install python-telegram-bot

If the library is successfully installed, then we are good to go.

Write the program

Lets make our first bot. This bot should return a dog image when we send the /bop command. To be able to do this, we can use the public API from RandomDog to help us generate random dog images.

The workflow of our bot is as simple as this:

access the API -> get the image URL -> send the image

1. Import the libraries

First, import all the libraries we need.

from telegram.ext import Updater, CommandHandler
import requests
import re

2. Access the API and get the image URL

Lets create a function to get the URL. Using the requests library, we can access the API and get the json data.

contents = requests.get('https://random.dog/woof.json&...

01:27

What is website accessibility? freeCodeCamp.org - Medium

Web accessibility doesnt have to be intimidating.

Web accessibility is getting a lot of attention these days, but it can be intimidating. Heres a simple introduction to web accessibility: what it is, why its important, and the benefits that come along with accessibility.

At the most basic level, web accessibility means building websites that are usable by as many people as possible.

In the US alone, 57 million people report having a disability. Thats one in every five peopleequivalent to the entire populations of New York and California combined. And around 30 million of those people report having a severe disability.

How can web developers make sure their sites are accessible to as many users as possible?

What makes a site inaccessible?

There are many ways that users might find a website to be inaccessible.

Some people may not be able to use a mouse. They may need to be able to scroll, click, navigate and interact with all parts of a website using only a keyboard or other device.

Others may have some form of color-blindness, so may have difficulty discerning links and buttons from other text content.

Dyslexia can cause some people to struggle to understand the content of a site.

For people with severe visual impairments, it is necessary for all content and interactivity on a page to be understandable to a screen reader. This is a program that reads the contents of a webpage to the user and lets them interact with the page.

There are even machines that will provide braille output from webpages.

Accessibility is a Web Standard

Ive barely scratched the surface of the accessibility challenges people can face on the web. It is impossible for the average web team to keep up with all these different situations that can prevent people from using and enjoying websites.

That is why the World Wide Web Consortium first drafted standards for developing accessible websites back in 1999.

This set of standards makes it easier for development teams to ensure their work is accessible to all. These standards are what you may have heard referenced as WCAG (sometimes pronounced wee-kag). It stands for Web Content Accessibility Guidelines.

These guidelines provide a detailed look at common patterns and areas that can cause usability issues in different situations. At a higher level though, they outline the four broad guidelines of web accessibility:

  • Perceivable: can all peo...

01:19

How to make your fancy SVG button accessible freeCodeCamp.org - Medium

Photo by Saketh Garuda on Unsplash

You may very well find yourself one day having to build some crazy button a designer dreamed-up. You might start reaching for that good old <div>, but easy there big-shifter lets try and use that <button> element youre avoiding 

Well start by simply grabbing the code for an SVG icon that we want to use. I quickly made a Chemex icon you can use here (I love me some coffee ). Paste that between a <button> tag in your HTML like so (the SVG code will be pretty lengthy).

Initial <button> with SVG code inside

We want this button stripped of its default styling, so lets give the button an id and well target it with some CSS.

Strip the default styling of the <button> so we can make it better 

Give the button a good width/height that is larger than our SVGthis will help the visibility of the outline. Speaking of, make sure the contrast ratio between your outline color and the background color passes this. Get rid of that pesky border and background, make sure the cursor is set to pointer.

At this point, you have a clickable button that, when clicked, shows the default outline your browser has chosen for focus states. Lets change that and make it better.

Giving the button some focus 

Now when we click or tab to our button, we get a cool little dashed outline that lets us know where were focused.

We also want to ensure that the SVG itself does not get an outline if clicked. And we want to make certain Firefox doesnt add its default dotted outline. While were at it, we can give the SVG a little hover effect.

Adding our flavorful hover effect 

Now we can get to the cool parts We dont want to annoy or confuse our screen reader users with our button. So we need a good short description of what to expect. You would also typically want visual users to have an idea of what it is theyre clicking on as well, for now lets kee...

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