Openbar 5 - Leuven - Correctly using js debug tools - Karel Kremer - Craftworkz

•

0 likes•58 views

Too many developers are clueless when it comes to debugging in javascript. They go around desperately using log statements to try and grasp what their code is doing, never even getting close to a solution for their problem. It's time to change all that. This session will demonstrate how to effectively use debug tools to solve problems in your code. We'll do this through a running example, but the session is completely framework agnostic, so the practices work for any Angular, React or Ember application. Even for Node. We'll be using the chrome debugger as it's freely available and its feature set is very extensive. The talk will start easy with breakpoints and variable inspection, but then dig deeper through the DOM tree, network tab, call stack and profiling options. By the end of the session, your new debugging powers will make you cleave through javascript code like never before.

Debugging JavascriptDebugging Javascript
// killing off console.log// killing off console.log

Getting startedGetting started
Let’s build a chatbot widget…Let’s build a chatbot widget…
* Developer tools are available for all browsers, picking Chrome
** Usually F12

UGH! Is that what it looks like?UGH! Is that what it looks like?

ElementsElements
Selecting elements
Current style and where it comes from
Adding stylesheet rules
Toggling state
Modifying DOM tree
Selecting elements
Current style and where it comes from
Adding stylesheet rules
Toggling state
Modifying DOM tree

This little thingyThis little thingy
 Lame!
 … ORLY? We’ll get back to this!
 Lame!
 … ORLY? We’ll get back to this!

Wait… just one message?Wait… just one message?

NetworkNetwork
List of requests
Preview
Filter by method
Sockets
Cache
Preserve log
Speed simulations/offline mode
List of requests
Preview
Filter by method
Sockets
Cache
Preserve log
Speed simulations/offline mode

What happened to that message?What happened to that message?

Now I can’t send messages?Now I can’t send messages?

And more messages disappear?And more messages disappear?

SourcesSources
Search files
Pretty print (but why?)
Breakpoints
 Call stack
 with Conditions
 Pause on exceptions
 on Events
 Console is in scope
Search files
Pretty print (but why?)
Breakpoints
 Call stack
 with Conditions
 Pause on exceptions
 on Events
 Console is in scope

Framework specific toolsFramework specific tools

Thank you!Thank you!
Karel Kremer
karel@oswald.ai
Openba[a]r Cronos Leuven
Karel Kremer
karel@oswald.ai
Openba[a]r Cronos Leuven

This plugin implements a flyweight design pattern for jQuery custom select controls. By only holding one visible control element in memory at one time, it aims to reduce the number of DOM accesses and event binding operations. This can result in significantly reduced page render times on larger forms. It borrows accessibility design patterns from the Filament Group's jQuery UI Selectmenu keyboard navigable ARIA plugin, currently included with JQuery-UI. It requires jQuery 1.4+ and jQuery UI 1.8.7+ Core to run.

12 tricks to avoid hackers breaks your CI / CD

Daniel Garcia (a.k.a cr0hn)

Troubleshooting: The Two Laws - IXIASOFT User Conference 2016

IXIASOFT

Presented by Alex Kozaris, IXIASOFT IT Specialist at the IXIASOFT User Conference 2016. Murphy’s Law says that if something can go wrong, it will. But don’t let Murphy tell you what to do; instead come to this presentation where Alex will take you through effective troubleshooting procedures for the issues that he commonly sees with his extensive experience of solving issues involving the IXIASOFT DITA CMS.

Window Shopping Browser - Bug Hunting in 2012

Roberto Suggi Liverani

Web browsers have become part of everyday life, and are relied upon by millions of internet citizens each day. The feature rich online world has turned the once simple web browser into a highly complex (and very often insecure) desktop application. As browser vendors have extended functionality and support to new technologies, security researchers and hackers are continuously looking for new vulnerabilities. In this talk, Roberto and Scott will share results of their assiduous browser bug hunting. The talk will examine techniques used to discover critical and less severe vulnerabilities in some of the most popular browsers on the market. This talk will focus heavily (but not exclusively) on the following areas: - Memory corruption bugs; - New approaches to DOM fuzzing; - Old school techniques against new browser technology; - Cross Context Scripting and injection attacks; - SOP Bypass; The presentation will conclude with a montage of on-stage demonstrations of previously unreleased vulnerabilities, including remote code execution, injections and other tailored browser exploits.

Scripting The Dom

Ara Pehlivanian

Breaking The Cross Domain Barrier

Alex Sexton

If you had to rank the best and worst moments of your JavaScript life, you’d probably rank reading “The Good Parts” up towards the top, and deep down at the bottom of the list would be the day that you found out that you couldn’t make cross-domain requests in the browser. This talk covers the hacks, tips, and tricks to leave the Same Origin Policy in the dust. So grab a cookie, pad your JSON, and learn how to communicate properly.

IoT with Vaadin Elements

Jürgen Treml

Mozilla: Under the Hood

mozillamarcia

Mozilla: Under the Hood The browser has in many ways become a mini-operating system, attempting to harness all the internet’s power and complexity while making it simple enough so that anyone with minimal computer skills can visit websites and communicate with people all over the world. The technical challenges of developing and testing software in this kind of environment are immense, given the rapid changes going on in the internet space and the fact that the browser is called upon to parse as many as 1 trillion pages full of dynamic content. As time has gone on, many websites have gone from looking like static pages to resembling applications, which presents it own set of difficulties. Given these challenges, how does Mozilla ensure high quality and usability of every browser release? I will explore Mozilla under the hood and illuminate how Mozilla works to meet these challenges by introducing some of the tools that Mozilla uses to test its products. I will also demonstrate how Mozilla leverages help from the community as well as gives back to the community as part of the open development process.

Symfony2 - A Short Introduction

Andy Grunwald

Survey on Script-based languages to write a Chatbot

Nguyen Giang

I’ve been playing with both AIML and ChatScript. AIML is very easy to use but not powerful enough if you want to make a chatbot that “looks” intelligent these days. AIML is a very simple pattern language, substantially less complex than regexes and as such less than level 3 Chomsky hierarchy) . ChatScript on the other hand is TOO powerful and learning how to use it may take you a while. And then I found Artificial Intelligence Scripting Language , and I love it! Because it is a compromise of simplicity, power and easy to use. Try it and you will love it.

Document Object Model

chomas kandar

Document Object Modelchomas kandar

Sandboxing JS and HTML. A lession Learned

Minded Security

== Abstract == Presented at Analysis of Security APIs Satellite workshop of IEEE CSF July 13th 2015, Verona, Italy http://www.dsi.unive.it/~focardi/ASA8/#program Browsers HTML sandbox is, by default, only protected by the "Same Origin Policy". Although this simple constraint gave companies a very flexible environment to play with, and was probably one of the key features that led the Web to success as we see it now, it is quite unsatisfactory from a security perspective. In fact, this solution does not face the problem of letting third party code access the whole data in the DOM when explicitly loaded and executed by the browser. This behaviour opens the door to malicious third party code attacks that can be achieved using either Cross Site Scripting (OWASP Top Ten Security risk #1 for many years) or second order attacks, such as malvertising software. In the past, several attempts to sandbox untrusted code have been made. In this talk we will focus on successes and failures of the most interesting open source sandboxing browser techniques.

LugBernie Leung, P.E., CISSP

HTML literals, the JSX of the platform

Kenneth Rohde Christiansen

Debugging ZFS: From Illumos to Linux

Serapheim-Nikolaos Dimitropoulos

GWT is Smarter Than You

Robert Cooper

Trusting files (and their formats)

Ange Albertini

Fast Cordova applications

Ivano Malavolta

Joomlaplatform en

Robert Deutz

This presentation is an introduction to the Joomla!Platform, what is the platform, what are the ideas behind it, why we have this separation between CMS and platform. I am speaking about the pro and cons, briefly ;-) A big part are real live examples how I or others have used the platform, when it makes sense to use the platform and when it doesn't makes sense. I do explain how to contribute to the platform and to the project at all. PHP knowledge is not necessary.

Openbar Kontich Online // The Competences of the future: how we applied AI to...

Openbar

Automation, digitalization and AI have revolutionized the labour market: competencies that did not exist five years ago are now in high demand. While this did not lead to a surge in unemployment - unemployment rates are historically low – it has never been harder to fill vacancies with the current pool of jobseekers. Next to a loss of economic potential, job seekers that do not meet the demanded competencies face the severe risk of long-term unemployment. In this talk, we will present on how we help VDAB to reorient long-term unemployed persons towards the competencies of the future.

Openbar Kontich Online // The Legal reality of VR and AR - Kris Seyen

Openbar

It has been estimated that the virtual and augmented reality markets will generate revenue of over $162 billion in 2020. As virtual- and augmented- reality related technologies will become more mainstream, it is expected that more and more companies will start using them. With a bright future forecasted for both AR and VR, those engaging with the technologies should be aware of the legal challenges facing these new mediums. In this session we will explore the legal issues that may arise when you want to develop, market or use a AR and VR application. We will provide guidance to come to workable solutions in order to facilitate your succes rate when you embrace these new opportunities.

Similar to Openbar 5 - Leuven - Correctly using js debug tools - Karel Kremer - Craftworkz

Flyweight jquery select_presentation

Ray Brooks

12 tricks to avoid hackers breaks your CI / CD

Daniel Garcia (a.k.a cr0hn)

Troubleshooting: The Two Laws - IXIASOFT User Conference 2016

IXIASOFT

Window Shopping Browser - Bug Hunting in 2012

Roberto Suggi Liverani

Scripting The Dom

Ara Pehlivanian

Breaking The Cross Domain Barrier

Alex Sexton

IoT with Vaadin Elements

Jürgen Treml

Mozilla: Under the Hood

mozillamarcia

Symfony2 - A Short Introduction

Andy Grunwald

Survey on Script-based languages to write a Chatbot

Nguyen Giang

Document Object Model

chomas kandar

Document Object Modelchomas kandar

Sandboxing JS and HTML. A lession Learned

Minded Security

LugBernie Leung, P.E., CISSP

HTML literals, the JSX of the platform

Kenneth Rohde Christiansen

Debugging ZFS: From Illumos to Linux

Serapheim-Nikolaos Dimitropoulos

GWT is Smarter Than You

Robert Cooper

Trusting files (and their formats)

Ange Albertini

Fast Cordova applications

Ivano Malavolta

Joomlaplatform en

Robert Deutz

Similar to Openbar 5 - Leuven - Correctly using js debug tools - Karel Kremer - Craftworkz (20)

Flyweight jquery select_presentation

12 tricks to avoid hackers breaks your CI / CD

Troubleshooting: The Two Laws - IXIASOFT User Conference 2016

Window Shopping Browser - Bug Hunting in 2012

Scripting The Dom

Breaking The Cross Domain Barrier

IoT with Vaadin Elements

Mozilla: Under the Hood

Symfony2 - A Short Introduction

Survey on Script-based languages to write a Chatbot

Document Object Model

Sandboxing JS and HTML. A lession Learned

Lug

HTML literals, the JSX of the platform

Debugging ZFS: From Illumos to Linux

GWT is Smarter Than You

Trusting files (and their formats)

Fast Cordova applications

Joomlaplatform en

More from Openbar

Openbar Kontich Online // The Competences of the future: how we applied AI to...

Openbar

Openbar Kontich Online // The Legal reality of VR and AR - Kris Seyen

Openbar

Openbar Leuven Online // Launching in Digital Space - Seb De Roover

Openbar

Openbar Leuven Online // How to Build and maintain your Agile Data Hub - Jona...

Openbar

At The Agile Information Factory we believe that digital leaders are made not only by experimenting with new technologies and exploiting their capabilities, this agile mindset is of course very important, but a truly successful strategy should also take into account the effort of integrating the data generated (and consumed) by all these new platforms. We believe that change has become the key issue in data integration and that the value cycle of data is different from the lifecycle of any single application. That is why we built our own DWA tool, Vaultspeed, that enables organisations to integrate their data into one single data hub, where the whole organisation can benefit from this effort, and to do this not once, but continuously. Learn about data warehouse automation, data vault and how we put these to work to create value in real life cases.

Openbar Leuven // Omnicannel chatbots in Retail - Sam Hendrickx en Michiel Va...

Openbar

In 2020, chatbots will become much more common and available. Therefore, it’s time for the next step: make your chatbot as accessible as possible by providing an omnichannel voice & chat experience across multiple devices and platforms. We discuss platforms such as Google Assistant, Facebook Messenger and WhatsApp, and we will show you how one chatbot can integrate with these platforms simultaneously. We demonstrate this idea in the context of a fictive online retail store.

Openbar Leuven // Top 5 focus areas in cyber security linked to you digital t...

Openbar

Openbar Kontich // The key to successful entrepreneurship

Openbar

Being or becoming an entrepreneur has been made made easier, more accessible and more doable since the startup hype that started in 2013. Entrepreneurs can choose between a lot of initiatives to enrich and educate themselves and their idea/concept in the hope of becoming successful entrepreneurs. But after more than 6 years of investing time, expertise, money, ressources, workshops, events and inspiration sessions… What have we learned from it? Is there a magical key to success? What are the determining factors for being successful? I will give you my insights on what it takes to enhance your chances of becoming a successful entrepreneur.

Openbar Leuven // Science fiction and AI

Openbar

Openbar Leuven // Ethics in technology - Laurens Somers

Openbar

At Monkeyshot, we ask ourselves where exactly the athical boundaries lie in our ever more digitalised society. Which information do we share, and with whom? Which things do we better keep to ourselves instead of sharing them? To what extent do we allow technology in our lives? In a fun, interactive session, we try to find an answer to all these questions. You will be able to vote, debate and share ideas. Let us know in which (digital) society you would like to live!

Openbar Kontich // How to create intelligent & personal conversational AI - W...

Openbar

Openbar Kontich // Unified e-commerce with Netsuite - Roger Van Beeck

Openbar

Openbar Leuven // Edge-Computing: On-device AI // Nick Destrycker

Openbar

Openbar Leuven // What's up with augmented reality // Bert Waltniel

Openbar

Unlike virtual reality, where a complete virtual world is created, augmented reality is a kind of extension of reality through technology. Meanwhile, AR has also been on a serious advance since the arrival of ARKit and ARCore. The phenomenon of virtual reality is just as hype and with the introduction of the Oculus Rift several companies have also started using VR for their business. Already Â in 2014, Volvo launched the test drive without a car using an Oculus Rift. The car manufacturer put the headlines together with Google to find out how they could simulate the best experience of a test drive, without actually using the car. "It is a matter of thinking 'out of the box'. If you can create an almost-real experience, you give the consumer a unique experience that can be decisive for a purchase decision " Augmented Reality has already had its influence in the business world. For example, Vuzix already worked with Airbus to make the process of building an Airbus more efficient through Smart Glasses. When wearing these Smart Glasses, relevant information is displayed when installing the cabin. They also enable the wearer to work very precisely when it comes to placement. The following topics will be discussed What is Augmented Reality? Why should we need it? AR hardware vs. Mobile AR Platform comparison ARCore vs ARkit Possibilities now vs future Use cases Success stories

Openbar Kontich // Google Cloud: past, present and the (oh so sweet) future b...

Openbar

Although a giant player in anything software related Google Cloud still feels a bit under appreciated. How did it get where it is now? What are its core strengths? Most of all, we want to provide a glimpse of the future in determining major shifts in Cloud computing. Every company is a data company but their data still remains under-utilised due to a lack of execution power, let’s find this power. Due to Cloud pricing models efficient software engineering is gaining in importance, let’s unlock this efficiency. Hybrid and multi-Cloud is easily one of the largest investment domains in the Cloud world. Let’s find out why and see how we can stay vendor neutral as much as possible.

Openbar Kontich // Mobile app automation on a budget by Wim Vervust & Bram Thys

Openbar

Why would we opt for building an on-premise device farm when cloud solutions are in abundance these days? Short answer, because it’s worth it. The long answer involves a few more practicalities. Cost–efficiency has been one of the major selling points. Smaller companies have limited budget and cutting corners is never an option. With enough research and analytics, you can build a solid device pool with limited resources and in return save on manual testing hours. During this test automation story, we will take you through the journey of building our farm.

$Openbar Leuven \\ Using API Management to improve developers productivity \\ ...$ $Openbar Leuven \\ Using API Management to improve developers productivity \\ ...$

Openbar Leuven \\ Using API Management to improve developers productivity \\ ...

Openbar

Developers no longer start from an empty file. More and more existing API’s and services are used to rapidly develop new applications. During this session we will demonstrate how API Management solutions can help developers to find/reuse/create APIs and services to speed up application development. We will focus both on the API/service consumers and producers. Real world use cases will be used to demonstrate the key capabilities of good API Management solutions.

Openbar Kontich // Is your AI plotting to kill you? Why AI and Machine Learni...

Openbar

Openbar Kontich // Serverless - A view from the business side by Stef Ceyssen...

Openbar

For many, Serverless is yet another technical solution for their IT and business challenges. But by correlating Serverless with digital innovation and other business evolutions, we can gain greater insights. During this presentation we will run through several reference cases in which Serverless application design and development on Amazon Web Services has positively influenced the business of our customers. This will be a non-technical session.

Openbar Leuven // Safety first... in the Cloud by Koen Jacobs

Openbar

Modern workplace environments are rapidly becoming cyber attackers’ prime target, because of the broad attack surface that our cloud-based digitalization offers. We, as an employee in the office or at home are always ‘connected’ and we are mixing personal with professional matters all the time. With BYOD (bring your own device) policies and all those cool SaaS cloud apps we love to use; company data and users are moving constantly outside the network perimeter of the company. Recent breaches clearly demonstrate that the traditional network security approach doesn’t work anymore within this ever-changing cyber threat landscape. Securing a modern workplace across identities, endpoints, user data, cloud apps and infrastructure becomes quite a challenge. Stopping cyber attackers’ threats requires an innovative approach, with evolving technology powered by AI & machine learning. In this session we will give you a sneak peak of the current tactics cyber attackers are using to get their foot between the door and how modern cyber defense tooling is used to detect and stop these threats.

Openbar Leuven // Less is more. Working with less data in NLP by Yves Peirsman

Openbar

In this era of Big Data, finding suitable data to automate a task is often still a challenge for Machine Learning professionals. This is certainly the case in Natural Language Processing, the subdomain of Artificial Intelligence that is concerned with the automatic processing of texts, as in machine translation, text classification, etc. In those tasks, the quality of the results crucially depends on the amount of available data in a given language and a given domain (CVs, medical texts, etc.). To fix this problem, researchers are focusing more attention on ways of training better models with less data. In this presentation, Yves will discuss the recent trends in this domain and show how they have helped his company NLP Town develop NLP solutions.

More from Openbar (20)