The document discusses planning a website like planning a party by including essential components like HTML (music), CSS (food), and JavaScript (drinks). It provides examples of semantic HTML markup, CSS resets and styling, and unobtrusive JavaScript. Key recommendations include using semantic HTML, CSS resets and cascading styles, external style sheets, and namespaced JavaScript functions to avoid conflicts.
Copy & Pest - A case-study on the clipboard, blind trust and invisible cross-...
The clipboard is one of the most commonly used tools across operating systems, window managers and devices. Pressing Ctrl-C and Ctrl-V has become so fundamentally important to productivity and usability that we cannot get rid of it anymore. We happily and often thoughtlessly copy things from one source and paste them into another. URLs into address-bars, lengthy commands into console windows, text segments into web editors and mail interfaces. And we never worry about security when doing so. Because what could possibly go wrong, right?
But have we ever asked ourselves what the clipboard content actually consists of? Do we really know what it contains? And are we aware of the consequences a thoughtless copy&paste interaction can have? Who else can control the contents of the clipboard? Is it really just us doing Ctrl-C or is there other forces in the realm who are able to infect what we believe to be clean, who can desecrate what we trust so blindly that we never question or observe it?
This talk is about the clipboard and the technical details behind it. How it works, what it really contains – and who can influence its complex range of contents. We will learn about a new breed of targeted attacks, including cross-application XSS from PDF, ODT, DOC and XPS that allow to steal website accounts faster than you can click, turn your excel sheet into a monster and learn about ways to smuggle creepy payload that is hidden from sight until it executes. Oh, and we’ll also see what can be done about that and what defensive measures we achieved to create so far.
The document describes a website project on personal profiles with multiple web pages created using HTML and CSS. It includes code for 8 web pages covering topics like the home page, friends, dreams, dislikes and skills. The pages are linked together and include images, text, and tables. Styling is added using internal and external CSS. The project also includes a registration page code with form validation functions to check required fields and data types.
The document discusses common mistakes and misconceptions around web accessibility, including providing unnecessary or redundant alt text, overly long alt text descriptions, using images when text would suffice, improperly using tabindex and accesskeys, and prioritizing compliance over usability for those with cognitive disabilities. It also provides tips for proper use of headings, form labels, abbreviations and acronyms, and skip links to improve accessibility.
The document is a webpage in Hindi that provides links to pages in other languages like English, Tamil, Telugu, Kannada, Bengali, and Urdu. It also contains social media links and images related to rice pulling.
This document provides an overview of key on-page optimization strategies for improving a website's search engine rankings. It discusses the importance of SEO and why it matters, and outlines best practices for optimization elements like meta tags, headings, links, images, content and site architecture. The goal is to help users establish a baseline and then incrementally optimize their site for both search engines and users.
Class 4 handout two column layout w mobile web design
The document discusses building a two-column website layout using HTML and CSS, and making it responsive for mobile devices. It includes code for the HTML page structure with two columns, content, and navigation, as well as CSS code for styling. It then covers adding CSS media queries to modify the layout and styles at smaller screen sizes to optimize the design for mobile.
This document discusses various aspects of interface design including color, typography, iconography, microformats, and flexibility. It provides tips on choosing color palettes, using typography effectively, designing icons and favicons, implementing microformats, and making interfaces adaptable. Examples of microformats like hCard and hCalendar are shown to demonstrate how they can work together to provide structured data on the web. The document emphasizes starting simply, reusing elements, and testing designs for robustness by turning off images and CSS.
The document discusses how users are becoming frustrated with websites that do not cater to their needs. It recommends building sites using semantic HTML, responsive web design, and simplified content to ensure the user experience is positive. Semantic HTML uses appropriate tags to structure content, responsive design adapts layout for different devices, and simplified content focuses on only including essential information for users. The document emphasizes that the user experience should work seamlessly across all devices and content delivery platforms by following these best practices.
HTML5 introduces new semantic elements like <header>, <footer>, <nav>, <article> that help provide more meaning to the structure of content compared to non-semantic divisions. It allows for clearer outlines of content and separation of concerns between content, structure and presentation. While the benefits of semantic HTML5 may not be immediately visible, it can help future-proof websites and provide more accessibility for assistive technologies.
How To Add Music And Graphics To Your Email Signatures
The document provides step-by-step instructions for adding music and graphics to Yahoo Mail signatures. It explains how to open the Yahoo Mail account and navigate to the signatures settings. Users can then paste HTML code found in the document to add background music or images to their signatures. The document also provides examples of different music and image files that can be used.
The document discusses atomic design principles and best practices for CSS architecture and code. It explains the different levels of atomic design including atoms, molecules, organisms, templates and pages. It provides examples of how to implement atomic design using CSS extensions, mixins, variables and imports. It also outlines recommendations for CSS practices such as managing specificity, using semantic selectors, separating concerns of paint and layout, avoiding magic numbers, and more.
The document discusses Haml and Sass, which are template languages used to generate HTML and CSS respectively. Haml uses indentation and special characters to structure markup concisely while Sass allows nesting, variables, and other features to simplify CSS authoring. The document provides examples of basic Haml and Sass syntax and recommends starting with individual templates, using the proper file extensions, and checking whitespace when errors occur.
This document discusses 7 reasons for code bloat, including: 1) underestimating the time needed to understand a new project; 2) maintaining code without proper tools; and 3) developers not reading documentation or existing code before starting work. It argues that developers often try to solve problems their own way before listening to existing solutions or documentation. Proper documentation and planning time for understanding projects are presented as ways to avoid bloated code.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
The document provides advice and encouragement for someone starting out with JavaScript development. It discusses how JavaScript can be used in many environments like browsers, apps, and servers. It recommends resources like MDN and tools like linting to help avoid mistakes. It emphasizes that this is an exciting time for JavaScript and advises setting priorities and standards, being involved in the community, and bringing new voices and perspectives.
Keynote at halfstackconf 2017 discussing the falsehood of the idea that in order to survive the automation evolution everybody needs to learn how to code. Machines can code, too.
Progressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps (PWAs) can provide app-like experiences through the web by making web content fast, reliable and engaging. While PWAs may not be necessary for all projects, they can help clean up and speed up current web-based projects. PWAs leverage new web capabilities like service workers to work offline, load fast, and improve the user experience without having to meet all the requirements of native apps.
Progressive Web Apps - Covering the best of both worlds
This document discusses progressive web applications (PWAs) and their advantages over traditional native mobile applications. PWAs use modern web capabilities like Service Workers to deliver native-like experiences to users. Some key benefits of PWAs include their ability to work across platforms, have smaller file sizes for faster loading, support offline use, and provide simple update mechanisms compared to native apps. While PWAs do not have full access to device capabilities like native apps, they allow delivering app-like web content to users in a more accessible and reliable manner than traditional web pages.
Progressive Web Apps - Bringing the web front and center
This document discusses progressive web apps (PWAs). It notes that PWAs aim to make web apps feel like native mobile apps by being discoverable, installable, linkable, safe, responsive and progressive. The document outlines some key characteristics of PWAs, including that they need to be served from secure origins and have app manifests. It also discusses some common misconceptions around PWAs and notes that as PWAs improve, they will continue to blur the line between web apps and native mobile apps.
This document discusses the differences between CSS and JavaScript and when each is most appropriate to use. It argues that CSS is often underestimated in favor of JavaScript solutions. CSS has advanced significantly with features like calc(), media queries, animations/transitions, flexbox, grid, variables and more. These powerful features allow many tasks to be accomplished with CSS alone without needing JavaScript. The document encourages embracing the "squishiness" of the web and considering CSS more when building interfaces.
This document contains the transcript of a presentation by Chris Heilmann on web development. Some of the key points discussed include:
- The benefits of progressive enhancement and using HTML, CSS, and JavaScript together to build robust and accessible websites.
- How limitations in early design can foster creativity.
- The importance of error handling and defensive coding practices.
- Embracing new technologies like Service Workers and Manifests to build Progressive Web Apps.
- Rethinking the idea that JavaScript is unreliable and should not be depended on, as modern browsers have made it a capable tool.
The Soul in The Machine - Developing for Humans (FrankenJS edition)
The document discusses how machines and software can help humans by doing tasks like preventing mistakes, performing repetitive tasks, filling information gaps, remembering and categorizing information, improving understanding, enabling new communication methods, and providing protection. It describes how advances in AI, APIs, cloud services, and data processing have made it possible to build useful and helpful interfaces. The conclusion encourages developers to use these capabilities to create simple, human-centric interfaces that benefit users.
How RPA Help in the Transportation and Logistics Industry.pptx
Revolutionize your transportation processes with our cutting-edge RPA software. Automate repetitive tasks, reduce costs, and enhance efficiency in the logistics sector with our advanced solutions.
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Cybersecurity is a major concern in today's connected digital world. Threats to organizations are constantly evolving and have the potential to compromise sensitive information, disrupt operations, and lead to significant financial losses. Traditional cybersecurity techniques often fall short against modern attackers. Therefore, advanced techniques for cyber security analysis and anomaly detection are essential for protecting digital assets. This blog explores these cutting-edge methods, providing a comprehensive overview of their application and importance.
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Presented at Gartner Data & Analytics, London Maty 2024. BT Group has used the Neo4j Graph Database to enable impressive digital transformation programs over the last 6 years. By re-imagining their operational support systems to adopt self-serve and data lead principles they have substantially reduced the number of applications and complexity of their operations. The result has been a substantial reduction in risk and costs while improving time to value, innovation, and process automation. Join this session to hear their story, the lessons they learned along the way and how their future innovation plans include the exploration of uses of EKG + Generative AI.
Best Practices for Effectively Running dbt in Airflow.pdf
As a popular open-source library for analytics engineering, dbt is often used in combination with Airflow. Orchestrating and executing dbt models as DAGs ensures an additional layer of control over tasks, observability, and provides a reliable, scalable environment to run dbt models.
This webinar will cover a step-by-step guide to Cosmos, an open source package from Astronomer that helps you easily run your dbt Core projects as Airflow DAGs and Task Groups, all with just a few lines of code. We’ll walk through:
- Standard ways of running dbt (and when to utilize other methods)
- How Cosmos can be used to run and visualize your dbt projects in Airflow
- Common challenges and how to address them, including performance, dependency conflicts, and more
- How running dbt projects in Airflow helps with cost optimization
Webinar given on 9 July 2024
This document provides an introduction to HTML and CSS. It covers key HTML tags and elements for structuring pages, including headings, paragraphs, links and semantic elements. It also demonstrates how to add basic styling to pages using internal, inline and external CSS including changing colors, backgrounds and images. The document recommends resources for learning more about CSS and includes exercises for practicing CSS concepts like borders, margins and padding.
This document discusses various topics related to interface design including color, typography, iconography, microformats, and flexibility. It provides tips for choosing color palettes, using CSS for typography, designing favicons, and using microformats to embed semantic information in HTML. It emphasizes designing with flexibility in mind by making sure interfaces are usable even when images or CSS is disabled, text is enlarged, or markup and stylesheets are validated.
Gilbert Guerrero provides instructions for an ARTDM 171 class on XHTML tags and group projects. Students are asked to submit any homework uploaded online by sending the instructor a link, or staying after class if not uploaded. They are instructed to create an "html" folder for Week 3 assignments and define a new Dreamweaver site using that folder. The document outlines various XHTML tags like <head>, <title>, <body>, <meta>, <p>, <br>, <a>, <img>, <ul>, <ol>, and <table>. It also discusses fonts, colors and sizes being set through CSS. Students are asked to form project groups of at least 3 people and submit initial group information by the following week. Home
Copy & Pest - A case-study on the clipboard, blind trust and invisible cross-...Mario Heiderich
The clipboard is one of the most commonly used tools across operating systems, window managers and devices. Pressing Ctrl-C and Ctrl-V has become so fundamentally important to productivity and usability that we cannot get rid of it anymore. We happily and often thoughtlessly copy things from one source and paste them into another. URLs into address-bars, lengthy commands into console windows, text segments into web editors and mail interfaces. And we never worry about security when doing so. Because what could possibly go wrong, right?
But have we ever asked ourselves what the clipboard content actually consists of? Do we really know what it contains? And are we aware of the consequences a thoughtless copy&paste interaction can have? Who else can control the contents of the clipboard? Is it really just us doing Ctrl-C or is there other forces in the realm who are able to infect what we believe to be clean, who can desecrate what we trust so blindly that we never question or observe it?
This talk is about the clipboard and the technical details behind it. How it works, what it really contains – and who can influence its complex range of contents. We will learn about a new breed of targeted attacks, including cross-application XSS from PDF, ODT, DOC and XPS that allow to steal website accounts faster than you can click, turn your excel sheet into a monster and learn about ways to smuggle creepy payload that is hidden from sight until it executes. Oh, and we’ll also see what can be done about that and what defensive measures we achieved to create so far.
The document describes a website project on personal profiles with multiple web pages created using HTML and CSS. It includes code for 8 web pages covering topics like the home page, friends, dreams, dislikes and skills. The pages are linked together and include images, text, and tables. Styling is added using internal and external CSS. The project also includes a registration page code with form validation functions to check required fields and data types.
The document discusses common mistakes and misconceptions around web accessibility, including providing unnecessary or redundant alt text, overly long alt text descriptions, using images when text would suffice, improperly using tabindex and accesskeys, and prioritizing compliance over usability for those with cognitive disabilities. It also provides tips for proper use of headings, form labels, abbreviations and acronyms, and skip links to improve accessibility.
The document is a webpage in Hindi that provides links to pages in other languages like English, Tamil, Telugu, Kannada, Bengali, and Urdu. It also contains social media links and images related to rice pulling.
This document provides an overview of key on-page optimization strategies for improving a website's search engine rankings. It discusses the importance of SEO and why it matters, and outlines best practices for optimization elements like meta tags, headings, links, images, content and site architecture. The goal is to help users establish a baseline and then incrementally optimize their site for both search engines and users.
Class 4 handout two column layout w mobile web designErin M. Kidwell
The document discusses building a two-column website layout using HTML and CSS, and making it responsive for mobile devices. It includes code for the HTML page structure with two columns, content, and navigation, as well as CSS code for styling. It then covers adding CSS media queries to modify the layout and styles at smaller screen sizes to optimize the design for mobile.
This document discusses various aspects of interface design including color, typography, iconography, microformats, and flexibility. It provides tips on choosing color palettes, using typography effectively, designing icons and favicons, implementing microformats, and making interfaces adaptable. Examples of microformats like hCard and hCalendar are shown to demonstrate how they can work together to provide structured data on the web. The document emphasizes starting simply, reusing elements, and testing designs for robustness by turning off images and CSS.
The document discusses how users are becoming frustrated with websites that do not cater to their needs. It recommends building sites using semantic HTML, responsive web design, and simplified content to ensure the user experience is positive. Semantic HTML uses appropriate tags to structure content, responsive design adapts layout for different devices, and simplified content focuses on only including essential information for users. The document emphasizes that the user experience should work seamlessly across all devices and content delivery platforms by following these best practices.
HTML5 introduces new semantic elements like <header>, <footer>, <nav>, <article> that help provide more meaning to the structure of content compared to non-semantic divisions. It allows for clearer outlines of content and separation of concerns between content, structure and presentation. While the benefits of semantic HTML5 may not be immediately visible, it can help future-proof websites and provide more accessibility for assistive technologies.
How To Add Music And Graphics To Your Email SignaturesCaptain YR
The document provides step-by-step instructions for adding music and graphics to Yahoo Mail signatures. It explains how to open the Yahoo Mail account and navigate to the signatures settings. Users can then paste HTML code found in the document to add background music or images to their signatures. The document also provides examples of different music and image files that can be used.
The document discusses atomic design principles and best practices for CSS architecture and code. It explains the different levels of atomic design including atoms, molecules, organisms, templates and pages. It provides examples of how to implement atomic design using CSS extensions, mixins, variables and imports. It also outlines recommendations for CSS practices such as managing specificity, using semantic selectors, separating concerns of paint and layout, avoiding magic numbers, and more.
The document discusses Haml and Sass, which are template languages used to generate HTML and CSS respectively. Haml uses indentation and special characters to structure markup concisely while Sass allows nesting, variables, and other features to simplify CSS authoring. The document provides examples of basic Haml and Sass syntax and recommends starting with individual templates, using the proper file extensions, and checking whitespace when errors occur.
This document discusses 7 reasons for code bloat, including: 1) underestimating the time needed to understand a new project; 2) maintaining code without proper tools; and 3) developers not reading documentation or existing code before starting work. It argues that developers often try to solve problems their own way before listening to existing solutions or documentation. Proper documentation and planning time for understanding projects are presented as ways to avoid bloated code.
Similar to Plan your web site like you plan your parties (20)
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.
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.
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.
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.
Killing the golden calf of coding - We are Developers keynoteChristian Heilmann
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.
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.
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.
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.
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.
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.
The document provides advice and encouragement for someone starting out with JavaScript development. It discusses how JavaScript can be used in many environments like browsers, apps, and servers. It recommends resources like MDN and tools like linting to help avoid mistakes. It emphasizes that this is an exciting time for JavaScript and advises setting priorities and standards, being involved in the community, and bringing new voices and perspectives.
Keynote at halfstackconf 2017 discussing the falsehood of the idea that in order to survive the automation evolution everybody needs to learn how to code. Machines can code, too.
Progressive Web Apps - Covering the best of both worlds - DevReachChristian Heilmann
Progressive Web Apps (PWAs) can provide app-like experiences through the web by making web content fast, reliable and engaging. While PWAs may not be necessary for all projects, they can help clean up and speed up current web-based projects. PWAs leverage new web capabilities like service workers to work offline, load fast, and improve the user experience without having to meet all the requirements of native apps.
Progressive Web Apps - Covering the best of both worldsChristian Heilmann
This document discusses progressive web applications (PWAs) and their advantages over traditional native mobile applications. PWAs use modern web capabilities like Service Workers to deliver native-like experiences to users. Some key benefits of PWAs include their ability to work across platforms, have smaller file sizes for faster loading, support offline use, and provide simple update mechanisms compared to native apps. While PWAs do not have full access to device capabilities like native apps, they allow delivering app-like web content to users in a more accessible and reliable manner than traditional web pages.
Progressive Web Apps - Bringing the web front and center Christian Heilmann
This document discusses progressive web apps (PWAs). It notes that PWAs aim to make web apps feel like native mobile apps by being discoverable, installable, linkable, safe, responsive and progressive. The document outlines some key characteristics of PWAs, including that they need to be served from secure origins and have app manifests. It also discusses some common misconceptions around PWAs and notes that as PWAs improve, they will continue to blur the line between web apps and native mobile apps.
This document discusses the differences between CSS and JavaScript and when each is most appropriate to use. It argues that CSS is often underestimated in favor of JavaScript solutions. CSS has advanced significantly with features like calc(), media queries, animations/transitions, flexbox, grid, variables and more. These powerful features allow many tasks to be accomplished with CSS alone without needing JavaScript. The document encourages embracing the "squishiness" of the web and considering CSS more when building interfaces.
This document contains the transcript of a presentation by Chris Heilmann on web development. Some of the key points discussed include:
- The benefits of progressive enhancement and using HTML, CSS, and JavaScript together to build robust and accessible websites.
- How limitations in early design can foster creativity.
- The importance of error handling and defensive coding practices.
- Embracing new technologies like Service Workers and Manifests to build Progressive Web Apps.
- Rethinking the idea that JavaScript is unreliable and should not be depended on, as modern browsers have made it a capable tool.
The Soul in The Machine - Developing for Humans (FrankenJS edition)Christian Heilmann
The document discusses how machines and software can help humans by doing tasks like preventing mistakes, performing repetitive tasks, filling information gaps, remembering and categorizing information, improving understanding, enabling new communication methods, and providing protection. It describes how advances in AI, APIs, cloud services, and data processing have made it possible to build useful and helpful interfaces. The conclusion encourages developers to use these capabilities to create simple, human-centric interfaces that benefit users.
How RPA Help in the Transportation and Logistics Industry.pptxSynapseIndia
Revolutionize your transportation processes with our cutting-edge RPA software. Automate repetitive tasks, reduce costs, and enhance efficiency in the logistics sector with our advanced solutions.
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionBert Blevins
Cybersecurity is a major concern in today's connected digital world. Threats to organizations are constantly evolving and have the potential to compromise sensitive information, disrupt operations, and lead to significant financial losses. Traditional cybersecurity techniques often fall short against modern attackers. Therefore, advanced techniques for cyber security analysis and anomaly detection are essential for protecting digital assets. This blog explores these cutting-edge methods, providing a comprehensive overview of their application and importance.
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfNeo4j
Presented at Gartner Data & Analytics, London Maty 2024. BT Group has used the Neo4j Graph Database to enable impressive digital transformation programs over the last 6 years. By re-imagining their operational support systems to adopt self-serve and data lead principles they have substantially reduced the number of applications and complexity of their operations. The result has been a substantial reduction in risk and costs while improving time to value, innovation, and process automation. Join this session to hear their story, the lessons they learned along the way and how their future innovation plans include the exploration of uses of EKG + Generative AI.
Best Practices for Effectively Running dbt in Airflow.pdfTatiana Al-Chueyr
As a popular open-source library for analytics engineering, dbt is often used in combination with Airflow. Orchestrating and executing dbt models as DAGs ensures an additional layer of control over tasks, observability, and provides a reliable, scalable environment to run dbt models.
This webinar will cover a step-by-step guide to Cosmos, an open source package from Astronomer that helps you easily run your dbt Core projects as Airflow DAGs and Task Groups, all with just a few lines of code. We’ll walk through:
- Standard ways of running dbt (and when to utilize other methods)
- How Cosmos can be used to run and visualize your dbt projects in Airflow
- Common challenges and how to address them, including performance, dependency conflicts, and more
- How running dbt projects in Airflow helps with cost optimization
Webinar given on 9 July 2024
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsMydbops
This presentation, delivered at the Postgres Bangalore (PGBLR) Meetup-2 on June 29th, 2024, dives deep into connection pooling for PostgreSQL databases. Aakash M, a PostgreSQL Tech Lead at Mydbops, explores the challenges of managing numerous connections and explains how connection pooling optimizes performance and resource utilization.
Key Takeaways:
* Understand why connection pooling is essential for high-traffic applications
* Explore various connection poolers available for PostgreSQL, including pgbouncer
* Learn the configuration options and functionalities of pgbouncer
* Discover best practices for monitoring and troubleshooting connection pooling setups
* Gain insights into real-world use cases and considerations for production environments
This presentation is ideal for:
* Database administrators (DBAs)
* Developers working with PostgreSQL
* DevOps engineers
* Anyone interested in optimizing PostgreSQL performance
Contact info@mydbops.com for PostgreSQL Managed, Consulting and Remote DBA Services
Support en anglais diffusé lors de l'événement 100% IA organisé dans les locaux parisiens d'Iguane Solutions, le mardi 2 juillet 2024 :
- Présentation de notre plateforme IA plug and play : ses fonctionnalités avancées, telles que son interface utilisateur intuitive, son copilot puissant et des outils de monitoring performants.
- REX client : Cyril Janssens, CTO d’ easybourse, partage son expérience d’utilisation de notre plateforme IA plug & play.
UiPath Community Day Kraków: Devs4Devs ConferenceUiPathCommunity
We are honored to launch and host this event for our UiPath Polish Community, with the help of our partners - Proservartner!
We certainly hope we have managed to spike your interest in the subjects to be presented and the incredible networking opportunities at hand, too!
Check out our proposed agenda below 👇👇
08:30 ☕ Welcome coffee (30')
09:00 Opening note/ Intro to UiPath Community (10')
Cristina Vidu, Global Manager, Marketing Community @UiPath
Dawid Kot, Digital Transformation Lead @Proservartner
09:10 Cloud migration - Proservartner & DOVISTA case study (30')
Marcin Drozdowski, Automation CoE Manager @DOVISTA
Pawel Kamiński, RPA developer @DOVISTA
Mikolaj Zielinski, UiPath MVP, Senior Solutions Engineer @Proservartner
09:40 From bottlenecks to breakthroughs: Citizen Development in action (25')
Pawel Poplawski, Director, Improvement and Automation @McCormick & Company
Michał Cieślak, Senior Manager, Automation Programs @McCormick & Company
10:05 Next-level bots: API integration in UiPath Studio (30')
Mikolaj Zielinski, UiPath MVP, Senior Solutions Engineer @Proservartner
10:35 ☕ Coffee Break (15')
10:50 Document Understanding with my RPA Companion (45')
Ewa Gruszka, Enterprise Sales Specialist, AI & ML @UiPath
11:35 Power up your Robots: GenAI and GPT in REFramework (45')
Krzysztof Karaszewski, Global RPA Product Manager
12:20 🍕 Lunch Break (1hr)
13:20 From Concept to Quality: UiPath Test Suite for AI-powered Knowledge Bots (30')
Kamil Miśko, UiPath MVP, Senior RPA Developer @Zurich Insurance
13:50 Communications Mining - focus on AI capabilities (30')
Thomasz Wierzbicki, Business Analyst @Office Samurai
14:20 Polish MVP panel: Insights on MVP award achievements and career profiling
7 Most Powerful Solar Storms in the History of Earth.pdfEnterprise Wired
Solar Storms (Geo Magnetic Storms) are the motion of accelerated charged particles in the solar environment with high velocities due to the coronal mass ejection (CME).
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...Toru Tamaki
Jindong Gu, Zhen Han, Shuo Chen, Ahmad Beirami, Bailan He, Gengyuan Zhang, Ruotong Liao, Yao Qin, Volker Tresp, Philip Torr "A Systematic Survey of Prompt Engineering on Vision-Language Foundation Models" arXiv2023
https://arxiv.org/abs/2307.12980
Implementations of Fused Deposition Modeling in real worldEmerging Tech
The presentation showcases the diverse real-world applications of Fused Deposition Modeling (FDM) across multiple industries:
1. **Manufacturing**: FDM is utilized in manufacturing for rapid prototyping, creating custom tools and fixtures, and producing functional end-use parts. Companies leverage its cost-effectiveness and flexibility to streamline production processes.
2. **Medical**: In the medical field, FDM is used to create patient-specific anatomical models, surgical guides, and prosthetics. Its ability to produce precise and biocompatible parts supports advancements in personalized healthcare solutions.
3. **Education**: FDM plays a crucial role in education by enabling students to learn about design and engineering through hands-on 3D printing projects. It promotes innovation and practical skill development in STEM disciplines.
4. **Science**: Researchers use FDM to prototype equipment for scientific experiments, build custom laboratory tools, and create models for visualization and testing purposes. It facilitates rapid iteration and customization in scientific endeavors.
5. **Automotive**: Automotive manufacturers employ FDM for prototyping vehicle components, tooling for assembly lines, and customized parts. It speeds up the design validation process and enhances efficiency in automotive engineering.
6. **Consumer Electronics**: FDM is utilized in consumer electronics for designing and prototyping product enclosures, casings, and internal components. It enables rapid iteration and customization to meet evolving consumer demands.
7. **Robotics**: Robotics engineers leverage FDM to prototype robot parts, create lightweight and durable components, and customize robot designs for specific applications. It supports innovation and optimization in robotic systems.
8. **Aerospace**: In aerospace, FDM is used to manufacture lightweight parts, complex geometries, and prototypes of aircraft components. It contributes to cost reduction, faster production cycles, and weight savings in aerospace engineering.
9. **Architecture**: Architects utilize FDM for creating detailed architectural models, prototypes of building components, and intricate designs. It aids in visualizing concepts, testing structural integrity, and communicating design ideas effectively.
Each industry example demonstrates how FDM enhances innovation, accelerates product development, and addresses specific challenges through advanced manufacturing capabilities.
Quantum Communications Q&A with Gemini LLM. These are based on Shannon's Noisy channel Theorem and offers how the classical theory applies to the quantum world.
Blockchain technology is transforming industries and reshaping the way we conduct business, manage data, and secure transactions. Whether you're new to blockchain or looking to deepen your knowledge, our guidebook, "Blockchain for Dummies", is your ultimate resource.
Mitigating the Impact of State Management in Cloud Stream Processing SystemsScyllaDB
Stream processing is a crucial component of modern data infrastructure, but constructing an efficient and scalable stream processing system can be challenging. Decoupling compute and storage architecture has emerged as an effective solution to these challenges, but it can introduce high latency issues, especially when dealing with complex continuous queries that necessitate managing extra-large internal states.
In this talk, we focus on addressing the high latency issues associated with S3 storage in stream processing systems that employ a decoupled compute and storage architecture. We delve into the root causes of latency in this context and explore various techniques to minimize the impact of S3 latency on stream processing performance. Our proposed approach is to implement a tiered storage mechanism that leverages a blend of high-performance and low-cost storage tiers to reduce data movement between the compute and storage layers while maintaining efficient processing.
Throughout the talk, we will present experimental results that demonstrate the effectiveness of our approach in mitigating the impact of S3 latency on stream processing. By the end of the talk, attendees will have gained insights into how to optimize their stream processing systems for reduced latency and improved cost-efficiency.
Best Programming Language for Civil EngineersAwais Yaseen
The integration of programming into civil engineering is transforming the industry. We can design complex infrastructure projects and analyse large datasets. Imagine revolutionizing the way we build our cities and infrastructure, all by the power of coding. Programming skills are no longer just a bonus—they’re a game changer in this era.
Technology is revolutionizing civil engineering by integrating advanced tools and techniques. Programming allows for the automation of repetitive tasks, enhancing the accuracy of designs, simulations, and analyses. With the advent of artificial intelligence and machine learning, engineers can now predict structural behaviors under various conditions, optimize material usage, and improve project planning.
Details of description part II: Describing images in practice - Tech Forum 2024BookNet Canada
This presentation explores the practical application of image description techniques. Familiar guidelines will be demonstrated in practice, and descriptions will be developed “live”! If you have learned a lot about the theory of image description techniques but want to feel more confident putting them into practice, this is the presentation for you. There will be useful, actionable information for everyone, whether you are working with authors, colleagues, alone, or leveraging AI as a collaborator.
Link to presentation recording and transcript: https://bnctechforum.ca/sessions/details-of-description-part-ii-describing-images-in-practice/
Presented by BookNet Canada on June 25, 2024, with support from the Department of Canadian Heritage.
Details of description part II: Describing images in practice - Tech Forum 2024
Plan your web site like you plan your parties
1. Plan your web sites
like you plan parties
Stanford, May 2007
Christian Heilmann
2. • All of the following is licensed
under a Creative Commons
Attribution-Share Alike 3.0
License
http://creativecommons.org/
licenses/by-sa/3.0/ which
means you can re-use it by
attributing anything you use
to me.
Go nuts
3. • Why am I telling you that you
should plan your web site like
you plan a party?
http://www.icanhascheezburger.com
4. • I have no idea what you do or
what you want to hear about
and I just published a book
that has a similar approach.
• My master plan is to achieve
the following:
– Help people forget about the
internet as a technical
challenge and use it to
communicate and publish
information.
5. • A good party is made up from
several components:
– Music
– Food
– Drinks (or other drug
equivalents)
6. • The music part is easy, if you
keep it simple. The music
should be:
– Fast
– Loud
– Easy to understand /
discordantly sing along
7. • The food part is a bit trickier.
You need to cover the basic
food groups:
– Crisps
– Burgers
– Salads
– Alternatives for the Vegetarians
/ Vegans / Other oddballs
8. • The drinks part is mostly easy,
just make sure you have
– Alcoholic
– Ridiculously Alcoholic
– Non-alcoholic drinks to mix the
others with / use as an
alternative
9. • The main problem you have is
one of transportation and
maintenance.
– You want the music to arrive
and not get lost or broken
– You want the drinks to stay cool
and mostly unmixed
– You want some of the food to
stay cold
– You want to make sure the
salads don’t mix with the meat
as otherwise you annoy the
Vegans
16. • The same applies to delivering
a web product. You have your
different components:
– HTML – The Music / Non
Alcoholic Drinks
– CSS – The Food
– JavaScript/Flash – The Drinks /
Drugs
17. • But first of all:
• WYSIWYG is not a solution to
anything, it is a waste of time.
• WYSIWYG should be
WYSIWYCIICCANSGYAYPFBYC
SOMAA
http://www.icanhascheezburger.com
18. • WYSIWYCIICCANSGYAYPFBYC
SOMAA
– What You See Is What Your
Computer In Its Current
Configuration And Network
State Gives You And You
Perceive Filtered By Your
Current State Of Mind And
Ability.
http://www.cuteoverload.com
19. • HTML is the most important
part.
• Without it there is no web
site.
• It gives structure to the
content you want to convey.
20. Party etiquette. How not to
approach women at parties.
Don’t say “hey babe, come
here often”. Don’t show them
your Speedos and say “you
know you like my Speedos,
don’t fight it”. Don’t say “hey,
haven’t I seen you on girls
gone wild?” (unless you are
100% sure). How not to
approach men at parties.
Don’t show up.
21. • Party etiquette.
• How not to approach women
at parties.
– Don’t say “hey babe, come here
often”.
– Don’t show them your Speedos
and say “you know you like my
Speedos, don’t fight it”.
– Don’t say “hey, haven’t I seen
you on girls gone wild?” (unless
you are 100% sure).
• How not to approach men at
parties.
– Don’t show up.
22. • In HTML:
<h1>Party etiquette</h1>
<h2>How not to approach women at parties.</h2>
<ul>
<li>Don’t say “hey babe, come here often?”.</li>
<li>Don’t show them your Speedos and say “you know
you like my Speedos, don’t fight it”.</li>
<li>Don’t say “hey, haven’t I seen you on girls
gone wild?” (unless you are 100% sure).</li>
</ul>
<h2>How not to approach men at parties.</h2>
<ul>
<li>Don’t show up.</li>
</ul>
23. • With good and honest music,
you can tell by the cover what
it is.
30. • Don’t make your end users
have to guess what your
content is.
• What you need is a packing
crate for your HTML, and this
is the DOCTYPE.
31. • Now, this is what I call an HTML document:
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;
quot;http://www.w3.org/TR/html4/strict.dtdquot;>
<html dir=quot;ltrquot; lang=quot;enquot;>
<head>
<meta http-equiv=quot;Content-Typequot; content=quot;text/html;
charset=utf-8quot;>
<title>Party Etiquette</title>
</head>
<body>
<h1>Party etiquette</h1>
[… All the other stuff …]
</body>
</html>
32. • The idea of music that is easy
to follow and sing along to
also applies to your HTML.
• Simply put, use the right
HTML for the right job.
• The fancy name for this is
semantic markup.
39. • You got your party going with
the right music and you have
to keep people entertained.
• One idea is to provide
nourishment.
• Your food should be
– easy to prepare,
– re-arrange and
– most of all fresh.
40. • For web development and
CSS this means that you stick
to the basics and use them as
far as they go.
• You can still make a product
really pleasing to the eye
without sacrificing structure.
42. • Global Whitespace Reset gives you a clean slate to
start from
*{
margin:0;
padding:0;
list-style:none;
border:none;
}
43. • Define presets for all the elements you are likely to
have in a document using element selectors
body{
font-family:helvetica,arial,sans-serif;
background:#fff;
color:#333;
padding:2em;
}
p,li {
padding-bottom:.5em;
line-height:1.3em;
}
h1,h2,h3,h4,h5,h6{
padding-bottom:.5em;
}
44. • Define page modules and sections and refine the
global definitions for these.
#nav li{
padding:1em .5em;
}
#header p{
border:1px solid #999;
background:#ddd;
}
45. • Show class but, don’t overdo it.
<ul>
<li class=”list-item”>The Passenger</li>
<li class=”list-item currentlyplaying”>Louie Louie</li>
<li class=”list-item”>I want to conquer the world</li>
<li class=”list-item”>Foxtrott Uniform Charlie Kilo</li>
</ul>
li.list-item{
padding:.5em;
font-family:courier,monospace;
color:#000;
}
li.currentlyplaying{
color:#c00;
}
46. • Use classes as the exception to the rule and use the
cascade.
<ul id=”playlist”>
<li>The Passenger</li>
<li class=”currentlyplaying”>Louie Louie</li>
<li>I want to conquer the world</li>
<li>Foxtrott Uniform Charlie Kilo</li>
</ul>
#playlist li{
padding:.5em;
font-family:courier,monospace;
color:#000;
}
#playlist li.currentlyplaying{
color:#c00;
}
47. • All of the CSS should be in a
separate file and not
contained in the documents.
• The reasons are obvious:
– You have one central repository
of all the look and feel
– This information gets cached by
the visitors’ computers and thus
only needs to get loaded once.
48. • Let’s go over to the
intoxicating parts of the party.
• When it comes to drinks,
there are some rules that
make life a lot easier.
49. • Don’t choose cheap over easy to
digest and keep in
• Use alcohol when you feel in the
mood for it, not to make you feel
better or lose inhibitions
• Don’t drink and drive
• Don’t mix what does not go
together.
• Don’t give hard alcohol to minors
or drugs to people who don’t know
what these drugs do
(http://urban75.com/drugs).
50. • When it comes to JavaScript
the same rules apply:
– Only use JS when the end user
has some benefit from it
– Don’t expect anything
– Make your script test that it can
run on the current user agent
before it applies itself
(unobtrusive JavaScript
http://onlinetools.org/articles/
unobtrusivejavascript)
– Don’t script and drive
51. • It is easy to code some functions to do things.
function init(){
lis = document.getElementsByTagName(‘li’);
for(i=0;i<lis.length;i++){
lis[i].onclick = doStuff;
}
}
function doStuff(){
this.style.background = ‘#ffc’;
}
52. • The issue with that is though that you can add several
scripts to each document.
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;
quot;http://www.w3.org/TR/html4/strict.dtdquot;>
<html dir=quot;ltrquot; lang=quot;enquot;>
<head>
<meta http-equiv=quot;Content-Typequot; content=quot;text/html;
charset=utf-8quot;>
<title>Party Etiquette</title>
<script type=quot;text/javascriptquot; src=quot;yourscript.jsquot;>
</script>
<script type=quot;text/javascriptquot; src=quot;anotherscript.jsquot;>
</script>
</head>
<body>
</body>
</html>
53. • Therefore, avoid overwriting by encapsulating your
code and avoiding global variables
highlightLIs = {
init:function(){
var lis = document.getElementsByTagName(‘li’);
for(var i=0;i<lis.length;i++){
lis[i].onclick = doStuff;
}
}
doStuff:function(){
this.style.background = ‘#ffc’;
}
}
54. • Keep all your script output to
itself – Namespace your
functions and variables
• Use scripting as a helper and
not to show off
55. • Add-ons for a perfect party
– Sun screen for the redheads
– Protection planning (first aid kit,
condoms…)
– Doggie Bags and playlist
printouts for people to take
away
56. • The web page equivalents for
these:
– a print style sheet
– an Open ID login
– Microformats (doggie bags to
take pieces of your information
with and re-use them)
– A zoom layout