0xjjpa

#Introduction

Developing Chrome Extensions is REALLY fun if you are a Front End engineer. If you, however, struggle with visualizing the architecture of an application, then developing a Chrome Extension is going to bite your butt multiple times due the amount of excessive components the extension works with. Here are some pointers in how to start, what problems I encounter and how to avoid them.

Note: I'm not covering chrome package apps, which although similar, work in a different way. I also won't cover the page options api neither the new brand event pages. What I explain covers most basic chrome applications and should be enough to get you started.

Table of Contents

1. Understand the Chrome Architecture
2. Understand the Tabs-Extension Relationship
3. Picking the right interface for the job

cobyism

Deploying a subfolder to GitHub Pages

Sometimes you want to have a subdirectory on the master branch be the root directory of a repository’s gh-pages branch. This is useful for things like sites developed with Yeoman, or if you have a Jekyll site contained in the master branch alongside the rest of your code.

For the sake of this example, let’s pretend the subfolder containing your site is named dist.

Step 1

Remove the dist directory from the project’s .gitignore file (it’s ignored by default by Yeoman).

joseluisq

Add Git Branch Name to Terminal Prompt (Linux/Mac)

Open ~/.bash_profile in your favorite editor and add the following content to the bottom.

# Git branch in prompt.

parse_git_branch() {

paulirish

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

lalkmim

Lesson 1 - Iterations
- BinaryGap - https://codility.com/demo/results/trainingU2FQPQ-7Y4/

Lesson 2 - Arrays
- OddOccurrencesInArray - https://codility.com/demo/results/trainingFN5RVT-XQ4/
- CyclicRotation - https://codility.com/demo/results/trainingSH2W5R-RP5/

Lesson 3 - Time Complexity
- FrogJmp - https://codility.com/demo/results/training6KKWUD-BXJ/
- PermMissingElem - https://codility.com/demo/results/training58W4YJ-VHA/

wojteklu

Code is clean if it can be understood easily – by everyone on the team. Clean code can be read and enhanced by a developer other than its original author. With understandability comes readability, changeability, extensibility and maintainability.

---

General rules

1. Follow standard conventions.
2. Keep it simple stupid. Simpler is always better. Reduce complexity as much as possible.
3. Boy scout rule. Leave the campground cleaner than you found it.
4. Always find root cause. Always look for the root cause of a problem.

Design rules

stevekinney

React && Firebase Workshop

Contact Information

• @stevekinney

Prequisite Setup

• A recent version of Node.js
• npm install -g create-react-app

stevekinney

Frontend Masters: AWS for Frontend Engineers

You should have the following completed on your computer before the workshop:

• Install the AWS CLI.
• Have Node.js installed on your system. (Recommended: Use nvm.)
  • Install yarn with brew install yarn.
• Create an AWS account. (This will require a valid credit card.)
• Create a Travis CI account. (This should be as simple as logging in via GitHub).

davidkpiano

As the number of different possible states and transitions between states in a user interface grows, managing styles and animations can quickly become complicated. Even a simple login form has many different "user flows":

https://codepen.io/davidkpiano/pen/WKvPBP

State machines are an excellent pattern for managing state transitions in user interfaces in an intuitive, declarative way. We've been using them a lot on the Keyframers as a way to simplify otherwise complex animations and user flows, like the one above.

So, what is a state machine? Sounds technical, right? It’s actually more simple and intuitive than you might think. (Don’t look at Wikipedia just yet… trust me.)

Let’s approach this from an animation perspective. Suppose you’re creating a loading animation, which can be in only one of four states at any given time: