fpontef

CSS Media Queries: Best Practices

• Media queries have many features, but min-width is the most practical one, the one you should assume to use most of the time.
• Only use em within media query definitions, never pixels.
• Until there's wider rem support within media query, rem should be avoided in media query definitions as well.
• Assuming mobile is 320px and the body font size is 16px, then the breakpoint indicating mobile width in profile orientation would be 20em (320/16).
• Choose breakpoint values to serve the content, not to serve device deminsions.
• Never use media queries to define styles for the smallest viewport size.
• Use media queries to “enhance” or add or alter styles when the browser has a wider (or taller) vi

fpontef

CSS units

Recommendations of unit types per media type:

Media	Recommended	Occasional use	Infrequent use	Not recommended
Screen	em, rem, %	px	ch, ex, vw, vh, vmin, vmax	cm, mm, in, pt, pc
Print	em, rem, %	cm, mm, in, pt, pc	ch, ex	px, vw, vh, vmin, vmax

Relative units

Relative units

fpontef

Using Git

Global Settings

Related Setup: https://gist.github.com/hofmannsven/6814278

Related Pro Tips: https://ochronus.com/git-tips-from-the-trenches/

fpontef

/* global ReactRedux, Redux, ReactDOM */

// "Getting Started with Redux" (by Dan Abramov)
// https://egghead.io/series/getting-started-with-redux

// This file on JSBin (by Jesse Buchanan):
// http://jsbin.com/wuwezo/74/edit?js,console,output

////////////////////////////////////////////////
//

fpontef

// This is from my comment here: http://wolfram.kriesing.de/blog/index.php/2008/javascript-remove-element-from-array/comment-page-2#comment-466561

/*
 * How to delete items from an Array in JavaScript, an exhaustive guide
 */

// DON'T use the delete operator, it leaves a hole in the array:
var arr = [4, 5, 6];
delete arr[1]; // arr now: [4, undefined, 6]

fpontef

<template>
  <root-header></root-header>
  <!-- BEGIN CONTAINER -->
  <div class="page-container">
      <root-sidebar></root-sidebar>
      <!-- BEGIN CONTENT -->
      <div class="page-content-wrapper">
          <!-- BEGIN CONTENT BODY -->
          <slot></slot>
          <!-- END CONTENT BODY -->

fpontef

Arch Linux on MacBookPro10,1

Other Arch

• download b43-firmware from AUR (https://aur.archlinux.org/packages/b4/b43-firmware/b43-firmware.tar.gz), and makepg -s
• download dialog (for wifi-menu) from official repos, and makepkg -s

OSX

fpontef

const stringfy = (value) => JSON.stringify([value]);
const stringfyAndTransformToObject = (value) => ({ object: stringfy(value) })

const makeRequest = () => {
  const context = arguments[0] || this;
  const post = (url, data, options) => context.$http(url, stringfyAndTransformToObject(data), options);
  return { post };
};

const install = (VueInstance) => {

fpontef

Atom

Packages for JS + VueJS

• atom-beautify
• atom-ternjs
• autoclose-html
• emmet
• file-icons
• language-vue
• linter
• linter-eslint

fpontef

Virtual Hosts on nginx (CSC309)

When hosting our web applications, we often have one public IP address (i.e., an IP address visible to the outside world) using which we want to host multiple web apps. For example, one may wants to host three different web apps respectively for example1.com, example2.com, and example1.com/images on the same machine using a single IP address.

How can we do that? Well, the good news is Internet browsers