We'll get our feet wet with HTML and CSS and JS. Where these things came from, play with some things on codepen and learn about topics that surround the technologies prior to digging in.
Front End Best Practices: A Selection of Best Practices, Tips, Tricks & Good Advice For Today’s Front End Development. Practices mentioned in this presentation range from basic principles to more advanced tools and techniques. By Holger Bartel for WomenWhoCodeHK 23/07/2014
HTML5 and CSS3: does now really mean now?Chris Mills
Code at http://people.opera.com/cmills/css3book/css3-html5-dnrmn.zip. The browser vendors love them! The browser fans and cutting edge designers are producing some really remarkable stuff, but what do HTML5 and CSS3 really mean for you, the pragmatic designer on the street? If you sidle up to one of those guys and whisper "but what about IE6 support", they are likely to slap you in the face, or run away with their hands clamped over their ears, yelling "la lala lala, I can't hear you." In this talk, Chris Mills will have a look at some of the new features of HTML5 and CSS3 - new semantics, video, media queries, rounded corners, web fonts, drop shadows and more. He will show real world examples, and then look at how they actually perform on those shady older browsers we are often called on to support. He will then look at strategies for providing support for those older browsers, including using JavaScript, fallbacks, and progressive enhancement.
When dynamic becomes static - the next step in web caching techniquesWim Godden
Although tools like Varnish can improve performance and scalability for static sites, when user-specific content is needed, a hit to the PHP/Ruby/Python/.Net backend is still required, causing scalability issues. We’ll look at a brand-new Nginx module which implements an ultra-fast and scalable solution to this problem, changing the way developers think about designing sites with user-specific content.
Revamped talk that presented at WordCamp Miami 2020.
Keeping your website secure is important. No one likes a site that has nasty code injections or looks like it’s been hacked. In fact, WordPress Security is one of the issues that continually needs to be taught to WordPressers around the world because for some people, their website is their livelihood.
I’m not here to make your head pop off with mind boggling hardening tricks. I’m here to give you an introduction to WordPress Security. I might make you laugh, but security is a serious matter. I will be covering a couple methods to secure your WordPress website, and even a couple beginner tips on what to do if your site has been hacked.
By the end of this session, I hope you find a security method that suits you, and are more aware of the importance of securing your WordPress website.
Front End Best Practices: A Selection of Best Practices, Tips, Tricks & Good Advice For Today’s Front End Development. Practices mentioned in this presentation range from basic principles to more advanced tools and techniques. By Holger Bartel for WomenWhoCodeHK 23/07/2014
HTML5 and CSS3: does now really mean now?Chris Mills
Code at http://people.opera.com/cmills/css3book/css3-html5-dnrmn.zip. The browser vendors love them! The browser fans and cutting edge designers are producing some really remarkable stuff, but what do HTML5 and CSS3 really mean for you, the pragmatic designer on the street? If you sidle up to one of those guys and whisper "but what about IE6 support", they are likely to slap you in the face, or run away with their hands clamped over their ears, yelling "la lala lala, I can't hear you." In this talk, Chris Mills will have a look at some of the new features of HTML5 and CSS3 - new semantics, video, media queries, rounded corners, web fonts, drop shadows and more. He will show real world examples, and then look at how they actually perform on those shady older browsers we are often called on to support. He will then look at strategies for providing support for those older browsers, including using JavaScript, fallbacks, and progressive enhancement.
When dynamic becomes static - the next step in web caching techniquesWim Godden
Although tools like Varnish can improve performance and scalability for static sites, when user-specific content is needed, a hit to the PHP/Ruby/Python/.Net backend is still required, causing scalability issues. We’ll look at a brand-new Nginx module which implements an ultra-fast and scalable solution to this problem, changing the way developers think about designing sites with user-specific content.
Revamped talk that presented at WordCamp Miami 2020.
Keeping your website secure is important. No one likes a site that has nasty code injections or looks like it’s been hacked. In fact, WordPress Security is one of the issues that continually needs to be taught to WordPressers around the world because for some people, their website is their livelihood.
I’m not here to make your head pop off with mind boggling hardening tricks. I’m here to give you an introduction to WordPress Security. I might make you laugh, but security is a serious matter. I will be covering a couple methods to secure your WordPress website, and even a couple beginner tips on what to do if your site has been hacked.
By the end of this session, I hope you find a security method that suits you, and are more aware of the importance of securing your WordPress website.
This talk is anecdotal about the story of YouTube Feather, the woes of browser caching, the effects of HTML5 Unicorns, and the undying love for all things kitten videos.
Given at http://www.jseverywhere.org/ on October 25, 2013 in San Francisco by Matthew Keas.
http://mkeas.org
http://twitter.com/matthiasak
PrairieDevCon 2014 - Web Doesn't Mean Slowdmethvin
Web sites can be fast and responsive once you understand the process web browsers use to load and run web pages. We'll look at using tools like WebPageTest to analyze and optimize web pages.
According to HTTPArchive.org the average web page is now larger than the original DOOM installation application. Today's obese web is leading to decreased user satisfaction, customer engagement and increased cost of ownership. Research repeatedly tells us customers want faster user experiences. Search engines reward faster sites with better rankings. Small, fast sites are cheaper to develop, maintain and operate.
- Why has the web become obese?
- What actions can developers and stakeholders do to combat their morbid obesity?
- Are these actions expensive or hard to implement?
This session reviews what customers want and how to identify your web site's love handles. More importantly you will learn simple techniques to eliminate the fat and create a healthy, maintainable, affordable web development lifestyle that produces the user experiences your customers want to engage with over and over.
Introduction to Optimizing WordPress for Website SpeedNile Flores
Google loves a speedy website, and well… your visitors like a speedy website too. This is not the dial-up days. Your content, plugins you run, and your host can be factors in slowing down your website.
I’m going to show you how to speed up your WordPress website using WordPress plugins, some services, and a little code. I’m also going to share what tools I like used in order to optimize website speed so that you can also use them too.
(Updated version)
When dynamic becomes static : the next step in web caching techniquesWim Godden
Although tools like Varnish can improve performance and scalability for static sites, when user-specific content is needed, a hit to the PHP/Ruby/Python/.Net backend is still required, causing scalability issues. We’ll look at a brand-new Nginx module which implements an ultra-fast and scalable solution to this problem, changing the way developers think about designing sites with user-specific content.
This talk is anecdotal about the story of YouTube Feather, the woes of browser caching, the effects of HTML5 Unicorns, and the undying love for all things kitten videos.
Given at http://www.jseverywhere.org/ on October 25, 2013 in San Francisco by Matthew Keas.
http://mkeas.org
http://twitter.com/matthiasak
PrairieDevCon 2014 - Web Doesn't Mean Slowdmethvin
Web sites can be fast and responsive once you understand the process web browsers use to load and run web pages. We'll look at using tools like WebPageTest to analyze and optimize web pages.
According to HTTPArchive.org the average web page is now larger than the original DOOM installation application. Today's obese web is leading to decreased user satisfaction, customer engagement and increased cost of ownership. Research repeatedly tells us customers want faster user experiences. Search engines reward faster sites with better rankings. Small, fast sites are cheaper to develop, maintain and operate.
- Why has the web become obese?
- What actions can developers and stakeholders do to combat their morbid obesity?
- Are these actions expensive or hard to implement?
This session reviews what customers want and how to identify your web site's love handles. More importantly you will learn simple techniques to eliminate the fat and create a healthy, maintainable, affordable web development lifestyle that produces the user experiences your customers want to engage with over and over.
Introduction to Optimizing WordPress for Website SpeedNile Flores
Google loves a speedy website, and well… your visitors like a speedy website too. This is not the dial-up days. Your content, plugins you run, and your host can be factors in slowing down your website.
I’m going to show you how to speed up your WordPress website using WordPress plugins, some services, and a little code. I’m also going to share what tools I like used in order to optimize website speed so that you can also use them too.
(Updated version)
When dynamic becomes static : the next step in web caching techniquesWim Godden
Although tools like Varnish can improve performance and scalability for static sites, when user-specific content is needed, a hit to the PHP/Ruby/Python/.Net backend is still required, causing scalability issues. We’ll look at a brand-new Nginx module which implements an ultra-fast and scalable solution to this problem, changing the way developers think about designing sites with user-specific content.
Video at http://www.youtube.com/watch?v=HaJnhYPLvx0
Large Drupal projects will generally have a themer or five working alongside the developers, site builders and designers. Themers are the magicians who transform what Drupal wants to do into what the designer wants it to do.
Smaller projects also usually need someone on the team who can make sense of Drupal's output, knows more CSS and JS than anyone else and can configure Views with their eyes closed.
The thing is — and whisper this, if possible redundancy concerns you — we can bypass the themer entirely.
With some simple configuration, a site builder can get Drupal to output exactly the semantic, lightweight markup that any modern front-end designer would be proud of. The designer can be left alone to write the most appropriate HTML, CSS and JS, while the site builder need only choose a couple of options when putting together content types, views and panels to make Drupal behave.
A friendly developer may have to lend a hand every now and then, but that’s it. You can get rid of the themer altogether.
http://2013.drupalcamplondon.co.uk/session/death-themer
Brief explanation of how browsers make sense of and render our mess.
The path to the first paint - why it is important and how to get there faster.
Rendering performance - how not to shoot yourself in the foot.
Drupal - the current situation
Presentation on using CSS Frameworks (particularly BlueprintCSS) at the Scottish Web Folk meeting, Friday 17 April 2009 at the University of Strathclyde, Glasgow.
The presentation of the Drupal frontend optimizations from Drupal Camp LA 2011. The slides go over optimizations you do in the backend to serve files in the frontend faster and optimizations in the front end to css and javascript to make that aspect run faster.
Building Performance - ein Frontend-Build-Prozess für Java mit MavenOliver Ochs
Jan Weinschenker und Oliver Ochs (Holisticon AG)
In diesem Vortrag geht es um eine konkrete Website. Im ersten Teil des Vortrags stellen wir die wichtigsten Optimierungsmaßnahmen vor, die außerhalb eines Builds durchgeführt wurden. Für eine dauerhafte, nachhaltige Performance-Optimierung müssen die Maßnahmen automatisiert bzw. in den Build-Prozess integriert werden. Im zweiten Teil des Vortrags zeigen wir einen beispielhaften Build-Prozess für Java-Webanwendungen, der Teile der Optimierungsmaßnahmen durchführt. Andere Teile müssen durch eine geeignete Architektur sichergestellt werden, wofür wir ebenfalls Ideen liefern.
Bootstrap 3 Basic talk from Bangkok WordPress Meetup at Hubba.
Blog Post: http://www.designil.com/slide-bootstrap-basic-3-grid.html
Speaker: Woratana Ngarmtrakulchol, Front-end Developer at Midnize Studio, Founder at Designil.com
More and more often we talks about optimizing the server-side software, but the
true optimization must be done on the client where 80% of the time is spent
by users. The talk explains the main techniques to optimize
Web site using HTTP protocols and rules to the base but rarely
used.
State of the Network is a window into the accomplishments and mindset shift of the ELMS:LN community over the last year. It highlights shipping ELMS:LN 1.0.0 as well as HAXcms 1.0.0, integration with vendor Reclaim Hosting, webcomponents and HAX plugins that work in Drupal, WordPress and beyond. I set forward what we've done and where we're going and why. This was recorded and will appear on the Apereo YouTube channel https://www.youtube.com/user/apereo/videos
Container deployment technology is revolutionizing businesses and the way of scaling... anything. We'll look at FaaS, Docker and other virtualization technology and play with a bunch of it on https://labs.play-with-docker.com/
We'll talk about Accessibility and Performance as it relates to equal access to technology. We'll have a guest speaker and we'll get hands on with WAVE and Lighthouse tools to perform audits of websites we've already created in class.
All about HAX and HAX the web as lead up to doing some basic UX auditing as a lab to improve HAX but also teach us about the notion of users self expressing and identifying UX issues
Drupal, the biggest, most complex and most flexible CMS that powers a small percent of the over all internet yet hits a lot of the more popular sites in government, entertainment and education.
Covering the ClassicPress and it's fork, WordPress. This gets into Gutenbug and the havok its created as well as how the ClassicPress platform empowers people to deliver their own websites without needing to understand complex technical details.
https://www.youtube.com/watch?v=f_tEA9O9pco
A statement of purpose both mine, our teams, and web components. A mix of serious, silly, crazy, and fun. This highlights amazing things going on in the HAX, HAXcms and web components community at large. In it I lay out the case for web components as the foundational piece needed to be the change agent to take web publishing and self expression to the next level.
This is a new beginning. This is the bridge building community. This is HAX'ing complacency in web technologies. This is HAX. And together, we are HAX camp.
The case for web components as well as what they are and why they will forever transform the web as well as package managers and a little bit about headless web development.
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)!
The case for Web components - Drupal4Gov webinarbtopro
This is the presentation I gave to the Drupal4Gov community on web components in government. Why the time is right to begin looking at them for future adoption, how to get more information, what they've done for our team and process, who's using them, etc. It's a great starting point to browse through and get a sense of who's using them and what the implications are.
Project EdTechJoker, laid out in slides. A demo was given as prt of this presentation being delivered at Domains 2019.
I need you to turn up the temperature on the edtech market through the adoption of the webcomponent standard. Together, we can eliminate corrupt vendors from our space and unleash creativity with higher accessibility and user experience then they can.
Palestine last event orientationfvgnh .pptxRaedMohamed3
An EFL lesson about the current events in Palestine. It is intended to be for intermediate students who wish to increase their listening skills through a short lesson in power point.
Synthetic Fiber Construction in lab .pptxPavel ( NSTU)
Synthetic fiber production is a fascinating and complex field that blends chemistry, engineering, and environmental science. By understanding these aspects, students can gain a comprehensive view of synthetic fiber production, its impact on society and the environment, and the potential for future innovations. Synthetic fibers play a crucial role in modern society, impacting various aspects of daily life, industry, and the environment. ynthetic fibers are integral to modern life, offering a range of benefits from cost-effectiveness and versatility to innovative applications and performance characteristics. While they pose environmental challenges, ongoing research and development aim to create more sustainable and eco-friendly alternatives. Understanding the importance of synthetic fibers helps in appreciating their role in the economy, industry, and daily life, while also emphasizing the need for sustainable practices and innovation.
Model Attribute Check Company Auto PropertyCeline George
In Odoo, the multi-company feature allows you to manage multiple companies within a single Odoo database instance. Each company can have its own configurations while still sharing common resources such as products, customers, and suppliers.
Instructions for Submissions thorugh G- Classroom.pptxJheel Barad
This presentation provides a briefing on how to upload submissions and documents in Google Classroom. It was prepared as part of an orientation for new Sainik School in-service teacher trainees. As a training officer, my goal is to ensure that you are comfortable and proficient with this essential tool for managing assignments and fostering student engagement.
Read| The latest issue of The Challenger is here! We are thrilled to announce that our school paper has qualified for the NATIONAL SCHOOLS PRESS CONFERENCE (NSPC) 2024. Thank you for your unwavering support and trust. Dive into the stories that made us stand out!
Operation “Blue Star” is the only event in the history of Independent India where the state went into war with its own people. Even after about 40 years it is not clear if it was culmination of states anger over people of the region, a political game of power or start of dictatorial chapter in the democratic setup.
The people of Punjab felt alienated from main stream due to denial of their just demands during a long democratic struggle since independence. As it happen all over the word, it led to militant struggle with great loss of lives of military, police and civilian personnel. Killing of Indira Gandhi and massacre of innocent Sikhs in Delhi and other India cities was also associated with this movement.
A Strategic Approach: GenAI in EducationPeter Windle
Artificial Intelligence (AI) technologies such as Generative AI, Image Generators and Large Language Models have had a dramatic impact on teaching, learning and assessment over the past 18 months. The most immediate threat AI posed was to Academic Integrity with Higher Education Institutes (HEIs) focusing their efforts on combating the use of GenAI in assessment. Guidelines were developed for staff and students, policies put in place too. Innovative educators have forged paths in the use of Generative AI for teaching, learning and assessments leading to pockets of transformation springing up across HEIs, often with little or no top-down guidance, support or direction.
This Gasta posits a strategic approach to integrating AI into HEIs to prepare staff, students and the curriculum for an evolving world and workplace. We will highlight the advantages of working with these technologies beyond the realm of teaching, learning and assessment by considering prompt engineering skills, industry impact, curriculum changes, and the need for staff upskilling. In contrast, not engaging strategically with Generative AI poses risks, including falling behind peers, missed opportunities and failing to ensure our graduates remain employable. The rapid evolution of AI technologies necessitates a proactive and strategic approach if we are to remain relevant.
Macroeconomics- Movie Location
This will be used as part of your Personal Professional Portfolio once graded.
Objective:
Prepare a presentation or a paper using research, basic comparative analysis, data organization and application of economic information. You will make an informed assessment of an economic climate outside of the United States to accomplish an entertainment industry objective.
Acetabularia Information For Class 9 .docxvaibhavrinwa19
Acetabularia acetabulum is a single-celled green alga that in its vegetative state is morphologically differentiated into a basal rhizoid and an axially elongated stalk, which bears whorls of branching hairs. The single diploid nucleus resides in the rhizoid.
Introduction to AI for Nonprofits with Tapp NetworkTechSoup
Dive into the world of AI! Experts Jon Hill and Tareq Monaur will guide you through AI's role in enhancing nonprofit websites and basic marketing strategies, making it easy to understand and apply.
TESDA TM1 REVIEWER FOR NATIONAL ASSESSMENT WRITTEN AND ORAL QUESTIONS WITH A...
HTML / CSS / JS Web basics
1. HTML / CSS / Javascript
The web
HTML
Codepen.io
Bryan Ollendyke
[at]btopro
Developer Activist
2.
3. Today’s Topic / What you'll learn about
- basics of HTML, CSS, JavaScript
- Where all this came from
- How to use the Inspector to modify web
pages
- Security implications of JavaScript and
past exploits that brought down github
- Writing some basics and modifying
existing HTML
- Forking and modifying a basic resume on
codepen.io
HTML
CSS
JS
4. Terms / definitions for today
- HTML – Hyper Text Markup Language
- CSS – Cascading Style Sheets
- JS – JavaScript
- DOM – Document Object Model
- IDE - Integrated development environment
- W3C – World Wide Web Consortium
- WHATWG - Web Hypertext Application
Technology Working Group
- DOS – Denial of Service
- DDOS – Distributed Denial of Service
- HTTP - hypertext transfer protocol
HTML
CSS
JS
5. Who’s using these
- HTML / CSS, every webpage on the internet
- JS... Damn near everyone unless disabled
on purpose
HTML
CSS
JS
7. Are there differences between browsers?
- Sadly, yes.
- Used to be dramatic differences in CSS
and JavaScript processing capabilities
- W3C founded to establish and help people
implement standards in a uniform way
- Web Hypertext Application Technology
Working Group (2004) founded by browser
vendors to push HTML further than the
W3C was able to do at that time (HTML5)
- 2019 – these orgs have committed to
merging efforts!
HTML
CSS
JS
18. CSS Design frameworks
- Bootstrap – open sourced by twitter
- https://getbootstrap.com/
- describes their visual language for
presenting interfaces
- Many (too many) have adopted it as a
replacement for design variability
- Canvas is built on this for example
- Clean defaults + basic javascript
elements
HTML
CSS
JS
19.
20. CSS Abstraction
- SASS - Sass is the most mature, stable,
and powerful professional grade CSS
extension language in the world.
- https://sass-lang.com/
- personal note: I’m not a huge fan of
languages that MUST be preprocessed
in order to work. I’d recommend learning
css long before SASS
however, there are many who make a living
just doing this so it’s legit.
HTML
CSS
JS
21. The “Script” part in JavaScript is
- What immediately complicates the web
- Leads to heavy abstractions and people
leveraging libraries in order to write
less code but do more
- jQuery != JavaScript
(though extremely popular)
- $ is a dead give away of jQuery
- Popular with those getting started
- https://jquery-tutorial.net/introduction/hello-world/
HTML
CSS
JS
22. What JavaScript screws up makes possible
- JavaScript allows for applying scripting
and interactivity to the HTML structure
to dynamically modify the DOM / HTML
HTML
CSS
JS
24. JavaScript CDNs are popular
- Javascript loaded via a “CDN”
content delivery network
Security
Time
25. JavaScript CDNs are popular
- Javascript loaded via a “CDN”
content delivery network
Security
Time
26. JavaScript CDNs are popular an attack vector
- Javascript loaded via a “CDN”
content delivery network
- Web pages are as secure as the JavaScript
loaded into them.
- XSS – Cross Site Script Attacks are
legit things to worry about and often
not terribly complicated to execute
Security
Time
27.
28.
29. CDNs are amazing though, don’t mistake
- CDNs must be from trusted source
- All modern businesses leverage CDNs
- CDNs serve content faster then traditional
server methods
- Faster content === more business
- We’ll talk more about CDNs in the future
- https://www.youtube.com/watch?time_continue=8&v=QCEid2WCszM
Security
Time
33. Useful links / learning more
- https://www.quackit.com/html/tutorial/
- Google HTML or CSS cheat sheet
- Learn HTML in 12 Minutes
https://www.youtube.com/watch?v=bWPMSSsVdPk
- search https://codepen.io/ for tutorial
- https://caniuse.com – Spec search
- Mozilla JavaScript basics
https://developer.mozilla.org/en-
US/docs/Learn/Getting_started_with_the_web/JavaScript_basics
HTML
CSS
JS
34. What we’ll do now
- Mess with Inspector to modify psu.edu
- Play with and explore CodePen.io
- Fork a pen of mine that we’ll step
through together
- Ask questions, this is just a foot
in the door to this topic and we’ll
be exploring other technologies and
related platforms as the semester
progresses
HTML
CSS
JS
35. Lab
- Start modifying a pen to reverse engineer
a resume boilerplate
- Fork Reflection Pen
- write your reflection post there
- add a link to your video response there
Reflection topic (pick at least one)
- Explaining styling an element in CSS
- Explain how to use JavaScript and
getElementById to add a click event to
an element in an existing codepen
- Value of CodePen as a platform
CodePen.io
36. Quick break and then..
CodePen
Editing and understanding
code pen
HTML
CodePen.io
Bryan Ollendyke
[at]btopro
Editor's Notes
Icon created by Creative Stall from the Noun Project
Icon created by Creative Stall from the Noun Project
Icon created by Creative Stall from the Noun Project
Icon created by Creative Stall from the Noun Project
Icon created by Creative Stall from the Noun Project
Icon created by Creative Stall from the Noun Project
Icon created by Creative Stall from the Noun Project
Icon created by Creative Stall from the Noun Project
Icon created by Creative Stall from the Noun Project