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 September

19:10

How to make your own Python dev-server with Raspberry Pi "IndyWatch Feed Education"

Image credit. https://www.python.org/static/community_logos/python-logo-master-v3-TM.png, https://upload.wikimedia.org/wikipedia/commons/1/10/RPi-Logo-Landscape-SCREEN.png

In simple terms, Raspberry Pi is a super cheap ($40) Linux based computer. Thats it. Seriously.

It can do whatever you can imagine a normal Linux computer can do, such as browse the web, write code, edit documents, and connect to I/O devices such a thumb drive, mouse, keyboard, etc. This tutorial will be focused on learning how to make your own Python dev-server with Raspberry Pi.

Step 0. Define the goal

Before we begin, it is important to understand what is it that we are trying to build. By the end of the tutorial, you will be able to run a basic website (using Flask) off of a Raspberry Pi on your local home network.

The goal of this tutorial is to demonstrate how a Pi can be used as a dev-server, more specifically, the example will be to host a simple website (using Flask).

Step 1. State the assumptions

Here are some assumptions that this tutorial will make:

  1. You already have a Raspberry Pi set up with Raspbian OS. Here is a useful setup guide if you need one.
  2. The Pi is connected to your home WiFi (and that you know the Pis IP address).
  3. You will not require a screen going forward. assuming points 1 and 2 are complete.

We will use VS Code with the Remote VSCode extension to remotely create and edit files on the Pi. I definitely recommend that you use these two to follow along. Also, these will make working with remote files a lot easier, so thats a plus.

Step 2. Find the Pis IP address

First, connect the Pi to a power supply, and ensure that it is correctly booted up and connected to the WiFi/Ethernet (basically, it needs to have an internet connection).

We will use ssh to connect to and communicate with the Pi. To do that remotely using a laptop, you need to know its IP address. This can be easily obtained using your ISPs admin portal (usually available at http://192.168.0.1. Please note that this could be different for different ISPs.)...

12:36

CSS FlexAn Interactive Tutorial "IndyWatch Feed Education"

Ive gone over pretty much every single existing Flex tutorial from froggy to the official W3C documentation. But there is one thing you will never learn about Flex without an interactive example: the behavior of properties when the size of an *individual item changes. You can see what I mean below.

Check out CSS Visual Dictionary with all CSS properties explained visually.

If you want to experiment with it yourself go to live flex layout maker now to craft your own flex layouts.

I created this new Flex tool overnight and improved it over the course of the next few days. The rest of this tutorial will provide a few insights into what I discovered while playing around with it!

What I Learned About Flex While Designing The Flex Generator

There are a few interesting quirks about flex that may not always be obvious at first. For example, narrow items dont stretch and behave like flex-starteven if stretchis applied. Below I will walk you through the rest of them.

Here Are The Complete Visual Examples

Keep on reading if you want to consume this tutorial visually!

Ill display all possible cases and briefly discuss the Flex quirks I found that you might want to know about (or, at some point will stumble into.)

flex-start

The flex-start value is the default. There is really not much here other than it looks a lot like the slowly becoming obsolete float: left:

flex-start

flex-end

The flex-end value behaves similar to float: right; Here are two items:

flex-end

center

Remember back in the day you instinctively typed float: center, but were disappointed at the fact that nothing happened in the browser? Flex to the rescue. The center value acts as you would expect:

flex-center

space-between

The space-between, space-around (next one) and space-evenly seem to produce similar results, at first. But try changing the number of items. Then it become...

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

IndyWatch Education Feed Today.

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

Friday, 14 September

17:11

Focus and Deep Work Your Secret Weapons to Becoming a 10X Developer "IndyWatch Feed Education"

Woman getting shit done by rawpixel on Unsplash

Or how to become one of those highly-paid 10x Rockstar Ninja developers companies love to hire.

It doesnt matter if youre working on a side hustle or if youre a junior developer wanting to get noticed and promoted. It doesnt matter if youre a lead developer looking for a change of pace, from a corporate gig to a start-up or the other way around. It doesnt matter if youre jobless out of college.

As long as youre a programmer, no skill is more important to your success than focused, deep work.

From Cal Newports book Deep Work:

The Deep Work Hypothesis: The ability to perform deep work is becoming increasingly rare and at the exact same time it is becoming increasingly valuable in our economy.  the few who cultivate this skill, and then make it the core of their working life, will thrive.
Deep Work p.14

Im going to use some points from Deep Work to tie together my thoughts on becoming a successful, in-demand developer. I highly recommend reading it if youre in the technology field in any capacity.

From Fear of Code to Lead Developer.

Im a self-taught programmer. But I didnt start programming until my late 20s. Ive always considered myself an artistic person and figured Id end up in a creative field.

And I did. After college I started a company that did graphics and web design for small, local businesses. I was a pro at Photoshop and knew enough HTML and CSS to be dangerous.

But anything more complicated, requiring even a line of PHP, I had to outsource.

I was petrified of code for a very long time and left it to the folks with Computer Science degrees.

Now Im a lead developer for a Fortune 50 company working on a product that entertains millions of people every month.

Howd I get here in a few short years? 

My secret is getting good at focus and deep work. Theres nothing special about me. I took the time to train myself how to focus on one specific thing, without distraction, for an extended period of time.

Code is Art.

...

16:57

How to transform JSON to CSV using jq in the command line "IndyWatch Feed Education"

The shell tool jq is awesome for dealing with JSON-data. It can also transform that data into handy CSV-files, ready for all your spreadsheet wrangling needs.

jq is an excellent little tool that lives in your terminal and does useful stuff with JSON-data. Its a potent tool, but handy for the little things as well. For example, if you pipe JSON data to it, it prints it with syntax highlighting by default:

$ cat some-data.json|jq

You can install jq on most systems. (brew install jq on a Mac with homebrew / chocolatey install jq on windows with chocolatey). This post presents a more advanced jq technique. If you want to get the basics, you should check out the tutorial.

jq works with any JSON source. Since Im spending most of my days working with Sanity.io-based backends, Ill use that as an example. Also because I think its immensely cool what we can do with this combination.

Sanity is a backend for structured content and comes with a real-time API, and a query language called GROQ. You can interact with Sanity via HTTP and JS/PHP clients, but also with the CLI tool with $ sanity documents query 'GROQ-expression'.

Output from sanity.io piped through jq

So if you want your documents of the type post, you put $ sanity documents query '*[_type == "post"]'. Or if you just want those with a publish date in 2018, its$ sanity documents query '*[_type == "post" && publishedAt > "2018-01-01"]'. This query gives you whole documents. If you just wanted the titles, and publish dates, youd write: *[_type == "post"]{title, publishedAt}.

The output from Sanity CLI piped through jq

You can pick out keys and values from JSON data in jq as well. Today were going to use it to transform structured content in a JSON array to a CSV file. Because your boss wants stuff in Excel sheets, right? Sit tight, and lets dive in! 

...

16:50

How to write OS-specific code in Electron "IndyWatch Feed Education"

Photo by Nikolay Tarashchenko on Unsplash

One of the advantages of using Electron is thatsince its cross-platformwe dont have to worry about the operating system on which our application is going to be run.

However, sometimes we need our code to be OS-specific if, for example, we are going to be using the command console or need to retrieve some information about the system.

Having to write multiple ifs each time we want to have some functionality on a given OS seems like excess work. It quickly obfuscates the code, making it difficult to be understood and analyzed.

In order to keep the code clean and readable, we can create a little helper and remove the ifs and any OS-related logic altogether.

Implementing Platforms

https://medium.com/media/91a1b835adafcdf801359ce95091b0ae/href

First, we see the platforms object which contains names of all supported operating systems. It is made only for convenience. We can then use platforms.WINDOWS instead of typing WINDOWS each time into our object with handlers we pass to the byOS function.

Next, notice the platformsNames object. The keys are the result of calling os.platform(). The values are the keys from the platforms object. We simply map it to a more user-friendly name.

For example, when os.platform() returns win32, we map it to platforms.WINDOWS by calling platformsNames[os.platform()].

In currentPlatform, we save the platform that we are using right now, so then we can match it against a given object with handlers.

Implementing Releases

One might go even further and try to differentiate between releases of a given OS, for example, Windows 7, 8 and 10.

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

Now we can use os.release() to check for the systems release.

We can split the resulting string and check the Windows version. A complete list can be found here. As for Linux/Mac,...

16:29

How to eliminate your fears about being a front-end engineer "IndyWatch Feed Education"

I want to share my story with you about how it feels to be a front-end engineer. I want to tell people that programming is fun and theres no need to be a super-human to create something.

Photo By Dhanish. For more images like this check his Instagram account

My name is Yazan. I am 24 years old. I like to share my knowledge with other people and learn from them. You can follow me on twitter or check my latest articles on my site yaabed.com. Also, I have my publication at medium blog.yaabed.com.

Working as a programmer is not easy. It needs hard work every day and night. However, I wasnt that lucky to start coding when I was young.

How I started

Despite the fact that I studied computer science, I didnt know why it was a lucky choice. I finished my first year at university. I didnt know why people couldnt give me useful information about my next step in programming. But it seemed that I liked web development.

Kent C. Dodds said if you understand what you learn you can teach it quickly to other people.

Back then, I decided to join companies as a trainee to learn from people in the Palestine community. It was an excellent choice, because universities dont teach you how to code. I didnt have any experience. I knew things like algorithms, data structures, and operating systems.

I realized that I was learning things by myself, and no one gave me knowledge about what they knew. I didnt know why people were afraid to share knowledge. However, it is a beautiful feeling to teach other people what you learn.

You need to work hard for your first job as a front-end engineer. Learning to code only by reading things is not a good idea the first time around. You need to get your hands dirty with any programming language. My advice to you if you are at the first phase of learning is to build things. I recommend trying to build one application from this article by Roy Derks.

After the first job

It was a bad feeling that I couldnt find a way to learn things. Although there was a fair amount of information around me, I couldnt decide what was right and wrong in my code. But I kept trying by myself.

I was still working with AngularJS. It was f...

16:04

What we really mean when we talk about prototypes "IndyWatch Feed Education"

Photo by rawpixel on Unsplash

Beginning JavaScript devs often mistakenly use one wordprototypeto refer to two different concepts. But what exactly is the difference between an objects prototype and the prototype property of JavaScript functions?

But why?

I thought I understood the concept of prototypes and prototypal inheritance in JavaScript. But I continued to find myself confused by references to prototype in code and in the documentation.

A lot of my confusion disappeared when I realized that in writing about JavaScript, people often casually use prototype to describe two distinct but related concepts.

  1. An objects prototype: The template object from which another JavaScript object inherits methods and properties. (MDN)
  2. The non-enumerable prototypeproperty on JavaScript functions: A convenience to facilitate a design pattern (that design pattern to be explained in-depth shortly!).
    Not meaningful in itself until deliberately set to have some inheritance-related function. Most useful when used with constructor functions and factory functions (explanation coming!). Though all JS functions have the property by default. Contains a constructor property, which refers to the original function.
Even trivial functions have a prototype property by default.

For a long time, I was comfortable with definition 1, but not with definition 2.

Why does this distinction matter?

Before I understood the difference between an objects prototype, and the non-enumerable prototypeproperty on functions, I found myself confused by expressions like the following:

Array.prototype.slice.call([1, 2], 0, 1);
// [ 1 ]

(sidebar: the firstbut not the onlystep to understanding the above is understanding call(). Heres a quick refresher...

13:55

Towards a new Labour State "IndyWatch Feed Education"

John McDonnells recent address to the TUC demonstrates Labours commitment to challenging neo-liberal ideas about the labour market. https://www.tuc.org.uk/speeches/shadow-chancellor-john-mcdonnells-speech-tuc-congress-2018 For the last three decades both conservative and social democratic governments across the globe have deregulated labour markets, arguing that increasing the flexibility of workers will make them more productive, increase economic growth and bring greater Continue reading Towards a new Labour State

10:55

NEW IDYW ORGANISING ARRANGEMENTS "IndyWatch Feed Education"

newlogo

Following an IDYW Steering Group meeting in Plymouth  and the withdrawal of Tony Taylor from the coordinator role, the following arrangements are now in place.

Administrating/Coordinating Tasks

It was agreed that the following people would share these, acting primarily as a contact point.

John Grace [January April]

Malcolm Ball [May August]

Naomi Thompson [September- December]

The new generic email is indefenceyw@gmail.com

Please use this address to get in touch with IDYW

Story-Telling Workshops

Bernard Davies to continue to coordinate. Watch this space for a fresh launch of the workshops.

Web Site

A small editorial group will now take over maintaining the site.

National Events

There is a commitment to holding at least two national events each year, one of which will be a Spring national conference. Malcolm Ball and Diane Law will coordinate.  We are looking to hold more immediately a national event during the NYA Youth Work Week in Birmingham, November 5 10. More details as soon as is possible. This gathering will provide the opportunity to sharpen up our collective input into the Labour Party con...

01:38

How to start using the terminal to be more productive "IndyWatch Feed Education"

Less time copying and pasting things by hand means more time to lie down on the grass. Source: Pixabay

As developers, the terminal can be our second home.

However, we cant use it until we learn how to, and need to practice using it to learn, reallyits a catch-22!

I hope this introduction will solve that puzzle for you. I want to help you start making use of the terminal right away.

Getting Started

Ill cover the basics first, so if you know all the things in this article stay tuned for the next ones, where Ill tackle more advanced topics.

With that taken care of, Ill start from the very beginning. If youre on Ubuntu, all you have to do to open your terminal is press ctrl+alt+. On a Mac, you should press cmd+spacebar, start typing terminal and press enter when the option appears.

In both cases, you should see a dark background with your username followed by your computers name (in Linux) or the reverse order (in a Mac).

I strongly advise you to open your own terminal and try these commands out on an empty directory, to see for yourself and get the hang of them.

Youll see a prompt inviting you to type commands. To enter a command just type it down and press enter. Some navigation commands are:

cd : Moving your working directory.

cd 

This will make your terminal point to a different directory, from which you can run new commands. For instance, if youre in a folder called animals with three folders cats, dogs, and turtles, youd run

cd turtles

to move into that directory. To move up one level from the current directory (e.g., moving back to animals from turtles), hit

cd ..

mkdir and touch: Creating folders or files.

If you need to create a new, empty directory, all you have to do is run

mkdir 

Whereas running

touch 

will create an empty file in the current working directory, with the first argument as its name.

If another file with the given name already existed, this will only update the files last update date. It will not make any changes to its content.

But could I possibly know if the file exists?! You ask. Well, Im glad youre asking.

ls : See a directorys contents.

The ls command lists the name of every file and direct...

01:30

How to improve your machine learning models by explaining predictions with LIME "IndyWatch Feed Education"

Increase users trust and find bugs faster

With LIME we can have discussions like this about our models with everyone (thanks tefan for the pic!)

Even though we like the idea that we never make mistakes, every software can contain bugs. Assuming that we may use Machine Learning models to make decisions in the real world, a bug in our code can be very dangerous. Relying only on the prediction accuracy might not be a good idea, because if we get a good accuracy score we might not even consider that there is a bug in our data pipeline.

https://medium.com/media/37f651e66c25fb48eb8fc1512fabd357/href

Most Machine Learning algorithms are black boxes, but LIME has a bold value proposition: explain the results of any predictive model. The tool can explain models trained with text, categorical, or continuous data. Today we are going to explain the predictions of a model trained to classify sentences of scientific articles.

First let's understand how LIME works. Then I'll show you how to build a deep learning model to classify the sentences (using AllenNLP) and explain the predictions with LIME.

Local Interpretable Model-agnostic Explanations (LIME)

Model-agnostic predictions are used when the algorithm doesn't try to work with the decision function of the models. LIME uses the local fidelity criterion:

[] For an explanation to be meaningful it must at least be locally faithful, i.e. it must correspond to how the model behaves in the vicinity of the instance being predicted.Ribeiro, Marco Tulio, Sameer Singh, and Carlos Guestrin

To create this vicinity of the instance, LIME perturbs the instance it will explain. The authors also note that local fidelity does not imply global fidelity:

[] Features that are globally important may not be important in the local context, and vice versa. While global fidelity would imply local fidelity, identifying globally faithful explanations that are interpretable remains a challenge for complex models.Ribeiro, Marco Tulio, Sameer Singh, and Carlos Guest...

00:46

Introducing the freeCodeCamp Coding Trivia Quiz on Amazon Alexa "IndyWatch Feed Education"

Now you can learn coding concepts hands-free using an Amazon Echo.

freeCodeCamp.org contributor David Jolliffe created a quiz game with questions on JavaScript, CSS, networking, and computer science.

If you have an Amazon Echo nearby, you can play the game right now by saying: Alexa, start the free code camp quiz.

The entire project, along with its ~100 questions, is open source and on GitHub. We would welcome additional questions. Open a pull request adding your new question to the codebase, or just open a GitHub issue with the question if youre in a hurry.

Heres a video of me and my 11-month-old son Quentin demonstrating the Alexa skill. You can watch the video below or on the freeCodeCamp.org YouTube channel (3 minute watch).

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

Introducing the freeCodeCamp Coding Trivia Quiz on Amazon Alexa was originally published in freeCodeCamp.org on Medium, where people are continuing the conversation by highlighting and responding to this story.

Thursday, 13 September

23:46

How to log a Node.js API in an Express.js app with Mongoose plugins "IndyWatch Feed Education"

This tutorial will require prior knowledge of the mongoose Object Relational Mapping (ORM) technique

Introduction

As your application grows, logging becomes a crucial part to keep track of everything. It is especially important for debugging purposes.

Nowadays there are already logging modules available at npm. These modules can store logs in a file in different formats, or levels. We are going to discuss the API logging in your Node.js Express app using the popular ORM Mongoose.

So how you would create a Mongoose plugin that will do logging for you in a cleaner way and make API logging easy?

What is a plugin in Mongoose?

In Mongoose, schemas are pluggable. A plugin is like a function that you can use in your schema and reuse again and again over schema instances.

Mongoose also provides global plugins which you can use for all schemas. For example, we are going to write a plugin that will create a diff of two jsons and write to mongodb.

Step 1: Creating a Basic Log Schema Model

Lets create a basic log schema with the following six properties:

  • Action: As per its name, this will be a course of action of the API whether it is create update delete or something else.
  • Category: API category. For example doctors and patients. It is more like a class.
  • CreatedBy: User who is using the API or invoked it.
  • Message: Here you can include any kind of message you want to show that will make sense or help during debugging.
  • Diff: This is the main property which will have the diff of two JSONs

You can add more fields if you want that make sense for your own application. A schema can be changed and upgraded according to requirements.

Here is our model: models/log.js

const mongoose = require('mongoose')
const Schema = mongoose.Schema
const { ObjectId } = Schema
const LogSchema = new Schema({
  action: { type: String, required: true, index: true },
  category: { type: String, required: true, index: true },
  createdBy: { type: ObjectId, ref: 'Account', required: true },
  message: { type: String, required: true },
  diff: { type:...

23:25

How to lint away your troubles in Sublime "IndyWatch Feed Education"

Sublime!

Sublime is a lightweight text editor and is quite popular among many web developers. Now I know there are many sophisticated IDEs in the market with intellisense, code completion, and whatnot. But this post is for those who have remained loyal to their favorite text editors! So if you use Sublime for your projects, then you might enjoy some of the nifty features it offers. Linting is one of them.

Lets start off by defining the term Linting.

Linting is the process of checking your code for potential errors. This could be either the syntax or the code style.

The linting process can be done during three stages of development:

  1. Via your editor (live linting)
  2. Through the build process
  3. Using a pre-commit hook in version control

In this post, we will explore live linting in the editor. There are many popular linters out there for JavaScript like JSHint, JSCS, and ESLint. Ill be using ESLint, because ESLint supports ES6 code, is highly extensible, and is very easy to use. If youre interested, you can look at the comparisons between the different linters over here!

Step 1

You need to first install the ESLint npm package. The command is as follows:

npm install -g eslint

The -g option is to install the package on the global. Install npm if you do not already have it installed. A file will open up in Sublime asking you to download two other plugins. You need to install these plugins using Sublimes Package Control.

Open up the package control using command/ctrl + shift + P and select the Package Control: Install Package option. Then download the two plugins.

  1. SublimeLinter-eslint
  2. SublimeLinter-contrib-eslint

SublimeLinter is the framework that provides linting. It does not come with support for different languages. The language-specific Linter must be installed separately.

The Sublime-contrib-eslint plugin acts as an interface between ESLint and the SublimeLinter. You can check the installation procedure on their main website if you get stuck anywhere.

After successfully installing the plugins, you need to reset your editor for the changes to take effect. Now we will see ESLint in action!

Step 2

Phew! Those were a lot of installations. Now, finally, you can check out the awesomeness...

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