Extended slides from a recent Sydney Port80 presentation. The slides cover three overall topics: 1) a quick timeline of CSS-related events, 2) key events that changed CSS and 3) a discussion on writing better CSS.
This is the CSS Tutorial for Beginners that teach the basics of CSS. This tutorial will show the basic structure of a CSS style and will show 3 different methods to apply styles.
This is the CSS Tutorial for Beginners that teach the basics of CSS. This tutorial will show the basic structure of a CSS style and will show 3 different methods to apply styles.
Save 10% off ANY FITC event with discount code 'slideshare'
See our upcoming events at www.fitc.ca
If you’re working on a large project with a lot of hands in the CSS pot, then your CSS may be doomed to code bloat failure. Scalable and modular CSS architectures and approaches are the new hotness and rightfully so. They provide sanity, predictably and scalability in a potentially crazy coding world. This session will give an overview of some the most popular approaches, including OOCSS, SMACSS, CSS for Grownups, and DRY CSS as well as discussing some general principles for keeping your CSS clean, optimized, and easy to maintain.
A standards-based method for controlling the look and feel of XML content.
Comprised of Rules to control elements in the document.
Designed to separate formatting from the content while being flexible and scalable
CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element.
This PPT is about my best friends, HTML, CSS and JS. Here I am just talk/show few features of them. all three combined make our web site more powerful in this WWW world.
Save 10% off ANY FITC event with discount code 'slideshare'
See our upcoming events at www.fitc.ca
If you’re working on a large project with a lot of hands in the CSS pot, then your CSS may be doomed to code bloat failure. Scalable and modular CSS architectures and approaches are the new hotness and rightfully so. They provide sanity, predictably and scalability in a potentially crazy coding world. This session will give an overview of some the most popular approaches, including OOCSS, SMACSS, CSS for Grownups, and DRY CSS as well as discussing some general principles for keeping your CSS clean, optimized, and easy to maintain.
A standards-based method for controlling the look and feel of XML content.
Comprised of Rules to control elements in the document.
Designed to separate formatting from the content while being flexible and scalable
CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element.
This PPT is about my best friends, HTML, CSS and JS. Here I am just talk/show few features of them. all three combined make our web site more powerful in this WWW world.
HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]Aaron Gustafson
Everyone’s going gaga over HTML5 and the plethora of how-tos and demos available on the web are inspirational, but often leave us with more questions than answers. In this session, Aaron Gustafson will focus his attention on HTML5 as a markup language, provide you with a solid context for its enhanced semantics, and show you simple, effective ways you can put it to use on your site today.
Let’s admit it, the tools for writing CSS aren’t very advanced. For the most part, the people who write tools don’t know about CSS and the people who know about CSS don’t write tools. Quite a conundrum!
In this session, you’ll learn about good tools that can make development faster and maintenance easier. We’ll also talk a bit about where we can go from here.
What tools do we need as sites are becoming more and more complex? We need to get beyond tools whose primary goal is to avoid hand-coding and realize that, as our techniques for writing CSS become more powerful, our tools can too! Session will include:
* Validators
* Preprocessors
* Finding dead rules
* Linting
* CSS3 gradient tools
* Performance measurement tools
* Unit testing
Creating a Simple, Accessible On/Off SwitchRuss Weakley
Have you ever tried to style checkboxes or radio buttons and ended up pulling your hair out? This presentation will explore a few simple tricks that can be used to style checkboxes and radio buttons. In this case, we will make them look like an on/off switch.
CSS3: A practical introduction (FT2010 talk)Lea Verou
Screenshots from the HTML slides that I used to complement my talk at Front Trends 2010. Quality is quite bad due to how Acrobat merges images into a single pdf.
Find the HTML version of the slides, more information about the talk and my presentation framework here: http://leaverou.me/2010/10/my-ft2010-slides-and-csss-my-presentation-framework/
CSS3 secrets: 10 things you might not know about CSS3Lea Verou
My CSS3 secrets presentation. These are just screenshots, the interactive version can be found at http://leaverou.me/css3-secrets (works best on Firefox)
HTML stands for Hyper Text Mark-up Language and CSS stands for Cascading Style Sheet. HTML 5 is the latest utility programming language. There is no big difference between HTML and HTML5. Copy the link given below and paste it in new browser window to get more information on HTML CSS:- www.transtutors.com/homework-help/computer-science/html-css.aspx
Efficiently theming a multi-site Drupal 8 portal - Drupal Dev Days Seville 2017La Drupalera
Our colleagues Nesta -Front-End leader in La Drupalera- and Enno -Front-End Drupal developer- teach in Drupal Dev Days Seville 2017 how to create your Sass/JS/CSS themes in case you have styles with common basic elements but different layouts, structures and contents in your multi-site installation. Such a challenge!
Tired of eating CSS soup day after day? No longer want to play stylesheet Jenga whenever you try to edit main.css? You just may need a CSS architecture. This talk will review the major CSS architectures like BEM (Block Element Modifier) and SMACSS (Scalable and Modular Architecture for CSS) while discussing the pros and cons of each.
Originally given at JoomlaDay Florida 2018 on many of my favorite CSS and Sass concepts. Covering things like CSS Layout Grid, Flexbox, and how to start using Element Queries.
Many developers used to believe that class-free, lean markup and descendant selectors were the answer. Many developers still build websites for a single resolution, or a small range of devices. However, these practices are now being questioned. Where do we stand? What is best practice web development today? Russ Weakley will explore these topics and more... or possibly less...
Skroutz redesign - How to approach card-based design & SASS content - specifi...Skroutz S.A.
On the occasion of the 2016 DEVIT conference (http://devitconf.org/) in Thessaloniki, George Katsiampas, front-end developer at Skroutz.gr, hosted a workshop about the process of the redesign of our website.
Specifically, he demonstrated the challenges and needs the front-end team tried to solve through the application of Card design, the solutions suggested and finally how they managed to implement these solutions in HTML & CSS, keeping our codebase clean and maintainable.
This workshop was about front-end developers and designers who are familiar with basic design & Web UX terms, responsive design, and those able to understand SASS usage.
This presentation will look at how to build accessible chat windows. Along the way we will explore: how they differ from traditional modals, how to manage focus, how to manage dynamically updating content for assistive technologies and more. The session is designed for developers and coders.
This presentation for AllyCamp 2020, looks at accessible names, how they are exposed in the browsers accessibility tree, and their importance to assistive technologies. There is also a deep dive into simple examples, advanced examples using ARIA, and an overview of the W3C's Accessible Name and Description Computation.
What are accessible names and why should you care?Russ Weakley
This presentation will look at accessible names, how they are exposed in the browsers accessibility tree, and their importance to assistive technologies. There will be a deep dive into simple examples, advanced examples using ARIA, and an overview of the W3C's Accessible Name and Description Computation.
This presentation was fro the AllyBtyes event on 21 May 2020. The presentations looks at a pattern for building or reviewing any new UI component – semantics, focusable, keyboard interaction, visible states, accessible name and relationships.
What is WCAG 2 and why should we care?Russ Weakley
A presentation for IAG staff for the "Future is here" event on 6 May 20202. This presentation covers three topics - "What are our legal responsibilities around accessibility?", "What is WCAG?", and "What is inclusive design?"
This ID24 2019 talk will look at a the importance of states (visited, focus, active, checked/selected, open and more) when building design systems. We will explore their relevance, how to maintain consistency and how to systemise when designing at scale.
Creating accessible modals and autocompletesRuss Weakley
In this two-part presentation, Russ will guide us on a deep dive into how to create accessible modals and accessible autocomplete search functions. Along the way, we will look at the problem for different types of users as well as explore how ARIA can be used to improve these experiences. There will be blood, sweat and tears (Russ' words!) but hopefully a happy outcome for all.
Presentation for the Sydney Web Accessibility & Inclusive Design - 30 August 2019
Building an accessible progressive loaderRuss Weakley
This presentation for A11y Bytes May 2019, takes you through how to mark up a progress loader using the progress element. Then, eight tips for making the progress loader accessible.
Accessibility in Design systems - the pain and gloryRuss Weakley
Slides from CodeHeart Design 2018: Building a design system is a painful enough, but how do you add accessibility into the mix? Is it an "up-at-dawn, pride-swallowing siege", or can it become part of the normal work flow. We'll look at accessibility for different roles - such as UX, UI and devs, as well as where accessibility should be injected into the process.
Presentation for OZeWAI Sydney 2018. A walk through of four different methods for making inline error messages programmatically associated. Also covers aria-invalid and aria-live.
Presentation for A11yCamp Melbounre 2018. It all seems so easy, adding a hint or an error to a form field. But what happens when you’re suddenly asked to add pop-up tool tips? Or, even worse, additional information as modals? This presentation will take you through the highs and lows of tool tips and error messages. Along the way, we’ll look at some new ARIA 1.1 attributes like aria-errormessage.
This presentation covers; different types of disabilities, assistive technologies, legal and ethical responsibilities as well as a range of terms such as W3C, WAI and WCAG.
In the old days, many developers looked at complex websites and web applications as a series of individual pages. These days, it’s all about abstracting these pages down to re-usable elements, modules and components which are then documented, designed and built as comprehensive pattern libraries. Pattern libraries can be used as an integral part of the UX, design and front-end development phases. But where should accessibility be included in these different types of pattern libraries? Come on a journey as we explore the pain and glory of baking accessibility into UX, design and front-end pattern libraries.
In the old days, many developers looked at complex websites and web applications as a series of individual pages. These days, it’s all about abstracting these pages down to re-usable elements, modules and components which are then documented, designed and built as comprehensive pattern libraries. Pattern libraries can be used as an integral part of the UX, design and front-end development phases. But where should accessibility be included in these different types of pattern libraries? Come on a journey as we explore the pain and glory of baking accessibility into UX, design and front-end pattern libraries.
Building an accessible auto-complete - #ID24Russ Weakley
This presentation will take a deep dive into how to create an auto-complete search function that is accessible to a range of different users including keyboard-only and screen reader users. Along the way, we will explore important keystrokes and aria attributes that can be used enhance the experience for all users.
This presentation for A11yBytes Camp Sydney 2017 takes a deep dive into how to create an auto-complete search function that is accessible to a range of different users including keyboard-only and screen reader users. Along the way, we will explore important keystrokes and aria attributes that can be used enhance the experience for all users.
This presentation for Inclusive Design 24 (#ID24) explores how to create accessible, usable "floating" labels. Floating labels are where the label moves above form controls based on user interaction.
Accessible custom radio buttons and checkboxesRuss Weakley
Creating custom-designed radio buttons and checkboxes has never been easy. Many developers have found ways of hacking these elements using CSS and JavaScript. but can they also be accessible. The answer is yes, with a little extra effort. This presentation will walk through some simple examples to show how radio buttons and checkboxes can be semantic as well as keyboard/screen-reader accessible.
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
Let's dive deeper into the world of ODC! Ricardo Alves (OutSystems) will join us to tell all about the new Data Fabric. After that, Sezen de Bruijn (OutSystems) will get into the details on how to best design a sturdy architecture within ODC.
Accelerate your Kubernetes clusters with Varnish CachingThijs Feryn
A presentation about the usage and availability of Varnish on Kubernetes. This talk explores the capabilities of Varnish caching and shows how to use the Varnish Helm chart to deploy it to Kubernetes.
This presentation was delivered at K8SUG Singapore. See https://feryn.eu/presentations/accelerate-your-kubernetes-clusters-with-varnish-caching-k8sug-singapore-28-2024 for more details.
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
JMeter webinar - integration with InfluxDB and GrafanaRTTS
Watch this recorded webinar about real-time monitoring of application performance. See how to integrate Apache JMeter, the open-source leader in performance testing, with InfluxDB, the open-source time-series database, and Grafana, the open-source analytics and visualization application.
In this webinar, we will review the benefits of leveraging InfluxDB and Grafana when executing load tests and demonstrate how these tools are used to visualize performance metrics.
Length: 30 minutes
Session Overview
-------------------------------------------
During this webinar, we will cover the following topics while demonstrating the integrations of JMeter, InfluxDB and Grafana:
- What out-of-the-box solutions are available for real-time monitoring JMeter tests?
- What are the benefits of integrating InfluxDB and Grafana into the load testing stack?
- Which features are provided by Grafana?
- Demonstration of InfluxDB and Grafana using a practice web application
To view the webinar recording, go to:
https://www.rttsweb.com/jmeter-integration-webinar
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
PHP Frameworks: I want to break free (IPC Berlin 2024)Ralf Eggert
In this presentation, we examine the challenges and limitations of relying too heavily on PHP frameworks in web development. We discuss the history of PHP and its frameworks to understand how this dependence has evolved. The focus will be on providing concrete tips and strategies to reduce reliance on these frameworks, based on real-world examples and practical considerations. The goal is to equip developers with the skills and knowledge to create more flexible and future-proof web applications. We'll explore the importance of maintaining autonomy in a rapidly changing tech landscape and how to make informed decisions in PHP development.
This talk is aimed at encouraging a more independent approach to using PHP frameworks, moving towards a more flexible and future-proof approach to PHP development.
UiPath Test Automation using UiPath Test Suite series, part 3DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 3. In this session, we will cover desktop automation along with UI automation.
Topics covered:
UI automation Introduction,
UI automation Sample
Desktop automation flow
Pradeep Chinnala, Senior Consultant Automation Developer @WonderBotz and UiPath MVP
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
36. Browser changes in 2010
Chrome 4.0 - January 2010
Chrome 5.0 - May 2010
Chrome 6.0 - September 2010
Chrome 7.0 - October 2010
Chrome 8.0 - December 2010
Safari 5 - June 2010
Opera 11 - December 2010
40. Browser changes in 2011
Chrome 9.0 - February 2011
Chrome 10.0 - February 2011
Chrome 11.0 - April 2011
Chrome 12.0 - June 2011
Chrome 13.0 - August 2011
Chrome 14.0 - September 2011
Chrome 15.0 - October 2011
Chrome 16.0 - December 2011
41. and more...
Internet Explorer 9 - March 2011
Firefox 4.0 - March 2011
Firefox 5.0 - June 2011
Firefox 6.0 - August 2011
Firefox 7.0 - September 2011
Firefox 8.0 - November 2011
Firefox 9.0 - November 2011
45. Browser changes in 2012
Chrome 17.0 - February 2012
Chrome 18.0 - March 2012
Chrome 19.0 - May 2012
Chrome 20.0 - June 2012
Chrome 21.0 - July 2012
Chrome 22.0 - September 2012
Chrome 23.0 - November 2012
46. and more...
Firefox 10.0 - January 2012
Firefox 11.0 - March 2012
Firefox 12.0 - April 2012
Firefox 13.0 - June 2012
Firefox 14.0 - June 2012
Firefox 15.0 - August 2012
Firefox 16.0 - October 2012
Firefox 17.0 - November 2012
47. and more...
Opera 12 - June 2012
Safari 6 - July 2012
Internet Explorer 10 - October 2012
50. Key events
Here are some of the key events that have
helped to alter the way we build websites.
51. New browsers
“As hard as it may be for many people to
believe, Internet Explorer 6 began the
process, allowing designers and
developers to move to full CSS.”
rs = new possibilities
New browse
52. Frameworks
“A set of tools, libraries, conventions, and
best practices that attempt to abstract
routine tasks into generic modules that
can be reused.”
The beginning
of abstractin
g CSS
53. CSS3
“CSS3 provides us with a wide range of
new tools such as border-radius,
gradients, shadows, web-fonts,
animations, transforms, transitions and
more.”
cient, more effective
More effi
54. Web fonts
“Webfonts are a font format that allows
web designers to use real typography
online without losing the advantages of
live text — dynamic, searchable, accessible
content.”
Real fonts in
the browser
55. Responsive Web Design
“Responsive design is about creating
flexible layouts that can adapt to suit the
screen size and/or orientation of any
device.”
g from fixed to fluid
Movin
56. OOCSS
“The purpose of OOCSS is to encourage
code reuse and, ultimately, faster and
more efficient stylesheets that are easier
to add to and maintain.”
Fully abstrac
ted CSS
57. SMACSS
“SMACSS is more style guide than rigid
framework - an attempt to document a
consistent approach to site development
when using CSS.”
ture & conventions
Defining architec
58. Preprocessors
“Sass is an extension of CSS3, adding
nested rules, variables, mixins and
selector inheritance.”
Writing more
efficient & po
werful CSS
61. The old way
CSS used to be about clean HTML -
withe the absolute minimum of
classes. Layouts that used too many
classes were considered to be
suffering from “classitis”.
63. The new way
Today, it is about abstracting layouts
into reusable modules so that CSS is
more lean and efficient. This means
that there are more classes inside the
HTML.
64. The benefits
While the HTML has additional
classes, the CSS remains very lean.
Implementation and modification is
quicker and more efficient.
68. Avoid IDs
Use classes rather than IDs for
styling purposes. Classes are more
flexible. Using only classes can
reduce cascade issues.
#box { }
.box { }
70. Use prefixes
Use “pseudo-namespaces” as
prefixes - so that related classes can
easily be identified.
.box-feature { }
.box-heading { }
.box-body { }
.box-content { }
71. Meaningful
Class names should be meaningful,
so that other developers can
understand their purpose.
.bbdy { }
.box-body { }
74. An example layout
Look at the following example layout.
Can you see any patterns (aspects of
the design that can be defined into a
single concept and then reused)?
75.
76. Layout patterns
There are some patterns that can be
used to define the overall layout,
such as:
wide column
narrow column
medium column
77. wide column narrow column
medium column medium column
85. Row module extends
Two of these rows have additional
characteristics - they have padding
and background-color. These two
rows can be defined as “extends” -
extending the initial module
92. Box module extends
Two of these boxes have additional
characteristics - they have padding
and background-color. These two
rows can be defined as “extends” -
extending the initial module
96. Flexible
We need to be able to target
- the overall box
- an image/object (aligned left or right)
- the body content within the box
- a possible heading (could be h1-h6)
- possibly even the contents itself
112. large image
small image
small image
medium image medium image
medium image medium image
113. Solution 3:
This can be solved using the “box-
body” class. This class will wrap
around the contents of the box and
force it to sit beside the feature
image or object, no matter how wide
this image or object is.
116. Why use “overflow”?
Using overflow: hidden is one
method that will trigger the block
formatting context, which allows a
box to sit beside a floated object,
without sliding under it or wrapping
around it.
117. overflow: hidden forces the
“box-body” class to sit beside
a floated object, no matter how wide.
125. Avoid repetition
Avoid redefining elements throughout
your style sheets. How many times
do you need to define headings or
font-sizes?
h2 { }
.intro h2 { }
h2 { }
126. Avoid deep selectors
Avoid deep selectors as these make
the cascade unnecessarily complex.
#content #nav ul li a { }
128. Avoid !important
While !important may have it’s uses, it
should not be used “reactively” (such as
helping to solve cascade issues).
.box { margin: 0 !important; }
129. Avoid undoing styles
If your CSS is written correctly, you
should never have to undo previous
rules.
.box { float: left; }
.box-feature { float: none; }