• Developed performant, robust and maintainable pattern for Objective-C + React Native integration, incl. custom keyboard and cross-stack universal links support
• Built reusable components for Reagent, a ClojureScript wrapper for React with Reactive State Driven Rendering (https://github.com/reagent-project/reagent)
• Built ConstantJS for ES5 as a rival to ES6 const that uses namespacing and deep immutability to avoid problems with const redefinition, deep mutation and scope related bugs from refactoring.
• Chrome extension to improves the browsing experience by turning their web history into a visual UX, with context search, using self-devised NoSQL free text search algorithms
o Hacker News: https://news.ycombinator.com/item?id=7886270
Old:
• Stateful.JS: Developed SPA architecture on top of Backbone (Router and Events) with state-driven rendering that is independent of the view technology (HTML, SVG, Canvas, WebGL, etc) – Renders the entire page at once and remembers state of each page
o Repo: https://github.com/idibidiart/stateful
http://javacrypt.wordpress.com/2013/03/01/announcing-organicjs/
http://javacrypt.wordpress.com/2012/05/21/javascript-anti-templating/
Demos:
Realtime, Interactive Attack Vector Visualization:
https://www.youtube.com/watch?v=NTK-JEPorJg
Realtime Visualization:
http://www.youtube.com/watch?v=WcGt-xZ0vN8 (D3)
Quantitative Search:
http://www.youtube.com/watch?v=1NTOx-G3ABA
Interactive Infographics:
http://www.youtube.com/watch?v=0oOC2FYNo1M
D3 to PNG using PhantomJS as Web Server:
http://www.youtube.com/watch?v=_mqIx87NCPY
#TwitterART
http://www.youtube.com/watch?v=Wd-d1p-c56U (Twitter Art Client)
http://www.youtube.com/watch?v=UX5jOvdLG8c (Canvas to SVG)
Skills
Functional Javascript; Reactive ClojureScript; D3.js; NodeJS, custom, interactive data visualization; IndexedDB; DOM API; SVG; HTML; CSS3; SASS; Canvas; ThreeJS; Chrome Extensions; jQuery; Lo-dash; RegEx; WebCrypto; WebRTC; QA tool development; git; gulp; etc.
Principal Software Engineer @ Led the SF Reactive ClojureScript meetup (https://www.youtube.com/watch?v=xgi0Yf88Qgs), built the following: reusable components for Reagent (https://github.com/reagent-project/reagent), deeply frozen constants for JS with namespaced scope, instantly loading animated D3 charts using in-page data generated by Jade/NodeJS, performant and robust React Native + Objective-C integration, Objective-C custom input component with custom keyboard fully integrated into React Native (https://www.youtube.com/watch?v=YV3p09KoYKw), Universal Link implementation for React Native (https://www.youtube.com/watch?v=Wj6v6Y2DemU), More... From March 2015 to Present (10 months) San Francisco Bay AreaConsulting Engineer (owner, consultant) @ Deep Thought is a self-owned consulting practice. Several clients have brought me on full time basis in the last 2 years. This portion list my independent work:
· Developed SPA architecture built on top of Backbone with technology independent (HTML, SVG, Canvas, WebGL) stateful rendering schemes.
o Repo: https://github.com/idibidiart/stateful
· Developed Chrome Extension that improves the browsing experience for potentially millions of people by turning their web history into a fully content-searchable, visual interface, using self-devised NoSQL search algorithms, the Chrome Extension API and self-devised asynchronous control model for capturing content
o Repo: https://github.com/idibidiart/AllSeeingEye
o Video: https://www.youtube.com/watch?v=zEEWF4HxCtE
• Proposed reasonable changes to IndexedDB cursor/iterator APIs to eliminate potential confusion: http://lists.w3.org/Archives/Public/public-webapps/2014AprJun/0636.html
• Fixed performance bottlenecks and memory leaks in a complex, real time, interactive visualization: https://www.youtube.com/watch?v=NTK-JEPorJg
• Developed a CSS3 transitions plugin for D3 that allows the use of hardware-accelerated transitions on D3 selections:http://jsfiddle.net/marcfawzi/NLadL/
• Developed OrganicJS, super light framework for reusable JS+HTML+SVG components with chainable properties and methods, dynamic setters/getters, reusable HTML/SVG markup and safe sharing of mutable state among components in user-defined scopes. Only 135 lines of code, including comments.
o Demo: http://idibidiart.github.com/organicjs/
o Repo: https://github.com/idibidiart/organicjs From February 2012 to Present (3 years 11 months) San Francisco Bay AreaPrincipal Software Engineer (UI) @ • Developed of unique data visualizations using D3 and Functional-style reusable Javascript with focus on simplicity of design and advanced and unique concepts such as generating pre-attentive cues (animating the data for sake of grabbing attention) and finely spaced color stripes instead of solid fill (SVG patterns) for backlight-enhanced color contrast on Retina displays.
• Developed random data generators and automated testing of visualizations against spec via js-check (TDD for data visualization)
• Developed robust, programmable PhantomJS-based Web service converting D3 visualizations on backend to PNGs and serving them to users (code+data go in, PNG comes out) Also, developed a unique technique for generating drop shadow from PNG images using HTML5 Canvas and using that dynamically in the CSS for hover effect Sample of PNG generation of maps
• Developed jQuery/D3 driven Multiple Choice Voting Widget which also acts as a data visualization widget
• Developed zooming carousel for images that supports touch/swipe events, using self-authored cross-browser CSS3 transition/transform plugin for jQuery, now adapting for D3 to improve D3’s animation performance. Zooming Carousel w/ CSS3 Transitions
• Worked on many other innovative UI concepts and projects, including: X vs Y Pop Culture Visualization, Self-Authored Modified Delaunay Filter From March 2013 to December 2013 (10 months) Sr. Data Visualization Engineer @ • Designed and coded realtime data visualization for GiveMN giving day event, showing live donations ($17M total in 24 hours) on GeoJSON-specified SVG (D3) rendered map, with two simultaneous realtime trend lines and thousands of map point projection per second. Time compression algorithm was added to produce a youtube video, seen here: http://www.youtube.com/watch?v=WcGt-xZ0vN8
• Designed and coded a data visualization driven, discovery-oriented search interface. Early version seen here: http://www.youtube.com/watch?v=-Ff607WWDig
• Developed functional patterns and framework features on top of the D3 data visualization library (see http://javacrypt.wordpress.com) From June 2012 to February 2013 (9 months) San Francisco Bay AreaCoder-Founder @ idi.bidi.art is the world's first unicode Twitter Art Client and visual editor. It includes features like domain-heuristics based Art recognition/junk filtering, Unicode-text-to-SVG-path conversion, SVG/PNG save from the browser and a special vector effect to make Twitter Art look more like hand drawn art.
Twitter Art is a new medium for micro-art with tens of thousands of users and growing...
http://idibidiart.com (Firefox while in beta)
idom: JSON-Driven DOM Templating without the templates: Tiny lib ~1,000 of code. Adds multiple-inheritace and encapsulation to the DOM:
http://idibidiart.github.com/idi.bidi.dom/ From June 2010 to November 2011 (1 year 6 months) Chief Architect @ From July 2006 to June 2010 (4 years) Thinker-Blogger @ Semantic web, p2p, evolving trends From May 2006 to November 2008 (2 years 7 months) Founder @ Mobile entertainment software From September 2002 to September 2004 (2 years 1 month) Principal Consultant @ From May 1997 to August 2002 (5 years 4 months) Chief Architect @ Telecommunications software and hardware maker. Acquired by ADC Telecommunications in February 2001. From May 1997 to February 2001 (3 years 10 months) Co-Founder @ VC-funded Startup consumer hardware/software venture. From 1990 to 1992 (2 years)
Marc Fawzi is skilled in: JavaScript, REST, APIs, Start-ups, DOM, CSS3, File, Regular Expressions, D3, d3.js, Canvas, SVG, RegEx, Amazon Web Services, Xcode
Websites:
http://idibidiart.com,
http://javacrypt.wordpress.com