#HTML5: #web tools, exquisite corpse, web #accessibility
Posted on September 2nd, 2015
09/01/2015 @GoldmanSachs, 200 West Street, NY
Three speakers talked about a range of topics including: web-development tools, exquisite corpse, and improving web site accessibility.
In the first talk, Glenn Hinks @Kiswe mobile urged the audience to rethink the tools they use to develop web sites and showed how modern tools (I don’t mean ‘vi’) can speed development and improve maintainability. He recommended the following:
Editors: Atom, sublime
Code testing: JSHint,JSLint, ESLiint
Testing the back end code: Supertest, Mocha, supersamples
For more details see: https://github.com/Ghinks/bestpracticedemo
In the second talk, Jane Kim @janecakemaster spoke about her site which displays a line of poetry and asks the viewer to text in the next line of the poem (a.k.a. exquisite corpse). She used the following tools to create the site: hapijs, firebase, nodeJS
Justin Pachter @ebay spoke about improving web site accessibility for those with disabilities. He spoke about ARIA – accessible rich internet applications –how to ad navigation guidelines, etc and how they have implemented many of the WCAG 2.0 guidelines. One of the main goals is to provide information in tags so systems such as Jaws (Windows) and voice-over (Mac) can access and vocalize the page contents.
Justin talked about many best practices using html5 tags. These include having only one h1 elements to provide a focus for the page and displaying all images so users to tab through visible images on a page.
He recommended testing your site using the accessibility compliance tool http://wave.webaim.org/.
#Flux as a #StateSpaceModel of user interactions and #LocalStorage options for #WebBrowsers
Posted on August 11th, 2015
In the first talk, Taylor Hakes gave an introduction to Flux, an approach to organizing web development. Taylor spoke about the problems of purely programming the dom. One is that user interactions can be conceptualized by creating models in the virtual dom, but the two-way interactions between models and the UI offers little structure and the possibility of a complex web of interactions. For example, a user input can trigger many outcomes that may be hard to conceptualize or debug.
He then offered a view in which user interactions flow through a single dispatcher that coordinates all action requests, updates a state space, which in turn drives views. User interactions are routed through action requests, which then restart the state space update process coordinated by the dispatcher.
Taylor presented code examples showing that
- Actions are now functions
- The history of interactions is stored in state variables
- Debugging is easier since the state variables can be monitored vs. the user actions
- Flux is verbose, but useful when the logic is complex, but the number of states is manageable
- React complements Flux
To learn more, Taylor recommended the book: Evaluation of Flux Frameworks – by Dan Abramov
In the second talk, Geraldina Alvarez Garcia @Kickstarter discussed methods for storing data from a web browser on the local computer. The four methods are
- Local key-value store
- Session storage
Cookies are the most prevalent form of local storages, but they are limited to 4k of information. Geraldina talked about an application needing more storage and showed a code snippet implementing a key-value store. It can store up to 5MB of data, but cannot transfer the data directly to a server and is a synchronous operation which may interfere with other operations such as real-time interactive video.
Html5NYC: #FunctionalProgramming, #GeneticAlgorithms, #Geolocation in #HTML5
Posted on November 12th, 2014
10/12/2014 @CondeNast, 4 Times Square, NY
He talked about how functional programming emphasizes nesting of function calls in preference to loops, reusability of functions, avoiding use of global variables within functions, passing functions as function arguments, and returning functions as function outputs.
He talked about some of the challenges in incorporating these concepts into JS due to calls by reference when passing objects to a function. He showed how looping through a list can be replaced by recursive calls to process the first item of a list.
He said the main challenges were adopting a new mindset when programming and developing methods to handle a larger number of user-defined functions.
As an aside, those who are familiar with R will recognize the difference between using ‘for’ loops and applying the apply(), sapply() and aggregate() functions. In the case of R, these functions provide a massive speedup in execution.
In the second presentation, Kirill Cherkashin talked about genetic algorithms by showing how
- The Mona Lisa can be reproduced by randomly generated triangles alterdqualia.com
- http://rednuht.org/genetic_cars_2/incrementally improved the design of schematic cars by randomly mutating the shape, the wheels, and the weight of cars
- Google’s use of random search to find an optimal path between two points
Finally, Scott Luptowski @Handy described the HTML5 geolocation API. The API is locationed in window.navigator.geolocation (referred to here as ‘geo’)
Geo.getCurrentPosition() is the function which will ask you if the program can use your location and does the initial setup. The API returns accuracy, longitude and latitude with altitude and other returns optional. Scott said that even though the locations were coded using 12 digits, 5 seemed sufficient as they gave an accuracy of 1 meter (GPS is accurate to within 10 meters).
He recommended coding for the three error cases: 1. Permission denied 2. Timeout, 3. Position unavailable (unlikely). There are few callbacks in the API, the most important is geo.watchCurrentPositon, which indicates the position has changed since the last report.
JS Debugging, Living with MediaQueries and Speed Up Thy Style
Posted on July 17th, 2014
7/16/2014 @ Condé Nast 4 Times Square, New York, NY
Three technical talks were presented on tools and methods to create better web pages more efficiently.
1.Speed up thy style by Shefali Pandey. Shefali talked about efficient ways to display graphics and speed up the CSS formatting of pages. She discussed five methods:
2.Inline CSS images – Instead of linking to a file containing an image, the image can coded as a string of characters within HTML. If the code is cached, this further increases the loading speed. This may not work in older browsers and the additional processing needed will more quickly drain a phone battery.
3.Progressive JPG – gives the illusion of faster loading, since one immediately sees a rough image. However, progressive JPG files may take up more space and the additional processing limits their use in mobile computing..
4.Optimizing CSS selectors – see Paul Irish blog – better to remove unused CSS instead.
5.CSS properties – CSS painting methods such as gradients, box-shadow … slows down rendering, but are still faster than retrieving image files.
Shefali also emphasized that browsers are evolving quickly and what works in 2014 may not be a best practice in the future.
2.Living with MediaQueries by Alex Lee. Media Queries are one of the key building blocks in responsive web design. However, when web pages have many components and require very different types of behavior for different devices, their use in a static CSS style sheet becomes ponderous and hard to maintain. Alex addressed this issue showing how Behance bundles media declarations and views into libraries that allow simple library calls to manage a wide variety of views and actions for each device.
He recommended Nbd.js as an open source toolkit when creating these structures.
Amjad argues that the closure of functions is good coding practice, but he finds it useful to look inside the class while debugging. He especially likes to use the console command line to test code prior to inserting it into his program. He then listed some debugging tips and tricks which include
- Have the program in a runnable state
- Split big changes into smaller steps
- Breadth first before depth
- To find out what happens when events or problematic actions happen, replace code with calls to the debugger. This is especially useful since it allows you to trace the call stack.
- And many more…
He closed by talking about the utility of the Debug(fn) and monitor(fn) console commands and the tool he has developed to write and execute code conveniently: facebook.github.com/fb-flo.