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.
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.
More on Object Oriented CSS at the Silicon Valley JavaScript Meet Up. How to extend objects, avoiding location dependent styles, and best practices for fast sites.
Learn the best practices and advanced techniques.
* Passing data to client libs, use the data attribute
* Expression contexts, choose wisely
* Use statement best practices, what fits best your needs
* Template & Call statements advanced usage
* Parameters for sub-resources, featuring resource attributes and synthetic resources
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.
More on Object Oriented CSS at the Silicon Valley JavaScript Meet Up. How to extend objects, avoiding location dependent styles, and best practices for fast sites.
Learn the best practices and advanced techniques.
* Passing data to client libs, use the data attribute
* Expression contexts, choose wisely
* Use statement best practices, what fits best your needs
* Template & Call statements advanced usage
* Parameters for sub-resources, featuring resource attributes and synthetic resources
about this presentation:
1) this presentation was a quickie for non-tech employees, who wanted a basic understanding of html/css, as it related to a white-label SAAS product;
2) the back-end/front-end definitions relate to the specific application (it's inaccurate if node.js is in the picture)
http://inarocket.com
Learn BEM fundamentals as fast as possible. What is BEM (Block, element, modifier), BEM syntax, how it works with a real example, etc.
This is the presentation I use during my training on web design and development. It discusses current practices of web page layout development with the help of CSS. It also describes the distinction between confusing and often overlapping terms such as adaptive & responsive layout, fluid/relative/liquid/elastic layouts.
Uncle Sam Wants You (To Optimize Your Content For Mobile)Karen McGrane
President Obama recently directed all government agencies to optimize their content for mobile, saying "Americans deserve a government that works for them anytime, anywhere, and on any device." Government has a responsibility to make its content available to all Americans equally. What about your organization? If the government has mandated its agencies to develop a content strategy for mobile, isn't it time you did too?
In this session, Karen will discuss why it's important to think holistically about publishing your content in whatever channel or device your customer wants to consume it — and what the risks are in not making content accessible to mobile users. Already convinced it's important? She'll also explain how to get started with your mobile content strategy, defining what you want to publish, what the relationship should be between your mobile and desktop site, and how your editorial workflow and content management tools need to evolve.
about this presentation:
1) this presentation was a quickie for non-tech employees, who wanted a basic understanding of html/css, as it related to a white-label SAAS product;
2) the back-end/front-end definitions relate to the specific application (it's inaccurate if node.js is in the picture)
http://inarocket.com
Learn BEM fundamentals as fast as possible. What is BEM (Block, element, modifier), BEM syntax, how it works with a real example, etc.
This is the presentation I use during my training on web design and development. It discusses current practices of web page layout development with the help of CSS. It also describes the distinction between confusing and often overlapping terms such as adaptive & responsive layout, fluid/relative/liquid/elastic layouts.
Uncle Sam Wants You (To Optimize Your Content For Mobile)Karen McGrane
President Obama recently directed all government agencies to optimize their content for mobile, saying "Americans deserve a government that works for them anytime, anywhere, and on any device." Government has a responsibility to make its content available to all Americans equally. What about your organization? If the government has mandated its agencies to develop a content strategy for mobile, isn't it time you did too?
In this session, Karen will discuss why it's important to think holistically about publishing your content in whatever channel or device your customer wants to consume it — and what the risks are in not making content accessible to mobile users. Already convinced it's important? She'll also explain how to get started with your mobile content strategy, defining what you want to publish, what the relationship should be between your mobile and desktop site, and how your editorial workflow and content management tools need to evolve.
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.
Good CSS troubleshooting skills are important to decrease your workload and help you work better with others. Tips for clean code and targetting, as well as solutions to modern browser bugs are covered.
The theme of your website has the capacity for beautiful, semantic markup...and also the hacky HTML soup. You can build a new theme by downloading a free theme and tearing out its guts--or you can learn how to become a theme surgeon.
In this session you will learn two key techniques needed to build a successful theme: crime scene investigation (identifying Drupal page elements in your design files) and power tools for copy-cat theming (things you need to recreate your design using Drupal). From start to finish we will transform a design file into a Drupal theme. With special attention given to your all-important questions: how do I save time with grid-based design? Should I use Panels? How do I make this bit of stuff appear next to that bit? Yah, but how do I start?
[This presentation was given at DrupalCon Chicago but the recording failed. Slides are available from http://www.slideshare.net/emmajane/forensic-theming-for-drupal]
About The Presenter
Emma Jane Hogbin is well known in the Drupal community for her engaging presentations and kickass theming book, Front End Drupal. She is currently working on her second book, Drupal: A user's guide which is due out shortly after DrupalCon. Through her training company, Design to Theme, emmajane has empowered thousands of people to create the Drupal site of their dreams.
Intended audience
Small business site builders who partner with graphic designers but have no idea how to make Drupal look like a design file. Intermediate themers who start with a free Drupal theme that looks "close" to the final site and then start hacking to make their theme. The audience currently does not use base themes and are frustrated at how complicated all of the code is. They are looking for shortcuts and some quick-fix solutions to make theming faster and more profitable.
Questions answered by this session
What are the key tools I need to use to make themeing Drupal easier?
How can I make Drupal markup less yucky?
Where should I start when building a new theme?
Yeah, but how do I theme *that thing*?
I want to see how you build a theme: show me!
Presented at: http://london2011.drupal.org/conference/sessions/forensic-theming-key-techniques-building-effective-drupal-themes
Presented at SCREENS 2013 in Toronto.
Details at fitc.ca/screens
In this talk, Digiflare lead iOS developer Justin Howlett will discuss the impact of performance on User Experience. Justin will discuss easy to implement platform agnostic techniques, technologies and libraries to improve your user experience through performance. Although most techniques and technologies are platform agnostic many of the case studies and examples will be presented in native Objective-C for iOS.
Presentation from DevGamm Moscow 2014 on HTML5 Canvas rendering. Going in to detail on how to optimize your drawing to get higher framerates on mobile canvas.
BoosterMedia: Overcome the bottleneck of HTML5 mobile game performanceDevGAMM Conference
Making HTML5 games run well on mobile devices is hard work! We’d like to take a good look into this issue by comparing performance on different versions of iOS and Android. Since there are huge differences in their systems, we will look at what the bottlenecks are on the different platforms, and the different versions of each platform. We would also like to show a mini tutorial in profiling games on Android, and seeing where exactly the bottlenecks lie.
Embracing Uncertainty: Learning to Think ResponsivelyChad Currie
Presented to IxDA Austin on March 6, 2013.
Adopting Responsive Web Design practices means shifting the way we work. Get practical suggestions for streamlining your design process in the multi-screen world.
Deliver Perfect Images At Any Size
with Anne Thomas
Out of the Sandbox
Overview
One of the most difficult aspects of developing for different screen sizes is the need to serve high quality images without slowing down the browsing experience. Websites are becoming more image heavy every year and with the popularity of content management systems growing, we don’t always have the luxury of complete control over the image sizes that are uploaded. Anne will be sharing some of the tricks that she has learned over the years to achieve the ideal combination for responsive images – fast, good and cheap.
Objective
Help you build sites that deliver high-quality images regardless of screen size with modern techniques (and even support Internet Explorer!)
Five Things Audience Members Will Learn
Alternatives to JPGs and the pros and cons
How to speed up load times for images
Modern methods to display images beyond the usual img element
How to generate correct image size for every device
Handy comparison of JS libraries to support older browsers
One of the most difficult aspects of developing for different screen sizes is the need to serve high quality images without slowing down the browsing experience. Websites are becoming more image heavy every year and with the popularity of content management systems growing, we don’t always have the luxury of complete control over the image sizes that are uploaded. Anne will be sharing some of the tricks that she has learned over the years to achieve the ideal combination for responsive images – fast, good and cheap.
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.
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.
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.
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.
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...Nicole Sullivan
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.
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.
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
Neuro-symbolic is not enough, we need neuro-*semantic*Frank van Harmelen
Neuro-symbolic (NeSy) AI is on the rise. However, simply machine learning on just any symbolic structure is not sufficient to really harvest the gains of NeSy. These will only be gained when the symbolic structures have an actual semantics. I give an operational definition of semantics as “predictable inference”.
All of this illustrated with link prediction over knowledge graphs, but the argument is general.
Connector Corner: Automate dynamic content and events by pushing a buttonDianaGray10
Here is something new! In our next Connector Corner webinar, we will demonstrate how you can use a single workflow to:
Create a campaign using Mailchimp with merge tags/fields
Send an interactive Slack channel message (using buttons)
Have the message received by managers and peers along with a test email for review
But there’s more:
In a second workflow supporting the same use case, you’ll see:
Your campaign sent to target colleagues for approval
If the “Approve” button is clicked, a Jira/Zendesk ticket is created for the marketing design team
But—if the “Reject” button is pushed, colleagues will be alerted via Slack message
Join us to learn more about this new, human-in-the-loop capability, brought to you by Integration Service connectors.
And...
Speakers:
Akshay Agnihotri, Product Manager
Charlie Greenberg, Host
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
Accelerate your Kubernetes clusters with Varnish CachingThijs Feryn
A presentation about the usage and availability of Varnish on Kubernetes. This talk explores the capabilities of Varnish caching and shows how to use the Varnish Helm chart to deploy it to Kubernetes.
This presentation was delivered at K8SUG Singapore. See https://feryn.eu/presentations/accelerate-your-kubernetes-clusters-with-varnish-caching-k8sug-singapore-28-2024 for more details.
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf91mobiles
91mobiles recently conducted a Smart TV Buyer Insights Survey in which we asked over 3,000 respondents about the TV they own, aspects they look at on a new TV, and their TV buying preferences.
"Impact of front-end architecture on development cost", Viktor TurskyiFwdays
I have heard many times that architecture is not important for the front-end. Also, many times I have seen how developers implement features on the front-end just following the standard rules for a framework and think that this is enough to successfully launch the project, and then the project fails. How to prevent this and what approach to choose? I have launched dozens of complex projects and during the talk we will analyze which approaches have worked for me and which have not.
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Jeffrey Haguewood
Sidekick Solutions uses Bonterra Impact Management (fka Social Solutions Apricot) and automation solutions to integrate data for business workflows.
We believe integration and automation are essential to user experience and the promise of efficient work through technology. Automation is the critical ingredient to realizing that full vision. We develop integration products and services for Bonterra Case Management software to support the deployment of automations for a variety of use cases.
This video focuses on the notifications, alerts, and approval requests using Slack for Bonterra Impact Management. The solutions covered in this webinar can also be deployed for Microsoft Teams.
Interested in deploying notification automations for Bonterra Impact Management? Contact us at sales@sidekicksolutionsllc.com to discuss next steps.
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
The Art of the Pitch: WordPress Relationships and SalesLaura Byrne
Clients don’t know what they don’t know. What web solutions are right for them? How does WordPress come into the picture? How do you make sure you understand scope and timeline? What do you do if sometime changes?
All these questions and more will be explored as we talk about matching clients’ needs with what your agency offers without pulling teeth or pulling your hair out. Practical tips, and strategies for successful relationship building that leads to closing the deal.
28. Web Dev Philosophy
• Work out of respect for the design.
• Designers make our code as beautiful and
clever on the outside as it is on the inside.
• Respect the original design vision.
consistent design = clean code = fast site.
29. 9 Best Practices
1. Create a component 5. Avoid non-standard
library of smart objects browser fonts.
2. Use consistent semantic 6. Use columns rather than
styles rows.
3. Design modules to be 7. Choose your bling
transparent on the carefully.
inside.
8. Be flexible.
4. Optimize images and
sprites. 9. Learn to love grids.
43. 3
Design modules to be
transparent
on the inside.
44. Contour blocks Background blocks Content Objects -
headings, paragraphs, lists, headers,
footers, buttons, etc.
Capital of the Canterbury region and the largest city
on the South Island (population just over 300,000)
exudes a palpable air of gentility and a connectedness
with the mother country.
Read more...
X X
1:n
45. Making it look
fab
Requires careful choice of pixels.
Bonus: Consider PNG8 for
progressive enhancement
http://alistapart.com/articles/mountaintop/
48. Optimize sprites
1. How many pages
does your property
have?
2. Is your site modular?
(hint: it should be!)
3. How much time can
your team spend on
site maintenance?
49. 9 Image Optimizations
1. Combine like colors 6. Reduce anti-aliased pixels -
via size and alignment
2. Avoid whitespace
7. Avoid diagonal gradients
3. Horizontal better than
vertical 8. Avoid alpha transparency
4. Limit colors 9. Change gradient color
every 2-3 pixels
5. Optimize individual
images, then sprite
52. Avoid filters
Why is the AlphaImageLoader used?
IE6 and earlier don’t natively support alpha
transparency. This filter forces that support.
53. Problem with filters
• Blocks rendering, freezes the browser
• Increased memory consumption
• Per element, not per image!
54. Solution: Avoid
AlphaImageLoader
1. BEST: avoid completely, use PNG8 which degrades gracefully in IE < 7
2. Fallback: use underscore hack so the filter is applied only to IE < 7
#elem {
background: url(some.png);
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='some.png', sizingMethod='crop');
}
58. Crush images
Step 1: Quality, Designer chooses quality (e.g. via save
for the web)
Step 2: Non-lossy compression to squeak the last
bytes out of the image.