The cascade is a poker game, but we've been playing our cards all wrong. Here Nicole suggests we stop trying to play to win to prevent code bloat, and simplify the cascade, using the order of the rulesets to allow overrides.
The document discusses CSS Grid Layout as a new method for controlling page layout with CSS. It provides examples of using Grid Layout properties like grid-template-columns, grid-template-rows, and grid-column to define a grid structure and position elements within that grid. Key benefits highlighted include describing the layout solely in CSS, ability to redefine the layout at different breakpoints, and eliminating the need for layout hacks or non-semantic markup used by older methods.
Rapid and Responsive - UX to Prototype with BootstrapJosh Jeffryes
The document discusses how to rapidly prototype user interfaces using Bootstrap, a popular front-end framework. It outlines the benefits of prototyping with Bootstrap over traditional wireframing or jumping straight to development. Prototyping with Bootstrap allows building interactive prototypes quickly in hours using responsive design principles. The prototypes can then be used as the basis for the final site design rather than being discarded. The document introduces key concepts like responsive design, prototyping, and frameworks. It also provides an overview of features in Bootstrap like grids, components, and how they can be combined for prototyping.
The document provides information on HTML and XHTML. It begins with an overview of how web pages are requested and delivered from web servers to browsers. It then covers the basics of HTML, including that it is a markup language used to structure and present content on the web. It also discusses the different versions of HTML and XHTML including features of each.
The document discusses the differences between ePub 2 and ePub 3 formats. ePub 3 includes new features such as support for HTML5, CSS3, SVG, audio and video, JavaScript, and alternative navigation documents. It also describes layout types in ePub including reflowable and fixed layout. Fixed layout does not reflow content to fit different screens and may require metadata for proper display on devices.
You've got a sneaking suspicion that design impacts performance. What next? Your engineers know nothing about design and your designers know nothing about performance. How can you get everyone on the same page? Which design flaws must you absolutely avoid? How do engineers slow designs with poor CSS? This presentation covers the best practices in design and OO CSS for fast, maintainable sites.
* Abstraction
* Flexibility
* Grids
* Location dependent styles
Velocity Conference, 2009
The document discusses various topics related to web development including XHTML, CSS, and JavaScript. It provides definitions and explanations of XHTML, CSS, JavaScript, and the differences between HTML and XHTML. It also covers common issues with supporting older browsers like IE6 and strategies for overcoming those issues such as using frameworks to simplify tasks like DOM manipulation and event handling.
From Nicole's presentation at the CSS Summit. This is brand new research regarding efficient CSS selector design. Practicing the rules outlined here will make your CSS lean, your site fast, and your maintenance minimal. A beautiful combination for people concerned with building performance into their sites.
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.
Sooner or later we all have to work with HTML, despite its verbosity. Those of us who claim to love HTML may just be victims of Stockholm Syndrome, both praising yet secretly loathing it.
Basho designer John Newman is making the trek from the swamps of Florida to show us the way. In the modern world of markup preprocessors, these alternative syntaxes allow you to write simpler, cleaner, more concise code in a shorter amount of time. Certain techniques can even allow your team members who may be less-tech-savvy to contribute content directly without forcing you to wire up a WYSIWYG style CMS.
This talk explores great alternatives to plain HTML and CSS, and covers how Basho put these tools together to facilitate a painless, team-oriented approach to building sites and web apps.
html & css powerpoint slide show for presentation. Here, basic concept of css using with html. a webpage decorated by css.
HTML- Hyper text markup language.
CSS- Cascading Style sheet.
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.
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.
This document discusses the CSS preprocessor LESS and its features. LESS allows for nested rules, mixins, variables, imports and operators to make CSS more maintainable. It can be run from Node.js or a browser and compiles LESS files into normal CSS. Key features include mixins for common CSS patterns, variables for consistency, nesting for organization and imports to modularize code. LESS aims to make CSS leaner, meaner and more dynamic through its preprocessing abilities.
This document provides instructions for creating a basic template in Joomla. It discusses the file structure of a basic Joomla template which includes folders for CSS, images, and template files. It then outlines 4 steps to create a template: designing the layout, adding HTML markup, writing CSS code, and "Joomlafying" the code to integrate Joomla functions. The goal is to provide a basic understanding of what is required to build a functional Joomla template.
You've been tasked with developing a new front end feature. HTML, CSS, and JavaScript are nothing new to you, in fact you even know a few tricks to get this feature out the door. It doesn't take you long and the code works like a charm, yet you have a looming suspicion that some of the code might not be up to par. You're likely right, and you're definitely better than that.
We often write code without paying attention to the bigger picture, or overall code base. Upon stepping back we notice areas of duplicate code, ripe for refactoring. It's time to build more modular front ends, focusing on the reusability of HTML, CSS, and JavaScript, and to take maintainability to heart.
This document summarizes upcoming CSS features like Box Alignment Level 3, CSS Grid Layout, CSS Shapes, CSS Feature Queries, and CSS Custom Properties. It explains what each feature does at a high level and provides example code snippets. The document also encourages developers to get involved by filing issues on browser bug trackers, requesting new features, and creating blog posts/demos to help drive adoption of these new CSS specifications.
This document provides guidelines for writing CSS code, including:
1. Separating presentation from content using CSS and validating markup and CSS.
2. Organizing CSS files by specific sections (e.g. typography.css, grid.css) and using a master CSS file to import other files.
3. Avoiding inline styles and CSS hacks, using semantic markup, and making sites accessible to all users.
Front-end methodologies discusses common solutions like SMACSS and ITCSS for organizing CSS code into reusable, maintainable components. It also covers approaches like OOCSS, BEM, and CSS Modules. CSS Modules in particular scopes class names to prevent collisions and makes extending classes problematic.
The document provides an overview of CSS (Cascading Style Sheets) methodology. It defines CSS as the language used for implementing designs on HTML documents. It then covers CSS basics including selectors, properties, conflicts resolution using specificity and cascade order. It also discusses the box model which defines how browsers handle rectangular boxes for elements. Finally, it offers some best practices tips such as resetting styles, separating content from design, and planning layout during HTML coding.
Creating Living Style Guides to Improve PerformanceNicole Sullivan
Refactoring Trulia’s UI with SASS, OOCSS, and handlebars. My slides from jsconf 2013. Lot's of yummy details about the performance improvements we were able to make.
How do you scale CSS for millions of visitors or thousands of pages? The slides from Nicole's presentation at Web Directions North in Denver will show you how to use Object Oriented CSS to write fast, maintainable, standards-based front end code. Adds much needed predictability to CSS so that even beginners can participate in writing beautiful, standards-compliant, fast websites.
OOCSS (Object Oriented CSS) is a methodology for writing scalable and reusable CSS code. It involves separating CSS into modular blocks or "lego blocks" that can be mixed and matched to build pages. This avoids CSS bloat and makes the code more flexible and maintainable. Key principles include separating container styles from content, using classes instead of element names, making elements extensible with grids, and building pages from the available CSS components.
OOCSS in the Real World: A Case Study from the CBCJamie Strachan
This session is a look at the process we went through at the CBC to overhaul our site’s front-end and bring in OOCSS practices. I discuss what OOCSS is and the benefits it offers. You’ll learn about the biggest challenges we faced and how we overcame them (or at least hacked our way through) and you’ll come away with practical ideas about how to embark on your own OOCSS adventure.
Originally presented at FITC Screens 2013.
OOCSS in the Real World: A Case Study from the CBC - RevisitedJamie Strachan
CBC.ca is one of the biggest and most popular sites in Canada and our team was tasked with overhauling the front-end to improve our site speed and development process.
I'll share the process we went through and highlight the benefits and challenges of moving to OOCSS so you'll be better prepared to do the same.
From this session, you'll learn:
- the key advantages of OOCSS as well as its drawbacks
- how to rebuild an existing site using OOCSS
- how a CSS preprocessor can work with OOCSS
- what has happened in the 12 months since we launched
Originally presented at CSS Dev Conf 2014.
Nicole Sullivanが提唱しているOOCSSを日本語で解説したスライドです。Webridge Meeting #2( http://webridge-kagawa.com/ )でお話しました。
Nicole Sullivan has been proposed in Japanese describing OOCSS slide. I talked Webridge Meeting # 2.
From Nicole's talk at JSConf.eu where she presented her wish list for the future of CSS. She presents a brand-new expanded syntax which allows for prototypes, mixins, and variables and explains how a preprocessor can be used today to achieve a richer language in older browsers.
Object Oriented CSS - Joomla!dagen Nederland 2014Babs Gösgens
Presentatie on OOCSS for the Joomla!dagen Nederland 2014.
OOCSS borrows concepts from software architecture. By structuring your CSS and abstracting parts for re-use the resulting code is leaner, more scalable and much more maintainable. It introduces a few methods for modular CSS ands shows how you can use some of SASS's new features to implement BEM.
Tech Headline - CSS Naming Conventions: Improve your code with OOCSS, SMACSS,...Rodrigo Castilho
In this presentation you will see why the conventions (OOCSS, SMACSS, DRY and BEM) are important for your business, how you can to improve the performance, maintainability and solving problems/issues quickly for produce better web sites.
CSS are changing over time and today with several devices and responsive web design you need to have in your mind the best practices for create your CSS.
Obviously that we need to use a preprocessor (LESS, SASS, Stylus) because with the preprocessor you can to use variables, mixins, nested rules, inheritance, operations, extended and much more that will ease your life.
Naming Convention is very important in any language because clarifies intent.
SITE 2009 - PowerPoint Games in a Secondary Laptop EnvironmentMichael Barbour
Barbour, M. K., Kinsella, J., & Toker, S. (2009, March). PowerPoint games in a secondary laptop environment. Paper presented at the annual conference of the Society for Information Technology and Teacher Education, Charleston, SC.
There is no denying the success and popularity of WebQuests among teachers. For those interested in technology integration, this is a significant step in the right direction. Yet, WebQuests are instructivist examples of technology integration – they are web-enhanced forms of direct instruction. We consider constructing homemade PowerPoint games as a constructionist alternative to WebQuests. PowerPoint is nearly ubiquitous software and teachers already use existing games in their classrooms. The authors contend that a better use of class time for learning is to turn over the act of game design to the children themselves. In this project, students in social studies course delivered by a mid-western high school designed PowerPoint Games as a means to review for portions of two examinations.
This document lists 11 questions to ask yourself before advertising to ensure the ad is targeted, aligned with marketing goals and brand, and will provide measurable results. It prompts assessing if the ad clearly explains value to the target market, supports marketing plan goals, and how results will be tracked. It also suggests the ad should be consistent with other marketing and be placed where the target market will see it. Finally, it recommends the website 99DollarMarketingPlans if unsure about targeting, benefits, or unique selling proposition.
Educational technology refers to how people use inventions and discoveries to satisfy educational needs and desires. It is a complex, integrated process involving people, procedures, ideas, devices, and organizations to analyze and solve problems in human learning. Educational technology consists of designs and environments that engage learners through reliable techniques like cognitive learning strategies and critical thinking skills. It is both a field of study and a profession applying theory and practical applications to identify and address issues in learning.
The document summarizes the various digital tools and technologies used to create a magazine project, including a Samsung digital camera to take photos, Picnik to edit photos by changing lighting and adding frames, a laptop and memory stick to work on and save the project, PowerPoint and Slideshare to upload work online, Prezi for presentations, Fireworks to design the magazine, the Dafont website to find fonts, and Flikr and Blogger to store and publish photos and final work online. The document discusses how each tool helped with creating, editing, organizing and sharing different aspects of the magazine project.
The document provides guidelines for personal safety when working with computers. It advises listening to teacher instructions to prevent accidents, not working on computers when wet to avoid electrocution, and not removing internal devices when the computer is turned on. It also recommends avoiding playing or running in the room, wearing protective equipment like coveralls and anti-static wrist straps, asking teachers for assistance when dealing with computer devices, and applying safety measures when handling tools to prevent damages.
Why should I care about information literacy? nmjb
This document summarizes a workshop on improving researchers' competency in information handling and data management. The workshop covered how information literacy relates to researcher development, defined information literacy using the 7 Pillars model, and discussed national initiatives and case studies in applying information literacy. Participants engaged in group work applying information literacy concepts to the Researcher Development Framework and discussed motivation and examples of good practice in supporting information literacy development.
The document defines basic electrical terms like electricity, electrons, protons, current, voltage, resistance, conductors, and insulators. It explains that electricity is the flow of electrons and can be transformed into other forms of energy. It defines current as the flow of electrons and voltage as the pulling force making electrons flow. Resistance opposes current flow while conductors allow current flow and insulators do not. The document also discusses the differences between direct and alternating current and defines the components of an electrical circuit including the load, supply, and switch.
Your website has out-of-control CSS bloat. You know your performance is being impacted, but how do you move from organic CSS with no particular architecture to something lighter, more logical, and easier to maintain? In this session, Nicole Sullivan and Stoyan Stefanov will show you how they improved the CSS at Facebook and Yahoo! Search. After this session you will know how to:
1. Use lint tools to automate and evaluate the efficiency of your CSS
2. Avoid the top 5 causes of CSS bloat, and
3. Speed up your site by making the UI code an order of magnitude smaller.
The document contains various times written in words including different ways to express times in relation to the hour or half hour such as "a quarter past", "ten past", "twenty to", and "five to". These times are repeated in groups of three throughout the document with no other context provided.
This document discusses object-oriented CSS (OOCSS) as an evolution of CSS that makes it more powerful. OOCSS involves creating reusable CSS objects rather than page-specific rules, setting good global defaults, abstracting reusable elements, separating container and content, and using multiple classes to simulate inheritance. This allows for more scalable, maintainable and performant CSS code. Some best practices of OOCSS include creating semantic object classes like .heading rather than styling specific elements directly. The document provides examples of OOCSS principles and their benefits.
Display Suite is a Drupal module that allows users to take full control over how content is displayed using a drag and drop interface without having to work with template files. It provides predefined layouts and allows users to create custom layouts and view modes. Display Suite also features code fields to add custom variables and styles to control field formatting. The module is actively maintained and widely used with thousands of active sites.
Scalable CSS You and Your Back-End Coders Can Love - @CSSConf Asia 2014Christian Lilley
This document discusses strategies for making CSS more scalable and maintainable. It recommends automating CSS with preprocessors, using clear and descriptive class names, avoiding descendant selectors when possible, and minimizing unnecessary nesting and complexity. Pseudoselectors should only be used when other options aren't available. Overall, the document emphasizes writing CSS according to first principles of maintainability, predictability and avoiding premature optimization.
Drupal's theming layer is a powerful and beautiful beast, but it requires a firm hand to really behave. New themers often start out trying to control it with a light touch and gentle strokes of CSS. Only too late do they realize their error…
All too often the result of this misguided approach is bloated and inefficient CSS and JavaScript and site out of control. By the time the themer realizes what the beast have done, it might be too late to fix.
Don't let Contrib bully you around. Grab the reins, create a frontend architecture and teach the theming layer to produce lean, extendable, high performance markup and CSS that is easy and cost-efficient to maintain.
This session is about learning to take charge.
The document discusses the future of CSS layout mechanisms. It describes several proposed CSS modules for layout, including Grid Positioning, Flexible Box, and Template Layout. Each provides advantages for creating explicit grids and separating presentation from structure. The document highlights how these new layout capabilities could improve web design and development by establishing CSS as the framework. It concludes by encouraging learning more and getting involved in the ongoing CSS layout standards work.
This document discusses using CSS preprocessors like LESS, Sass, and Stylus to build mobile web apps. It covers getting started with Sass and Compass, using variables, operations, nesting, mixins, and other Sass features. It also discusses object-oriented CSS techniques like separating structure and skin, and container and content. The goal is to speed up front-end workflows and make CSS reusable, modular, and scalable.
Little documentation and few base themes with 8.x branches - what's a front end developer to do? I'll show you what's changing in Drupal theming between D7 and D8 and how to create a custom theme based on the Classy base theme, step by step. We'll go over Twig basics and Twig debugging.
Spectrum 2015 going online with style - an intro to cssNeil Perlin
This document introduces CSS (Cascading Style Sheets) and provides an overview of some basic CSS concepts:
- CSS allows authors to define styles that can be applied consistently throughout a project for formatting elements like headings, paragraphs, etc. This improves efficiency and consistency compared to local formatting.
- A style sheet is a separate file containing all styles for a project. It cascades in that changes can inherit to child styles.
- The document discusses CSS basics like style rules, the box model, relative sizing units, and different CSS levels.
- It recommends best practices like defining styles upfront in a CSS before authoring and avoiding inline styles.
9- Learn CSS Fundamentals / Pseudo-classesIn a Rocket
This document provides information about CSS pseudo-classes. It defines several types of pseudo-classes including dynamic, structural, and others. Dynamic pseudo-classes like :hover and :active select elements when a user interacts with them. Structural pseudo-classes select elements based on their position in a document tree, such as :first-child to select the first child element. The document provides examples of how to use different pseudo-class selectors in CSS code to style elements.
Advanced Technology for Web Application DesignBryce Kerley
This document provides an overview and introduction to advanced technologies for web design, including HAML, SASS, Compass, CoffeeScript, Rake, and Charleston. HAML and SASS are markup languages that can simplify and improve HTML and CSS. Compass is a CSS meta-framework built with SASS. CoffeeScript is a programming language that compiles to JavaScript. Rake is a build tool that can be used with these technologies. Charleston is a static site generator that bundles Rake rules for using HAML, SASS, and CoffeeScript together on a project. Installation and usage instructions are provided for each technology.
This document introduces Sass (Syntactically Awesome Style Sheets), which is a CSS preprocessor that adds powerful features like variables, nested rules, mixins, inheritance, and other useful tools that help make authoring CSS easier and more maintainable. It discusses some of the key benefits of using Sass like variables, nesting, mixins, functions, and operations that make styling more powerful and repetitive tasks easier. It also covers using Compass, a Sass extension framework, to gain access to useful CSS3 mixins and functions.
CSS3 is became inescapable if you want to make beautiful, responsive and performing application. GWT lacked in terms of CSS3 support. The new CssResource will allow you to use the Google Closure stylesheets within your GWT application, allowing any CSS3 features to be also optimized by the GWT compiler. Join me for this talk to learn how to leverage Google closure stylesheets within your GWT applications.
Css3 and gwt in perfect harmony
Conference by Julien Dramaix, at GWT Create 2015.
Julien Dramaix is LEAD SOFTWARE ENGINEER, BEE-R COOL-ER at Arcbees.
You can follow Julien on Twitter @jDramaix
This document discusses best practices for creating CSS pattern libraries. It recommends starting with the smallest reusable components and building up to larger page-level templates. Key aspects covered include using a naming convention based on modules, modifiers and descendants; avoiding overly specific class names; and including utility classes to add single styles without new classes. The document also provides examples of how to structure and name classes for common interface patterns.
CSharp presentation and software developementfrwebhelp
This document provides an overview of key concepts in C#, including similarities to Java, common C# language features, classes vs. structs, interfaces, abstract classes, and class internals like fields, properties, modifiers, and conversion operators. Some key points:
- C# and Java share similarities like all classes being objects, a similar compilation/runtime model using a virtual machine, and heap-based allocation using "new".
- C# supports common features like namespaces, classes, structs, enums, interfaces, and control statements. Classes are reference types while structs are value types.
- Interfaces define contracts without implementation, while abstract classes can contain some implementation but cannot be instantiated.
Css3 transitions and animations + graceful degradation with jQueryAndrea Verlicchi
CSS 3 introduces new styles, transforms, transitions, and animations. Transitions allow gradual change between states over time, while animations define automatic transitions through predefined states (keyframes). While CSS 3 works across doctypes, browser support varies, requiring vendor prefixes or JavaScript fallbacks for older browsers. Transitions and animations can enhance UX but should be used judiciously depending on necessity and performance impact.
1) The document provides resources for a front-end development session including working files, slides, and an agenda.
2) It reviews HTML tags, CSS selectors, the box model, positioning, and Flexbox.
3) Instructions are given to install Atom plugins and review JavaScript and JQuery before adding an Express server to a webpage.
This document provides an overview of typography concepts for web design, including:
- Common HTML elements for structuring text and headings
- Using CSS to style text properties like font, size, color, and spacing
- Selecting typefaces based on legibility, readability, and connotation
- Best practices for text on screens like sufficient contrast and line length
This is a presentation I gave on Sept. 25, 2012 for the Winnipeg PHP Group on some of the features in LESS I have started using in my own development environment.
Similar to The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax Experience 2009 (20)
The JavaScript community is one of the most vibrant and fun groups I've ever been lucky enough to be a part of. Like any vibrant community, sometimes people don't play nicely. In this session, I will discuss what it has been like to be shy *and* be on twitter, mailing lists, and open source. I'll talk about my experiences consulting on massive CSS overhauls, and ways to defeat trolls -- including your own inner troll! I'll also share a timing attack for your brain that might just surprise you.
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
We keep thinking we can write better CSS if we just try harder, that the next site will be clean and stay that way. This presentation shows that in fact, messy CSS is the direct result of our worst best-practices. We need to reexamine those assumptions with an eye to practicality and scalability as well as accessibility, standards, and fabulous design.
Nicole Sullivan and Stoyan Stefanov discuss their work optimizing CSS at Facebook and Yahoo!, As well as the state of CSS optimizations in the Alexa Top 1000 websites. What a mess!
From Velocity Conference and Texas-Javascript.
Nicole Sullivan gives a presentation on designing fast websites. She discusses why performance matters, how websites have grown more complex over time, and how poor performance can negatively impact businesses. She provides several best practices for optimizing websites, such as creating reusable components, using consistent styles, making modules transparent, optimizing images through sprites and compression, avoiding non-standard fonts and using columns instead of rows.
The 7 Habits of Exceptional Performance discusses techniques for optimizing website performance. It recommends flushing the buffer early, using GET requests for AJAX, preloading components, avoiding filters, measuring performance metrics, and balancing new features with performance improvements. High performance should be baked into the development process from the start. Key metrics to track include page weight, response time, and HTTP requests.
The document discusses 20 additional best practices for improving web performance beyond the original 14 recommendations from YSlow. It covers techniques like flushing the buffer early, splitting components for post-loading, preloading necessary assets, reducing unnecessary DOM elements, optimizing images through techniques like converting to smaller file formats and using CSS sprites, and designing for mobile performance. The document provides examples and case studies to illustrate the recommendations and cites additional resources on web performance.
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Chris Swan
Have you noticed the OpenSSF Scorecard badges on the official Dart and Flutter repos? It's Google's way of showing that they care about security. Practices such as pinning dependencies, branch protection, required reviews, continuous integration tests etc. are measured to provide a score and accompanying badge.
You can do the same for your projects, and this presentation will show you how, with an emphasis on the unique challenges that come up when working with Dart and Flutter.
The session will provide a walkthrough of the steps involved in securing a first repository, and then what it takes to repeat that process across an organization with multiple repos. It will also look at the ongoing maintenance involved once scorecards have been implemented, and how aspects of that maintenance can be better automated to minimize toil.
Coordinate Systems in FME 101 - Webinar SlidesSafe Software
If you’ve ever had to analyze a map or GPS data, chances are you’ve encountered and even worked with coordinate systems. As historical data continually updates through GPS, understanding coordinate systems is increasingly crucial. However, not everyone knows why they exist or how to effectively use them for data-driven insights.
During this webinar, you’ll learn exactly what coordinate systems are and how you can use FME to maintain and transform your data’s coordinate systems in an easy-to-digest way, accurately representing the geographical space that it exists within. During this webinar, you will have the chance to:
- Enhance Your Understanding: Gain a clear overview of what coordinate systems are and their value
- Learn Practical Applications: Why we need datams and projections, plus units between coordinate systems
- Maximize with FME: Understand how FME handles coordinate systems, including a brief summary of the 3 main reprojectors
- Custom Coordinate Systems: Learn how to work with FME and coordinate systems beyond what is natively supported
- Look Ahead: Gain insights into where FME is headed with coordinate systems in the future
Don’t miss the opportunity to improve the value you receive from your coordinate system data, ultimately allowing you to streamline your data analysis and maximize your time. See you there!
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionBert Blevins
Cybersecurity is a major concern in today's connected digital world. Threats to organizations are constantly evolving and have the potential to compromise sensitive information, disrupt operations, and lead to significant financial losses. Traditional cybersecurity techniques often fall short against modern attackers. Therefore, advanced techniques for cyber security analysis and anomaly detection are essential for protecting digital assets. This blog explores these cutting-edge methods, providing a comprehensive overview of their application and importance.
Blockchain technology is transforming industries and reshaping the way we conduct business, manage data, and secure transactions. Whether you're new to blockchain or looking to deepen your knowledge, our guidebook, "Blockchain for Dummies", is your ultimate resource.
Details of description part II: Describing images in practice - Tech Forum 2024BookNet Canada
This presentation explores the practical application of image description techniques. Familiar guidelines will be demonstrated in practice, and descriptions will be developed “live”! If you have learned a lot about the theory of image description techniques but want to feel more confident putting them into practice, this is the presentation for you. There will be useful, actionable information for everyone, whether you are working with authors, colleagues, alone, or leveraging AI as a collaborator.
Link to presentation recording and transcript: https://bnctechforum.ca/sessions/details-of-description-part-ii-describing-images-in-practice/
Presented by BookNet Canada on June 25, 2024, with support from the Department of Canadian Heritage.
Choose our Linux Web Hosting for a seamless and successful online presencerajancomputerfbd
Our Linux Web Hosting plans offer unbeatable performance, security, and scalability, ensuring your website runs smoothly and efficiently.
Visit- https://onliveserver.com/linux-web-hosting/
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfjackson110191
These fighter aircraft have uses outside of traditional combat situations. They are essential in defending India's territorial integrity, averting dangers, and delivering aid to those in need during natural calamities. Additionally, the IAF improves its interoperability and fortifies international military alliances by working together and conducting joint exercises with other air forces.
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...Toru Tamaki
Jindong Gu, Zhen Han, Shuo Chen, Ahmad Beirami, Bailan He, Gengyuan Zhang, Ruotong Liao, Yao Qin, Volker Tresp, Philip Torr "A Systematic Survey of Prompt Engineering on Vision-Language Foundation Models" arXiv2023
https://arxiv.org/abs/2307.12980
An invited talk given by Mark Billinghurst on Research Directions for Cross Reality Interfaces. This was given on July 2nd 2024 as part of the 2024 Summer School on Cross Reality in Hagenberg, Austria (July 1st - 7th)
Quality Patents: Patents That Stand the Test of TimeAurora Consulting
Is your patent a vanity piece of paper for your office wall? Or is it a reliable, defendable, assertable, property right? The difference is often quality.
Is your patent simply a transactional cost and a large pile of legal bills for your startup? Or is it a leverageable asset worthy of attracting precious investment dollars, worth its cost in multiples of valuation? The difference is often quality.
Is your patent application only good enough to get through the examination process? Or has it been crafted to stand the tests of time and varied audiences if you later need to assert that document against an infringer, find yourself litigating with it in an Article 3 Court at the hands of a judge and jury, God forbid, end up having to defend its validity at the PTAB, or even needing to use it to block pirated imports at the International Trade Commission? The difference is often quality.
Quality will be our focus for a good chunk of the remainder of this season. What goes into a quality patent, and where possible, how do you get it without breaking the bank?
** Episode Overview **
In this first episode of our quality series, Kristen Hansen and the panel discuss:
⦿ What do we mean when we say patent quality?
⦿ Why is patent quality important?
⦿ How to balance quality and budget
⦿ The importance of searching, continuations, and draftsperson domain expertise
⦿ Very practical tips, tricks, examples, and Kristen’s Musts for drafting quality applications
https://www.aurorapatents.com/patently-strategic-podcast.html
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc
Six months into 2024, and it is clear the privacy ecosystem takes no days off!! Regulators continue to implement and enforce new regulations, businesses strive to meet requirements, and technology advances like AI have privacy professionals scratching their heads about managing risk.
What can we learn about the first six months of data privacy trends and events in 2024? How should this inform your privacy program management for the rest of the year?
Join TrustArc, Goodwin, and Snyk privacy experts as they discuss the changes we’ve seen in the first half of 2024 and gain insight into the concrete, actionable steps you can take to up-level your privacy program in the second half of the year.
This webinar will review:
- Key changes to privacy regulations in 2024
- Key themes in privacy and data governance in 2024
- How to maximize your privacy program in the second half of 2024
Best Practices for Effectively Running dbt in Airflow.pdfTatiana Al-Chueyr
As a popular open-source library for analytics engineering, dbt is often used in combination with Airflow. Orchestrating and executing dbt models as DAGs ensures an additional layer of control over tasks, observability, and provides a reliable, scalable environment to run dbt models.
This webinar will cover a step-by-step guide to Cosmos, an open source package from Astronomer that helps you easily run your dbt Core projects as Airflow DAGs and Task Groups, all with just a few lines of code. We’ll walk through:
- Standard ways of running dbt (and when to utilize other methods)
- How Cosmos can be used to run and visualize your dbt projects in Airflow
- Common challenges and how to address them, including performance, dependency conflicts, and more
- How running dbt projects in Airflow helps with cost optimization
Webinar given on 9 July 2024
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxSynapseIndia
Your comprehensive guide to RPA in healthcare for 2024. Explore the benefits, use cases, and emerging trends of robotic process automation. Understand the challenges and prepare for the future of healthcare automation
The DealBook is our annual overview of the Ukrainian tech investment industry. This edition comprehensively covers the full year 2023 and the first deals of 2024.
YOUR RELIABLE WEB DESIGN & DEVELOPMENT TEAM — FOR LASTING SUCCESS
WPRiders is a web development company specialized in WordPress and WooCommerce websites and plugins for customers around the world. The company is headquartered in Bucharest, Romania, but our team members are located all over the world. Our customers are primarily from the US and Western Europe, but we have clients from Australia, Canada and other areas as well.
Some facts about WPRiders and why we are one of the best firms around:
More than 700 five-star reviews! You can check them here.
1500 WordPress projects delivered.
We respond 80% faster than other firms! Data provided by Freshdesk.
We’ve been in business since 2015.
We are located in 7 countries and have 22 team members.
With so many projects delivered, our team knows what works and what doesn’t when it comes to WordPress and WooCommerce.
Our team members are:
- highly experienced developers (employees & contractors with 5 -10+ years of experience),
- great designers with an eye for UX/UI with 10+ years of experience
- project managers with development background who speak both tech and non-tech
- QA specialists
- Conversion Rate Optimisation - CRO experts
They are all working together to provide you with the best possible service. We are passionate about WordPress, and we love creating custom solutions that help our clients achieve their goals.
At WPRiders, we are committed to building long-term relationships with our clients. We believe in accountability, in doing the right thing, as well as in transparency and open communication. You can read more about WPRiders on the About us page.
13. FROM THE SPEC:
❖ Count 1 if the declaration is from is a 'style' attribute rather
than a rule with a selector, 0 otherwise (= a) (In HTML, values
of an element's "style" attribute are style sheet rules. These
rules have no selectors, so a=1, b=0, c=0, and d=0.)
❖ Count the number of ID attributes in the selector (= b)
❖ Count the number of other attributes and pseudo-classes in
the selector (= c)
❖ Count the number of element names and pseudo-elements in
the selector (= d)
14. IT GOES ON...
❖ The specificity is based only on the form of the selector. In
particular, a selector of the form "[id=p33]" is counted as an
attribute selector (a=0, b=0, c=1, d=0), even if the id attribute
is defined as an "ID" in the source document's DTD.
❖ Concatenating the four numbers a-b-c-d (in a number system
with a large base) gives the specificity.
64. A Heading should not become a Heading
in another part of the page.
65. AVOID
EXAMPLE
#weatherModule h3{color:red;}
#tabs h3{color:blue}
❖ Global color undefined for h3, so it will be
‣ unstyled in new modules,
‣ developers forced to write more CSS for the same style
66. AVOID
EXAMPLE
h3{color:black;}
#weatherModule h3{color:red;}
#tabs h3{color:blue}
❖ Global color defined (better!)
❖ Weather and tabs override default h3
‣ three styles for h3 cannot co-exist in the same module
‣ default style cannot be used in weather and tabs without costly
overrides
❖ Weather and tabs h3 can never be used outside of those
modules
67. CONSISTENCY
Writing more rules to
overwrite the crazy rules from
before.
e.g. Heading should behave
predictably in any module.
69. NEED MORE THAN 6
HEADINGS?
Really? Any duplicates? Any too similar?
70. STILL NEED MORE
HEADINGS?
.category{...}
.section{...}
.product{...}
.prediction{...}
❖ Extend the heading object via a class on the object itself
❖ Avoid using the cascade to change display of nested objects
73. TEMPLATE
• 807 bytes
• 13 lines of code
• easily
extended to custom
page and column width
74. GRIDS
• 574 bytes
• 14 lines of code
• Percentage widths adapt to
different page sizes
• Includes halfs, thirds, fourths, and
fifths
• No gutters
• Infinite nesting and stacking
92. div{...}
X
ul{...}
p{..}
AVOID STYLING ELEMENTS
unless defining defaults
.error{...}
.section{...}
.products{...}
93. html body .myModule div .hd{...}
.myModule2 .hd {...}
GIVE RULES THE
SAME STRENGTH
Use cascade order to overwrite previous rules
94. X
html body .myModule div .hd{...}
.myModule2 .hd {...}
GIVE RULES THE
SAME STRENGTH
Use cascade order to overwrite previous rules
.myModule .hd{...}
.myModule2 .hd{...}
95. .mod .hd{...}
.ie .mod .hd{...}
.weatherMod .hd {...}
USE HACKS SPARINGLY
And don’t let them change your specificity
96. .mod .hd{...}
X
.ie .mod .hd{...}
.weatherMod .hd {...}
USE HACKS SPARINGLY
And don’t let them change your specificity
.mod .hd{color: red; _zoom:1;}
.weatherMod .hd{...}
100. AVOID OVERLY SPECIFIC
CLASSES
they’re all semantic, but limiting
.vehicle{...}
.motorcycle{...}
.ducati{...}
.ducatiMonster620{...}
.nicolesDucatiMonster620{...}
101. AVOID OVERLY SPECIFIC
CLASSES
they’re all semantic, but limiting
.vehicle{...}
.motorcycle{...}
.ducati{...}
X
.ducatiMonster620{...}
.nicolesDucatiMonster620{...}
102. #myUniqueIdentifier{...}
#myUniqueIdentifier2{...}
AVOID SINGLETONS
ids can only be used once in any given page
Source: Chris Griego
103. X
#myUniqueIdentifier{...}
#myUniqueIdentifier2{...}
AVOID SINGLETONS
ids can only be used once in any given page
Source: Chris Griego
104. Media
Subheading
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
USE MIXINS
to avoid repeating code
Media Extended
Subheading
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
105. .inner{...} .weatherMod .inner{...}
.tr{...} .weatherMod .tr{...}
.bl{...} .weatherMod .bl{...}
ENCAPSULATION
don’t access sub-nodes of an object directly
inner
106. .inner{...}
X
.weatherMod .inner{...}
.tr{...} .weatherMod .tr{...}
.bl{...} .weatherMod .bl{...}
ENCAPSULATION
don’t access sub-nodes of an object directly
inner
107. OOCSS: A REAL LIFE
EXAMPLE
Gonzalo Cordero
Front-End Engineer @Yahoo! inc.
127. WEB COMPROMISES
❖ Why does the “easy” turn so complicated?
❖ Why do we need to compromise?
128. WEB COMPROMISES
❖ Why does the “easy” turn so complicated?
❖ Why do we need to compromise?
❖ Why can’t we rely on a set of solid rules and structures? Like
other platforms do?
131. OOCSS SAVES THE DAY
❖ Single simple markup structure
❖ Cross browser support (even IE 5.5!)
132. OOCSS SAVES THE DAY
❖ Single simple markup structure
❖ Cross browser support (even IE 5.5!)
❖ Very minimum CSS
133. OOCSS SAVES THE DAY
❖ Single simple markup structure
❖ Cross browser support (even IE 5.5!)
❖ Very minimum CSS
❖ Scalable, easy to apply to multiple designs
147. CSSBUILDR
❖ If we said we could reuse the same structure over and over
again, what’s stopping us from doing so?
❖ Different modules and page grids can be easily built.
❖ Plug and Play, Mix and Match.
148. CSSBUILDR: TECH SPECS
❖ Create and modify module contours, backgrounds, font-
colors, etc.
❖ In two to three clicks you get a plug-and-play ready module
that works cross browser.
❖ Built on top YUI.
149. THANK YOU
DEMO TIME
❖ ygonzalocordero@me.com
❖ Twitter: goonieiam
150. PHOTO CREDITS
Bernese Mountain Dog in a Suitcase by Sig20171
Family Outing by Jimbob
The fast and the furious Car Show by Rob Young
Young man and woman taking pictures of each other by RalphBijker
Motion Gears - team force by RalphBijker
Weighing In by Smig44_uk
151. PHOTO CREDITS
• “South Carolina” by Army.Mil
• “So Happy Together” by kalandrakas
• “sometimes, a hug is all what we need” by kalandrakas
• “Blueprint background” by Ricketts Fish
• Spaghetti Monster
• Food Photography - Spaghetti Tossed with Veg Oil
• Spaghetti alla bolognese
152. PHOTO CREDITS
• “You Crack Me Up” by http://flickr.com/photos/nickwheeleroz/2474196275/in/photostream/
• “red lego” by http://flickr.com/photos/niznoz/5753993/
• “Pablo’s cubism period began at three” by http://flickr.com/photos/wwworks/2475349116/in/set-72157608035966422/
• “Kuwait water tower” by http://flickr.com/photos/asam/327911794/
• idigit_teddy: http://www.flickr.com/photos/design_inspiration/238542495/
• lucianvenutian: http://www.flickr.com/photos/lucianvenutian/1142630637/
• Gimli_36: http://www.flickr.com/photos/navillot/1878124531/
• NathanFromDeVryEET: http://www.flickr.com/photos/thatguyfromcchs08/2300190277/
• Stabilo Boss: http://flickr.com/photos/stabilo-boss/101793494/in/set-72057594060779001/
• Dead Man's Hand
• Poker
• Spaghetti & Meatballs
153. LET’S KEEP TALKING...
http://stubbornella.org
nicole@stubbornella.org
“stubbornella” on the web...
twitter, dopplr, slideshare, everywhere...
http://github.com/stubbornella/oocss/
http://groups.google.com/group/object-oriented-css
Editor's Notes
Who am I?
I am a front-end architecture consultant, working on w3c beta, facebook. My focus is building building scalable CSS. That might mean millions of visitors, thousands of pages, or any site like a blog where content creation goes on long after the look and feel has stabilized.
Even Faster Websites, Layers Magazine, Smush it, Yslow.
Speaking the same language... avoid lingo, focus on what matters to design
Which of these will be applied in case of conflict?
No idea, the order of the classes makes no difference.
The color will be blue, no problem to declare things multiple times.
The last property value pair will win
Blue is ignored because the browser doesn’t understand the british spelling. Red will be applied.
Foo will be blue, you can define the same thing as many times as you like, the last definition will win. Much like variables.
If the same values are declared in both stylesheets, moreStyles.css will win because it comes after styles.
The paragraph will be red. IDs win over classes.
Inline styles win over external stylesheets and styles in the head
Important wins over everything, including inline styles
Certain properties are passed to child nodes. If you set a font size for example, child nodes will have the same size font unless they have a more specific rule applied.
If you apply two classes to an element, it will have the property value pairs of both. The cascade resolves conflicts. This allows you to aggregate more abstract classes with more specific, so you don’t repeat code.
Flawed implementations,
Perfectly accessible or high performance website, and then the first newbie to touch it, ruins it. Our code should be robust enough that newbies can contribute while maintaining the standards we’ve set.
couple years coding in the basement by yourself before you are remotely useful.
Profession needs to accommodate entry level, mid level, and architect level developers.
Frankly, I’m tired of writing rounded corner boxes. I’ve done it 1000 times already. What I want is a system that allows newbies to do that part so I can focus on the architect level challenges.
And for good reason. Currently there is no consistency or predictability.
New (different) html pages should be able to be built without modifying the CSS.
CSS classes - some are like classes, others like properties, and some are objects
Its about taking programming best practices and applying them to writing CSS.
Encourage reuse
If we build new HTML pages from a component library, new pages won’t require new css.
So what goes into a component library. First up, content objects.
Anything else that should be consistent site-wide.
Consistency & Semantics
You might be asking “what are location dependent styles?”, lets look at a programming parallel.
Designing site-wide legos first, then pages can help.
(better for flexible section) YDN homepage module, trying to use it on a 2 column layout
Not because you can't do it, anyone at this conf can position something to the left and something else to the right.
Demo template and grids.
.mod{defines what it means to be a module}
skins become really simple
.mod{defines what it means to be a module}
skins become really simple
.mod{defines what it means to be a module}
skins become really simple
.mod{defines what it means to be a module}
skins become really simple
avoid the specificity game
avoid the specificity game
Need hacks for browsers other than IE5.5, 6, 7? You are doing something wrong.
Need hacks for browsers other than IE5.5, 6, 7? You are doing something wrong.
YUI contributor
Work for Yahoo Home Page
CSS buildr contributor
YUI contributor
Work for Yahoo Home Page
CSS buildr contributor
YUI contributor
Work for Yahoo Home Page
CSS buildr contributor
I was recently given the task of creating this module
The challenges: Cross browser, limited amount of time, high quality markup, accessible and of course only with css.
The challenges: Cross browser, limited amount of time, high quality markup, accessible and of course only with css.
The challenges: Cross browser, limited amount of time, high quality markup, accessible and of course only with css.