Itp 140 – Client Side Scripting (4 Cr.)
Total Page:16
File Type:pdf, Size:1020Kb
Load more
Recommended publications
-
Machine Learning in the Browser
Machine Learning in the Browser The Harvard community has made this article openly available. Please share how this access benefits you. Your story matters Citable link http://nrs.harvard.edu/urn-3:HUL.InstRepos:38811507 Terms of Use This article was downloaded from Harvard University’s DASH repository, and is made available under the terms and conditions applicable to Other Posted Material, as set forth at http:// nrs.harvard.edu/urn-3:HUL.InstRepos:dash.current.terms-of- use#LAA Machine Learning in the Browser a thesis presented by Tomas Reimers to The Department of Computer Science in partial fulfillment of the requirements for the degree of Bachelor of Arts in the subject of Computer Science Harvard University Cambridge, Massachusetts March 2017 Contents 1 Introduction 3 1.1 Background . .3 1.2 Motivation . .4 1.2.1 Privacy . .4 1.2.2 Unavailable Server . .4 1.2.3 Simple, Self-Contained Demos . .5 1.3 Challenges . .5 1.3.1 Performance . .5 1.3.2 Poor Generality . .7 1.3.3 Manual Implementation in JavaScript . .7 2 The TensorFlow Architecture 7 2.1 TensorFlow's API . .7 2.2 TensorFlow's Implementation . .9 2.3 Portability . .9 3 Compiling TensorFlow into JavaScript 10 3.1 Motivation to Compile . 10 3.2 Background on Emscripten . 10 3.2.1 Build Process . 12 3.2.2 Dependencies . 12 3.2.3 Bitness Assumptions . 13 3.2.4 Concurrency Model . 13 3.3 Experiences . 14 4 Results 15 4.1 Benchmarks . 15 4.2 Library Size . 16 4.3 WebAssembly . 17 5 Developer Experience 17 5.1 Universal Graph Runner . -
CSS Browser Selector Plus: a Javascript Library to Support Cross-Browser Responsive Design Richard Duchatsch Johansen Talita C
CSS Browser Selector Plus: A JavaScript Library to Support Cross-browser Responsive Design Richard Duchatsch Johansen Talita C. Pagani Britto Cesar Augusto Cusin W3C Accessibility WG Member and Assistant Coordinator Professor at Faculdade Paraíso do Senior Front-end Developer at of Educational Projects - MStech Ceará and W3C Accessibility WG Eventials – Rua Itapaiúna, 2434 Rua Joaquim Anacleto Bueno, 1-42 Member – Rua da Conceição, 1228 São Paulo – SP – Brazil, Zip Code Bauru – SP – Brazil, Juazeiro do Norte – CE – Brazil, 05707-001 Zip Code 17047-281 Zip Code 63010-465 +55 14 9711-7983 +55 14 3235-5500 +55 15 8100-4466 [email protected] [email protected] [email protected] ABSTRACT means you can use CSS Media Queries to tweak a CSS for a Developing websites for multiples devices have been a rough task mobile devices, printer or create a responsive site. for the past ten years. Devices features change frequently and new Media queries is an extension to the @media (or media=”” devices emerge every day. Since W3C introduced media queries attribute, in <link> tag) specification on CSS, allowing in CSS3, it’s possible to developed tailored interfaces for multiple declaration of conditional queries expressions to detect particular devices using a single HTML document. CSS3 media queries media features, such as viewport width, display color, orientation have been used to support adaptive and flexible layouts, however, and resolution [1], as shown on Table 1. it’s not supported in legacy browsers. In this paper, we present CSS Browser Selector Plus, a cross-browser alternative method Table 1. -
Web Security
CSE343/443 Lehigh University Fall 2015 Web Security Presenter: Yinzhi Cao Slides Inherited and Modified from Prof. John Mitchell Reported Web Vulnerabilities "In the Wild" 1200 1000 800 Input Validation 600 CSRF XSS SQLi 400 200 0 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 Web application vulnerabilities Goals of web security Safely browse the web n Users should be able to visit a variety of web sites, without incurring harm: w No stolen information (without user’s permission) w Site A cannot compromise session at Site B Secure web applications n Applications delivered over the web should have the same security properties we require for stand- alone applications Network security Network Attacker System Intercepts and controls network communication Alice Web security System Web Attacker Sets up malicious site visited by victim; no control of network Alice Web Threat Models Web attacker n Control attacker.com n Can obtain SSL/TLS certificate for attacker.com n User visits attacker.com w Or: runs attacker’s Facebook app Network attacker n Passive: Wireless eavesdropper n Active: Evil router, DNS poisoning Malware attacker n Attacker escapes browser isolation mechanisms and run separately under control of OS Malware attacker Browsers (like any software) contain exploitable bugs n Often enable remote code execution by web sites n Google study: [the ghost in the browser 2007] w Found Trojans on 300,000 web pages (URLs) w Found adware on 18,000 web pages (URLs) Even if browsers were bug-free, still lots of vulnerabilities -
Onclick Event-Handler
App Dev Stefano Balietti Center for European Social Science Research at Mannheim University (MZES) Alfred-Weber Institute of Economics at Heidelberg University @balietti | stefanobalietti.com | @nodegameorg | nodegame.org Building Digital Skills: 5-14 May 2021, University of Luzern Goals of the Seminar: 1. Writing and understanding asynchronous code: event- listeners, remote functions invocation. 2. Basic front-end development: HTML, JavaScript, CSS, debugging front-end code. 3. Introduction to front-end frameworks: jQuery and Bootstrap 4. Introduction to back-end development: NodeJS Express server, RESTful API, Heroku cloud. Outputs of the Seminar: 1. Web app: in NodeJS/Express. 2. Chrome extensions: architecture and examples. 3. Behavioral experiment/survey: nodeGame framework. 4. Mobile development: hybrid apps with Apache Cordova, intro to Ionic Framework, progressive apps (PWA). Your Instructor: Stefano Balietti http://stefanobalietti.com Currently • Fellow in Sociology Mannheim Center for European Social Research (MZES) • Postdoc at the Alfred Weber Institute of Economics at Heidelberg University Previously o Microsoft Research - Computational Social Science New York City o Postdoc Network Science Institute, Northeastern University o Fellow IQSS, Harvard University o PhD, Postdoc, Computational Social Science, ETH Zurich My Methodology Interface of computer science, sociology, and economics Agent- Social Network Based Analysis Models Machine Learning for Optimal Experimental Experimental Methods Design Building Platforms Patterns -
Front 01: HTML Y
HTML Y CSS FRONT PRIMERA PARTE Guía para directivos y técnicos V.1 Front HTML y CSS Este documento forma parte de las guías de onboarding de Autentia. Si te apasiona el desarrollo de software de calidad ayúdanos a difundirlas y anímate a unirte al equipo. Este es un documento vivo y puedes encontrar la última versión, así como el resto de partes que completan este documento, en nuestra web. https://www.autentia.com/libros/ Esta obra está licenciada bajo la licencia Creative Commons Attribution ShareAlike 4.0 International (CC BY-SA 4.0) FRONT - HTML Y CSS Hoy en día el negocio está en la que se publican y organizan los red. Es en el mercado on-line contenidos, además del grado donde se producen la mayor parte de usabilidad y accesibilidad de de los intercambios comerciales los mismos, influye directamente entre clientes y proveedores. en el posicionamiento que los El primer contacto de nuestros motores de búsqueda asignan a usuarios con nuestro negocio, y las aplicaciones. en muchos casos el único, es a través de una aplicación web o móvil. No disponer de un diseño atractivo, una experiencia de usuario agradable, accesible y que se adapte de manera adecuada para ser usada en diferentes dispositivos (Responsive), es garantía de una pérdida masiva de potenciales clientes. De la misma manera, la forma en la FRONT - HTML Y CSS “No hay una segunda oportunidad para una primera impresión” Alcanzar la habilidad de realizar diseños profesionales y usables no es algo baladí y se necesita un conocimiento profundo en marketing digital, experiencia de usuario y en tecnologías front-end. -
Document Object Model
Document Object Model CITS3403: Agile Web Development Semester 1, 2021 Introduction • We’ve seen JavaScript core – provides a general scripting language – but why is it so useful for the web? • Client-side JavaScript adds collection of objects, methods and properties that allow scripts to interact with HTML documents dynamic documents client-side programming • This is done by bindings to the Document Object Model (DOM) – “The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents.” – “The document can be further processed and the results of that processing can be incorporated back into the presented page.” • DOM specifications describe an abstract model of a document – API between HTML document and program – Interfaces describe methods and properties – Different languages will bind the interfaces to specific implementations – Data are represented as properties and operations as methods • https://www.w3schools.com/js/js_htmldom.asp The DOM Tree • DOM API describes a tree structure – reflects the hierarchy in the XTML document – example... <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> A simple document </title> </head> <body> <table> <tr> <th>Breakfast</th> <td>0</td> <td>1</td> </tr> <tr> <th>Lunch</th> <td>1</td> <td>0</td> </tr> </table> </body> </html> Execution Environment • The DOM tree also includes nodes for the execution environment in a browser • Window object represents the window displaying a document – All properties are visible to all scripts – Global variables are properties of the Window object • Document object represents the HTML document displayed – Accessed through document property of Window – Property arrays for forms, links, images, anchors, … • The Browser Object Model is sometimes used to refer to bindings to the browser, not specific to the current page (document) being rendered. -
Metropolia-Thesis.Pdf
Joni Korpi Adaptive Web Design As applied to the design process of a web application Metropolia University of Applied Sciences Bachelor of Engineering Media Technology Bachelor’s Thesis 16.3.2012 Abstract Author Joni Korpi Title Adaptive Web Design As applied to the design process of a web application Number of Pages 36 pages Date 18.3.2012 Degree Bachelor of Engineering Degree Programme Media Technology Specialisation option Digital Media Instructors Aarne Klemetti, Senior Lecturer Harri Airaksinen, Principal Lecturer This thesis explored the usage of adaptive web design techniques in the design process of a reservation and inventory management web application, New Reserve. It attempted to uncover issues a designer is likely to face when moving from a tradi- tional web design process to an adaptive one. Most issues uncovered were related to keeping visual design appealing and attempt- ing to support multiple input methods, such as touch screens and mice, at the same time. Using a fluid grid for visual design was found to be difficult, as they caused problems when elements start stretching beyond their optimal maximum dimensions, and when element dimensions are determined in a mix of percentage units and absolute units. Intentionally leaving empty space in wide designs and using the alternative "border-box" model were found to alleviate these problems. Using the "Mobile First" approach for design was found to be recommended, as the amount of mobile internet users is set to overtake desktop internet users very soon. The approach also helps in keeping designs cruft-free. Making images adapt to mo- bile sizes and bandwidth restrictions was found to be difficult, but there is hope for a standards-based technique to deal with this in the near future. -
RESPONSIVE IMAGES Comparing Techniques for Implementing Responsive Images to Websites
rik en v H d a pa ka ll s M a RESPONSIVE IMAGES Comparing techniques for implementing responsive images to websites Bachelor Degree Project in Computer Science 30 ECTS Spring term 2014 Jafet Bjarkar Björnsson Supervisor: Jana Rambusch Examiner: Henrik Gustavsson Abstract This thesis explores responsive images for websites, i.e., content images that respond to users display size, pixel density and bandwidth. We look into responsive web design and how it is related to responsive images. Different responsive image techniques are discussed and various use cases for responsive images are explored along with technologies that are needed to implement responsive images. A testing website is built and responsive image techniques are applied one by one, tested and compared and its effect on the websites load time is measured. The process of implementing the techniques is described with code examples and images. The results indicate that responsive images can certainly have positive effect on loading time of a website. Weather or not responsive images should be implemented depends on how much image data the website has and how fast the Internet connection is. Websites with more images can certainly profit from using responsive image techniques, especially if only slower bandwidths are available. Keywords: responsive, images, mobile, performance, HTML5, CSS3 Table of Contents 1 Introduction .......................................................................................................... 1 2 Background ......................................................................................................... -
Javascript and Embedded Objects
Color profile: Generic CMYK printer profile Composite Default screen Complete Reference / JavaScript: TCR / Powell & Schneider / 225357-6 / Chapter 18 Blind Folio 557 18 JavaScript and Embedded Objects odern browsers support many technologies beyond (X)HTML, CSS, and JavaScript. A wide variety of extra functionality is available in the form of browser plug-ins, MActiveX controls, and Java applets. These technologies provide extended capabilities that can make Web pages appear more like applications than marked-up text. Embedded objects provide a natural complement to the limited capabilities of scripting languages like JavaScript. Embedded objects come in many forms, but the most popular are multimedia in nature. A good example is Macromedia Flash files, which allow designers to add advanced vector graphics and animation to Web sites. Various other types of embedded video, sound, and live audio are also quite popular. Embedded Java applets are often included in pages that require more advanced graphics, network, or processing functionality. Browsers provide the bridge that facilitates communication between JavaScript and embedded objects. The way this communication is carried out is essentially non-standardized, although browser vendors adhere to their own ad hoc “standards,” which are in widespread use. Even so, there are numerous concerns when dealing with embedded objects. First, including them makes the assumption that the user’s browser has the capability to handle such objects. Second, even if the user does have an appropriate extension installed, many users find embedded objects annoying because they increase download time while only occasionally improving the overall utility of the site. Third, users with older browsers and users on non-Windows platforms are often unable to use embedded objects because of lack of support. -
Customizing Modernizr
www.allitebooks.com Learning Modernizr Create forward-compatible websites using feature detection features of Modernizr Adam Watson BIRMINGHAM - MUMBAI www.allitebooks.com Learning Modernizr Copyright © 2012 Packt Publishing All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information. First published: December 2012 Production Reference: 1171212 Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK. ISBN 978-1-78216-022-9 www.packtpub.com Cover Image by J.Blaminsky ([email protected]) www.allitebooks.com Credits Author Project Coordinator Adam Watson Shraddha Bagadia Reviewers Proofreader Chetankumar Akarte Aaron Nash Ben Fhala Michelle Williamson Indexers Hemangini Bari Acquisition Editor Rekha Nair Wilson D'Souza Graphics Commissioning Editor Aditi Gajjar Meeta Rajani Maria D'souza Production Coordinator Prachali Bhiwandkar Technical Editor Nitee Shetty Cover Work Prachali Bhiwandkar Copy Editors Vrinda Amberkar Alida Paiva www.allitebooks.com About the Author Adam Watson began life as a guitar maker but quickly transitioned into tech after landing a irmware-testing gig at Hewlett Packard. -
Building Responsive Websites
HTML5 and CSS3: Building Responsive Websites Design robust, powerful, and above all, modern websites across all manner of devices with ease using HTML5 and CSS3 A course in three modules BIRMINGHAM - MUMBAI HTML5 and CSS3: Building Responsive Websites Copyright © 2016 Packt Publishing All rights reserved. No part of this course may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this course to ensure the accuracy of the information presented. However, the information contained in this course is sold without warranty, either express or implied. Neither the authors, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this course. Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this course by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information. Published on: October 2016 Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK. ISBN 978-1-78712-481-3 www.packtpub.com Credits Authors Content Development Editor Thoriq Firdaus Amedh Pohad Ben Frain Benjamin LaGrone Graphics Kirk D’Penha Reviewers Saumya Dwivedi Production Coordinator Deepika Naik Gabriel Hilal Joydip Kanjilal Anirudh Prabhu Taroon Tyagi Esteban S. Abait Christopher Scott Hernandez Mauvis Ledford Sophie Williams Dale Cruse Ed Henderson Rokesh Jankie Preface Responsive web design is an explosive area of growth in modern web development due to the huge volume of different device sizes and resolutions that are now commercially available. -
Web Components— What's the Catch?
Web Components— What’s the Catch? TJ VanToll | @tjvantoll Kendo UI jQuery UI UI libraries are seen as the ideal use case for web components Proof-of-concept rewrite of a few jQuery UI widgets to use web components hps://github.com/tjvantoll/ui-web-components Web components’ public image • “[T]he Web Components revoluOon” – hEp://webcomponents.org/presentaons/polymer-and- the-web-components-revoluOon-at-io/ • “Web components are a game changer” – hEp://webcomponents.org/presentaons/polymer-and- web-components-change-everything-you-know-about-web- development-at-io/ • “Web Components Are The Future Of Web Development” – http://techcrunch.com/2013/05/19/google- believes-web-components-are-the-future-of- web-development/ Web components’ public image • “A Tectonic ShiW for Web Development” – hEps://developers.google.com/events/io/2013/ sessions/318907648 • “Join the Web Components revoluOon” – hEp://www.ibm.com/developerworks/library/wa- polymer/ • “Web Components usher in a new era of web development” – https://www.polymer-project.org/ Web components’ public image • “Web Components - A Quantum Leap in Web Development” – hEp://lanyrd.com/2014/qconsf/sddqc/ • “The Dawn of the Reusable Web” – hEp://www.codemash.org/session/the-dawn-of-the- reusable-web-diving-into-web-components/ • “Web Components are ushering in a HTML renaissance” – hEp://addyosmani.com/blog/video-componenOze- the-web-talk-from-lxjs/ The catch • Polyfilling shadow DOM • Resolving HTML import dependencies • Changing form elements’ UI • Browser support The catch • Polyfilling shadow DOM • Resolving HTML import dependencies • Changing form elements’ UI • Browser support Shadow DOM (nave behavior in Chrome) Shadow DOM (polyfilled behavior in Safari) Shimming DOM APIs https://github.com/webcomponents/webcomponentsjs/blob/4c5f21610c6cea02c74beaa3a25cd8075807ce31/src/ ShadowDOM/querySelector.js#L193-209 Shim all the things! https://github.com/Polymer/ShadowDOM/tree/master/src/wrappers Polyfilling CSS selectors • The shadow DOM specificaon introduces a lot of new CSS things.