Many web sites have moved away from table based layouts to CSS. But what about the longer term? Is you CSS efficient, maintainable and modular? Find out about taking your CSS to the next level.
http://natbat.net/2008/Sep/28/css-systems/ - A CSS System is a reusable set of content-oriented markup patterns and associated CSS created to express a site's individual design. It is the end result of a process that emphasizes up-front planning, loose coupling between CSS and markup, pre-empting browser bugs and overall robustness. It also incorporates a shared vocabulary for developers to communicate the intent of the code. This talk elaborates on this concept, and also describes a number of tricks I use to pre-empt maintainability issues.
Originally presented at BarCamp London 5 in Richmond on the 28th of September 2008.
If you are a theme developer, using Sass or Syntactically Awesome Stylesheets is a time saving way to write your code and it is easy to learn once you are familiar with CSS. In this session, you will learn how to harness the power of variables, nesting, and mixins to take advantage of everything that SASS has to offer to write awesome code. In order to get the most from this session, you must have a good understanding of HTML and CSS.
Many web sites have moved away from table based layouts to CSS. But what about the longer term? Is you CSS efficient, maintainable and modular? Find out about taking your CSS to the next level.
http://natbat.net/2008/Sep/28/css-systems/ - A CSS System is a reusable set of content-oriented markup patterns and associated CSS created to express a site's individual design. It is the end result of a process that emphasizes up-front planning, loose coupling between CSS and markup, pre-empting browser bugs and overall robustness. It also incorporates a shared vocabulary for developers to communicate the intent of the code. This talk elaborates on this concept, and also describes a number of tricks I use to pre-empt maintainability issues.
Originally presented at BarCamp London 5 in Richmond on the 28th of September 2008.
If you are a theme developer, using Sass or Syntactically Awesome Stylesheets is a time saving way to write your code and it is easy to learn once you are familiar with CSS. In this session, you will learn how to harness the power of variables, nesting, and mixins to take advantage of everything that SASS has to offer to write awesome code. In order to get the most from this session, you must have a good understanding of HTML and CSS.
NOTE: This presentation is more than 6 years old! This is not the way to do things now. :-) - Stephen
Presentation for Fronteers 2008 conference in Amsterdam.
PHOTO CREDITS:
- slide 2: Andrea at http://indigovalleyphotography.com/
- slide 3: raywal65 @ morguefile (http://www.morguefile.com/forum/profile.php?username=RAYWAL65)
- slide 4: Kevin Connors (http://kconnors.com)
Introduction to the styling language of the Web - CSS and learn its foundations. We will cover CSS syntax, how to add CSS to your HTML, various CSS properties, the box model, CSS units and custom properties. Understand how to use CSS to style individual elements and create layouts with an example of a styling the landing page of a portfolio.
Media queries are one of the most exciting aspects about CSS today. They will allow us to change our layouts to suit the exact need of different devices - without changing the content. This presentation explains what Media queries are, how to use them, how to target the iPhone and how to create flexible layouts.
NOTE: This presentation is more than 6 years old! This is not the way to do things now. :-) - Stephen
Presentation for Fronteers 2008 conference in Amsterdam.
PHOTO CREDITS:
- slide 2: Andrea at http://indigovalleyphotography.com/
- slide 3: raywal65 @ morguefile (http://www.morguefile.com/forum/profile.php?username=RAYWAL65)
- slide 4: Kevin Connors (http://kconnors.com)
Introduction to the styling language of the Web - CSS and learn its foundations. We will cover CSS syntax, how to add CSS to your HTML, various CSS properties, the box model, CSS units and custom properties. Understand how to use CSS to style individual elements and create layouts with an example of a styling the landing page of a portfolio.
Media queries are one of the most exciting aspects about CSS today. They will allow us to change our layouts to suit the exact need of different devices - without changing the content. This presentation explains what Media queries are, how to use them, how to target the iPhone and how to create flexible layouts.
IM features:
Auto Provisioning
Facilities to set & modify online status
Rate Search (Destination Wise)
App to app Call
P2P chatting
Group chat
Localization
Share moods with Emoticons
Share file, video, picture, voice record.
Push notifications (offline message)
Message delivery Status
Buddy list
Auto login while on data connections
IM history
Slides presented at DrupalCamp Montreal 2013. Walks through the features of the Zen theme, how to use Sass and Compass, and finally, how to use Zen Grids to change the layout. Conclusion: Zen Grids simplifies the process of changing the layout, so makes responsive design a lot easier to implement.
Connector Corner: Automate dynamic content and events by pushing a buttonDianaGray10
Here is something new! In our next Connector Corner webinar, we will demonstrate how you can use a single workflow to:
Create a campaign using Mailchimp with merge tags/fields
Send an interactive Slack channel message (using buttons)
Have the message received by managers and peers along with a test email for review
But there’s more:
In a second workflow supporting the same use case, you’ll see:
Your campaign sent to target colleagues for approval
If the “Approve” button is clicked, a Jira/Zendesk ticket is created for the marketing design team
But—if the “Reject” button is pushed, colleagues will be alerted via Slack message
Join us to learn more about this new, human-in-the-loop capability, brought to you by Integration Service connectors.
And...
Speakers:
Akshay Agnihotri, Product Manager
Charlie Greenberg, Host
State of ICS and IoT Cyber Threat Landscape Report 2024 previewPrayukth K V
The IoT and OT threat landscape report has been prepared by the Threat Research Team at Sectrio using data from Sectrio, cyber threat intelligence farming facilities spread across over 85 cities around the world. In addition, Sectrio also runs AI-based advanced threat and payload engagement facilities that serve as sinks to attract and engage sophisticated threat actors, and newer malware including new variants and latent threats that are at an earlier stage of development.
The latest edition of the OT/ICS and IoT security Threat Landscape Report 2024 also covers:
State of global ICS asset and network exposure
Sectoral targets and attacks as well as the cost of ransom
Global APT activity, AI usage, actor and tactic profiles, and implications
Rise in volumes of AI-powered cyberattacks
Major cyber events in 2024
Malware and malicious payload trends
Cyberattack types and targets
Vulnerability exploit attempts on CVEs
Attacks on counties – USA
Expansion of bot farms – how, where, and why
In-depth analysis of the cyber threat landscape across North America, South America, Europe, APAC, and the Middle East
Why are attacks on smart factories rising?
Cyber risk predictions
Axis of attacks – Europe
Systemic attacks in the Middle East
Download the full report from here:
https://sectrio.com/resources/ot-threat-landscape-reports/sectrio-releases-ot-ics-and-iot-security-threat-landscape-report-2024/
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/
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.
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Jeffrey Haguewood
Sidekick Solutions uses Bonterra Impact Management (fka Social Solutions Apricot) and automation solutions to integrate data for business workflows.
We believe integration and automation are essential to user experience and the promise of efficient work through technology. Automation is the critical ingredient to realizing that full vision. We develop integration products and services for Bonterra Case Management software to support the deployment of automations for a variety of use cases.
This video focuses on the notifications, alerts, and approval requests using Slack for Bonterra Impact Management. The solutions covered in this webinar can also be deployed for Microsoft Teams.
Interested in deploying notification automations for Bonterra Impact Management? Contact us at sales@sidekicksolutionsllc.com to discuss next steps.
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.
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.
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.
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...UiPathCommunity
💥 Speed, accuracy, and scaling – discover the superpowers of GenAI in action with UiPath Document Understanding and Communications Mining™:
See how to accelerate model training and optimize model performance with active learning
Learn about the latest enhancements to out-of-the-box document processing – with little to no training required
Get an exclusive demo of the new family of UiPath LLMs – GenAI models specialized for processing different types of documents and messages
This is a hands-on session specifically designed for automation developers and AI enthusiasts seeking to enhance their knowledge in leveraging the latest intelligent document processing capabilities offered by UiPath.
Speakers:
👨🏫 Andras Palfi, Senior Product Manager, UiPath
👩🏫 Lenka Dulovicova, Product Program Manager, UiPath
UiPath Test Automation using UiPath Test Suite series, part 4DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap.
The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies.
Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques
What will you get from this session?
1. Insights into SAP testing best practices
2. Heatmap utilization for testing
3. Optimization of testing processes
4. Demo
Topics covered:
Execution from the test manager
Orchestrator execution result
Defect reporting
SAP heatmap example with demo
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
Links and Navigation
1. Links & Navigation
<and presentation with css />
Advanced CSS Stephen Ireland
2. Links
How the web works - we need to get it right
• Conventions should be followed
• Links should stand out on a page
• Differentiate from body text, preferably with some kind of
hover effect
• Make something look and act like a button - it becomes
easier to understand what it does
Advanced CSS Stephen Ireland
3. Anatomy of a Link
Relative link within site
<a href=”index.html”>Link text goes here</a>
<a href=”pages/contact.html”>Contact us</a>
<a href=”http://www.google.com”>Google</a>
need http:// if linking to an external website
Advanced CSS Stephen Ireland
4. States of a Link
A link has four states of activity
• Unvisited
• Hover
• Active
• Visited
Advanced CSS Stephen Ireland
5. States of a Link
What the states mean
• Unvisited - user has not visited the link location
• Hover - user is hovering over the link (mouse or keyboard)
• Active - user has clicked down but not released
• Visited - user has visited the location the link points to
Why do we need to know this? Because we can control the
physical appearance of each state using CSS.
Advanced CSS Stephen Ireland
6. Referenced in CSS
State CSS selector Default appearance
• Unvisited a:link blue, underlined
• Hover a:hover blue, underlined
• Active a:active red, underlined
• Visited a:visited purple, underlined
The default appearance of an html link is ugly. CSS gives us
ultimate control to change the appearance of the link and its
various states.
Advanced CSS Stephen Ireland
8. Link Styles
What we have control over
• Text colour (color)
• Font family and style
• Background colour
• Decoration (Underline, strike-through, etc)
• And more
Links are inline elements, however we can force them to
behave like block-level elements using display: block;
Advanced CSS Stephen Ireland
9. How Styles are Applied
CSS
a:link, a:visited { All links visited or
text-decoration: underline; unvisited will be green
color: #b3ff3d; and underlined.
}
a:hover { When hovering over the
text-decoration: none; link, the underline will
color: #000000; disappear and the link
} text will appear black.
Advanced CSS Stephen Ireland
10. Be More Specific
CSS
p a:link, p a:visited { All links in a paragraph
text-decoration: underline; visited or unvisited
color: #b3ff3d; will be green and
} underlined.
In many cases we need to be more specific with our CSS
styles. The CSS rule above will only affect links within
paragraph tags.
Advanced CSS Stephen Ireland
11. Navigation and Links
What’s the difference?
• Navigation is really a group of
carefully considered links.
• Gives structure and consistency
to a website.
• Helps visitors around the site,
and get back to the homepage.
Good navigation should allow a visitor to quickly find what
they are looking for on your site.
Advanced CSS Stephen Ireland
12. HTML Markup for Navigation
Example HTML
<div id=”navigation”>
<ul>
<li><a href=”page1.html”>Page 1</a></li>
<li><a href=”page2.html”>Page 2</a></li>
<li><a href=”page3.html”>Page 3</a></li>
<li><a href=”page4.html”>Page 4</a></li>
<li><a href=”page5.html”>Page 5</a></li>
</ul>
</div>
Advanced CSS Stephen Ireland
13. Horizontal or Vertical?
Example HTML
<div id=”navigation”>
<ul>
<li><a href=”page1.html”>Page 1</a></li>
<li><a href=”page2.html”>Page 2</a></li>
Use this HTML markup whether you
<li><a href=”page3.html”>Page 3</a></li>
want your navigation to flow vertically or
<li><a href=”page4.html”>Page 4</a></li>
horizontally.
<li><a href=”page5.html”>Page 5</a></li>
</ul>
</div>
Advanced CSS Stephen Ireland
14. Why?
Example HTML
<div id=”navigation”>
<ul>
<li><a href=”page1.html”>Page 1</a></li>
Because whether navigation displays
<li><a href=”page2.html”>Page 2</a></li>
horizontally or vertically, it is a
<li><a href=”page3.html”>Page 3</a></li>
presentational consideration, therefore
<li><a href=”page4.html”>Page 4</a></li>
controlled using CSS.
<li><a href=”page5.html”>Page 5</a></li>
</ul>
</div>
Advanced CSS Stephen Ireland
15. Applying Styles
Unstyled Styled
Advanced CSS Stephen Ireland
16. Step One: Ground Rules
We apply some basic styles to the navigation div.
CSS
#navigation {
width: 200px;
font-family: “Lucida Grande”, “Trebuchet MS”, sans-serif;
font-size: 80%;
font-weight: bold;
}
Advanced CSS Stephen Ireland
17. Step Two: Reset Browser Defaults
Reset margin and padding on the Unordered List to 0.
CSS
#navigation ul {
margin: 0;
padding: 0;
}
Advanced CSS Stephen Ireland
18. Step Three: Style the <li>
Remove the bullet from the list-item and put a coloured
border in place.
CSS
#navigation ul li {
list-style: none;
border-bottom: 1px solid #b64926;
}
Advanced CSS Stephen Ireland
19. Step Four: Colour and Block
Style the link, display: block; converts the link into a clickable
block area.
CSS
#navigation ul li a:link, #navigation ul li a:visited {
display: block;
padding: 8px 12px;
text-decoration: none;
background-color: #8e2800;
color: #fff0ab;
}
Advanced CSS Stephen Ireland
20. Step Five: Hover State
Create a roll-over style for the navigation - by changing the
background colour of the link.
CSS
#navigation ul li a:hover {
background-color: #468966;
}
Advanced CSS Stephen Ireland
21. Your Vertical Nav Bar
But what if we want it
to display horizontally?
Advanced CSS Stephen Ireland
23. Horizontal Navigation
Float the list-items left, and change the border to right.
CSS
#navigation ul li {
list-style: none;
border-right: 1px solid #b64926;
float: left;
}
Advanced CSS Stephen Ireland
24. Completed
Your horizontal navigation
Advanced CSS Stephen Ireland