Intro to facade

0 likes338 views

Facade.js is a JavaScript library designed to simplify drawing shapes, images, and text in the HTML5 canvas. It offers an easy-to-read key/value pair format, making the drawing process more efficient with less coding. Additionally, it supports JSON import and comes with various plugins for enhanced functionality.

Technology Art & Photos

Intro to Facade.js
Drawing shapes, images and text
in HTML5 canvas made easy.

In October of 2012
! GitHub hosted a
Game Jam.

The theme was
" forking,
# branching,
and $ cloning.

Instead I built a library
for drawing in canvas.

After three versions,
I’m ready to share.

It’s easy enough to use.
But it could be easier.

Some advantages
of this format.
? Easy to read.
? Format is key/value pairs (similar to CSS).
? Importable from JSON.

Facade.js is a wrapper
around the canvas 2d
rendering context.

Plugins in Development
? Gamepad.js - Simple customizable event
binding for the HTML Gamepad API.
? Box2D-plugin - A wrapper for the Box2D
JavaScript library.
? SATjs-plugin - A wrapper for the SAT-js library, a
simple JavaScript library for performing 2D
collision detection.

? Interactive Demos: http://play.facadejs.com
? Documentation: http://docs.facadejs.com
? Plugins: http://plugins.facadejs.com
? ! Repo: http://github.com/facadejs/Facade.js
? ! Organization: http://github.com/facadejs

Scott Doxey
!
twitter.com/@neogeek
github.com/neogeek

Domain Driven Design (DDD) is an approach to software development that models the problem domain using concepts and language from the real world. It recognizes that real businesses have multiple departments that communicate by sending messages, rather than being monolithic. By separating responsibilities into bounded contexts like different departments, complexity is reduced. This also allows the system to scale more easily. DDD uses the "ubiquitous language" of the domain or business to model it, rather than using only technical terms that developers understand. The benefits include gaining a useful model of the domain, refined definitions, domain experts contributing to design, improved user experience, clean boundaries, better enterprise architecture, agile modeling, and new strategic and tactical tools.

Choices for Responsive Redesign: Ground-up or Responsive RetrofitCantina

The document discusses responsive web design (RWD), highlighting the importance of creating adaptable and flexible web experiences across different devices. It outlines two approaches: designing responsively from the ground up and retrofitting existing designs, addressing the challenges and strategies associated with each method. Key concepts include the significance of mobile-first design, content strategy, and the incorporation of adaptive techniques for optimal performance.

Choices for Responsive Redesign: Ground-up or Responsive RetrofitCantina

The document discusses responsive web design (RWD) and its evolution, emphasizing the need to create flexible and adaptive designs to enhance user experiences across various devices. It contrasts building responsive sites from the ground up with retrofitting existing designs, outlining the benefits and challenges of each approach. Key considerations include content strategy, performance, and the importance of adopting a mobile-first mindset.

Mobile Monday Presentation: Responsive Web DesignCantina

The document discusses the fundamentals of responsive web design, emphasizing its importance in adapting to various devices using HTML, CSS, and JavaScript. It outlines key elements such as fluid grids, flexible images, and media queries while providing examples of basic boilerplate code. The document also touches on related concepts like mobile-first design and progressive enhancement to enhance user experience across different platforms.

Bootstrap 3 Talk - What is Bootstrap 3 | 聊聊 Bootstrap 3 - 初識什麼是 Bootstrap 3Code Basic

Module 3 - Intro to BootstrapKatherine McCurdy-Lapierre, R.G.D.

This document provides an overview of the Bootstrap framework. It discusses what Bootstrap is, how it can be used to create responsive web designs, and its advantages like pre-defined styles and classes that save development time. The document also covers Bootstrap's grid system, examples of how to use columns at different screen sizes, and some popular components like buttons, tables and carousels.

Designing the Connected Experience: Part 3 from Delivering the Connected Expe...Cantina

The document discusses designing connected experiences by delivering digital content and services across different contexts, devices, and environments to provide a continuous experience for users. This is done to maximize convenience by allowing people to easily access content and services regardless of their context, device, location, activity, or other factors through a seamless experience. Ensuring continuity is the goal so users feel connected regardless of changes in these variables.

Object Oriented Views / Aki SalmiAki Salmi

The document discusses object-oriented views in programming, focusing on coding practices and design decisions made during the development of a Confluence plugin. It emphasizes the importance of building context and managing domain entities to avoid complexities, particularly concerning the single responsibility principle. The talk encourages discussion on mob programming and the exploration of exhibit patterns for rendering models in various contexts.

Css border examples? Radek Fabisiak

pengenalan blender 3D Menggunakan animasiHumasSTITEK

The document outlines a workshop focused on learning 3D character animation using Blender, emphasizing the transition from 2D to 3D graphics. It provides a comprehensive project plan, required skills, and a detailed agenda for the workshops, covering topics such as 3D design, animation techniques, and rendering for the metaverse. Participants will create a 3D animated character and present their projects, integrating various design and programming skills throughout the process.

Building an E-commerce website in MEAN stackdivyapisces

This document provides an overview of building an eCommerce site using the MEAN stack. It begins with an introduction to JavaScript and then discusses the key components of the MEAN stack including Node.js, AngularJS, and MongoDB. It provides details on each component, their history, features, and how they work together. It emphasizes how MongoDB is well-suited for eCommerce applications due to its flexible schema and ability to store different product types within the same collection.

Canvas Deep DiveDave Balmer

The document discusses the HTML5 canvas element, emphasizing its capabilities for drawing complex shapes, image processing, and full-frame animation in web browsers. It highlights the need for better understanding and application among designers and programmers, addressing the element's limitations and compatibility across various modern browsers. The document encourages innovative uses of canvas for enhancing user experiences and bridging the gap between technical and design perspectives.

RemixRhys Hill

The document contains notes from various talks and presentations at a conference. Some key points covered include using CSS3 features like transforms responsibly, object-oriented CSS principles, responsive design with media queries, building games with libraries like Three.js and ImpactJS, hosting static websites in Azure blob storage, creating the world's biggest Pac-Man game in HTML5, using social plugins to enhance websites, and animating with SVG and canvas. Presenters emphasized the value of libraries and recommended resources like jQuery plugins. Attendees enjoyed learning new techniques, networking over free food and drinks, and seeing demos of Windows 8 and mobile applications.

GDG On Campus SECE - Web Development Session.pptxaswathcm29

The document outlines a web development workshop led by Aswath C M Sudha J, focusing on interactive learning through hands-on activities related to HTML, CSS, and JavaScript. It emphasizes the importance of web development skills in today's digital economy and introduces various web development concepts and coding examples. Participants will engage in practical tasks, including building a riddle app and applying styling and JavaScript for interactivity, culminating in live deployment of their projects.

Inside Flutter: Widgets, Elements, and RenderObjectsHansol Lee

This document explains the architecture of Flutter, detailing the roles of widgets, elements, and renderobjects, and how they interact within Flutter's layers. It emphasizes the mutable nature of renderobjects and the immutability of widgets, which collectively enable both flexibility in programming and performance efficiency. The summary also highlights that widgets configure, elements manage, and renderobjects paint, showcasing the interdependency among these components.

Responsive Web Design: Clever Tips and TechniquesVitaly Friedman

The document discusses responsive web design (RWD) techniques, emphasizing the need for adaptable layouts and content that provide optimal user experiences across different devices. It covers various strategies, including content choreography, resolution independence, conditional loading, and responsive typography, while also addressing practical challenges like image aspect ratios and media queries. The presentation aims to inspire a shift in mindset among designers, encouraging a more flexible and innovative approach to web design.

Design and Code. Work should be fun.Андрей Вандакуров

This document discusses best practices for collaboration between designers and developers. It recommends using blueprints, prototypes, and effective communication tools to facilitate the design and development process. Prototyping and preprocessors are also presented as ways to validate ideas quickly and efficiently. Frameworks, libraries, animations, and UI sets are referenced as options to accelerate development.

Fewd week4 slidesWilliam Myers

Rockstar Graphics with HTML5 @Media UKDave Balmer

The document discusses HTML5 features like Canvas and CSS3 that can be used for graphics and animations. Canvas allows drawing on an image tag that can be manipulated with JavaScript. CSS3 enables hardware-accelerated animations and basic 3D effects but is limited compared to Canvas. The document provides examples and recommendations for leveraging different features based on their capabilities and limitations.

Better. Faster. UXier. — AToMIC Designjennifer gergen

This talk proposes a new approach called Atomic Design for improving agile UX processes. It focuses on enabling rapid prototyping through higher fidelity prototypes, better collaboration between designers and developers on markup and CSS, and improved design asset management through version control. The approach involves organizing design assets into reusable patterns and components stored in a central library. This would allow for continuous incremental improvements to design globally based on user feedback, rather than large, infrequent redesigns. It aims to make discovery and collaboration easier through a shared vocabulary and standardized organization of files.

Dojo trainingvadivelan_k

This document provides an overview of Dojo, an open source JavaScript toolkit. It discusses the core components of Dojo including the core libraries for DOM handling, CSS handling, and JavaScript enhancements. It also describes Dijit, which provides accessible widgets, and DojoX, which contains experimental modules. The core provides basic functions for AJAX, events, animation and more. Dijit offers predefined widgets and mechanisms for creating custom widgets. DojoX extends the core functionality with additional widgets, behaviors, stores and other modules.

Building a game engine with jQueryPaul Bakaus

The document discusses the development of a game engine using jQuery, highlighting the unique challenges of browser game development compared to traditional game industry practices. It emphasizes the importance of selecting the right technologies, addressing performance issues, and utilizing server-side JavaScript with Node.js to streamline development. Ultimately, the goal is to create a commercially viable, cross-platform game engine optimized for web browsers.

Javascript Animation with Canvas - Gregory Starr 2015Gregory Starr

Sketch: Rapid Prototyping & Theme DesignRyan King

Visdjango presentation django_boston_oct_2014jlbaldwin

NODEJS EXPLAINED FOR TEENS, PRETEENS AND YOUND TECH ENTHUSIASTSadeniyiexcel

? Excited to share a fun and simple slide deck I created to teach preteens about Node.js! ? Using a superhero analogy, this presentation breaks down what Node.js is, why it’s cool, and how kids can start coding with it—perfect for young tech enthusiasts. ? I’ve tailored this for preteens to spark their curiosity in programming, and I’m thrilled to contribute to making tech education accessible for the next generation. Big thanks to @W3Schools for their amazing resources that inspire beginner-friendly learning! ? Check out the slides and let me know your thoughts—any tips for making coding even more exciting for kids? ??♂? #NodeJS #CodingForKids #TechEducation #PreteenLearning

Everything You Need to Know in Order to Start Using jQueryDave Ross

Tools for Visualizing Geospatial Data in a Web BrowserSafe Software

The document outlines tools and steps for visualizing geospatial data in web browsers, including a comparison of various libraries such as Leaflet, OpenLayers, and Cesium. Key considerations include the type of data to visualize, preferred coding level, and whether open-source or proprietary solutions are desired. It also provides a summary of the process for building web visualizations and resources for further learning.

Sketching for UX DesignersCantina

Demystifying the Design ProcessCantina

More Related Content

Similar to Intro to facade (20)

Css border examples? Radek Fabisiak

pengenalan blender 3D Menggunakan animasiHumasSTITEK

Building an E-commerce website in MEAN stackdivyapisces

Canvas Deep DiveDave Balmer

RemixRhys Hill

GDG On Campus SECE - Web Development Session.pptxaswathcm29

Inside Flutter: Widgets, Elements, and RenderObjectsHansol Lee

Responsive Web Design: Clever Tips and TechniquesVitaly Friedman

Design and Code. Work should be fun.Андрей Вандакуров

Fewd week4 slidesWilliam Myers

Rockstar Graphics with HTML5 @Media UKDave Balmer

Better. Faster. UXier. — AToMIC Designjennifer gergen

Dojo trainingvadivelan_k

Building a game engine with jQueryPaul Bakaus

Javascript Animation with Canvas - Gregory Starr 2015Gregory Starr

Sketch: Rapid Prototyping & Theme DesignRyan King

Visdjango presentation django_boston_oct_2014jlbaldwin

NODEJS EXPLAINED FOR TEENS, PRETEENS AND YOUND TECH ENTHUSIASTSadeniyiexcel

Everything You Need to Know in Order to Start Using jQueryDave Ross

Tools for Visualizing Geospatial Data in a Web BrowserSafe Software

Css border examples? Radek Fabisiak

pengenalan blender 3D Menggunakan animasiHumasSTITEK

Building an E-commerce website in MEAN stackdivyapisces

Canvas Deep DiveDave Balmer

RemixRhys Hill

GDG On Campus SECE - Web Development Session.pptxaswathcm29

Inside Flutter: Widgets, Elements, and RenderObjectsHansol Lee

Responsive Web Design: Clever Tips and TechniquesVitaly Friedman

Design and Code. Work should be fun.Андрей Вандакуров

Fewd week4 slidesWilliam Myers

Rockstar Graphics with HTML5 @Media UKDave Balmer

Better. Faster. UXier. — AToMIC Designjennifer gergen

Dojo trainingvadivelan_k

Building a game engine with jQueryPaul Bakaus

Javascript Animation with Canvas - Gregory Starr 2015Gregory Starr

Sketch: Rapid Prototyping & Theme DesignRyan King

Visdjango presentation django_boston_oct_2014jlbaldwin

NODEJS EXPLAINED FOR TEENS, PRETEENS AND YOUND TECH ENTHUSIASTSadeniyiexcel

Everything You Need to Know in Order to Start Using jQueryDave Ross

Tools for Visualizing Geospatial Data in a Web BrowserSafe Software

More from Cantina (12)

Sketching for UX DesignersCantina

Demystifying the Design ProcessCantina

Software is not a Building - Designing Technical Architecture for ChangeCantina

The document discusses various barriers to changing software over time and recommendations for addressing them. The main barriers covered are lack of design, coupling between components, invasive APIs, dehydration where the same code is shared across contexts, investments in infrastructure that then dictate design, reliance on specific team skills rather than general skills, and accumulating technical debt. Recommendations include upfront design, reducing coupling, adding boundaries, separating contexts, delaying technology decisions, broadening team skills, and paying down debt continuously.

Planning For designCantina

The document outlines essential elements for effective design planning, emphasizing the importance of collaboration among various roles such as designers and project managers. It discusses engagement models, design techniques, and the significance of real-time communication to avoid siloed workflows and ensure successful outcomes. Additionally, it highlights the need for flexible strategies, budgeting for contingencies, and the benefits of combining specialists and generalists in a team.

Five Key Ingredients in Successful Mobile ProjectsCantina

The document outlines five key ingredients for successful mobile projects, emphasizing the importance of a holistic product development process that incorporates lean and agile methodologies. It highlights the necessity of having a capable team with a strong focus on user experience and innovative thinking, encouraging collaboration and communication among team members. To increase the likelihood of success, teams should continuously refine their processes, build diverse capabilities, and prioritize delivering the right product to the right audience.

Delivering Responsive Design at ScaleCantina

The document discusses the importance and implementation of responsive web design, highlighting the significant shift towards mobile device usage and its impact on online purchasing. It emphasizes the need for effective communication, iterative processes, and stakeholder involvement in achieving successful web projects. Additionally, it outlines the steps for measuring success and continuously evolving products to meet user needs.

Design i/o - Creating Visual Interfaces for Digital SystemsCantina

The document outlines a visual design process for digital systems, focusing on atomic design, the design i/o framework, and lean UX principles. It highlights important steps such as component audits, design preference tests, and the creation of mood boards, while emphasizing user feedback and collaborative work. The presentation concludes with key takeaways underscoring the need for clear problem definition and systematic component thinking.

Introduction to ReactiveCantina

The document summarizes a presentation on reactive programming given by Steven Pember and David Fox of Cantina. It discusses what reactive programming is, the four traits of reactive systems according to the Reactive Manifesto (responsiveness, resilience, elasticity, and message-driven), and reactive technologies like Akka and Spray. It also covers actor models, how actors work, supervision strategies in Akka, and promises and futures.

Utilizing Lean Practices in the Enterprise: Part 1 of Delivering the Connecte...Cantina

Lean enterprises focus on building products that solve urgent customer problems through a process of formulating hypotheses about customer needs, building minimum viable products to test those hypotheses, and using data from real-world tests to evaluate and evolve their ideas. Key questions addressed include identifying the problem being solved, why the proposed solution is better than alternatives, who the target customer is, and how to effectively reach and build a business serving that customer through iterative development that prioritizes learning from tests with real customers.

Demystifying Content Strategy: Part 2 of Delivering the Connected ExperienceCantina

Content strategy is about planning for the creation, publication, and governance of useful content to engage users and businesses. It aims to provide user parity, content portability, and put content first. An effective content strategy establishes structure first and delivers outcomes like institutional knowledge, a repeatable content method, and adaptable content. It involves defining goals, messages, an evaluation framework, page tables, and an editorial calendar to optimize engagement, communication, and measurement across changing contexts.

The Need For Speed: Part 5 of Delivering the Connected ExperienceCantina

The document discusses the importance of website speed, noting that sites can lose significant percentages of traffic and bounce rates as load times increase from 100ms to 3 seconds. It also notes that 85% of mobile users expect similar response times to desktop. Two graphics show the simplified process of a mobile vs desktop web request, with mobile requiring more steps through various towers. The document asks how to get load times down to 1 second and suggests techniques like responsive design combined with server-side changes and prioritizing loading above-the-fold content.

A Brief History of Input Devices with Cantina's Daniel BostwickCantina

Sketching for UX DesignersCantina

Demystifying the Design ProcessCantina

Software is not a Building - Designing Technical Architecture for ChangeCantina

Planning For designCantina

Five Key Ingredients in Successful Mobile ProjectsCantina

Delivering Responsive Design at ScaleCantina

Design i/o - Creating Visual Interfaces for Digital SystemsCantina

Introduction to ReactiveCantina

Utilizing Lean Practices in the Enterprise: Part 1 of Delivering the Connecte...Cantina

Demystifying Content Strategy: Part 2 of Delivering the Connected ExperienceCantina

The Need For Speed: Part 5 of Delivering the Connected ExperienceCantina

A Brief History of Input Devices with Cantina's Daniel BostwickCantina

Recently uploaded (20)

FIDO Seminar: Authentication for a Billion Consumers - Amazon.pptxFIDO Alliance

Raman Bhaumik - Passionate Tech EnthusiastRaman Bhaumik

Securing AI - There Is No Try, Only Do!.pdfPriyanka Aash

War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdfbiswajitbanerjee38

Russia is one of the most aggressive nations when it comes to state coordinated cyberattacks?—?and Ukraine has been at the center of their crosshairs for 3 years. This report, provided the State Service of Special Communications and Information Protection of Ukraine contains an incredible amount of cybersecurity insights, showcasing the coordinated aggressive cyberwarfare campaigns of Russia against Ukraine. It brings to the forefront that understanding your adversary, especially an aggressive nation state, is important for cyber defense. Knowing their motivations, capabilities, and tactics becomes an advantage when allocating resources for maximum impact. Intelligence shows Russia is on a cyber rampage, leveraging FSB, SVR, and GRU resources to professionally target Ukraine’s critical infrastructures, military, and international diplomacy support efforts. The number of total incidents against Ukraine, originating from Russia, has steadily increased from 1350 in 2021 to 4315 in 2024, but the number of actual critical incidents has been managed down from a high of 1048 in 2022 to a mere 59 in 2024?—?showcasing how the rapid detection and response to cyberattacks has been impacted by Ukraine’s improved cyber resilience. Even against a much larger adversary, Ukraine is showcasing outstanding cybersecurity, enabled by strong strategies and sound tactics. There are lessons to learn for any enterprise that could potentially be targeted by aggressive nation states. Definitely worth the read!

AI vs Human Writing: Can You Tell the Difference?Shashi Sathyanarayana, Ph.D

CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025pcprocore

Enhance GitHub Copilot using MCP - Enterprise version.pdfNilesh Gule

9-1-1 Addressing: End-to-End Automation Using FMESafe Software

This session will cover a common use case for local and state/provincial governments who create and/or maintain their 9-1-1 addressing data, particularly address points and road centerlines. In this session, you'll learn how FME has helped Shelby County 9-1-1 (TN) automate the 9-1-1 addressing process; including automatically assigning attributes from disparate sources, on-the-fly QAQC of said data, and reporting. The FME logic that this presentation will cover includes: Table joins using attributes and geometry, Looping in custom transformers, Working with lists and Change detection.

Python Conference Singapore - 19 Jun 2025ninefyi

MuleSoft for AgentForce : Topic Center and API Catalogshyamraj55

This presentation dives into how MuleSoft empowers AgentForce with organized API discovery and streamlined integration using Topic Center and the API Catalog. Learn how these tools help structure APIs around business needs, improve reusability, and simplify collaboration across teams. Ideal for developers, architects, and business stakeholders looking to build a connected and scalable API ecosystem within AgentForce.

OpenACC and Open Hackathons Monthly Highlights June 2025OpenACC

The OpenACC organization focuses on enhancing parallel computing skills and advancing interoperability in scientific applications through hackathons and training. The upcoming 2025 Open Accelerated Computing Summit (OACS) aims to explore the convergence of AI and HPC in scientific computing and foster knowledge sharing. This year's OACS welcomes talk submissions from a variety of topics, from Using Standard Language Parallelism to Computer Vision Applications. The document also highlights several open hackathons, a call to apply for NVIDIA Academic Grant Program and resources for optimizing scientific applications using OpenACC directives.

The Future of AI Agent Development Trends to Watch.pptxLisa ward

Curietech AI in action - Accelerate MuleSoft developmentshyamraj55

CurieTech AI in Action – Accelerate MuleSoft Development Overview: This presentation demonstrates how CurieTech AI’s purpose-built agents empower MuleSoft developers to create integration workflows faster, more accurately, and with less manual effort linkedin.com +12 curietech.ai +12 meetups.mulesoft.com +12 . Key Highlights: Dedicated AI agents for every stage: Coding, Testing (MUnit), Documentation, Code Review, and Migration curietech.ai +7 curietech.ai +7 medium.com +7 DataWeave automation: Generate mappings from tables or samples—95%+ complete within minutes linkedin.com +7 curietech.ai +7 medium.com +7 Integration flow generation: Auto-create Mule flows based on specifications—speeds up boilerplate development curietech.ai +1 medium.com +1 Efficient code reviews: Gain intelligent feedback on flows, patterns, and error handling youtube.com +8 curietech.ai +8 curietech.ai +8 Test & documentation automation: Auto-generate MUnit test cases, sample data, and detailed docs from code curietech.ai +5 curietech.ai +5 medium.com +5 Why Now? Achieve 10× productivity gains, slashing development time from hours to minutes curietech.ai +3 curietech.ai +3 medium.com +3 Maintain high accuracy with code quality matching or exceeding manual efforts curietech.ai +2 curietech.ai +2 curietech.ai +2 Ideal for developers, architects, and teams wanting to scale MuleSoft projects with AI efficiency Conclusion: CurieTech AI transforms MuleSoft development into an AI-accelerated workflow—letting you focus on innovation, not repetition.

cnc-processing-centers-centateq-p-110-en.pdfAmirStern2

Coordinated Disclosure for ML - What's Different and What's the Same.pdfPriyanka Aash

PyCon SG 25 - Firecracker Made Easy with Python.pdfMuhammad Yuga Nugraha

Explore the ease of managing Firecracker microVM with the firecracker-python. In this session, I will introduce the basics of Firecracker microVM and demonstrate how this custom SDK facilitates microVM operations easily. We will delve into the design and development process behind the SDK, providing a behind-the-scenes look at its creation and features. While traditional Firecracker SDKs were primarily available in Go, this module brings a simplicity of Python to the table.

You are not excused! How to avoid security blind spots on the way to productionMichele Leroux Bustamante

We live in an ever evolving landscape for cyber threats creating security risk for your production systems. Mitigating these risks requires participation throughout all stages from development through production delivery - and by every role including architects, developers QA and DevOps engineers, product owners and leadership. No one is excused! This session will cover examples of common mistakes or missed opportunities that can lead to vulnerabilities in production - and ways to do better throughout the development lifecycle.

ReSTIR [DI]: Spatiotemporal reservoir resampling for real-time ray tracing ...revolcs10

FIDO Alliance Seminar State of Passkeys.pptxFIDO Alliance

“Key Requirements to Successfully Implement Generative AI in Edge Devices—Opt...Edge AI and Vision Alliance

For the full video of this presentation, please visit: https://www.edge-ai-vision.com/2025/06/key-requirements-to-successfully-implement-generative-ai-in-edge-devices-optimized-mapping-to-the-enhanced-npx6-neural-processing-unit-ip-a-presentation-from-synopsys/ Gordon Cooper, Principal Product Manager at Synopsys, presents the “Key Requirements to Successfully Implement Generative AI in Edge Devices—Optimized Mapping to the Enhanced NPX6 Neural Processing Unit IP” tutorial at the May 2025 Embedded Vision Summit. In this talk, Cooper discusses emerging trends in generative AI for edge devices and the key role of transformer-based neural networks. He reviews the distinct attributes of transformers, their advantages over conventional convolutional neural networks and how they enable generative AI. Cooper then covers key requirements that must be met for neural processing units (NPU) to support transformers and generative AI in edge device applications. He uses transformer-based generative AI examples to illustrate the efficient mapping of these workloads onto the enhanced Synopsys ARC NPX NPU IP family.

FIDO Seminar: Authentication for a Billion Consumers - Amazon.pptxFIDO Alliance

Raman Bhaumik - Passionate Tech EnthusiastRaman Bhaumik

Securing AI - There Is No Try, Only Do!.pdfPriyanka Aash

War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdfbiswajitbanerjee38

AI vs Human Writing: Can You Tell the Difference?Shashi Sathyanarayana, Ph.D

CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025pcprocore

Enhance GitHub Copilot using MCP - Enterprise version.pdfNilesh Gule

9-1-1 Addressing: End-to-End Automation Using FMESafe Software

Python Conference Singapore - 19 Jun 2025ninefyi

MuleSoft for AgentForce : Topic Center and API Catalogshyamraj55

OpenACC and Open Hackathons Monthly Highlights June 2025OpenACC

The Future of AI Agent Development Trends to Watch.pptxLisa ward

Curietech AI in action - Accelerate MuleSoft developmentshyamraj55

cnc-processing-centers-centateq-p-110-en.pdfAmirStern2

Coordinated Disclosure for ML - What's Different and What's the Same.pdfPriyanka Aash

PyCon SG 25 - Firecracker Made Easy with Python.pdfMuhammad Yuga Nugraha

You are not excused! How to avoid security blind spots on the way to productionMichele Leroux Bustamante

ReSTIR [DI]: Spatiotemporal reservoir resampling for real-time ray tracing ...revolcs10

FIDO Alliance Seminar State of Passkeys.pptxFIDO Alliance

“Key Requirements to Successfully Implement Generative AI in Edge Devices—Opt...Edge AI and Vision Alliance

Intro to facade

1. Intro to Facade.js Drawing shapes, images and text in HTML5 canvas made easy.

2. @neogeek Scott Doxey

3. I’m a user experience consultant at

4. Disclaimer: I built Facade.js

5. In October of 2012 ! GitHub hosted a Game Jam.

6. The theme was " forking, # branching, and $ cloning.

7. I didn’t build a game.

8. Instead I built a library for drawing in canvas.

9. After three versions, I’m ready to share.

10. Let’s talk about canvas.

11. It’s easy enough to use. But it could be easier.

12. Drawing a rectangle.

13. Drawing a rectangle with a stroke.

14. Drawing a circle.

15. Drawing a circle with a stroke.

16. Drawing a polygon.

17. Drawing a polygon with a stroke.

18. Positioning an object.

19. Rotating an object.

20. Rotating an object from the center.

21. Scaling an object.

22. Scaling an object from the center.

23. Now compare native canvas and Facade.js

24. Native canvas

25. Facade.js

26. Some advantages of this format. ? Easy to read. ? Format is key/value pairs (similar to CSS). ? Importable from JSON.

27. So what is Facade.js?

28. Facade.js is a wrapper around the canvas 2d rendering context.

29. What does that mean?

30. More drawing, less coding.

31. How to get started with Facade.js

32. http://play.facadejs.com

33. http://docs.facadejs.com

34. http://plugins.facadejs.com

35. Plugins in Development ? Gamepad.js - Simple customizable event binding for the HTML Gamepad API. ? Box2D-plugin - A wrapper for the Box2D JavaScript library. ? SATjs-plugin - A wrapper for the SAT-js library, a simple JavaScript library for performing 2D collision detection.

36. https://github.com/facadejs/Facade.js

37. https://github.com/facadejs

38. ? Interactive Demos: http://play.facadejs.com ? Documentation: http://docs.facadejs.com ? Plugins: http://plugins.facadejs.com ? ! Repo: http://github.com/facadejs/Facade.js ? ! Organization: http://github.com/facadejs

39. Questions?

40. DEMO

41. Thank you!

42. Scott Doxey ! twitter.com/@neogeek github.com/neogeek

狠狠撸

Intro to facade

Recommended

More Related Content

Similar to Intro to facade (20)

More from Cantina (12)

Recently uploaded (20)

Intro to facade