738 Matching Annotations
  1. Mar 2016
    1. <!-- flex item: anonymous block box around inline content --> anonymous item 3

      In this case, text nodes inside a flex element will automatically be wrapped in a block box, so:

      <div style="display:flex">Some text</div>
      

      Is the same as writing

      <div style="display:flex"><div>Some text</div></div>
      
    1. The DROP COLUMN form does not physically remove the column, but simply makes it invisible to SQL operations. Subsequent insert and update operations in the table will store a null value for the column. Thus, dropping a column is quick but it will not immediately reduce the on-disk size of your table, as the space occupied by the dropped column is not reclaimed. The space will be reclaimed over time as existing rows are updated. (These statements do not apply when dropping the system oid column; that is done with an immediate rewrite.)
    1. Very interesting article on how to best utilize capacity for concentration as a programmer.

    1. Overall, there's a strong correlation between job satisfaction and pushing code into production. 65% of developers who never check in code are satisfied at their jobs vs. 77% satisfaction rate among developers who commit code multiple times per day. Developers want to code! (Or maybe happy developers just commit more than everyone else.)
    1. Therefore we've built https://github.com/salsita/redux-side-effects which is at least "somehow" trying to simulate the Continuations with Effect handlers approach. The idea is very simple, if reducer was generator then you could simply yield side effects and return mutated app state. So the only condition is to turn all your reducers into function* and use yield* whenever you want to compose them.

      This also looks like an interesting and potentially relatively simple take on supporting effects in reducers.

    2. Very interesting thread with a discussion on how to improve handling of effects in Redux and make Redux applications composable ala. the Elm Architecture.

      Redux Loop looks like a very interesting take on supporting the Elm arch with the current version of Redux

    1. In general, it is important to recognize that any big team will have multiple roles. And HTML templates are more inclusive of real-world workflow that includes designers, testers, and others who aren't deeply familiar with JavaScript, but who can interact with HTML templates directly or through tools.

      The question here is whether designers do actually edit Angular component templates or not, or whether something like JSX would actually be a problem for them. I don't have enough experience in such environments to answer this.

    2. The basic argument here is that templates have an advantage because they are constrained compared to allowing component structure to be defined in arbitrary JS is valid.

    1. Summary slide at the end:

      • Have conventions
      • Use pure components
      • Understand and examine trade-offs
    2. This is a useful introduction through recent developments in client-side data management and an overview of the different choices available when building a new application and guidance on what is appropriate for different sizes of app.

    1. generate(ast, null, code);

      The code argument here is used for sourcemaps. Each node in the AST has source location information, which is retained as the AST is transformed. This information is then used to generate a sourcemap.

    1. <script async src="//genius.codes"></script>

      I didn't know .codes existed as a TLD. Very cool Genius devs :)

  2. Feb 2016
    1. Let’s instead choose numbers because they fit, because they look good, and because they serve the meaning of the design.
    2. In some ways it’s different from how we already work, but it feels more natural. Going from content out, rather than canvas in, to paraphrase Mark Boulton, is a more web native way of designing
    1. In summary, teams which are "fairer", in two senses, tend to be more effective:

      • Those where members speak and contribute in roughly the same proportion (albeit possibly in quite different ways)
      • Those where members have an above-average sensitivity to what others are thinking and feeling
    1. The first parkrun took place in 2004. Paul Sinton-Hewitt, 55, an IT worker who ran for South London Harriers athletics club, decided to set up a different kind of event after tripping and falling during a run while representing his club

      Most recently he is a member of Ranelagh Harriers, posting some very impressive times in a mob match against SLH: http://www.southlondonharriers.org/results-archive/results-archive.html?view=result&id=579&tmpl=component

    1. Useful deep-dive into ES2015 arrow functions, with actual references to the specs.

    1. A useful (2015) recent comparison of different JavaScript linting tools.

      The TL;DR is that the recommendation is to use ESLint as it is widely used, supports ES6 well and provides a decent combination of configurability and presets.

    1. This is a good short overview of how change detection works in Angular 2.

      It fixes the fundamental algorithmic complexity problem that change detection has in Angular 1.x by making it possible to prune parts of the component tree from change detection if the inputs have not changed.

      Unfortunately the zone.js implementation involves some horrifying monkey-patching of various DOM APIs.

    1. This is a perfect use-case for @extend. These rulesets are inherently related; their shared traits are shared for a reason, not coincidentally. Further, we aren’t transplanting their selectors hundreds of lines away from their source, so our Specificity Graph stays nice and sane

      So a sensible policy might be to use @extend only for related classes in the same source file, where source order is obvious.

    2. Some useful notes on the pros and cons of @extend vs mixins in SCSS.

      In a nutshell, he suggests avoiding @extend entirely.

      My main bugbear is that it prevents local reasoning about the final set of rules that will apply for an element with a given class.

    1. We’ve learned so far that bindings create a bigger $digest cycle, and it’d be a great idea for directives we create to potentially be statically rendered components that aren’t tied into Angular unless really needed.

      This is the critical performance problem with Angular. $interpolate looks interesting.

    1. ES6 performance sucks! Strong mode is a mode for ES6, you cannot use it without using various ES6 features. However, idiomatic ES6 code currently is substantially slower than ES5, across all browsers -- easily by 2x, often by 10x or more. Due to the sheer size of ES6, plus a number of unfortunate design choices, it will likely take years until implementations catch up with ES5 optimisations, and the hundreds of man years that went into those. Until then, strong mode is not going to be an attractive target

      Oh dear, "unfortunate design choices" sound ominous.

    1. I'm not sure I like the requirement to use classes but some interesting notes on dependency injection for JS

    1. n the Webpack approach, each Sass file is compiled in isolation. This isn't a new idea, but I think it's a much better way of doing Sass. It just means you need to @import dependencies like variables & mixins wherever you use them

      Which is a much better thing to be doing anyway in terms of having clear and explicit dependencies.

    1. but also it is extremely easy to transition from browserify to webpack when needed.
    2. If however, you’re predominantly dependent on the NPM ecosystem and you want a tool with a small and very well designed API and takes minimal configuration, you should go for Browserify

      We don't particularly need Node compatibility at the moment, but "small and well designed API" is appealing.

      On the other hand, not having to hunt around and collect all the tools together for packaging code for the browser is also appealing.

    1. This is probably the best high level comparison of the approach of Webpack and Browserify that I've seen.

    1. When not setting an explicit domain for a cookie, the default in most browsers is to only send the cookie when the domain matches exactly. However, Internet Explorer violates the RFC, and will send it to all subdomains as well.
    1. Any browser extensibility is a potential vector for malicious software, and our extensions will be vetted, delivered, and managed through the Windows Store

      No details here on whether automated publishing of extensions will be possible using APIs

    1. “Search is the cornerstone of Google,” Corrado said. “Machine learning isn’t just a magic syrup that you pour onto a problem and it makes it better. It took a lot of thought and care in order to build something that we really thought was worth doing.”
    1. API-wise, one issue with React (or JSX) is that the render function often involves a lot of logic, and ends up looking more like a piece of program (which in fact it is) rather than a visual representation of the interface. For some developers this is a bonus, but for designer/developer hybrids like me, having a template makes it much easier to think visually about the design and CSS. JSX mixed with JavaScript logic breaks that visual model I need to map the code to the design. In contrast, Vue.js pays the cost of a lightweight data-binding DSL so that we have a visually scannable template and with logic encapsulated into directives and filters.

      I wonder whether JSX has proven problematic in practice for "designer/developer hybrids"?

  3. Jan 2016
    1. The flip side of this is that I’m always being painfully aware that React Hot Loader is a great hack. It’s not how hot reloading should work
    1. The greatest advantage Webpack has over these tools is Hot Module Replacement (HMR). In short, it provides a way to patch the browser state without a full refresh. We'll discuss it in more detail when we go through the React setup
    1. match_main(text, pattern, loc) => location Given a text to search, a pattern to search for and an expected location in the text near which to find the pattern, return the location which matches closest. The function will search for the best match based on both the number of character errors between the pattern and the potential match, as well as the distance between the expected location and the potential match.

      This is the core function currently used by the dom-anchor-text-quote library to handle fuzzy anchoring of annotations.

    1. Usually you end up evolving both in parallel. However, I find it quite helpful to have an initial idea of what the state tree should look like in different situations before I start coding.
    2. All kinds of frameworks and architectures have state. In Ember apps and Backbone apps, state is in Models. In Angular apps, state is often in Factories and Services. In most Flux implementations, it is in Stores. How does Redux differ from these?

      Useful explanation of how state storage in Redux differs from other frameworks.

    3. Useful tutorial that covers combined usage on the client and server.

    1. This might be useful for achieving consistency after automated translation of CoffeeScript to ES6

    1. Learn the actual underlying technologies, before learning abstractions. Don't learn jQuery, learn the DOM. Don't learn SASS, learn CSS. Don't learn HAML, learn HTML. Don't learn CoffeeScript, learn JavaScript. Don't learn Handlebars, learn JavaScript ES6 templates.

      Very true and a useful way to evaluate potential developers.

    1. Some docs on a prototype Hot Reloader for Angular. It relies on new component instances being able to pull data from singleton services, unlike the Redux solution where the store is passed down via context and most components just get the data via props.

    1. Note that this is functionally equivalent to using the HTML5 doctype.

      In other words, if you use the preferred <!DOCTYPE html>, you don't need the 'X-UA-Compatible' meta-tag.

    1. Suddenly the cry "The Trial's beginning!" was heard in the distance, and Alice ran along with the others.

      A note on Alice in Wonderland

    2. ink it so very much out of the way to hear the Rabbit say to itself, "Oh dear! Oh dear! I shall be too late!" But when the Rabbit actually took a watch out of its waistcoat-pocket and looke

      Foo bar

    3. And so it was indeed! She was now only ten inches high, and her face brightened up at the thought that she was now the right size for going through the little door into that lovely garden.

      This

    1. Now, as far as I know, this use of the UUID does not cause any major issues with the retailers, and will not lead to your EPUB being rejected. But it does not make sense to identify an EPUB with an ID that is not the ISBN. Future-proofing your content is one of the most important steps you can take as a production specialist.

      A summary of best practices for unique identifiers for epubs

    1. Shallow rendering currently throws an error if setState is called. React seems to expect that, if you use setState, the DOM is available. To work around the issue, we use jsdom so React doesn’t throw the exception when the DOM isn’t available. Here’s how to set it up:

      The issue may be fixed upstream in React > 0.14.6, there is also a simpler alternative on that thread which doesn't require setting up a pseudo-DOM environment for tests.

    1. Quite a useful article summarizing the state of React and Angular 2 and to be fair, it does make criticisms of both sides.

    2. Composing components in a single compile-time checked file is one of the big reasons JSX is so special.

      Not to mention that TypeScript can perform static type checking of JSX with nice IDE integration.

    1. You can call store.dispatch(action) from anywhere in your app, including components and XHR callbacks, or even at scheduled intervals.

      For an example of dispatch at regular intervals, the SoundRedux media player app dispatches an action every time the play time of the current song, measured in seconds, changes.

    2. Now todoApp just gives it the slice of the state to manage, and todos knows how to update just that slice.

      This is great for the simple case where there is no interdependent state. For ideas on what to do when one part of the state tree depends on another, see http://stackoverflow.com/questions/34782948/how-can-i-model-interdependent-data-with-cascading-updates-in-redux/34796163#34796163

    3. If you find yourself often writing such operations, it’s a good idea to use a helper like react-addons-update, updeep, or even a library like Immutable that has native support for deep updates.

      Note that the "updeep" library has a dependency on lodash.

    1. This is a good resource explaining the how EPUB CFIs are structured.

    2. EPUB CFIs are also a key part of the answer for how to share bookmarks, highlights, annotations and other reader-definable features between reading systems and between readers. By standardizing the referencing mechanism, it ensures that any reading system will be able to correctly dereference the location referenced by these CFIs, avoiding proprietary solutions to the same problem. (But, for true interop, a standard means of structuring the information for sharing is still necessary.)

      This is a good argument for why Hypothesis should use CFIs for anchoring in epubs

    1. Substrings in brackets are extensible assertions that improve the robustness of traversing paths and migrating them from one revision of the document to another. These assertions preserve additional information about traversed elements of the document, which makes it possible to recover intended location even after some modifications are made to the EPUB Publication
    1. Our current integration with Hypothesis is nearly two years old now and the interface needs rethinking and updating. Sliding panels coming in from both side aren’t ideal and obscure content. The design too closely mimics a printed book and as a result the paginated rendering hinders being able to make annotations across pages. A scrolling view would allow navigating the book and using the Hypothes.is toolbar at the same time. We’re going to create a new example reader with the controls, navigation and Hypothes.is integrated together with scrolling text.

      Are there any mockups of this available?

    1. When you associate a controller with a directive, an instance of the controller gets stored in the data store of the element. The naming convention for the key value is '$' + name of directive + 'Controller'

      @seanh - See this section and the 'element.data' part below in the code example

    1. Useful set of benchmarks based on the DBMonster demo for a set of different frameworks - looking at various axes such as GC collection, layout and paint times.

      There are some notable caveats in the comments though that the subjective feel was not always reflected in the metrics, suggesting that the authors believe they have not found the optimal set of metrics that reflect user-perceived performance.

    1. Very useful overview of the conceptual differences between several modern UI architectures

    2. Hierarchical composition happens only among React components, not with Stores neither with Actions.
    1. In my experience, the best way to lift weights for runners is to use a heavy weight that is enough to push your limits after 5 repetitions

      Agrees with the advice at http://victorsrunningblog.com/2014/04/15/why-distance-runners-should-lift-heavy/ which also has more references and a better explanation.

  4. Dec 2015
    1. This is an interesting opinion piece on the difficulties that newcomers have with the React ecosystem and the problems with the lack of a central guidelines about which pieces to use and how to tie them altogether.

      I don't think it applies to just React though - choices around testing frameworks, build tools, languages etc. apply regardless of which framework you are using.

    1. We shouldn't be expected to get things right the first time, but we need a platform that lets us get it wrong first, and then iterate towards perfection.
    2. I highly recommend giving it a read.

      Ditto, this is a very well constructed argument in favor of small modules.

      Unfortunately however, the current tendency to couple project infrastructure structure (Git repository, issue tracker etc.) to npm project structure doesn't suit this well.

    1. Regarding tight coupling with require, this is a limitation of the framework. I believe Angular 2 is more flexible with interdirective communication from the little I have seen of it.

      Need to read up on this

    2. This effectively means that these directives cannot be used outside of annotated-image because Angular will throw an error when it cannot locate the required controller.

      In other words, the child components are no longer re-usable and this breaks composability.

    1. The basic principle is that you patch where an object is looked up, which is not necessarily the same place as where it is defined. A couple of examples will help to clarify this.

      This caught me out, as it did for a lot of other people apparently, see also this useful post about Python Mock gotchas: http://alexmarandon.com/articles/python_mock_gotchas/

    1. UPDATE: This post has seen a significant change from the first version of the code. It now relies on a much simpler method: a hidden object element that relays its resize event to your listeners.

      Unfortunately this involves creating a new Window object for any object whose size we might want to monitor. That sounds expensive to me.

      See also: http://stackoverflow.com/questions/3444719/how-to-know-when-an-dom-element-moves-or-is-resized

    1. A relative reference beginning with a single slash character is termed an absolute-path reference, as defined by <abs_path> in Section 3.
    1. It is important to note that the path attribute does not protect against unauthorized reading of the cookie from a different path. It can be easily bypassed using the DOM, for example by creating a hidden iframe element with the path of the cookie, then accessing this iframe's contentDocument.cookie property. The only way to protect the cookie is by using a different domain or subdomain, due to the same origin policy.
    1. This will make the directory /data inside the container live outside the Union File System and directly accessible on the host. Any files that the image held inside the /data directory will be copied into the volume. We can find out where the volume lives on the host by using the docker inspect command on the host (open a new terminal and leave the previous container running if you’re following along):

      In Docker 1.9 the field name is Mounts rather than Volumes

    1. and a related URL fragment specification will leverage the FindText API to let you share a URL that navigates directly to the selection you shared

      Does anyone have a link to said specification?

  5. Nov 2015
    1. Firefox and Chrome exhibit different behaviors when trying to style elements that appear inside a <use> block. In Firefox 45, a .use-element-class .sub-element-class selector will style the element as expected. In Chrome it won't because this is trying to cross a DOM boundary (that is, the SVG content and the <use> element are in different DOMs). This article has useful background to this and approaches to use.

    1. Here’s an example with a component directive that uses bindToController. Instead of defining the scope properties on scope, we declaratively define what properties are bound to the component’s controller:

      Example of idiomatic integration of controllers into directives in Angular 1.4.x+

    1. The DOM element that is currently being annotated.

      ie. The element on which Annotator was originally loaded.

    1. Recruiters are not welcome.

      In other words, the sponsor of the event gets exclusive access to the engineers for recruitment purposes.

    1. This extension passes the AMO validator with no signing warnings, meaning it would be automatically signed for distribution. #1 required no modifications to pass validation. #2 and #3 required some l33t hacking in the form of Components.interfaces["nsI" + "p".toUpperCase() + "rocess"] and window['e'.replace() + 'val'](req.responseText) — variations on basic string concatentation.

      Good lord Mozilla, this is not how you do security.

    1. This is pretty bad since it looks like you support accessors but you really do not. I hope you are not shipping anything with this any time soon.

      Yes, they did ship this in Safari 9 :(

    1. Won't this be fixed now under Bug 49739?

      "WebIDL attributes should be implemented as getters and setters on the prototype chain " - As of 24/11/15, assigned but not yet implemented.

    2. Trying to override the getter on the prototype of an element is somewhat pointless as WebKit does not use getters for DOM properties. Technically we could make it do so, but that basically means throwing away performance for no good reason. Comment 2 T. Brains 2010-03-21 14:23:58 PDT That means there's absolutely no way to override or extend the default get or set behavior of any of the built-in DOM properties, which is very limiting, and like I mentioned contradicts the behavior of other browsers.

      When this was written, overriding getters for native DOM properties was not possible.

    1. The free plan of ngrok allows only a single concurrent tunnel to be opened. Even though BroswerStack and Sauce Labs provide their own tunneling solution, we decided to go with ngrok, in order to provide a more generic solution. We happily upgraded to the $25/month business account following our excellent experience with the free account.
    1. Useful background on ElasticSearch's Percolator functionality. Includes some useful notes on the implementation and factors such as performance impact and memory usage.

    1. Join Darin Fisher, VP of Chrome as he talks the past, present and future of the web.

      RAIL - Reaction (<100ms), Animation (<16ms), Idle (<50ms), Load (<1000ms)

    1. Given we put the system in a known state before the user (or external system) starts interacting with the system (in the When steps). Avoid talking about user interaction in givens. When we take key actions the user (or external system) performs. This is the interaction with your system which should (or perhaps should not) cause some state to change. Then we observe outcomes.
    1. This problem is precisely the kind of problem that FSMs are very good at resolving. If you can enumerate the states, and events, then you know the number of paths though the system. So if Given/When/Then statements are truly nothing more than state transitios, all we need to do is enumerate the number of GIVENs and the number of WHENs. The number of scenarios will simply be the product of the two.

      Main observation here is that BDD is essentially a syntax for specifying states and transitions in a state machine. If all possible states and events can be enumerated, you can quantify what proportion of paths through the system have been tested

    1. Presentation summarizing an approach to duplicate web page detection that was developed by a researcher whilst at Google in the early 2000s

    2. Compute fingerprint

      Which algorithm does 'fingerprint' refer to?

    1. Adding in push notifications with Parse made a big improvement in re-engagement and keeping people coming back at the right time.
    2. Interesting React Native testimonial for a running 'showcase' app.

    3. Most apps had detailed stats to help improve performance. However, to a friend who is not a runner, that info is much less exciting. They would probably much rather see that it was equal to 5 donuts, and give you a thumbs up.
    4. When starting on a new design, I like to list the objectives. Picking the right goals is often more important and harder than making things look good
    1. On October 14, 2003, the Swiss newspaper Tages-Anzeiger published a few articles presenting as a scandal the fact that the Degussa company was involved in the construction of the memorial producing the anti-graffiti substance Protectosil used to cover the stelae, because the company had been involved in various ways in the National-Socialist persecution of the Jews. A subsidiary company of Degussa, Degesch, had even produced the Zyklon B gas used to poison people in the gas chambers.
    1. Dramatic statistics about the negative impact of hiding key navigation options out of the main view in mobile apps.

    1. The onboarding flow can be designed in many other ways that might be more useful to your users. Slack, for instance, uses the first screen to create some context. They simply introduce themselves, focusing on benefits instead of screens and features.
    2. That’s why now all the big players are shifting from hamburger menus towards making the most relevant navigation options always visible.

      Interesting example of YouTube switching away from the hamburger menu.

    1. use Hypothesis

      Hello MozFest 2015!

      If you have any feedback, feel free to add comments here.

      You can create a Hypothesis account for yourself, or use one shared for this presentation:

      username: mozfest2015

      password: mozfest

    1. You’ll now have three Docker containers

      On Ubuntu the steps below will work fine because Docker runs the containers on the same IP as the host. On OS X however the containers will run in a VM with a different IP address. The H default configuration expects to find the services on localhost, so make dev fails.

    1. So in both cases we are writing contracts that say “I require input with this shape, and I will give you output with that shape.” This is the essence of ruling out runtime errors in Elm. We always know what kind of values a function needs and what kind it produces, so we can just check that we always follow these rules.
    1. These are the questions asked to the Monday evening panel on future directions for the web platform.

    1. ServiceWorker also enables you to send Push Notifications, just like mobile apps do, and even when the website is running in the background;
  6. Oct 2015
    1. Installing the services¶

      The current version of these steps will run all of the services under Docker.

      If you are on Linux, the services will be available on localhost:<port number>.

      If you are on Mac however, the services will usually be available on the IP of the virtual machine which is running the docker containers. If using docker-machine which is the recommended tool, then the IP is given by docker-machine ip default.

      If the host is not localhost, you'll need to set environment variables to override the default ports/hosts for services which are defined in conf/development.ini.

      eg. Create a file that defines environment variables. Assuming the host of your Docker VM was called "docker" (replace with the actual hostname or IP):

      export DATABASE_URL='postgresql://postgres@docker/postgres'
      export TEST_DATABASE_URL='postgresql://postgres@docker/h_test'
      
      export ELASTICSEARCH_PORT=
      export ELASTICSEARCH_PORT_9200_TCP_ADDR=docker
      export ELASTICSEARCH_PORT_9200_TCP_PORT=9200
      
      export NSQD_PORT=
      export NSQD_PORT_4150_TCP_ADDR=docker
      export NSQD_PORT_4150_TCP_PORT=4150
      export NSQD_PORT_4151_TCP_ADDR=docker
      export NSQD_PORT_4151_TCP_PORT=4151
      
      export REDIS_PORT=
      export REDIS_PORT_6379_TCP_ADDR=docker
      export REDIS_PORT_6379_TCP_PORT=6379
      

      And source it with source <filename>

    2. Python dependencies

      During this step I ran into the following error under OS X at the very end of dependency installation:

      gevent is in an unsupported or invalid wheel

      See http://stackoverflow.com/questions/33009545/gevent-is-in-an-unsupported-or-invalid-wheel for a solution

      In short, the fix was:

      1. Edit setup.py to loosen the requirement for gevent to `gevent>=1.0.2
      2. Install a newer version of gevent via: pip install gevent=1.1b6 where 1.1b6 is the current beta at the time of writing.

      Once the final 1.1 build is released we should bump the dependency.

    3. Install the following packages:

      I think we need to add postgres to this list as well. See https://hypothes.is/a/m4v7zbm1RIiFDxqL594MHw

      brew install postgres

    4. PostgreSQL

      Later on when installing the python dependencies required to run the H backend, the pg_config executable will be required.

      Although you can install postgres via Docker, it appears that the postgres dev tools still need to be installed on the host machine as well.

      On OS X this can be done via brew install postgres

    5. Install h’s Python dependencies into the virtual environment, and its Node dependencies into the h/node_modules directory

      This has been obsoleted now by making this step happen as part of make dev (see the section below on "Running h")

    6. Download and run the official NSQ image, the official PostgreSQL image, and our custom Elasticsearch with ICU image

      On the command line this can be done with:

      docker pull nsqio/nsq
      docker pull postgres
      docker pull nickstenning/elasticsearch-icu
      
    1. The best explanation I was able to get from them for why they did this was, ``it looked ugly and I didn't understand why it was there.''

      First rate commit message material

    1. Useful guide to adding a central logging point for all events in an Angular app that are broadcast via $rootScope

    1. When using $rootScope.$on, we need to unbind those listeners each time the $scope is destroyed. $scope.$on listeners are automatically unbound, but we’ll need to call the above closure manually on the $destroy event:
    1. It’s known that Angular becomes slower with around 2,000 bindings due to the process behind dirty-checking. The less we can add to this limit the better, as bindings can add up without us really noticing it!

      From some preliminary testing it looks like we get close to hitting the 2000 watch count on the /stream view - which explains the lag.

    1. Do you have a question or comment that involves "security" and "hashids" in the same sentence? Don't use Hashids. Here are some ways to decode:
    1. The temporary solution we found is to wrap chrome.* api callback with setTimeout() function. In that case errors thrown within chrome.* api call are passed to window.onerror with correct line number. Example:

      Wrapping all the chrome.* async API calls such that exceptions in the callback result in an error being logged to a handler that we control looks like the way to go.

    2. In Chrome extensions, errors thrown in callbacks for async APIs do not trigger the global window.onerror handler.

    1. Replace a two-way '=' binding on the directive configuration with an expression binding '&'

      Note the caveats in the comments section at the bottom. '=' is not only a two-way binding but it also handles automatic updates when the input changes. In the absence of React-style 're-render the whole component' when a model value changes, this is needed.

    2. Smart components are connected to services. Though they may have inputs and outputs, they mostly know how to load their own data, and how to persist changes when they occur

      Useful categorization of 'smart' and 'dumb' in the context of Angular

    3. We can refactor this component by, first of all, changing its signature so that it gives out the new version of the object when the user is done, instead of just mutating the input object in place:

      The section on refactoring components that rely on two-way binding to update the model is useful

    4. Introduce a binding (=binding) for this external reference, and put it in the bindToController section of the component directive.

      Needs Angular >= 1.3

    5. I think this can pretty much be our Angular style guide.

    1. minimized JavaScript sourcecode will destroy the grouping in really bad ways. Because of this you should ensure Sentry can access your Source Maps.
    1. Here’s what the team says about preparing code for less migration effort when we get Angular 2.0, which is luckily in-line with the guesses that several others came up with so far.

      Some useful notes about writing Angular components in a forwards-compatible way.

  7. lhorie.github.io lhorie.github.io
    1. Some reading I came across whilst looking into error reporting for AngularJS expressions

    1. In version 1.4, bindToController gets even more powerful. When having an isolated scope with properties to be bound to a controller, we always define those properties on the scope definition and bindToController is set to true. In 1.4 however, we can move all our property binding definitions to bindToController and make it an object literal.

      This starts to look a lot like propTypes, except without runtime type checking.

    2. Changes to isolated scope properties from the outside world are not reflected back to the controllers’ this object.

      Notable caveat with using controllerAs in Angular 1.2.x

    3. In fact, we don’t even need to request $scope in our controller anymore, since the scope is bound the controller’s this reference when using controllerAs.

      So in the context of a directive, when a property is specified on scope in the directive's definition object, it will be available in expressions in the template via vm.<property>, assuming vm is the name assigned to the controller via controllerAs

    1. Intro to the controller as syntax in Angular 1.2.x - main benefit highlighted here is making it more explicit which controller an expression in a template is referring to when directives are nested.

    1. JSX is Not an HTML Template LanguageThough it looks like it, JSX isn’t a template in the sense that Handlebars and EJS are templates. It’s not a simple token replace and `.innerHTML= foo` dump like so many other tools.

      This is a great explanation of why JSX is not a templating engine, which it is often mistaken for.

    1. Links to a ton of style guides for different sites - possibly a very useful reference for H

    1. Consolidated all our HTML resets into a new module, Reboot. Reboot steps in where Normalize.css stops, giving you more opinionated resets like box-sizing: border-box, margin tweaks, and more all in a single Sass file.

      Worth having a look into the Reboot module to see what the reset involves and the rationale.

      Note that normalize.css is used as a baseline, with styles from reboot.scss applied on top.

      See https://github.com/twbs/bootstrap/blob/v4-dev/scss/_reboot.scss

    2. Documentation on what changed in the Bootstrap 4 Alpha, possibly a useful reference for CSS best practices in 2015.

    1. Note that we currently are using a universal selector reset in reset.scss in H which changes the default box-sizing model.

    1. Best Practice: use controller when you want to expose an API to other directives. Otherwise use link.
    1. The bad news: we now have to contemplate adding authentication to our RSS/Atom feeds.

      Since anyone who has the original link can join a group, perhaps just provide a way for group members to generate an RSS link that includes authentication (eg. as a query string parameter)?

    1. You’ll want to make sure that you list all required resources of a specific type in a single directive.
    1. So rather than waiting further we decided to instrument the existing web interface — not a terribly elegant or reliable solution but it works for now.

      Sigh, it looks like we'll need to do something similar for H in order to automate the Firefox extension build process unless APIs are ready soon.

    1. Useful introduction to how source maps work. The code for Mozilla's source map library is very readable and an easy way to test this in practice.

    1. You can then just use one class in your markup <button class="Button--error"> and get the common & specific styles you want. It’s a really powerful concept, but the implementation has some edge cases & pitfalls that you should be aware of. A great summary of those issues and links to further reading is available here, thanks to Hugo Giraudel.

      Some notes worth a read on SASS and @extends

    2. Article introducing CSS modules

    1. Here are a few handy tips on measuring your project’s performance profile:

      In particular, see this section on recommendations for setting up tests that reasonably simulate "real world" conditions.

    2. Web performance article from a couple of the Chrome team developers / (developer advocates). Mentioned on Twitter - https://twitter.com/aerotwist/status/649877465079390209

  8. Sep 2015
    1. Useful history of icon authoring techniques on the web and in particular icon fonts vs SVGs

    1. Some interesting slides on CSS styling performance on GitHub, particularly focusing on their diff pages.

      Several slides have direct references to WebKit internals explaining the impact on rule resolution performance.

      Mentions a useful tool for understanding CSS selector performance implications, css explain

    1. Nesting for BEM—or any other flavor CSS architecture—is helpful at first, but comes as a cost.

      Useful note on the pros and cons of using SCSS to simplify writing BEM-esque styles in CSS.

      The advice here is to just write out class names in full to make grepping easier.

    2. This post and a few others on the same blog contain some useful notes about experiences with CSS at GitHub

    1. Atomic CSS (ACSS)

      So this is essentially inline styles, but done using the 'class' attribute rather than 'style', where one class is created per unique declaration. cf' @vjeux's presentation on inline styles

    1. There isn’t much we can do to change how CSS works

      That's unfortunately defeatist.

    1. While it might be anecdotal, generating new selectors from the current selector reference (&) makes those selectors unsearchable in the codebase since they do not exist per se

      Useful con to note about nested selectors, harder to grep for. On the other hand, no worse than a nested selector with a generic name.

    1. Useful article on how to apply BEM styling with SCSS as something to point people to.

    2. LESS (and now SASS as well) allow to use & within a single class name. There is no strict requirements on what should be the symbols before and after &. Thus, you can produce simple selectors instead of cascades.

      This is the approach I've started to take for H

    1. Harry Roberts also has a brilliant system for ensuring all CSS keeps to the right naming convention: he lints his CSS using scss-lint to ensure all team members stick to the convention correctly. As Harry put it, “It’s all well and good telling the team to use BEM, but it’s important to police it as well.

      Recommendation for a useful tool to enforce CSS class naming consistency