The document discusses CSS pseudo-elements and their power. It begins with an overview of pseudo-elements like ::before and ::after, which allow generating content that is not in the DOM. Various values for the "content" property are demonstrated, including strings, URLs, and counters. Examples show how pseudo-elements can be used to add styling effects, numbers, or captions without altering the HTML. The document encourages exploring advanced uses of pseudo-elements for layout adjustments, animations, and responsive designs.
Do you think that HTML is not enough to build a dynamic web application? after reading this presentation I think you will think twice :)
The combination of HTML5, CSS3 and Javascript made it possible, you can develop rich and dynamic web applications that leverages REST web services using JSON and XML, geolocation at your hands, browser friendly and responsive
Do you think that HTML is not enough to build a dynamic web application? after reading this presentation I think you will think twice :)
The combination of HTML5, CSS3 and Javascript made it possible, you can develop rich and dynamic web applications that leverages REST web services using JSON and XML, geolocation at your hands, browser friendly and responsive
Backbone.js helps structure you javascript application code in a scalable way.
In this keynote I demonstrate how to use it in a simple walk-through example, and discuss the advantages of using an MVC framework.
Ten useful JavaScript tips & best practicesAnkit Rastogi
In this presentation there are ten useful JavaScript techniques which can be included in your application easily with less friction along with some AngularJs tips and best practices as a bonus. These tips and best practices are accompanied by examples & will cover script loading, design pattern, performance optimization and other areas.
Since best practices are very subjective topics, proper benchmarking needs to be done.
Performance Optimization and JavaScript Best PracticesDoris Chen
Performance optimization and JavaScript best practices tips are discussed in the talk. Here are some of the tips:
Put stylesheets at the top (css)
Move scripts to the bottom (javascript)
Provide a clean separation of content, CSS, and JavaScript
De-reference unused objects
Think Asynchronous
Working with Objects
Defer Loading Resources
Use JSLint -- Code Quality Tool
Reduce the size of JavaScript file
gzip
General JavaScript Coding Best Practices
Use === Instead of ==
Eval = Bad
Don’t Use Short-Hand
Reduce Globals: Namespace
Don't Pass a String to "SetInterval" or "SetTimeOut"
Use {} Instead of New Object()
Use [] Instead of New Array()
Future proofing design work with Web componentsbtopro
Web components are a W3C standard that's been adopted by all major browsers as of October 2018. The Version 1 specification is a joy to work with and brings the web into a composing context from a raw materials one. That is, we can now directly repurpose and leverage our efforts to build bigger and better experiences (like modern home development practices) instead of constantly reinventing the wheel (like molding bricks out of clay to work on our house).
As of this writing, the ELMS:LN team (4 people) at Penn State has created 433 web components for generalized use. We've built an editor, a CMS, integrated those elements into Drupal (multiple versions), delivered static sites, worked on desktop apps, and done design work entirely, end to end, using web components and a uniform process for creating and deploying them.
Talk structure:
What are web components, can I use them, answering questions of libraries, polyfills, SEO, and accessibility
Examples of who has adopted them and what they doing with them
Community resources like polymer slack, webcomponents, and open-wc.org
Detailed examples of adoption in production, Drupal and non-Drupal environments, lessons learned and unthinkable wins
Our WCFactory tooling that automates much of the workflow of producing a sustainable element portfolio
How teams can leverage web components across projects
Where Drupal 6,7,8,9 fit into the future with web components
Where the future is going with HAXeditor and HAXcms, the future of micro-site generation and management
Our team is in love with web components and we think you will too! Join us and build better, more sustainable design systems of the future (today)!
Backbone.js helps structure you javascript application code in a scalable way.
In this keynote I demonstrate how to use it in a simple walk-through example, and discuss the advantages of using an MVC framework.
Ten useful JavaScript tips & best practicesAnkit Rastogi
In this presentation there are ten useful JavaScript techniques which can be included in your application easily with less friction along with some AngularJs tips and best practices as a bonus. These tips and best practices are accompanied by examples & will cover script loading, design pattern, performance optimization and other areas.
Since best practices are very subjective topics, proper benchmarking needs to be done.
Performance Optimization and JavaScript Best PracticesDoris Chen
Performance optimization and JavaScript best practices tips are discussed in the talk. Here are some of the tips:
Put stylesheets at the top (css)
Move scripts to the bottom (javascript)
Provide a clean separation of content, CSS, and JavaScript
De-reference unused objects
Think Asynchronous
Working with Objects
Defer Loading Resources
Use JSLint -- Code Quality Tool
Reduce the size of JavaScript file
gzip
General JavaScript Coding Best Practices
Use === Instead of ==
Eval = Bad
Don’t Use Short-Hand
Reduce Globals: Namespace
Don't Pass a String to "SetInterval" or "SetTimeOut"
Use {} Instead of New Object()
Use [] Instead of New Array()
Future proofing design work with Web componentsbtopro
Web components are a W3C standard that's been adopted by all major browsers as of October 2018. The Version 1 specification is a joy to work with and brings the web into a composing context from a raw materials one. That is, we can now directly repurpose and leverage our efforts to build bigger and better experiences (like modern home development practices) instead of constantly reinventing the wheel (like molding bricks out of clay to work on our house).
As of this writing, the ELMS:LN team (4 people) at Penn State has created 433 web components for generalized use. We've built an editor, a CMS, integrated those elements into Drupal (multiple versions), delivered static sites, worked on desktop apps, and done design work entirely, end to end, using web components and a uniform process for creating and deploying them.
Talk structure:
What are web components, can I use them, answering questions of libraries, polyfills, SEO, and accessibility
Examples of who has adopted them and what they doing with them
Community resources like polymer slack, webcomponents, and open-wc.org
Detailed examples of adoption in production, Drupal and non-Drupal environments, lessons learned and unthinkable wins
Our WCFactory tooling that automates much of the workflow of producing a sustainable element portfolio
How teams can leverage web components across projects
Where Drupal 6,7,8,9 fit into the future with web components
Where the future is going with HAXeditor and HAXcms, the future of micro-site generation and management
Our team is in love with web components and we think you will too! Join us and build better, more sustainable design systems of the future (today)!
Improperly architected applications may work, may perform well, and may meet the acceptance criteria, but the ability to maintain them degrades over time. This presentation will show some of the common mistakes made when building large web applications, how to be aware of them, correct them, and hopefully prevent them.
This is AEM development best practices. These practices do not cover standard like jsp, js & java development practices. This is an effort to consolidate our learning in CMS domain.
We continue checking Microsoft projects: analysis of PowerShellPVS-Studio
It has become a "good tradition" for Microsoft to make their products open-source: CoreFX, .Net Compiler Platform (Roslyn), Code Contracts, MSBuild, and other projects. For us, the developers of PVS-Studio analyzer, it's an opportunity to check well-known projects, tell people (including the project authors themselves) about the bugs we find, and additionally test our analyzer. Today we are going to talk about the errors found in another project by Microsoft, PowerShell.
Yeoman AngularJS and D3 - A solid stack for web appsclimboid
This was a course given in Bangalore India for JSChannel conf 2013. It encompases the use of angular js and d3 in a harmonious way and gives an overview over each of the frameworks / libraries.
Hierarchical Digital Twin of a Naval Power SystemKerry Sado
A hierarchical digital twin of a Naval DC power system has been developed and experimentally verified. Similar to other state-of-the-art digital twins, this technology creates a digital replica of the physical system executed in real-time or faster, which can modify hardware controls. However, its advantage stems from distributing computational efforts by utilizing a hierarchical structure composed of lower-level digital twin blocks and a higher-level system digital twin. Each digital twin block is associated with a physical subsystem of the hardware and communicates with a singular system digital twin, which creates a system-level response. By extracting information from each level of the hierarchy, power system controls of the hardware were reconfigured autonomously. This hierarchical digital twin development offers several advantages over other digital twins, particularly in the field of naval power systems. The hierarchical structure allows for greater computational efficiency and scalability while the ability to autonomously reconfigure hardware controls offers increased flexibility and responsiveness. The hierarchical decomposition and models utilized were well aligned with the physical twin, as indicated by the maximum deviations between the developed digital twin hierarchy and the hardware.
Sachpazis:Terzaghi Bearing Capacity Estimation in simple terms with Calculati...Dr.Costas Sachpazis
Terzaghi's soil bearing capacity theory, developed by Karl Terzaghi, is a fundamental principle in geotechnical engineering used to determine the bearing capacity of shallow foundations. This theory provides a method to calculate the ultimate bearing capacity of soil, which is the maximum load per unit area that the soil can support without undergoing shear failure. The Calculation HTML Code included.
Using recycled concrete aggregates (RCA) for pavements is crucial to achieving sustainability. Implementing RCA for new pavement can minimize carbon footprint, conserve natural resources, reduce harmful emissions, and lower life cycle costs. Compared to natural aggregate (NA), RCA pavement has fewer comprehensive studies and sustainability assessments.
HEAP SORT ILLUSTRATED WITH HEAPIFY, BUILD HEAP FOR DYNAMIC ARRAYS.
Heap sort is a comparison-based sorting technique based on Binary Heap data structure. It is similar to the selection sort where we first find the minimum element and place the minimum element at the beginning. Repeat the same process for the remaining elements.
Student information management system project report ii.pdfKamal Acharya
Our project explains about the student management. This project mainly explains the various actions related to student details. This project shows some ease in adding, editing and deleting the student details. It also provides a less time consuming process for viewing, adding, editing and deleting the marks of the students.
Cosmetic shop management system project report.pdfKamal Acharya
Buying new cosmetic products is difficult. It can even be scary for those who have sensitive skin and are prone to skin trouble. The information needed to alleviate this problem is on the back of each product, but it's thought to interpret those ingredient lists unless you have a background in chemistry.
Instead of buying and hoping for the best, we can use data science to help us predict which products may be good fits for us. It includes various function programs to do the above mentioned tasks.
Data file handling has been effectively used in the program.
The automated cosmetic shop management system should deal with the automation of general workflow and administration process of the shop. The main processes of the system focus on customer's request where the system is able to search the most appropriate products and deliver it to the customers. It should help the employees to quickly identify the list of cosmetic product that have reached the minimum quantity and also keep a track of expired date for each cosmetic product. It should help the employees to find the rack number in which the product is placed.It is also Faster and more efficient way.
Hybrid optimization of pumped hydro system and solar- Engr. Abdul-Azeez.pdffxintegritypublishin
Advancements in technology unveil a myriad of electrical and electronic breakthroughs geared towards efficiently harnessing limited resources to meet human energy demands. The optimization of hybrid solar PV panels and pumped hydro energy supply systems plays a pivotal role in utilizing natural resources effectively. This initiative not only benefits humanity but also fosters environmental sustainability. The study investigated the design optimization of these hybrid systems, focusing on understanding solar radiation patterns, identifying geographical influences on solar radiation, formulating a mathematical model for system optimization, and determining the optimal configuration of PV panels and pumped hydro storage. Through a comparative analysis approach and eight weeks of data collection, the study addressed key research questions related to solar radiation patterns and optimal system design. The findings highlighted regions with heightened solar radiation levels, showcasing substantial potential for power generation and emphasizing the system's efficiency. Optimizing system design significantly boosted power generation, promoted renewable energy utilization, and enhanced energy storage capacity. The study underscored the benefits of optimizing hybrid solar PV panels and pumped hydro energy supply systems for sustainable energy usage. Optimizing the design of solar PV panels and pumped hydro energy supply systems as examined across diverse climatic conditions in a developing country, not only enhances power generation but also improves the integration of renewable energy sources and boosts energy storage capacities, particularly beneficial for less economically prosperous regions. Additionally, the study provides valuable insights for advancing energy research in economically viable areas. Recommendations included conducting site-specific assessments, utilizing advanced modeling tools, implementing regular maintenance protocols, and enhancing communication among system components.
Welcome to WIPAC Monthly the magazine brought to you by the LinkedIn Group Water Industry Process Automation & Control.
In this month's edition, along with this month's industry news to celebrate the 13 years since the group was created we have articles including
A case study of the used of Advanced Process Control at the Wastewater Treatment works at Lleida in Spain
A look back on an article on smart wastewater networks in order to see how the industry has measured up in the interim around the adoption of Digital Transformation in the Water Industry.
Immunizing Image Classifiers Against Localized Adversary Attacksgerogepatton
This paper addresses the vulnerability of deep learning models, particularly convolutional neural networks
(CNN)s, to adversarial attacks and presents a proactive training technique designed to counter them. We
introduce a novel volumization algorithm, which transforms 2D images into 3D volumetric representations.
When combined with 3D convolution and deep curriculum learning optimization (CLO), itsignificantly improves
the immunity of models against localized universal attacks by up to 40%. We evaluate our proposed approach
using contemporary CNN architectures and the modified Canadian Institute for Advanced Research (CIFAR-10
and CIFAR-100) and ImageNet Large Scale Visual Recognition Challenge (ILSVRC12) datasets, showcasing
accuracy improvements over previous techniques. The results indicate that the combination of the volumetric
input and curriculum learning holds significant promise for mitigating adversarial attacks without necessitating
adversary training.
5. Pseudo-elements are often mistaken for
pseudo-classes.
A pseudo-element act like a new HTML
element in your code.
A pseudo-class helps you target precisely
one or several elements among others.
Pseudo-what?
9. “Power of pseudo-elements” — @geoffreycrofte Luxembourg JS 2020
I won’t talk about these one
::first-letter
::first-line
::selection
10. Part of the “Generated Content”
Ask to the User-Agent to generate a content
that is not already in the DOM.
“Tree-Abiding Pseudo Elements”,
they respect the existing DOM structure.
What’s define those
11. A content is generated before or after the
content of the target.
You can manipulate this content with
(almost) all the CSS you want.
One common example are the <ul> and <ol>
elements. They generating content, dash
and numbers.
Principle
13. Indeed, pseudo-elements exist since 2003, in
CR since 2011, CSS 2.1.
In the end, they are used very little.
When they are used, they are used
mechanically.
The basics of CSS are sometimes
misunderstood, and they are quickly
forgotten.
Yes, tell me why?
14.
15.
16. “Don’t forget that old CSS
still exists and is useful.
You don’t need to use something
fancy for every effect.”
— Rachel Andrew
Front-End Conference Zurich - 30, 31 Aug. 2018
21. In CSS2.1 the first syntax of the pseudo-
element was using colon mark (“ : ”)
If you don’t need to support IE8, use (“ : : ”),
it’s a good way to mark the difference
between pseudo-class using : and pseudo-
element using : :
Modern browers support both syntax.
Good to know
26. Before & after what?
::before
::after
Before and after the content of an element,
within the content-box, no matter how many
children in it.
27. In da content-box
<p>Voici mon super contenu</p>
p::before {
content: 'BEFORE';
}
p::after {
content: 'AFTER';
}
BEFORELorem ipsum dolor sitAFTER
28. Inspect the inspector
The content-box is in blue
The margin-box is in yellow
You can see the pseudo-elements generated
next to the content before and after it, to help
with debugging your CSS applied.
29. Be careful with replaced content
Pseudo-element doesn’t work with
replaced elements, listed here.
Moreover, <input>, dispite their
definition of non-replaced element
(widgets) doesn’t work with pseudo-
elements neither.
<img>
<iframe>
<video>
<embed>
<audio>
<option>
<canvas>
<object>
<applet>
(<input>)
Source MDN
30. “Power of pseudo-elements” — @geoffreycrofte Luxembourg JS 2020
Here are some values for content
none
normal
Reset
<string>
url()
attr(<attr-name>)
counter(<name>[, <style>])
Utilitaire
open-quote
close-quote
no-open-quote
no-close-quote
Citation
p::before {
content: <value>;
}
40. <div class="component">
[…floating stuff…]
<div class="clear"></div>
</div>
Clearfix
A ancestral-old-ninja-technique well know to
restore the natural flow within a document, to
clear floating elements.
We started by using an empty element like a
<div> then the technique has been revisited
to work with a simple class.
<div class="component clearfix">
[…floating stuff…]
</div>
41. Clearfix
This class add a pseudo-element that plays
exactly the same role of an empty <div>.
Why? Because like so, the CSS part stay into
your CSS code, no more empty <div> that
serves only a styling purpose.
<div class="component clearfix">
[…floating…]
::after
</div>
.clearfix::after {
content: '';
display: block;
clear: both;
}
42. Font-icon
The empty HTML element is used to create an
icon using font-icon and generated content.
Of course you could totally use the CSS class
by it self on another HTML element instead of
using an empty HTML element like <i>
<i class="fa fa-check"
role="presentation"></i>
44. Example of exercise
Re-create this shape within a white rectangle
using only the <div> element provide in the
file.
Remember to break down this form into
simpler shapes.
bit.ly/luxjs-exercises
46. Print visible links
For one of your project, you’ve been asked to
add a print function to some pages.
But when you print pages, links are not visible
or actionable anymore. (yeah obvious)
Use pseudo-element to display URL between
brackets.
50. File extension
One of the pages on your website displays a
list of files in different format.
Propose a CSS code to help distinguish the
multiple extensions.
54. Titles numbering
You are in a big document with a long text like
a thesis or something. You wanna bring
structure by numbering all the titles.
Use pseudo-element to add numbers before
the titles.
60. Nested links
You want to make the whole card clickable, but
also the author and category links actionable.
Use pseudo-element to solve this issue.
Pro tips: absolute & relative positions are your
best friends.
Go!
64. Tappable area
In the Design System I work on at Foyer, we
build components visually, but also
technically. To match recommendation in term
of ergonomy and accessibility, we make the
tappable area bigger using this same
technique.
Browser support is pretty good on android
and iOS.
65. Paper stack effect
A bit of fun with this stack effect.
This effect is used sometimes to represent a
pile of elements you gathered or you are drag
and dropping. For instance.
Recreate this effect with pseudo-element.
70. Burger icon
For the mobile version of your menu, you want
to create this fancy animated effect.
Know that you can do it with a single span
and pseudo-elements.
75. Custom Radio Buttons
Create custom radio buttons thanks to
pseudo-element. Make it funny or just bigger
for a better usability and accessibility.
You did always dream about it, right? 😛
81. Fractured Text Effect
Reproduce the fractured text effect with the
things you know now about pseudo-elements.
Inspired from an article by Mandy Michael.
91. Demo : Filtres photo
Des filtres CSS appliqués sur une photo
permettent de lui redonner un peu
de vibrance, contraste et couleurs.
Un effet de halo/lumière est donnée grâce
à un pseudo-élément.
http://bit.ly/filterCSS
99. Demo: Break the grid
On a project where the code was untouchable,
I was only allowed to use CSS, not even JS.
The grid system was in flexbox and the re-
design put the first item on the top of the row,
alone.
One pseudo-element, and done.
http://bit.ly/flexgridbreak
100. Demo : Casser la grille
http://bit.ly/flexgridbreak
order
-1
On a project where the code was untouchable,
I was only allowed to use CSS, not even JS.
The grid system was in flexbox and the re-
design put the first item on the top of the row,
alone.
One pseudo-element, and done.
101. Demo : Casser la grille
http://bit.ly/flexgridbreak
order
-1
::before
On a project where the code was untouchable,
I was only allowed to use CSS, not even JS.
The grid system was in flexbox and the re-
design put the first item on the top of the row,
alone.
One pseudo-element, and done.
102. Demo : Casser la grille
http://bit.ly/flexgridbreak
On a project where the code was untouchable,
I was only allowed to use CSS, not even JS.
The grid system was in flexbox and the re-
design put the first item on the top of the row,
alone.
One pseudo-element, and done.
103. Demo : Casser la grille
http://bit.ly/flexgridbreak
On a project where the code was untouchable,
I was only allowed to use CSS, not even JS.
The grid system was in flexbox and the re-
design put the first item on the top of the row,
alone.
One pseudo-element, and done.
104. You can use pseudo-elements to create
advanced drop-shadows.Demo
Advanced Shadows bit.ly/CSSshadows
105. You can animate the ouline of a button, and
you don’t even need SVG to do so.Demo
Snake Button bit.ly/snakebutton
106. Demo
Animated icon
An icon is oftentime simple geometric
elements. That’s really easy to animate.
bit.ly/scrollicon
108. Demo
Mobile Menu
For the same website, the same menu take a
different form on mobiles.
All the destroyed effect are made with skew
transformations and pseudo-elements.
bit.ly/slowmomenu
109. Demo
Lightbox CSS Only
Just for fun, I reproduce the Lightbox effect in
CSS with pseudo-element en CSS function
element().
bit.ly/lightboxCSSonly
110.
111. Demo
Fractured Text
Another demo by Mandy Michael of a fractured
text with the help of clip-path: polygon();
bit.ly/fracturedtext
114. Source : Styling Broken Images
* alt displayed only if image
dimensions allow it
* * font-styling property are
not applied
Compatibility: broken image
115. Fine tuning
You can revise your layout by
breaking things down. (grid
manipulation)
Shape things
They allow you to create visual
things with only CSS (no need for
empty divs)
Responsive
It’s CSS, so you can totally add
media-query conditions to your
pseudo-element styling.
Generated Content
Add custom content in the DOM
with no need to edit your HTML.
Advantage of using
pseudo-elements
116. Source : Can I use
Support: Pseudo-elements 98,24%
Global users
117. Source : Can I use
Support: CSS Transitions 97,11%
Global users
118. Source : Can I use
Support: Blend-mode ~91%
Global users
119. Source : Can I use
Support: CSS Filter Effects 95,38%
Global users
120. Source : Can I use
Support: Pointer Events 97.8%
Global users
121. Source : Can I use
Support: Clip-path() 93.69%
Global users
122. Source : Can I use
Support : CSS element() function 4,5%
Global users
124. target-counter()
Allows you to generate a
counter related to a targeted
element. The content here take
2 parameters: the href content
as target, and number of page
as template.
Other values for content
We talk about it page 23
125. target-text()
Same as previous example, but
here the content is generated
from the text within the
targeted element.
Other values for content
Nous en parlerons
au chapitre “Variables CSS”
DRAFT
126. leaders()
Allows you to create a pattern to
visually link content together. Here
with a dot pattern and in combination
with target-counter() function.
Other values for content
Chapitre 1 ………… page 3
Chapitre 2 ………… page 4
Chapitre 3 ………… page 12
DRAFT
127. content()
Allows you to generate a content
based on the content of the targeted
element, with some parameters
available: text, before, after,
first-letter, marker.
Other values for content
DRAFT
128. ::inactive-selection – a selected content that doesn’t get the focus anymore.
::spelling-error – a text marked with wrong spelling by the user-agent.
::grammar-error – a text marked with wrong grammar by the user-agent.
Highlight Pseudo-elements
::marker – the pseudo-element just before you list-item. (already supported by 20% of users)
::placeholder – the textual temporary content within a form field. (already supported by 95% of
users)
Tree-Abiding Pseudo-elements
Other (new) pseudo-elements?
129. “Power of pseudo-elements” — @geoffreycrofte Luxembourg JS 2020
CSS3 Content — W3C definition.
CSS3 Content — MDN definition and examples.
Replaced Elements – MDN definition.
A11y support for generated content.
Styling Broken Images
Mandy Michael – her Twitter account.
Rachel Andrew – her website.
Some resources