Gayle McDowell – Cracking the Coding Interview

The book “Cracking the Coding Interview” helps you to survive the famous ‘technical interview’. Major tech companies like Google, Amazon etc. use these types of interviews to figure out if you can program.

Overall even with the book your chances are slim of passing the interview. – In any case most of the questions are the usual university preparation questions for the most broadest subjects in the field of computer science. So a lot of theoretical stuff and low-level programming skills. – The questions are in a way stupid – but what do you expect? they are questions that an HR person can ask you that have no merit or value in your day to day work.

Basically prepare yourself for this:

You probably should use additional resources if you really want to pass this type of interview. Mostly things like hackerrank or codewars.

The book however is a really good starting point And it is nice that for every topic there is a short introduction about what is important and how to approch questions from that topic.

Interview Process

The HR person will look for four things:

  • Analytical Skills
  • Coding Skills
  • Technical Knowledge
  • Culture Fit / Communication

“Prior experience” – is not needed, you put that already on your CV.

Of course the entire process is riddled with tons of mistakes and false negatives – simply because the process does not figure out if you can actually do the job. However the few people that survive the process – are probably candidates you can position anywhere in your large corporation.

Whiteboards are used to focus on ‘what is really important’ – translation: it is easier and quicker to set up an whiteboard than an actual IDE. Get ready to get maybe judged for making minor typos even though ‘the interviewer does not care’ – subconsciously he is judging you.

Before the Interview

Get the right experience

  • Try to take classes with big programming projects
  • Internships: Try to get some work experience
  • Build something in your spare time (=> Github)

Write a great resume

Keep your resume to 1-2 pages, HR People spend very little time reading it. But it needs to be perfect so they dont throw it out due to small things.

Write strong bullet points

Use the formula: “Accomplished X by implementing Y which led to Z”

Leave out stuff

You are applying for a programming job, you probably know how to use Office etc. be conservative which programs you list Same is true for all the programming languages, list those that are relevant and are widely used.

Be aware of the stigmas that are associated with languages. Some languages like Visual Basic while they are used and even if you know the language on an expert level it is mostly seen as that you have less experience than a language like Java/Python etc.

Certifications – Usually a waste of paper and most people do not see it as relevant. (in the field of computer science)

Behavioral Questions

Prepare your past projects ask yourself for each project

  • What where the Challenges?
  • What went wrong?
  • What did you enjoy?
  • Who lead the project? Did you lead the project?
  • How did you resolve conflicts?
  • What would you do differently?

During this phase of the interview try to create a dialog about how your new employer deals with certain issues. You need to interview the company if the company would fit to you or not.

Focus on you not your project, however you still need to show that you can work well with others.

When you are talking about your past projects you should use the SAR principle

  • Situation
  • Action
  • Result

Ensure that during your stories you can show

  • Initiative
  • Empathy
  • Compassion
  • Humility
  • Teamwork

And of course sprinkle in shows how you succeeded.

Technical Questions

Well you need to get the book for all the questions, but about 90% of the book are questions on various topics with well written answers.

Conclusion

The book is really useful when you are applying for big US-Tech companies. However for German-Tech companies the advice in the book is rather limited as they do not use the ‘technical-interview’ in the hiring process. (It produces too many false negatives and developers are rare)

It only helps you if you are attempting to pass the “technical-interview” and you basically need about 1 year of training prior to your actual interview to pass the interview. Basically the ‘technical-interview’ is a skill only needed to get into a couple of companies.

If that is not your goal your time is much better spent contributing to open source and creating your own projects as you will learn more ‘day-to-day’-skills.

Despite all of that it is a very interesting overview of questions you may encounter in an interview. Get the book at Amazon

Image: Gayle McDowell – Cracking the Coding Book Cover

DEV281x: Introduction to ReactJS

I took a quick look at Microsoft Introduction to ReactJS, not to actually learn React, but to evaluate how good the materials are for a beginner to learn React.

tl;dr Avoid the assessment. Maybe use create-react-app instead of codepen. Covers the basics quite well.

Lesson 01 | JSX and React Components

Instead of using “create-react-app” as a starting point, the course tells you to go to codepen to check out react.

I guess that makes it a little more focused on the React concepts and less focused on all the surrounding technologies that are needed in a production environment.

After that, it covers the basics of ReactJS, and JSX.

If you are a beginner you probably want to check out create-react-app.

Lesson 02 | State, Life Cycle and Event Handlers

I think the chapter covers the basics quite well. Nothing really to add here.

Lesson 03 | Lists and Forms

I think it is very nice that they cover the basics of handling multiple Form Elements with a generic handler.

handleChange(event){
  this.setState({[event.target.name]: event.target.value});
}

Assessment

The Assessment is quite theoretical and asks rather complicated questions. These questions are especially hard if you have already worked with React as you would never even try to build something in that way.

As a beginner, I would completely skip the assessment. It does not help your understanding of React. It actually also confronts you with bad practices, while inferring that this would be the way how you would actually do things

Conclusion

If you use create-react-app with vscode I think you would have a much better starting experience. The course is great to get started with ReactJS if you avoid the assessments and rather just experiment with your own code base.

Sources:

ImageDesigned by Freepik

DEV275x – Writing Professional Code

The course DEV275x Writing Professional Code is a very short introduction to best practices when it comes to writing code. As usual, this is only my notes I took during the course, you defiantly should check out the course for yourself at https://courses.edx.org/courses/course-v1:Microsoft+DEV275x+2T2017/course/

Module 1: Elements of Professional Code

Source Control with Git

Source Control is one of the most important aspects of programming.

  • Backup of your Source Code
  • Ability to compare with changes done in the past
  • Restore previous versions if something goes wrong with the new version
  • Easy collaboration with other people

There are many different Software packages that enable Source Control. Currently, the two most popular systems are Git (70% of Programmers) followed by SVN (10% of Programmers) (Survey of 30k Developers)

The core difference between the two is, that for SVN you need to set up a dedicated Source Control Server, and all changes are tracked there. With Git it is distributed, so you can use it locally and if you choose in combination with a server.

Especially Code Editors like Visual Studio Code have Git directly integrated making it really easy to set up and use Git.

Programs:

Cloud Providers

Workflows

Markdown

Markdown is really great because you can learn it really fast, and even if you do not convert Markdown into a HTML site or PDF the text is still formatted quite neatly and readable.

Like Git you find support for Markdown files in common editors like Visual Studio Code / Atom. And of course, in blogging software like WordPress have plugins that enable Markdown for the Posts.

Module 2: Communicate with Code

Now, this chapter was rather interesting, it focused on how those smaller things like code conventions actually help to improve the codebase. While the presenter did not use automated tools to improve the code readability it was nice to see that it is a very important aspect of coding to get the really basic elements correct.

Consistency and Naming

The code should be formatted always in the same matter. It improves the readability and removes all personal style from the code enabling all developers to immediately take ownership of the code instead of saying well that is the style of developer A, he should fix it.

Naming is important and greatly improves the readability of the code it does not help to say var c = 0, it is much better to say var beanCounter= 0. You do not write code for the computer but actually for other human beings. The compiler will then convert it into machine code, but you will probably not have to debug that.

Refactor Duplicate Code

A great problem is when the code base has a lot of duplicate code. As soon as that happens and some minor change changes the way how you do things, then you would have to go back and change all the different places where that piece of code is used.

Refactoring early reduces the risk that the next developer says, well, I will just do that with copy and paste.

Simplify

This one is rather difficult, but by keeping the code and the structures simple and readable has a much higher benefit in the maintainability of the code than some complex structure that executes a micron second faster. Of course, that depends on the program you are writing.

As a rule of thumb, functions should be rather short, not hundreds of lines long. (Too short is also bad.) If you needed to add complexity then you also should document why you are adding it and what is the best approach to understand that complex structure.

Module 3: Code Confidently With Unit Tests

Well writing Unit Tests and overall having Tests for your code, allows you to a) know the use cases of your code and b) allows you to see when you change something what else may have been broken while you were developing a new feature.

Sources:

ImageDesigned by Freepik

Notes on Course: Microsoft – Advanced CSS Concepts

My notes on the great course Microsoft – Advanced CSS Concepts on edx.

Lesson 01

Responsive Layout

Covers the basics of Responsive Layout. In essence, you use the @media query to figure out what the width, height, page orientation and resolution of the device is. Then based on that information you use a different CSS Rule.

To create a consistent Layout you should always design for the smallest device screen – then expand it to the bigger devices. (Mobile First Strategy).

Base CSS

In General, you should use a Style guide to create a consistent look across your application. They are usually created by the graphic designer.

Typically a website should be suitable for all different types of browsers. However, the CSS implementation and the default styles are different across browsers. To avoid this problem, you can include a CSS Reset – to ensure a consistent style.

A front-end Style guide should help define

  • Code standardization of CSS, and HTML
  • Consistency of code and design
  • More efficient workflow
  • Documenting of code practices
  • An easy-to-access reference for code and design for new team members

Your style guide will be comprised of:

  • A template: The template contains the basic elements that serve as the foundation for your web pages, such as color palette, fonts, headers, footers, body text, navigation, widgets, and grid layouts.
  • Patterns: The patterns for your web page include buttons, logos, images, the font icon library, and form styles.
  • Documentation: The documentation is a record of the style and development pattern of your web page. You can add comments to your code that serve as the style guide or use interactive models or tooltips.

Media Queries

The most commonly used media queries are:

  • min-width Rules applied for any browser width over the value defined in the query
  • max-width Rules applied for any browser width below the value defined in the query
  • min-height Rules applied for any browser height over the value defined in the query
  • max-height Rules applied for any browser height below the value defined in the query
  • orientation:portrait Rules applied for any browser where the height is greater than or equal to the width
  • orientation:landscape Rules for any browser where the width is greater than the height

The Query information is then used to define breakpoints, points where the layout switches from one size to another. Example of a set of major device breakpoints:

/* Extra small devices (phones, up to 480px) */ @media screen and (max-width: 767px) {…}

/* Small devices (tablets, 768px and up) */ @media (min-width: 768px) and (max-width: 991px) {…}

/* tablets/desktops and up */ @media (min-width: 992px) and (max-width: 1199px) {…}

/* large like desktops and up */ @media screen and (min-width: 1200px) {…}

Units

Historically the “px” Unit was used, however to incorporate various resolutions it is better to use the “rem” unit.

Going forward

  • Optimize the text for reading
  • Use major device breakpoints, and address content with minor breakpoints
  • Treat your website’s layout as an enhancement
  • Use relative units like rem or em;

Working with images

Images should be resampled to three different media sizes

Note: The alt tag must be set to correctly validate.

Lesson 02

Modular CSS

Modular CSS is:

  • A guideline based approach for breaking down pages into generic reusable CSS code.
  • Based on classes and consistent naming conventions.
  • Easy to read and maintain by teams.

CSS Modules are:

  • Generic, self-contained, and reusable.
  • Modifiable, combinable, and scalable.
  • Can contain or be contained by other modules but stay independent.

What are some common modules?

You will often come across modules such as these:

.nav, .search, .logo, .breadcrumbs, .title, .button, .icon, .media-object, .list, .frame, .slider, .card, etc.

Example Module

//Button Module 
.btn { 
   padding: .5em 1em; 
   text-decoration: none; 
   border: 1px gray solid; 
   display: inline-block //helps anchors and other inline elements 
} 

// Button Sub-Module 

.btn—content {
     background: blue;
     color: white;
}
    <button class="“btn">Button Text</button>

What are the Results of a Module-Based Approach?

  • Faster development
  • Flexible and scalable code
  • Code reuse
  • Organized and easy to read code
  • Easier to maintain
  • Team efficiency
  • Decoupled HTML and CSS

Guidelines

  1. OOCSS (Object Oriented CSS) | http://oocss.org/
  2. SMACSS (Scalable and Modular Architecture for CSS) | https://smacss.com/
  3. BEM (Block, Element, Modifier) http://getbem.com/
  4. DRY (Don’t Repeat Yourself CSS)

Font Awesome

A popular set of icon fonts is Font Awesome (http://fontawesome.io/)

Example for a like button

<button class="fa fa-thumbs-up">like</button>

Image: Designed by Freepik

Udacity – Web Tooling and Automatisation

I recently took a look at the course materials for Web Tooling and Automatisation.

Overall the course is very well structured and introduces Gulp and a couple of common packages used in web development. Besides their main topic, they cover topics on good engineering practices, like linting and testing to ensure code quality.

While working on the project I ran into several little smaller things that were quite annoying. Thankfully the gulp community is quite big, so somebody already solved some of the issues I was facing.

Passing an “–production” flag

When developing, you will probably create a version of your software that is suited for easily finding bugs and errors and an optimized version that is minified and optimized for optimal performance for the end user.

You would define two different tasks in gulp, one “default” and one “production” task. This, however, would, in turn, cause you to have to duplicate your code – with optimization and without.

I found the package “gulp-if” that allows you to control if a function like compression is active during the task. The remaining issue was to actually set the parameter before the tasks run. (All tasks in gulp run in parallel).

To get a flag from the command line, you can use the process.argv Array. However, you must add “–” before your flag name. If not gulp will assume it is another task name that should run.

In the end, you would use something like this:

//Enable Production Flag
var production = (process.argv.indexOf("--production") !== -1);

//Use in task

gulp.task("default", ()=>{
  gulp.src(path.src);
.pipe(gulpif(production, foo())
.pipe(gulp.dest(path.dest));
});</pre>
**Note:** In Gulp 4, you can use a sequencer and would not need to pass in the flag by command-line, but you would define a task that will run before all the other tasks.

# Dealing with Asset sources and destinations
When using gulp.src() and gulp.dest(), typically people use strings to define the locations. However, this is quite annoying if you want to get a quick overview which locations are used. For a better maintainability, you should create a small variable block that defines these strings. In the long run, it lets you be more flexible where your files are etc.
<pre class="lang:js decode:true ">//Path Definitions
const htmlPaths = {
    src: "src/views/**/*.pug",
    dest: "dist"
}

gulp.task("html", () => {
    gulp.src(htmlPaths.src)
        .pipe(pug())
        .pipe(gulp.dest(htmlPaths.dest))
});

End Result

At the end of the course, I ended up with this gulpfile.js. It adds support for Typescript, Pug(Jade), google-closure-compiler.

The common gulp tasks to run are:

  • gulp serve: Uses browser-sync with CSS injection for live-editing
  • gulp --production: Creates an optimized build

Next steps: Depending on your web server, you would want to add a gulp deploy task.

gulpfile.js

//Gulp Packages
const gulp = require('gulp');
const gulpif = require('gulp-if');
const browserSync = require('browser-sync').create();

const pug = require("gulp-pug");

const imagemin = require('gulp-imagemin');

const sass = require("gulp-sass");
const autoprefixer = require("gulp-autoprefixer");

const ts = require("gulp-typescript");
const eslint = require("gulp-eslint");
const closureCompiler = require('google-closure-compiler').gulp();

const jasmine = require("gulp-jasmine-phantom")

//Flag Definitions
var production = (process.argv.indexOf("--production") !== -1);


//Path Definitions
const htmlPaths = {
    src: "src/views/**/*.pug",
    dest: "dist"
}

const stylesPaths = {
    src: "src/styles/**/*.scss",
    dest: "dist/styles"
}

const scriptsPaths = {
    src: "src/scripts/**/*.ts",
    dest: "dist/scripts"
}

const imgPaths = {
    src: "src/img/*",
    dest: "dist/img"  
}

//Task Definitions
gulp.task("default", ["html", "scripts", "styles", "images"]);

gulp.task("serve", ["default"], () => {
    browserSync.init({
        server: "./dist"
    });
    gulp.watch(srcStyles, ["styles"]);
    gulp.watch(srcScripts, ["scripts"]);
    gulp.watch(srcImages, ["images"]);
    gulp.watch(srcHTML, ["html"]).on('change', browserSync.reload);
})

gulp.task("html", () => {
    gulp.src(htmlPaths.src)
        .pipe(pug())
        .pipe(gulp.dest(htmlPaths.dest))
});

gulp.task("scripts", () => {
    gulp.src(scriptsPaths.src)
        .pipe(ts({
            out: "output.js"
        }))
        .pipe(eslint({
            parser: "typescript-eslint-parser"
        }))
        .pipe(eslint.format())
        .pipe(gulpif(production, closureCompiler({
            compilation_level: 'SIMPLE',
            warning_level: 'VERBOSE',
            language_in: 'ECMASCRIPT6_STRICT',
            language_out: 'ECMASCRIPT5_STRICT',
            output_wrapper: '(function(){\n%output%\n}).call(this)',
            js_output_file: 'output.min.js'
        })))
        .pipe(gulp.dest(scriptsPaths.dest));
});

gulp.task("styles", () => {
    let sassOptions = {};
    if (production) {
        sassOptions = {
            outputStyle: 'compressed'
        }
    }
    gulp.src(stylesPaths.src)
        .pipe(sass(sassOptions).on('error', sass.logError))
        .pipe(autoprefixer({
            browsers: ['last 2 versions']
        }))
        .pipe(gulp.dest(stylesPaths.dest))
        .pipe(browserSync.stream())
});

gulp.task("tests", () => {
    gulp.src("src/tests/test.js")
        .pipe(jasmine({
            integration: true,
            vendor: '_build/**/*.js'
        }))
})


gulp.task("images", () => {
    gulp.src(imgPaths.src)
        .pipe(imagemin())
        .pipe(gulp.dest(imgPaths.dest));
})

Package.json

{
  "name": "udacity-webtooling",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.18.7",
    "eslint": "^3.15.0",
    "eslint-config-google": "^0.7.1",
    "google-closure-compiler": "^20170124.0.0",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-eslint": "^3.0.1",
    "gulp-if": "^2.0.2",
    "gulp-imagemin": "^3.1.1",
    "gulp-jasmine-phantom": "^3.0.0",
    "gulp-pug": "^3.2.0",
    "gulp-sass": "^3.1.0",
    "gulp-tslint": "^7.1.0",
    "gulp-typescript": "^3.1.4",
    "phantomjs": "^2.1.7",
    "tslint": "^4.4.2",
    "typescript": "^2.1.6",
    "typescript-eslint-parser": "^1.0.3"
  }
}

Sources:

ImageDesigned by Freepik

EdX: Introduction to Linux

I recently completed the course “Introduction to Linux” by the Linux Foundation on the edX platform. Instead of paying 2500USD for the course you now can pay 250USD for a verified certificate, or simply get an honor certificate.

https://www.edx.org/course/linuxfoundationx/linuxfoundationx-lfs101x-introduction-1621#.U-YKjfmSyyY

Course Structure

The course is self-paced, you can take the exam any time and at the end of the month, the certificate is going to be issued.

Course Materials

Unlike other edX courses, most of the materials are short articles covering the core topics. There are short videos, however, they are mostly useless.

Learning Objectives

Sadly the first couple of Lessons are more like Advertisements that Linux is great and that Linux is used everywhere and being able to use Linux is an important skill. The rest of the course covers the basic operations when interacting with a Linux system. The course briefly takes a look at the graphical interfaces of three major Linux distributions Ubuntu, CentOS and openSUSE. As expected most of the course covers how to interact with the Console covers the basic interaction with the console, file operations, security principles, text manipulation and concluding with bash scripting.

Final Exam

The final exam is a 30 question multiple choice test. Sadly some questions are easier to be answered using Google than the actual course material. People with a basic understanding of Linux could just skip the entire course and just take the exam. It’s rather straightforward.

Conclusion

The course is a great introduction to the Linux System. The course is designed for IT-Specialists (Programmers, Web-Developers, and Administrators etc.) that have not worked with Linux and need a quick introduction how to work with the system. Sadly with the emphasis on using the console most users interested in using Linux as an alternative to Windows/OSX will simply say “Oh god, what a hassle, I’ll stick to my current system.” Once again Linux does not realize that GUIs have been invented to solve an issue where most people find it confusing when they do not see what they are doing. Most users interacting with a computer are not aware that it is possible to interact with a computer without GUI, telling those users that sometimes you simply do not have a GUI confuses them. Most of the success of Linux as the core of Android is the GUI and that users have a simple way installing programs and are not able to access any console/text only mode. Once again the core of Linux is great, however, the presentation and usability are that what is lacking.