SlideShare a Scribd company logo
Building Web Hack Interfaces Christian Heilmann UEL Hack Day London, UK, October 2007
Building web interfaces is a fun task.
The technologies involved are easy to learn.
Text + Images + Multimedia =  Content “ What is it about”

Recommended for you

Leadpreneur and discussion Global Top Leader Challenge
Leadpreneur and discussion Global Top Leader ChallengeLeadpreneur and discussion Global Top Leader Challenge
Leadpreneur and discussion Global Top Leader Challenge

This document discusses various leadership styles and skills. It notes that moderate to high energy leaders are good listeners, teachers, and at dealing with crises. They have moderate risk tolerance and ability to delegate. High energy leaders have strong networking skills but poorer listening. Successful leaders are not always entrepreneurs, but successful entrepreneurs are always leaders. Key leadership skills include conceptual abilities, human skills, and the ability to impact the world. Empathetic leaders lead by example and are motivated to help others succeed. The document suggests group work on scenarios involving low-budget leadership, organizational strategy, and a CEO's role in a small business.

Web hack & attacks
Web hack & attacksWeb hack & attacks
Web hack & attacks

This document discusses cross-site scripting (XSS) and cross-site request forgery (CSRF) attacks. It provides an overview of XSS, how it has advanced in recent years through the use of JavaScript malware and trojans. The document demonstrates through a live demo how XSS can be used to gain zombie control of machines. It concludes with recommendations on how to protect against these attacks through proper coding, input validation, user education, and browser security settings.

Why java is important in programming language?
Why java is important in programming language?Why java is important in programming language?
Why java is important in programming language?

Java is highly robust and flexible programming language as it must be compiled through as cross-platform suitable for JVM (Java Virtual Machine). Also, android mobile apps are also built using Java platform since the android OS (Operating System) runs on Java language environment.

webdevelopmentj2ee
HTML =  Structure “ What is what”
CSS + Background images  =  Look and Feel “ How should it be displayed”
Scripting and Extensions  =  Behaviour “ How should it behave and react?”
Playing each of these to their respective strengths = great web products.

Recommended for you

Risk assesment
Risk assesmentRisk assesment
Risk assesment

This risk assessment document identifies and provides solutions to risks associated with night filming. It discusses dangers from low visibility, tripping hazards, and distracted filming near roads. Solutions include using well-lit areas, checking traffic regularly, and directing bright lights away from traffic. The document also notes risks from smoke machines, such as choking, and solutions like checking for crew breathing issues and preventing machine overheating.

Panduan Instalasi Android Studio
Panduan Instalasi Android StudioPanduan Instalasi Android Studio
Panduan Instalasi Android Studio

Panduan Instalasi Android Studio

instalasi android studioandroid studiopanduan android studio
“Can we deface your Web in 10 mins?” - Edu 3.4
“Can we deface your Web in 10 mins?” - Edu 3.4“Can we deface your Web in 10 mins?” - Edu 3.4
“Can we deface your Web in 10 mins?” - Edu 3.4

This document discusses common hacking incidents like website defacement, information theft, and data modification. It provides examples of vulnerabilities like SQL injection, outdated content management systems, and sensitive files with weak protections. The document demonstrates how a hacker could potentially deface a sample educational website within 10 minutes by browsing it, finding unprotected directories, exploiting vulnerabilities like SQL injection, and uploading code to control the server. It concludes with tips to assess websites for security issues, apply countermeasures, and improve security awareness.

cybersecurityschool case
There is one thing to consider though.
Browser Operating System  Screen Size  Screen Resolution Browser Size Plugins and configurations Input Device Reading Level Vision Level of Understanding Motor accuracy
Browser Operating System  Screen Size  Screen Resolution Browser Size Plugins and configurations Input Device Reading Level Vision Level of Understanding Motor accuracy UNKNOWN
Keeping this in mind makes you a true developer for the web.

Recommended for you

E-Gov Project Management Essentials
E-Gov Project Management EssentialsE-Gov Project Management Essentials
E-Gov Project Management Essentials

Elaboration of reference standards and fundamental competencies in the management of e-government projects,

egovigabayea
Let's Hack School: Learner Agency in a Time of New Technologies
Let's Hack School: Learner Agency in a Time of New TechnologiesLet's Hack School: Learner Agency in a Time of New Technologies
Let's Hack School: Learner Agency in a Time of New Technologies

In the talk where these slides originated, delivered in March, 2015, at Colorado State University, I discuss some of what I think needs to be thought through when implementing technology and building schools as civic spaces.

moocs
what is security
what is securitywhat is security
what is security

This document discusses network security and provides information on key security concepts. It covers prevention, detection, and response as the foundation of security. Integrity, confidentiality, availability, and authentication are discussed in detail. The document emphasizes that network security is as much about business processes and policies as technical controls. Overall prevention is the most important and cost-effective approach to security. Detection and response procedures should also be established in case preventative controls fail.

networkingkeamanan jaringan
Be paranoid. Expect the failure.
Yahoo! has to do that day-in day-out.
People trust us with their data and use our products to connect with other people.
This is why we hire great developers.

Recommended for you

Belajar Android Studio Material Design Penggunaan RecyclerView dan Card View
Belajar Android Studio Material Design Penggunaan RecyclerView dan Card ViewBelajar Android Studio Material Design Penggunaan RecyclerView dan Card View
Belajar Android Studio Material Design Penggunaan RecyclerView dan Card View

Belajar Android Studio Material Design Penggunaan RecyclerView dan Card View

material designcardviewbelajar android studio
Vulnerability Assesment
Vulnerability AssesmentVulnerability Assesment
Vulnerability Assesment

The document discusses technical vulnerability management and outlines the key steps in the NIST Risk Management Framework that include vulnerability analysis. It also covers establishing an effective Patch and Vulnerability Group to monitor for vulnerabilities, prioritize remediation, and deploy patches. Finally, it provides examples of different types of vulnerability analysis tools including network scanners, host scanners, and web application scanners.

keamanan jaringanvulnerability assesment
Teaching Materials & Student Progress Assesment
Teaching Materials & Student Progress AssesmentTeaching Materials & Student Progress Assesment
Teaching Materials & Student Progress Assesment

This document discusses teaching materials and student progress assessment for e-learning courses. It provides guidance on preparing teaching materials, assessing student understanding through formative assessments, and adapting instruction based on student needs. Effective teaching practices discussed include ensuring instruction is appropriately challenging, based on real-world problems, purposeful, meaningful and interesting. The document also discusses using a variety of assessment methods, preparing assessments to monitor student progress, and adapting content delivery to meet student needs.

plg622eddinstructional materials
This is also why we use their knowledge to make things easier for all.
Instead of constantly re-inventing we spy good solutions and learn from mistakes.
The outcome of this research is available to you!
http://developer.yahoo.com

Recommended for you

Android Sliding Menu dengan Navigation Drawer
Android Sliding Menu dengan Navigation DrawerAndroid Sliding Menu dengan Navigation Drawer
Android Sliding Menu dengan Navigation Drawer

The document discusses how to create an Android project using a navigation drawer to display a class schedule. It provides step-by-step instructions to set up the navigation drawer menu, fragments to display the schedule for each day, and classes to store and display the schedule data. Key aspects covered include creating layouts for the drawer menu, fragments and schedule items, adding sample schedule data, and using fragments and bundles to display the appropriate schedule based on the selected drawer menu item.

android sliding menunavigation drawerandroid menu
Clinical Risk Assesment - Dr Harshavardhan Patwal
Clinical Risk Assesment - Dr Harshavardhan PatwalClinical Risk Assesment - Dr Harshavardhan Patwal
Clinical Risk Assesment - Dr Harshavardhan Patwal

Risk assessment is the determination of quantitative or qualitative estimate of risk related to a well-defined situation and a recognized threat (also called hazard). Quantitative risk assessment requires calculations of two components of risk (R): the magnitude of the potential loss (L), and the probability (p) that the loss will occur. An acceptable risk is a risk that is understood and tolerated usually because the cost or difficulty of implementing an effective countermeasure for the associated vulnerability exceeds the expectation of loss."Health risk assessment" includes variations, such as risk as the type and severity of response, with or without a probabilistic context.

clinicalhealthhealthcare
Belajar Android Studio Memberi Efek animasi pada Button
Belajar Android Studio Memberi Efek animasi pada ButtonBelajar Android Studio Memberi Efek animasi pada Button
Belajar Android Studio Memberi Efek animasi pada Button

Dokumen tersebut memberikan tutorial lengkap untuk membuat efek animasi pada button di Android Studio, meliputi cara membuat file animasi XML, menambahkan button dan animasi ke layout, serta menambahkan kode Java untuk memanggil animasi ketika button di klik.

button animationanimasi button androidbelajar android
Learn about: Design Patterns Performance Security
Tap into the collective wisdom:
 
 

Recommended for you

Kenalan Dengan Firebase Android
Kenalan Dengan Firebase AndroidKenalan Dengan Firebase Android
Kenalan Dengan Firebase Android

Dokumen tersebut memberikan panduan lengkap untuk mempelajari fitur-fitur Firebase dalam membangun aplikasi chat menggunakan bahasa Indonesia. Panduan ini menjelaskan cara mengaktifkan otentikasi, menyinkronkan data ke Firebase Realtime Database, menerima notifikasi pesan secara latar belakang, mengkonfigurasi aplikasi dari jarak jauh, melacak aliran pengguna, mengirim undangan instalasi, menampilkan iklan, melaporkan

androidfirebaseandroid firebase
introduction to community health nursing
introduction to community health nursing introduction to community health nursing
introduction to community health nursing

This document provides an introduction to community health nursing. It discusses that community health nursing focuses on improving the health of populations rather than just individuals. It involves using nursing processes and collaborating with other disciplines to promote health. Key tenets include comprehensive assessment, policy development, primary prevention, and creating conditions for health. Standards of care and performance are also outlined, including assessment, planning, evaluation, quality of care, and research. Attributes of community health nursing involve population consciousness, health orientation, autonomy, creativity, continuity, collaboration and variability. Roles include providing direct care, education, coordination, and addressing issues at a population level.

Building Web Interfaces
Building Web InterfacesBuilding Web Interfaces
Building Web Interfaces

Presentation for the East London University Hack Day explaining the technologies used to build web interfaces.

The Yahoo! User Interface Library
CSS Framework JavaScript Library Widget Framework Debugging Utility
CSS Components: CSS Reset CSS Fonts CSS Grids  Making CSS layouts predictable and working across browsers and operating systems =
JavaScript Components: DOM Event Connection Animation  Making JavaScript development less random across browsers and easier to concentrate on the architecture of your scripts. =

Recommended for you

Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers

An overview of web development essentials that will help you as a user experience designer to not only understand how to integrate designs with development components, but also to learn some tips on interacting effectively with developers.

user experience designhtml5web development
Yahoo for the Masses
Yahoo for the MassesYahoo for the Masses
Yahoo for the Masses

Internal training presentation about how I go about advocating Yahoo to the outside world and what gets me pretty excited about our developer offers at the moment.

evangelismyqldevelopment
Lessons Learned - Building YDN
Lessons Learned - Building YDNLessons Learned - Building YDN
Lessons Learned - Building YDN

Lessons learned from building the Yahoo! Developer Network. An overview of what YDN does, did and learned along the way.

dantheurerdeveloperrelationsydn
Widgets: Panel Dialog Autocomplete DataTable Slider Menu Calendar Colorpicker Tabview  Rich Text Editor Creating HTML/CSS/JS based RIAs with tested and fully skinnable components. =
Debugging YUI Logger is a cross-browser, cross-platform debugging console. YUITest is a unit and component testing framework in JavaScript
Industrial Strength for everyday solutions
Comes with full documentation, examples, cheatsheets and quick start guides. http://developer.yahoo.com/yui/docs

Recommended for you

Moving from Web 1.0 to Web 2.0
Moving from Web 1.0 to Web 2.0Moving from Web 1.0 to Web 2.0
Moving from Web 1.0 to Web 2.0

The document discusses the evolution from Web 1.0 to Web 2.0, including defining characteristics of Web 2.0 sites like user participation, reusable data, and improving functionality as more users engage with the site. It also provides an overview of important Web 2.0 technologies like AJAX, microformats, mashups and recommendations for skills needed by web developers, such as JavaScript libraries, debugging tools, and techniques to improve page load speeds.

developmentfirefoxmashup
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to DevelopmentWordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development

Crash course introduction to web development for WordPress covering acronyms, buzzwords and concepts that often leave outsiders mystified. Overview of primary development processes and what software and tools are needed to play the game. We’ll cover what you need to go from zero to developer and hopefully how to have fun on the way. WordPress development tools explained for beginners: ftp, git, svn, php, html, css, sass, js, jquery, IDEs, themes, child themes, the Loop, hooks, APIs, CLI, agile, bootstrap, slack, linting, sniffing … etc.

wordpresswordcampwordcamp greenville
Rey Bango - HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shimsRey Bango -  HTML5: polyfills and shims
Rey Bango - HTML5: polyfills and shims

The document discusses using polyfills and shims to provide support for HTML5 and CSS3 features that are missing in older browsers. It defines polyfills and shims, explains how they can be used to mimic missing functionality and allow graceful degradation. Specific techniques like feature detection and libraries like Modernizr are recommended over browser detection. Examples of semantic HTML5 elements, the video tag, and polyfills/shims for these are provided.

startechconf
Others already benefit:
http://tech.groups.yahoo.com/group/ydn-javascript/links/YUI_Implementations_001149002597/
http://tech.groups.yahoo.com/group/ydn-javascript/links/YUI_Implementations_001149002597/ Newsvine, Opera, O’Reilly,  Dow Jones Index, Paypal,  Slashdot, Digg, SugarCRM,  VersionTracker,iFilm,  vBulletin, ebay
We also like to tell people about cool YUI stuff.

Recommended for you

Decoding the Web
Decoding the WebDecoding the Web
Decoding the Web

The document provides an overview of key technical aspects of web design, including server-side technologies, client-side technologies like JavaScript and CSS, content management systems, and Web 2.0 features like social networking and Ajax. It discusses topics like browser market share, HTML, HTTP, popular web servers, programming languages, the document object model, CSS techniques, open-source CMS options, characteristics of Web 2.0 sites, the growth of social networking, Ajax goals and examples of its use, and popular Ajax frameworks.

webtechnologiesnon
#SPSEMEA SharePoint & jQuery - What I wish I would have known a year ago..
#SPSEMEA SharePoint & jQuery - What I wish I would have known a year ago..#SPSEMEA SharePoint & jQuery - What I wish I would have known a year ago..
#SPSEMEA SharePoint & jQuery - What I wish I would have known a year ago..

This document provides an overview of jQuery and how it can be used with SharePoint. It discusses how jQuery can be used to resolve common SharePoint issues and make applications more usable. It addresses common myths about jQuery and provides tips for development, debugging, and deployment of jQuery code in SharePoint. Examples of using jQuery with SharePoint are also demonstrated.

jquerysharepoint
Real-World AJAX with ASP.NET
Real-World AJAX with ASP.NETReal-World AJAX with ASP.NET
Real-World AJAX with ASP.NET

Dive deep into the new ASP.NET AJAX features and capabilities including patterns covering search optimization, user interface and usability, intuitive navigation, and much more.

mix09technical
http://yuiblog.com
Play with our APIs and Feeds.
Answers Local Mail Maps Search Shopping Travel del.icio.us Flickr™ MyBlogLog Pipes Upcoming Webjay Finance HotJobs Traffic Weather
Get SDKs to play with our applications: Messenger Music Search Widgets

Recommended for you

Advanced Web Development
Advanced Web DevelopmentAdvanced Web Development
Advanced Web Development

Copy of the slides from the Advanced Web Development Workshop presented by Ed Bachta, Charlie Moad and Robert Stein of the Indianapolis Museum of Art during the Museums and the Web 2008 conference in Montreal

JavaScript 2.0 in Dreamweaver CS4
JavaScript 2.0 in Dreamweaver CS4JavaScript 2.0 in Dreamweaver CS4
JavaScript 2.0 in Dreamweaver CS4

The document discusses JavaScript and the Spry framework in Adobe Dreamweaver CS4. It provides an overview of JavaScript development, how Dreamweaver is helping with tools like code hinting, debugging and live preview. It then focuses on explaining the Spry framework, how it provides widgets, effects, datasets and integration with Dreamweaver.

adobemaxcs4max
Creating Yahoo Mobile Widgets
Creating Yahoo Mobile WidgetsCreating Yahoo Mobile Widgets
Creating Yahoo Mobile Widgets

The document discusses Yahoo's mobile widget platform, which allows developers to create simple mobile applications called widgets using XML. It provides guidelines for designing widgets, including how to structure the code, add images, and deploy widgets to Yahoo's gallery. Developers can also add dynamic functionality by implementing server-side code to power their widgets.

What if there is some data you want to access but no API to get it in the right format?
http://pipes.yahoo.com
 
 

Recommended for you

Worry free web development
Worry free web developmentWorry free web development
Worry free web development

Original draft of presentation. The actual presentation is on my other computer and will be uploaded later.

javascriptcssstandards
Widgets: Making Your Site Great and Letting Others Help - WordCamp Victoria
Widgets: Making Your Site Great and Letting Others Help - WordCamp VictoriaWidgets: Making Your Site Great and Letting Others Help - WordCamp Victoria
Widgets: Making Your Site Great and Letting Others Help - WordCamp Victoria

A brief presentation that works through the basics of Wordpress Widgets, looks into the benefits of widgets and then transitions to how to start building your own widget.

victoriawordpresswordcamp
Shifting Gears
Shifting GearsShifting Gears
Shifting Gears

The document discusses ways to improve website performance by optimizing JavaScript and image loading. It recommends placing scripts at the bottom of the page to avoid blocking rendering, chunking scripts into separate files, lazy loading scripts as needed, minimizing images using techniques like CSS sprites and image optimization tools, and delaying loading of non-critical images to improve page load times.

cssspriteslazyloadingintroduction
… or hack what is out there.
Example: slideshare.net
Slideshare is a place to share presentations.
You can embed the presentations into other web products.

Recommended for you

JBUG 11 - Django-The Web Framework For Perfectionists With Deadlines
JBUG 11 - Django-The Web Framework For Perfectionists With DeadlinesJBUG 11 - Django-The Web Framework For Perfectionists With Deadlines
JBUG 11 - Django-The Web Framework For Perfectionists With Deadlines

The document discusses Django, an open-source web framework for Python. It highlights how Django can shorten development time for web applications by automating common tasks. It provides examples of how Django handles data modeling, views, templates, and other features out of the box. The document also lists many successful websites built with Django that demonstrate its performance, scalability, and popularity in the developer community.

jbugdjango
Intro to mobile web application development
Intro to mobile web application developmentIntro to mobile web application development
Intro to mobile web application development

Learn all the basics of web app development including bootstrap, handlebars templates, jquery and angularjs, as well as using hybrid app deployment on a phone.

SharePoint Saturday St. Louis - SharePoint & jQuery
SharePoint Saturday St. Louis - SharePoint & jQuerySharePoint Saturday St. Louis - SharePoint & jQuery
SharePoint Saturday St. Louis - SharePoint & jQuery

This document provides an overview of jQuery and how it can be used to build interactive and usable applications in SharePoint. It discusses common myths about jQuery, how to deploy and maintain jQuery scripts, and how to use the SPServices library to interact with SharePoint lists and libraries. It also provides tips on jQuery development, debugging, and resources for learning more. Examples are demonstrated to show how jQuery can be used to add and update list items, hide/show elements, and interact with forms.

sharepointjquery
 
There is an API, but there is no way to get all your latest presentations to have a “slide portfolio”.
However, there is an RSS feed with all the data I need!
 

Recommended for you

Spsemea j query
Spsemea   j querySpsemea   j query
Spsemea j query

This document provides an overview of jQuery and how it can be used to build interactive and usable applications in SharePoint. It discusses common myths about jQuery, how to deploy and maintain jQuery scripts, and how to use the SPServices library to interact with SharePoint lists and libraries. It also provides tips on jQuery development, debugging, and resources for learning more. Examples are demonstrated to show how jQuery can be used to add and update list items, hide/show elements, and interact with forms.

Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019

We are obsessed with coding and creating automated workflows and optimisations. And yet our final products aren't making it easy for people to use them. Somewhere, we lost empathy for our end users and other developers. Maybe it is time to change that. Here are some ideas.

javascriptdevelopmentlearning
Hinting at a better web
Hinting at a better webHinting at a better web
Hinting at a better web

This document discusses ways to improve how web developers learn best practices through browser and tooling improvements. It suggests that linting and inline insights directly in code editors could help prevent mistakes by flagging issues early. A tool called webhint is highlighted that provides one-stop checking and explanations of hints related to performance, accessibility, security and more. The document advocates for customizing hints based on a project's specific needs and environment. Overall, it argues for accelerated learning through context-sensitive, customizable best practices integrated into development workflows.

testingbrowserswebdevelopment
Battle plan: Retrieve feed Display links to slides Get the slide movies  Write some script to show the movies when the links are clicked
<?php $url = 'http://www.slideshare.net/rss/user/cheilmann'; $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); $slides = curl_exec($ch); curl_close($ch); $slides = str_replace('slideshare:embed','slideshareembed',$slides); $slides = str_replace('media:title','mediatitle',$slides); $xml = domxml_xmltree($slides); $json = array(); $slidesharelist = ''; $links = $xml->get_elements_by_tagname('link'); $img = $xml->get_elements_by_tagname('url'); $titles = $xml->get_elements_by_tagname('mediatitle'); $embeds = $xml->get_elements_by_tagname('slideshareembed'); foreach ($embeds as $key=>$el) { $l = $links[$key+1]->children[0]->content; $t = $titles[$key]->children[0]->content; $slidesharelist .= '<li><a href=&quot;'.$l.'&quot;>'.$t.'</a></li>'; $emb = $el->children[0]->content; if(strpos($emb,'<div')===false){$emb = $el->children[1]->content;} preg_match_all('/value=&quot;([^&quot;]+)&quot;/msi',$emb,$obj); $json[]='apos;'.$obj[1][0].'apos;'; } ?>
<style type=&quot;text/css&quot;> @import 'slideshareshowstyles.css'; #slideshareshowslideshow{background:url(<?php echo $img[0]->children[0]->content;?>) no-repeat center center;} </style> <div id=&quot;slideshareshow&quot;> <ul id=&quot;slideshareslides&quot;><?php echo $slidesharelist; ?></ul> </div> <script type=&quot;text/javascript&quot; src=&quot;http://yui.yahooapis.com/2.3.1/build/yahoo-dom-event/yahoo-dom-event.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;swfobject.js&quot;></script>
< script type=&quot;text/javascript&quot;> YAHOO.example.slideshareshow = function(){ var container = document.getElementById('slideshareshow'); YAHOO.util.Dom.addClass(container,'jsenabled'); var list = document.getElementById('slideshareslides'); var links = list.getElementsByTagName('a'); var displayContainer = document.createElement('div'); displayContainer.id = 'slideshareshowslideshow'; container.appendChild(displayContainer); var current = null; for(var i=0;links[i];i++){  YAHOO.util.Event.on(links[i],'click',show,i); } function show(e,i){ YAHOO.util.Dom.removeClass(current,'current'); current = this; displayContainer.innerHTML = ''; var so = new SWFObject(slides[i], &quot;slideshareshow&quot;, &quot;425&quot;, &quot;355&quot;, &quot;8&quot;, &quot;#ffffff&quot;); so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;); so.addParam(&quot;allowFullScreen&quot;, &quot;true&quot;); so.write(displayContainer); YAHOO.util.Dom.addClass(current,'current'); YAHOO.util.Event.stopEvent(e); } var slides=[<?php echo implode($json,','); ?>]; }(); </script>

Recommended for you

Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilege

This document discusses privilege in the context of social media and the internet. It acknowledges privileges like internet access, the ability to communicate, and supportive online communities. It warns that machine learning and algorithms risk creating echo chambers and guided messaging if they are not kept in check by human curation. The document advocates taking back the web for decent, thinking and loving humans and using privileges to help others gain access to learning, communication, and communities.

social mediaprivilege
Seven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloSeven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC Oslo

JavaScript is a bigger world than a language these days. Time to take stock and find happiness in that world.

ndcoslondcoslo2018javascript
Artificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynoteArtificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynote

This document discusses artificial intelligence and how it can help humans. It covers that AI is not new, having originated in the 1950s, and is now more advanced due to increased computing power. It also discusses how AI utilizes pattern recognition and machine learning. The document then covers several applications of AI including computer vision, natural language processing, sentiment analysis, speech recognition/conversion and moderation. It notes both the benefits of AI in automating tasks and preventing errors, as well as the responsibilities of ensuring transparency and allowing people to opt-in to algorithms.

aidc2018machine learningartificial intelligence
http://www.wait-till-i.com/index.php?p=500
This is awesome! We are building badges for people to be able to display lists of their recent slideshows on their site, but it did not integrate the player. I love what you have done – well designed and well executed. I want it for my own site now. I will post about it to our blog. And we will point to it when we release our own badges. Thanks! rashmi (SlideShare cofounder)
Anything else?
per aspera ad astra   &quot;through adversity to the stars&quot;  or &quot;a rough road leads to the stars&quot;

Recommended for you

Killing the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynoteKilling the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynote

The document discusses concerns about the perception and realities of coding careers. It expresses worry that coding is seen solely as a way to get a job rather than as a means of problem-solving. While coding can provide fulfilling work, the document cautions that the need for coders may decrease with automation and that the role may evolve from coding to engineering. It suggests a future where machines assist with repetitive coding tasks and people focus on delivering maintainable, secure products with attention to privacy and user experience.

weardevs2018machinelearningprogramming
Progressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays FinlandProgressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays Finland

PWA are a hot topic and it is important to understand that they are a different approach to apps than the traditional way of packaging something and letting the user install it. In this keynote you'll see some of the differences.

pwatdfinland
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilege

This document discusses privilege in technology and perceptions of technology workers. It acknowledges the privileges that tech workers enjoy, such as access to resources and high demand in the job market. However, it also notes problems like peer pressure, lack of work-life balance, and imposter syndrome. Both tech workers and the public have skewed perceptions of each other - tech workers feel others do not appreciate or understand their work, while the public sees tech workers as antisocial or caring only about profit. The document encourages taking small steps to improve the situation, such as being kind to oneself, considering others, sharing knowledge, and focusing on quality over quantity of work.

smashingconflondon
per aspera ad astra
http:// developer.yahoo.com /flash/
Get Flashing and Flexing
Christian Heilmann http://wait-till-i.com http://icant.co.uk Thank you! http://creativecommons.org/licenses/by-sa/3.0/

Recommended for you

Five ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developerFive ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developer

The document provides five ways for JavaScript developers to be happier: 1) Concentrate on the present and focus on creating rather than worrying about the past or future. 2) Limit distractions by streamlining your development environment and using an editor like VS Code that consolidates features. 3) Make mistakes less likely by using linters to catch errors as you code. 4) Get to know your tools better like debuggers to avoid console.log and gain insights to build better solutions. 5) Give back to others in the community by being helpful rather than causing drama.

smashingconf nycsmashingconfjavascript
Taking the P out of PWA
Taking the P out of PWATaking the P out of PWA
Taking the P out of PWA

The document discusses progressive web apps (PWAs) and provides suggestions for improving them. It notes that while PWAs aim to have engaging, fast, integrated, and reliable experiences like native apps, they still have room for improvement in areas like speed, integration, and reliability. It emphasizes that PWAs should adhere to web best practices and provide actually useful experiences rather than just focusing on technical features. The document encourages helping the PWA effort by providing feedback, using and contributing to tools, keeping messaging up-to-date, and promoting high-quality examples.

pwalondonmeetup
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"

Chris Heilmann gave a talk at BTConf in Munich in January 2018 about machine learning, automation worries, and coding. He discussed how coding used to refer to creative programming within technical limitations but now often refers to programming for work. He addressed common worries about new technologies and dependencies, and argued that abstractions are not inherently bad and help more people build products together through consensus. The talk focused on using tools to be more productive and enabling rather than seeing them as dangers, and creating solutions for users rather than fighting old approaches.

btconfbtconfmuc

More Related Content

Viewers also liked

Mkgirlsnightin2015 2
Mkgirlsnightin2015 2Mkgirlsnightin2015 2
Mkgirlsnightin2015 2
Marian Price
 
Cara mendeface sebuah website
Cara mendeface sebuah websiteCara mendeface sebuah website
Cara mendeface sebuah website
yogigreat
 
(Open Hack Night Fall 2014) Hacking Tutorial
(Open Hack Night Fall 2014) Hacking Tutorial(Open Hack Night Fall 2014) Hacking Tutorial
(Open Hack Night Fall 2014) Hacking Tutorial
James Griffin
 
Leadpreneur and discussion Global Top Leader Challenge
Leadpreneur and discussion Global Top Leader ChallengeLeadpreneur and discussion Global Top Leader Challenge
Leadpreneur and discussion Global Top Leader Challenge
Reynaldo Rayne
 
Web hack & attacks
Web hack & attacksWeb hack & attacks
Why java is important in programming language?
Why java is important in programming language?Why java is important in programming language?
Why java is important in programming language?
NexSoftsys
 
Risk assesment
Risk assesmentRisk assesment
Risk assesment
samhoward2405
 
Panduan Instalasi Android Studio
Panduan Instalasi Android StudioPanduan Instalasi Android Studio
Panduan Instalasi Android Studio
Agus Haryanto
 
“Can we deface your Web in 10 mins?” - Edu 3.4
“Can we deface your Web in 10 mins?” - Edu 3.4“Can we deface your Web in 10 mins?” - Edu 3.4
“Can we deface your Web in 10 mins?” - Edu 3.4
eLearning Consortium 電子學習聯盟
 
E-Gov Project Management Essentials
E-Gov Project Management EssentialsE-Gov Project Management Essentials
E-Gov Project Management Essentials
John Macasio
 
Let's Hack School: Learner Agency in a Time of New Technologies
Let's Hack School: Learner Agency in a Time of New TechnologiesLet's Hack School: Learner Agency in a Time of New Technologies
Let's Hack School: Learner Agency in a Time of New Technologies
budtheteacher
 
what is security
what is securitywhat is security
what is security
Dedi Dwianto
 
Belajar Android Studio Material Design Penggunaan RecyclerView dan Card View
Belajar Android Studio Material Design Penggunaan RecyclerView dan Card ViewBelajar Android Studio Material Design Penggunaan RecyclerView dan Card View
Belajar Android Studio Material Design Penggunaan RecyclerView dan Card View
Agus Haryanto
 
Vulnerability Assesment
Vulnerability AssesmentVulnerability Assesment
Vulnerability Assesment
Dedi Dwianto
 
Teaching Materials & Student Progress Assesment
Teaching Materials & Student Progress AssesmentTeaching Materials & Student Progress Assesment
Teaching Materials & Student Progress Assesment
Azidah Abu Ziden
 
Android Sliding Menu dengan Navigation Drawer
Android Sliding Menu dengan Navigation DrawerAndroid Sliding Menu dengan Navigation Drawer
Android Sliding Menu dengan Navigation Drawer
Agus Haryanto
 
Clinical Risk Assesment - Dr Harshavardhan Patwal
Clinical Risk Assesment - Dr Harshavardhan PatwalClinical Risk Assesment - Dr Harshavardhan Patwal
Clinical Risk Assesment - Dr Harshavardhan Patwal
Dr Harshavardhan Patwal
 
Belajar Android Studio Memberi Efek animasi pada Button
Belajar Android Studio Memberi Efek animasi pada ButtonBelajar Android Studio Memberi Efek animasi pada Button
Belajar Android Studio Memberi Efek animasi pada Button
Agus Haryanto
 
Kenalan Dengan Firebase Android
Kenalan Dengan Firebase AndroidKenalan Dengan Firebase Android
Kenalan Dengan Firebase Android
Agus Haryanto
 
introduction to community health nursing
introduction to community health nursing introduction to community health nursing
introduction to community health nursing
MM COLLEGE OF NURSING, MULLANA
 

Viewers also liked (20)

Mkgirlsnightin2015 2
Mkgirlsnightin2015 2Mkgirlsnightin2015 2
Mkgirlsnightin2015 2
 
Cara mendeface sebuah website
Cara mendeface sebuah websiteCara mendeface sebuah website
Cara mendeface sebuah website
 
(Open Hack Night Fall 2014) Hacking Tutorial
(Open Hack Night Fall 2014) Hacking Tutorial(Open Hack Night Fall 2014) Hacking Tutorial
(Open Hack Night Fall 2014) Hacking Tutorial
 
Leadpreneur and discussion Global Top Leader Challenge
Leadpreneur and discussion Global Top Leader ChallengeLeadpreneur and discussion Global Top Leader Challenge
Leadpreneur and discussion Global Top Leader Challenge
 
Web hack & attacks
Web hack & attacksWeb hack & attacks
Web hack & attacks
 
Why java is important in programming language?
Why java is important in programming language?Why java is important in programming language?
Why java is important in programming language?
 
Risk assesment
Risk assesmentRisk assesment
Risk assesment
 
Panduan Instalasi Android Studio
Panduan Instalasi Android StudioPanduan Instalasi Android Studio
Panduan Instalasi Android Studio
 
“Can we deface your Web in 10 mins?” - Edu 3.4
“Can we deface your Web in 10 mins?” - Edu 3.4“Can we deface your Web in 10 mins?” - Edu 3.4
“Can we deface your Web in 10 mins?” - Edu 3.4
 
E-Gov Project Management Essentials
E-Gov Project Management EssentialsE-Gov Project Management Essentials
E-Gov Project Management Essentials
 
Let's Hack School: Learner Agency in a Time of New Technologies
Let's Hack School: Learner Agency in a Time of New TechnologiesLet's Hack School: Learner Agency in a Time of New Technologies
Let's Hack School: Learner Agency in a Time of New Technologies
 
what is security
what is securitywhat is security
what is security
 
Belajar Android Studio Material Design Penggunaan RecyclerView dan Card View
Belajar Android Studio Material Design Penggunaan RecyclerView dan Card ViewBelajar Android Studio Material Design Penggunaan RecyclerView dan Card View
Belajar Android Studio Material Design Penggunaan RecyclerView dan Card View
 
Vulnerability Assesment
Vulnerability AssesmentVulnerability Assesment
Vulnerability Assesment
 
Teaching Materials & Student Progress Assesment
Teaching Materials & Student Progress AssesmentTeaching Materials & Student Progress Assesment
Teaching Materials & Student Progress Assesment
 
Android Sliding Menu dengan Navigation Drawer
Android Sliding Menu dengan Navigation DrawerAndroid Sliding Menu dengan Navigation Drawer
Android Sliding Menu dengan Navigation Drawer
 
Clinical Risk Assesment - Dr Harshavardhan Patwal
Clinical Risk Assesment - Dr Harshavardhan PatwalClinical Risk Assesment - Dr Harshavardhan Patwal
Clinical Risk Assesment - Dr Harshavardhan Patwal
 
Belajar Android Studio Memberi Efek animasi pada Button
Belajar Android Studio Memberi Efek animasi pada ButtonBelajar Android Studio Memberi Efek animasi pada Button
Belajar Android Studio Memberi Efek animasi pada Button
 
Kenalan Dengan Firebase Android
Kenalan Dengan Firebase AndroidKenalan Dengan Firebase Android
Kenalan Dengan Firebase Android
 
introduction to community health nursing
introduction to community health nursing introduction to community health nursing
introduction to community health nursing
 

Similar to Building Web Hack Interfaces

Building Web Interfaces
Building Web InterfacesBuilding Web Interfaces
Building Web Interfaces
Christian Heilmann
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
Ashlimarie
 
Yahoo for the Masses
Yahoo for the MassesYahoo for the Masses
Yahoo for the Masses
Christian Heilmann
 
Lessons Learned - Building YDN
Lessons Learned - Building YDNLessons Learned - Building YDN
Lessons Learned - Building YDN
Dan Theurer
 
Moving from Web 1.0 to Web 2.0
Moving from Web 1.0 to Web 2.0Moving from Web 1.0 to Web 2.0
Moving from Web 1.0 to Web 2.0
Estelle Weyl
 
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to DevelopmentWordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
Evan Mullins
 
Rey Bango - HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shimsRey Bango -  HTML5: polyfills and shims
Rey Bango - HTML5: polyfills and shims
StarTech Conference
 
Decoding the Web
Decoding the WebDecoding the Web
Decoding the Web
newcircle
 
#SPSEMEA SharePoint & jQuery - What I wish I would have known a year ago..
#SPSEMEA SharePoint & jQuery - What I wish I would have known a year ago..#SPSEMEA SharePoint & jQuery - What I wish I would have known a year ago..
#SPSEMEA SharePoint & jQuery - What I wish I would have known a year ago..
Mark Rackley
 
Real-World AJAX with ASP.NET
Real-World AJAX with ASP.NETReal-World AJAX with ASP.NET
Real-World AJAX with ASP.NET
goodfriday
 
Advanced Web Development
Advanced Web DevelopmentAdvanced Web Development
Advanced Web Development
Robert J. Stein
 
JavaScript 2.0 in Dreamweaver CS4
JavaScript 2.0 in Dreamweaver CS4JavaScript 2.0 in Dreamweaver CS4
JavaScript 2.0 in Dreamweaver CS4
alexsaves
 
Creating Yahoo Mobile Widgets
Creating Yahoo Mobile WidgetsCreating Yahoo Mobile Widgets
Creating Yahoo Mobile Widgets
Ricardo Varela
 
Worry free web development
Worry free web developmentWorry free web development
Worry free web development
Estelle Weyl
 
Widgets: Making Your Site Great and Letting Others Help - WordCamp Victoria
Widgets: Making Your Site Great and Letting Others Help - WordCamp VictoriaWidgets: Making Your Site Great and Letting Others Help - WordCamp Victoria
Widgets: Making Your Site Great and Letting Others Help - WordCamp Victoria
Jeff Richards
 
Shifting Gears
Shifting GearsShifting Gears
Shifting Gears
Christian Heilmann
 
JBUG 11 - Django-The Web Framework For Perfectionists With Deadlines
JBUG 11 - Django-The Web Framework For Perfectionists With DeadlinesJBUG 11 - Django-The Web Framework For Perfectionists With Deadlines
JBUG 11 - Django-The Web Framework For Perfectionists With Deadlines
Tikal Knowledge
 
Intro to mobile web application development
Intro to mobile web application developmentIntro to mobile web application development
Intro to mobile web application development
zonathen
 
SharePoint Saturday St. Louis - SharePoint & jQuery
SharePoint Saturday St. Louis - SharePoint & jQuerySharePoint Saturday St. Louis - SharePoint & jQuery
SharePoint Saturday St. Louis - SharePoint & jQuery
Mark Rackley
 
Spsemea j query
Spsemea   j querySpsemea   j query
Spsemea j query
Mark Rackley
 

Similar to Building Web Hack Interfaces (20)

Building Web Interfaces
Building Web InterfacesBuilding Web Interfaces
Building Web Interfaces
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 
Yahoo for the Masses
Yahoo for the MassesYahoo for the Masses
Yahoo for the Masses
 
Lessons Learned - Building YDN
Lessons Learned - Building YDNLessons Learned - Building YDN
Lessons Learned - Building YDN
 
Moving from Web 1.0 to Web 2.0
Moving from Web 1.0 to Web 2.0Moving from Web 1.0 to Web 2.0
Moving from Web 1.0 to Web 2.0
 
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to DevelopmentWordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
 
Rey Bango - HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shimsRey Bango -  HTML5: polyfills and shims
Rey Bango - HTML5: polyfills and shims
 
Decoding the Web
Decoding the WebDecoding the Web
Decoding the Web
 
#SPSEMEA SharePoint & jQuery - What I wish I would have known a year ago..
#SPSEMEA SharePoint & jQuery - What I wish I would have known a year ago..#SPSEMEA SharePoint & jQuery - What I wish I would have known a year ago..
#SPSEMEA SharePoint & jQuery - What I wish I would have known a year ago..
 
Real-World AJAX with ASP.NET
Real-World AJAX with ASP.NETReal-World AJAX with ASP.NET
Real-World AJAX with ASP.NET
 
Advanced Web Development
Advanced Web DevelopmentAdvanced Web Development
Advanced Web Development
 
JavaScript 2.0 in Dreamweaver CS4
JavaScript 2.0 in Dreamweaver CS4JavaScript 2.0 in Dreamweaver CS4
JavaScript 2.0 in Dreamweaver CS4
 
Creating Yahoo Mobile Widgets
Creating Yahoo Mobile WidgetsCreating Yahoo Mobile Widgets
Creating Yahoo Mobile Widgets
 
Worry free web development
Worry free web developmentWorry free web development
Worry free web development
 
Widgets: Making Your Site Great and Letting Others Help - WordCamp Victoria
Widgets: Making Your Site Great and Letting Others Help - WordCamp VictoriaWidgets: Making Your Site Great and Letting Others Help - WordCamp Victoria
Widgets: Making Your Site Great and Letting Others Help - WordCamp Victoria
 
Shifting Gears
Shifting GearsShifting Gears
Shifting Gears
 
JBUG 11 - Django-The Web Framework For Perfectionists With Deadlines
JBUG 11 - Django-The Web Framework For Perfectionists With DeadlinesJBUG 11 - Django-The Web Framework For Perfectionists With Deadlines
JBUG 11 - Django-The Web Framework For Perfectionists With Deadlines
 
Intro to mobile web application development
Intro to mobile web application developmentIntro to mobile web application development
Intro to mobile web application development
 
SharePoint Saturday St. Louis - SharePoint & jQuery
SharePoint Saturday St. Louis - SharePoint & jQuerySharePoint Saturday St. Louis - SharePoint & jQuery
SharePoint Saturday St. Louis - SharePoint & jQuery
 
Spsemea j query
Spsemea   j querySpsemea   j query
Spsemea j query
 

More from Christian Heilmann

Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019
Christian Heilmann
 
Hinting at a better web
Hinting at a better webHinting at a better web
Hinting at a better web
Christian Heilmann
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilege
Christian Heilmann
 
Seven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloSeven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC Oslo
Christian Heilmann
 
Artificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynoteArtificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynote
Christian Heilmann
 
Killing the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynoteKilling the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynote
Christian Heilmann
 
Progressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays FinlandProgressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays Finland
Christian Heilmann
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilege
Christian Heilmann
 
Five ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developerFive ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developer
Christian Heilmann
 
Taking the P out of PWA
Taking the P out of PWATaking the P out of PWA
Taking the P out of PWA
Christian Heilmann
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"
Christian Heilmann
 
You learned JavaScript - now what?
You learned JavaScript - now what?You learned JavaScript - now what?
You learned JavaScript - now what?
Christian Heilmann
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"
Christian Heilmann
 
Progressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReachProgressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReach
Christian Heilmann
 
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worldsProgressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worlds
Christian Heilmann
 
Non-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humansNon-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humans
Christian Heilmann
 
Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center
Christian Heilmann
 
CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlCSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. Control
Christian Heilmann
 
Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017
Christian Heilmann
 
The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)
Christian Heilmann
 

More from Christian Heilmann (20)

Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019
 
Hinting at a better web
Hinting at a better webHinting at a better web
Hinting at a better web
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilege
 
Seven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloSeven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC Oslo
 
Artificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynoteArtificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynote
 
Killing the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynoteKilling the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynote
 
Progressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays FinlandProgressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays Finland
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilege
 
Five ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developerFive ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developer
 
Taking the P out of PWA
Taking the P out of PWATaking the P out of PWA
Taking the P out of PWA
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"
 
You learned JavaScript - now what?
You learned JavaScript - now what?You learned JavaScript - now what?
You learned JavaScript - now what?
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"
 
Progressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReachProgressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReach
 
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worldsProgressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worlds
 
Non-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humansNon-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humans
 
Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center
 
CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlCSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. Control
 
Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017
 
The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)
 

Recently uploaded

Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
ishalveerrandhawa1
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
Vijayananda Mohire
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
Safe Software
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
Yevgen Sysoyev
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
Lidia A.
 
20240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 202420240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 2024
Matthew Sinclair
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
Liveplex
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
Enterprise Wired
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
ArgaBisma
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
UiPathCommunity
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
Emerging Tech
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
jackson110191
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
Matthew Sinclair
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
Aurora Consulting
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
SynapseIndia
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
BookNet Canada
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
Larry Smarr
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Bert Blevins
 

Recently uploaded (20)

Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
 
20240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 202420240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 2024
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
 

Building Web Hack Interfaces

  • 1. Building Web Hack Interfaces Christian Heilmann UEL Hack Day London, UK, October 2007
  • 2. Building web interfaces is a fun task.
  • 3. The technologies involved are easy to learn.
  • 4. Text + Images + Multimedia = Content “ What is it about”
  • 5. HTML = Structure “ What is what”
  • 6. CSS + Background images = Look and Feel “ How should it be displayed”
  • 7. Scripting and Extensions = Behaviour “ How should it behave and react?”
  • 8. Playing each of these to their respective strengths = great web products.
  • 9. There is one thing to consider though.
  • 10. Browser Operating System Screen Size Screen Resolution Browser Size Plugins and configurations Input Device Reading Level Vision Level of Understanding Motor accuracy
  • 11. Browser Operating System Screen Size Screen Resolution Browser Size Plugins and configurations Input Device Reading Level Vision Level of Understanding Motor accuracy UNKNOWN
  • 12. Keeping this in mind makes you a true developer for the web.
  • 13. Be paranoid. Expect the failure.
  • 14. Yahoo! has to do that day-in day-out.
  • 15. People trust us with their data and use our products to connect with other people.
  • 16. This is why we hire great developers.
  • 17. This is also why we use their knowledge to make things easier for all.
  • 18. Instead of constantly re-inventing we spy good solutions and learn from mistakes.
  • 19. The outcome of this research is available to you!
  • 21. Learn about: Design Patterns Performance Security
  • 22. Tap into the collective wisdom:
  • 23.  
  • 24.  
  • 25. The Yahoo! User Interface Library
  • 26. CSS Framework JavaScript Library Widget Framework Debugging Utility
  • 27. CSS Components: CSS Reset CSS Fonts CSS Grids Making CSS layouts predictable and working across browsers and operating systems =
  • 28. JavaScript Components: DOM Event Connection Animation Making JavaScript development less random across browsers and easier to concentrate on the architecture of your scripts. =
  • 29. Widgets: Panel Dialog Autocomplete DataTable Slider Menu Calendar Colorpicker Tabview Rich Text Editor Creating HTML/CSS/JS based RIAs with tested and fully skinnable components. =
  • 30. Debugging YUI Logger is a cross-browser, cross-platform debugging console. YUITest is a unit and component testing framework in JavaScript
  • 31. Industrial Strength for everyday solutions
  • 32. Comes with full documentation, examples, cheatsheets and quick start guides. http://developer.yahoo.com/yui/docs
  • 35. http://tech.groups.yahoo.com/group/ydn-javascript/links/YUI_Implementations_001149002597/ Newsvine, Opera, O’Reilly, Dow Jones Index, Paypal, Slashdot, Digg, SugarCRM, VersionTracker,iFilm, vBulletin, ebay
  • 36. We also like to tell people about cool YUI stuff.
  • 38. Play with our APIs and Feeds.
  • 39. Answers Local Mail Maps Search Shopping Travel del.icio.us Flickr™ MyBlogLog Pipes Upcoming Webjay Finance HotJobs Traffic Weather
  • 40. Get SDKs to play with our applications: Messenger Music Search Widgets
  • 41. What if there is some data you want to access but no API to get it in the right format?
  • 43.  
  • 44.  
  • 45. … or hack what is out there.
  • 47. Slideshare is a place to share presentations.
  • 48. You can embed the presentations into other web products.
  • 49.  
  • 50. There is an API, but there is no way to get all your latest presentations to have a “slide portfolio”.
  • 51. However, there is an RSS feed with all the data I need!
  • 52.  
  • 53. Battle plan: Retrieve feed Display links to slides Get the slide movies Write some script to show the movies when the links are clicked
  • 54. <?php $url = 'http://www.slideshare.net/rss/user/cheilmann'; $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); $slides = curl_exec($ch); curl_close($ch); $slides = str_replace('slideshare:embed','slideshareembed',$slides); $slides = str_replace('media:title','mediatitle',$slides); $xml = domxml_xmltree($slides); $json = array(); $slidesharelist = ''; $links = $xml->get_elements_by_tagname('link'); $img = $xml->get_elements_by_tagname('url'); $titles = $xml->get_elements_by_tagname('mediatitle'); $embeds = $xml->get_elements_by_tagname('slideshareembed'); foreach ($embeds as $key=>$el) { $l = $links[$key+1]->children[0]->content; $t = $titles[$key]->children[0]->content; $slidesharelist .= '<li><a href=&quot;'.$l.'&quot;>'.$t.'</a></li>'; $emb = $el->children[0]->content; if(strpos($emb,'<div')===false){$emb = $el->children[1]->content;} preg_match_all('/value=&quot;([^&quot;]+)&quot;/msi',$emb,$obj); $json[]='apos;'.$obj[1][0].'apos;'; } ?>
  • 55. <style type=&quot;text/css&quot;> @import 'slideshareshowstyles.css'; #slideshareshowslideshow{background:url(<?php echo $img[0]->children[0]->content;?>) no-repeat center center;} </style> <div id=&quot;slideshareshow&quot;> <ul id=&quot;slideshareslides&quot;><?php echo $slidesharelist; ?></ul> </div> <script type=&quot;text/javascript&quot; src=&quot;http://yui.yahooapis.com/2.3.1/build/yahoo-dom-event/yahoo-dom-event.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;swfobject.js&quot;></script>
  • 56. < script type=&quot;text/javascript&quot;> YAHOO.example.slideshareshow = function(){ var container = document.getElementById('slideshareshow'); YAHOO.util.Dom.addClass(container,'jsenabled'); var list = document.getElementById('slideshareslides'); var links = list.getElementsByTagName('a'); var displayContainer = document.createElement('div'); displayContainer.id = 'slideshareshowslideshow'; container.appendChild(displayContainer); var current = null; for(var i=0;links[i];i++){ YAHOO.util.Event.on(links[i],'click',show,i); } function show(e,i){ YAHOO.util.Dom.removeClass(current,'current'); current = this; displayContainer.innerHTML = ''; var so = new SWFObject(slides[i], &quot;slideshareshow&quot;, &quot;425&quot;, &quot;355&quot;, &quot;8&quot;, &quot;#ffffff&quot;); so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;); so.addParam(&quot;allowFullScreen&quot;, &quot;true&quot;); so.write(displayContainer); YAHOO.util.Dom.addClass(current,'current'); YAHOO.util.Event.stopEvent(e); } var slides=[<?php echo implode($json,','); ?>]; }(); </script>
  • 58. This is awesome! We are building badges for people to be able to display lists of their recent slideshows on their site, but it did not integrate the player. I love what you have done – well designed and well executed. I want it for my own site now. I will post about it to our blog. And we will point to it when we release our own badges. Thanks! rashmi (SlideShare cofounder)
  • 60. per aspera ad astra &quot;through adversity to the stars&quot; or &quot;a rough road leads to the stars&quot;
  • 61. per aspera ad astra
  • 63. Get Flashing and Flexing
  • 64. Christian Heilmann http://wait-till-i.com http://icant.co.uk Thank you! http://creativecommons.org/licenses/by-sa/3.0/