SalahHamza

Useful Links

• CSS Properties
  • http://www.w3.org/community/webed/wiki/CSS/Properties
• Truncate text
  • for 1 line
    • https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/
  • for multiple lines
• http://joelsaupe.com/programming/multiple-line-ellipsis-css/

SalahHamza

Flexbox

Let's say we have a set of items with a container around them, like this:

<div class="container">
  <div class="item green"></div>
  <div class="item blue"></div>
  <div class="item red"></div>
  <div class="item yellow"></div>

SalahHamza

Responsive Tables

Hidden Columns

The concept here is to hide columns based on their importance as the viewport gets smaller. This can be done by applying a display: none on the columns you want to hide at a certain breakpoint.

The bad thing about hidden columns technique is that the hidden columns are not seen by search engines or screen readers.

No More Tables

With the no more tables technique, below a certain viewport width, the table is collapsed and resembles a long list, as opposed to a table data.

SalahHamza

Grunt

Grunt is a JavaScript task runner, a tool used to automatically perform frequent tasks such as minification, compilation, unit testing, and linting. It uses a command-line interface to run custom tasks defined in a file.

via: Wikipedia

Installation

1- install grunt-cli globally:

SalahHamza

Intro To Service Workers

Service Worker is a programmable network proxy, allowing you to control how network requests from your page are handled. Service Workers require HTTPs on the page (The only exception is when working locally).

Note: If there is information that you need to persist and reuse across restarts, service workers do have access to the IndexDB API.

Registering a Service Worker

How to register a service worker

SalahHamza

The web and Images

Responsive Images

Use relative size images

The key to handling images is to use relative widths to prevent them from accidentally overflowing the container and eventually the viewport, so it is better to pre-set the width of all image tags to 100%. In fact it is recommended to do that on img, video, embed and object elements:

img, video,
embed, object {

SalahHamza

Web Accessibility

Overview

What is Accessibility

Broadly speaking, when we say a site is accessible, we mean that the site's content is available, and its functionality can be operated, by literally anyone.

and it also

SalahHamza

AJAX

AJAX or Asynchronous Javascript and XML allows for content retrieval and display without reloading the web page. The concept is to send that the client sends the request and while waiting it can do other tasks but once the response returns we can do whatever we want with the it, well, according to the pre-set instructions that we set before dubbed callbacks.

Things to know before diving into AJAX

Web APIs

API is an acronym for Application Programming Interface. We'll be using APIs to interact with various data sources.

SalahHamza

ES2015+ syntax

Let and Const

Overview

When declaring a variable with the keyword var, the variable’s declaration gets hoisted. What does that mean?

Let’s say we declared a function like this:

SalahHamza

Web Tooling and Automation

Common sense

When it comes to web tools, there are some scenarios that set you up for failure that should be avoided

• Avoid the idea that you can build a better tool from scratch, chances are you can't but even if you could it won't be worth it.
• Avoid diving into a new built tool because it's (let's say) X% faster. That X% is good and all, but a tool that is well supported by the community is pragmatic.
• Avoid self contained tools that don't offer connection points.
• Avoid, optimization that are not worth it, for example an opitimizaion that takes 4hours and it only cuts 1 second from a task you perform once in a day, you need to do it for 40 years to justify the investment.