If you are a theme developer, using Sass or Syntactically Awesome Stylesheets is a time saving way to write your code and it is easy to learn once you are familiar with CSS. In this session, you will learn how to harness the power of variables, nesting, and mixins to take advantage of everything that SASS has to offer to write awesome code. In order to get the most from this session, you must have a good understanding of HTML and CSS.
Many web sites have moved away from table based layouts to CSS. But what about the longer term? Is you CSS efficient, maintainable and modular? Find out about taking your CSS to the next level.
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
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.
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
http://natbat.net/2008/Sep/28/css-systems/ - A CSS System is a reusable set of content-oriented markup patterns and associated CSS created to express a site's individual design. It is the end result of a process that emphasizes up-front planning, loose coupling between CSS and markup, pre-empting browser bugs and overall robustness. It also incorporates a shared vocabulary for developers to communicate the intent of the code. This talk elaborates on this concept, and also describes a number of tricks I use to pre-empt maintainability issues.
Originally presented at BarCamp London 5 in Richmond on the 28th of September 2008.
If you are new to CSS or have been using it for years this presentation should give you more insight into how to write and use CSS to make your web sites better.
Front End Tooling and Performance - Codeaholics HK 2015Holger Bartel
Front End Tooling and Performance is a case study on what I used to make missedin-hkg.com load in less than 1000ms and optimise front end performance in various ways.
This talk has been held at the Codeaholics Meetup in Hong Kong on 08. April 2015.
How to dominate a free theme WCTO 2014James Strang
Not everyone can afford to have a custom designed theme for their WordPress website. Often we have to resort to the themes that are available for free or cheap. But how do we avoid having the website look the same as everyone else’s who used the same theme?
I will show you how to take the most common WordPress.org themes and turn them into the unique look you want. Google Chrome or Firefox recommended. No coding knowledge is required, but you will learn some basic CSS.
From PSD to WordPress Theme: Bringing designs to lifeDerek Christensen
If you want to design your first custom WordPress theme, this talk is for you. You’ve been venturing out little by little, changing some CSS here and HTML there. You’ve even created a child theme or two. But now it’s time to take things to the next level. You want something that’s all yours!
You convinced your friend put together a design for you in Photoshop, and now it’s time to take the next step. How do you get that beautiful concept to translate into a living, breathing WordPress theme?
That’s what we’ll cover in this action-packed presentation geared toward the curious beginner and intermediate WordPress fans.
Recent implementation of CSS3 features in modern browsers allow for greater design control and creativity in our Web sites.
In this three-hour workshop, attendees will learn about using colors through RGBa and opacity, multiple background and border images, text and box shadows, CSS-enabled gradients and transitions as well as laying out text in multiple columns.
In addition to font embedding techniques and third-party font bureaus, we look into designing with older browsers in mind when coding with CSS3.
SCSS is a an extension of CSS that adds power and elegance to the basic language.
It helps keep large stylesheets well organized and get small stylesheets up and running quickly.
This recipe provides a structured approach for using SCSS Pre-processor for your web applications.
Features covered :
• Pre-processing
• Variables
• Nesting
• Partials
• Imports
• Mixins
• Inheritance
• Operators
http://natbat.net/2008/Sep/28/css-systems/ - A CSS System is a reusable set of content-oriented markup patterns and associated CSS created to express a site's individual design. It is the end result of a process that emphasizes up-front planning, loose coupling between CSS and markup, pre-empting browser bugs and overall robustness. It also incorporates a shared vocabulary for developers to communicate the intent of the code. This talk elaborates on this concept, and also describes a number of tricks I use to pre-empt maintainability issues.
Originally presented at BarCamp London 5 in Richmond on the 28th of September 2008.
If you are new to CSS or have been using it for years this presentation should give you more insight into how to write and use CSS to make your web sites better.
Front End Tooling and Performance - Codeaholics HK 2015Holger Bartel
Front End Tooling and Performance is a case study on what I used to make missedin-hkg.com load in less than 1000ms and optimise front end performance in various ways.
This talk has been held at the Codeaholics Meetup in Hong Kong on 08. April 2015.
How to dominate a free theme WCTO 2014James Strang
Not everyone can afford to have a custom designed theme for their WordPress website. Often we have to resort to the themes that are available for free or cheap. But how do we avoid having the website look the same as everyone else’s who used the same theme?
I will show you how to take the most common WordPress.org themes and turn them into the unique look you want. Google Chrome or Firefox recommended. No coding knowledge is required, but you will learn some basic CSS.
From PSD to WordPress Theme: Bringing designs to lifeDerek Christensen
If you want to design your first custom WordPress theme, this talk is for you. You’ve been venturing out little by little, changing some CSS here and HTML there. You’ve even created a child theme or two. But now it’s time to take things to the next level. You want something that’s all yours!
You convinced your friend put together a design for you in Photoshop, and now it’s time to take the next step. How do you get that beautiful concept to translate into a living, breathing WordPress theme?
That’s what we’ll cover in this action-packed presentation geared toward the curious beginner and intermediate WordPress fans.
Recent implementation of CSS3 features in modern browsers allow for greater design control and creativity in our Web sites.
In this three-hour workshop, attendees will learn about using colors through RGBa and opacity, multiple background and border images, text and box shadows, CSS-enabled gradients and transitions as well as laying out text in multiple columns.
In addition to font embedding techniques and third-party font bureaus, we look into designing with older browsers in mind when coding with CSS3.
SCSS is a an extension of CSS that adds power and elegance to the basic language.
It helps keep large stylesheets well organized and get small stylesheets up and running quickly.
This recipe provides a structured approach for using SCSS Pre-processor for your web applications.
Features covered :
• Pre-processing
• Variables
• Nesting
• Partials
• Imports
• Mixins
• Inheritance
• Operators
From this presentation, we will understand,
- Introduction to Sass
- Why adding Sass in our workflow
- Advantages of Sass
- How to convert our CSS into Sass
- Compass
- What is Compass
- How to use sass with compass
I don't know about you, but vanilla CSS always leaves me wanting more. It's a fairly simple language, can do some pretty powerful things, but after a while.. well, it can become rather tedious to work with. Enter Sass: Syntactically Awesome Stylesheets. Sass is a CSS meta-language and precompiler that makes the prettification of your website a breeze by adding invaluable features of more traditional programming languages. In this session, we'll jump right in to the Sass workflow and cover all the key game changers - nesting, variables, mixins, inheritance, and directives. We'll also cover some of the gotchyas, tools and extensions, and tips for organization and coding standards.
Prepared for self.conference at COBO Hall in Detroit, Michigan on May 30, 2014.
Updated for CodeMash January 2015.
Updated for Detroit Craftsman Guild March 2016.
SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!Stefan Bauer
CSS can get overly complex and unwieldy very quickly - especially on SharePoint Projects. To achieve the SharePoint branding you desire, often results in thousands of lines of CSS across many files. This approach is error prone and also a maintenance nightmare! However, there is a better way…
SASS (“Syntactically Awesome Style Sheets”) is fast becoming the preferred approach to develop your CSS! SASS is an extension to CSS which arms you with programming features such as variables, functions, loops and many more.
Join my session and I will take you from a complete SASS novice to someone that knows where SASS fits and how to use it with SharePoint.
Key Takeaways :
- I will explain what SASS is and where you would use it.
- How to use SASS to brand SharePoint without requiring lengthy deployments.
- How to create simple Rich Text Editor Styles using mixins and includes.
- How to apply a Grid layout and make it Responsive.
- How to structure your branding correctly to make it more maintainable.
- How CSS 4 fits into the picture and does it make SASS obsolete?
Sass is a scripting language that is interpreted into Cascading Style Sheets (CSS). SassScript is the scripting language itself. Sass consists of two syntaxes. The original syntax, called "the indented syntax", uses a syntax similar to Haml.
This is the first of three presentations detailing the front end optimization of goodtoknow.co.uk. Part one describes how we refactored the CSS, part two will address the HTML structure and implementation of Behat tests, and part three will contend with image optimization specifically addressing data URI’s and sprites.
Full notes here: http://spannerspace.com/make-your-css-beautiful-again/
Similar to Intro to Sass for WordPress Developers (20)
"Which WordPress Job Is Right For You?" WordCamp Orange County 2015Suzette Franck
You love WordPress, and if you are not already making a nice living with it, why not? The WordPress economy is expanding and more people are becoming involved in all aspects around WordPress, whether it be freelancing and entrepreneurship, blogging and content creation, search engine optimization, social media and marketing, developing plugins and themes, designing sites, User Interface, Maintenance, User Experience, Executives, Project Managers, Teachers, Presenters, and on… all working with WordPress in some capacity. This light-hearted session will break down several different types of popular positions and some of the requirements to do that job, which traits work best with which titles, and how you can begin to find your dream WordPress job.
WP Super Cache is a plugin designed to help speed up the performance of your website through caching your pages into static content. WP Super Cache generates static html files from your dynamic WordPress blog. After a html file is generated your webserver will serve that file instead of processing the comparatively heavier and more expensive WordPress PHP scripts. The static html files will be served to the vast majority of your users, but because a user’s details are displayed in the comment form after they leave a comment those requests are handled by the legacy caching engine.
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Ramesh Iyer
In today's fast-changing business world, Companies that adapt and embrace new ideas often need help to keep up with the competition. However, fostering a culture of innovation takes much work. It takes vision, leadership and willingness to take risks in the right proportion. Sachin Dev Duggal, co-founder of Builder.ai, has perfected the art of this balance, creating a company culture where creativity and growth are nurtured at each stage.
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.
Search and Society: Reimagining Information Access for Radical FuturesBhaskar Mitra
The field of Information retrieval (IR) is currently undergoing a transformative shift, at least partly due to the emerging applications of generative AI to information access. In this talk, we will deliberate on the sociotechnical implications of generative AI for information access. We will argue that there is both a critical necessity and an exciting opportunity for the IR community to re-center our research agendas on societal needs while dismantling the artificial separation between the work on fairness, accountability, transparency, and ethics in IR and the rest of IR research. Instead of adopting a reactionary strategy of trying to mitigate potential social harms from emerging technologies, the community should aim to proactively set the research agenda for the kinds of systems we should build inspired by diverse explicitly stated sociotechnical imaginaries. The sociotechnical imaginaries that underpin the design and development of information access technologies needs to be explicitly articulated, and we need to develop theories of change in context of these diverse perspectives. Our guiding future imaginaries must be informed by other academic fields, such as democratic theory and critical theory, and should be co-developed with social science scholars, legal scholars, civil rights and social justice activists, and artists, among others.
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.
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/
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
Keynote at DIGIT West Expo, Glasgow on 29 May 2024.
Cheryl Hung, ochery.com
Sr Director, Infrastructure Ecosystem, Arm.
The key trends across hardware, cloud and open-source; exploring how these areas are likely to mature and develop over the short and long-term, and then considering how organisations can position themselves to adapt and thrive.
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...UiPathCommunity
💥 Speed, accuracy, and scaling – discover the superpowers of GenAI in action with UiPath Document Understanding and Communications Mining™:
See how to accelerate model training and optimize model performance with active learning
Learn about the latest enhancements to out-of-the-box document processing – with little to no training required
Get an exclusive demo of the new family of UiPath LLMs – GenAI models specialized for processing different types of documents and messages
This is a hands-on session specifically designed for automation developers and AI enthusiasts seeking to enhance their knowledge in leveraging the latest intelligent document processing capabilities offered by UiPath.
Speakers:
👨🏫 Andras Palfi, Senior Product Manager, UiPath
👩🏫 Lenka Dulovicova, Product Program Manager, UiPath
Essentials of Automations: Optimizing FME Workflows with ParametersSafe Software
Are you looking to streamline your workflows and boost your projects’ efficiency? Do you find yourself searching for ways to add flexibility and control over your FME workflows? If so, you’re in the right place.
Join us for an insightful dive into the world of FME parameters, a critical element in optimizing workflow efficiency. This webinar marks the beginning of our three-part “Essentials of Automation” series. This first webinar is designed to equip you with the knowledge and skills to utilize parameters effectively: enhancing the flexibility, maintainability, and user control of your FME projects.
Here’s what you’ll gain:
- Essentials of FME Parameters: Understand the pivotal role of parameters, including Reader/Writer, Transformer, User, and FME Flow categories. Discover how they are the key to unlocking automation and optimization within your workflows.
- Practical Applications in FME Form: Delve into key user parameter types including choice, connections, and file URLs. Allow users to control how a workflow runs, making your workflows more reusable. Learn to import values and deliver the best user experience for your workflows while enhancing accuracy.
- Optimization Strategies in FME Flow: Explore the creation and strategic deployment of parameters in FME Flow, including the use of deployment and geometry parameters, to maximize workflow efficiency.
- Pro Tips for Success: Gain insights on parameterizing connections and leveraging new features like Conditional Visibility for clarity and simplicity.
We’ll wrap up with a glimpse into future webinars, followed by a Q&A session to address your specific questions surrounding this topic.
Don’t miss this opportunity to elevate your FME expertise and drive your projects to new heights of efficiency.
JMeter webinar - integration with InfluxDB and GrafanaRTTS
Watch this recorded webinar about real-time monitoring of application performance. See how to integrate Apache JMeter, the open-source leader in performance testing, with InfluxDB, the open-source time-series database, and Grafana, the open-source analytics and visualization application.
In this webinar, we will review the benefits of leveraging InfluxDB and Grafana when executing load tests and demonstrate how these tools are used to visualize performance metrics.
Length: 30 minutes
Session Overview
-------------------------------------------
During this webinar, we will cover the following topics while demonstrating the integrations of JMeter, InfluxDB and Grafana:
- What out-of-the-box solutions are available for real-time monitoring JMeter tests?
- What are the benefits of integrating InfluxDB and Grafana into the load testing stack?
- Which features are provided by Grafana?
- Demonstration of InfluxDB and Grafana using a practice web application
To view the webinar recording, go to:
https://www.rttsweb.com/jmeter-integration-webinar
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.
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.
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Intro to Sass for WordPress Developers
1. Intro to Sass for
WordPress Theme Developers
WordCamp Salt Lake City 2015
by
Suzette Franck
2. Who I Am
HTML and CSS teacher for Girl Develop It, Los Angeles
Born in Hollywood, resides in So. California
20 Years Coding & Web Development
Developed over 300 WordPress sites
Spoken at 25 WordCamps
Reg. Contributor: WPwatercooler.com
3. My Goal
Teach you at least one thing you
can put into practice right away
7. Sass Basics
Sass is a CSS pre-processor, outputs .CSS from .SCSS file
Sass is a Ruby “Gem” or Application
Gems need to be installed once on your computer
World of pre-made additions (mixins) and other resources
Two flavors: .SCSS (Sassy CSS) & .SASS
.SCSS most closely resembles .CSS in syntax
8. “Getting Started with Sass and Compass”
thesassway.com/beginner/
getting-started-with-sass-and-compass
by Adam Stacoviak
10. Why is Sass better?
Backwards Compatible with all versions CSS
Fills holes in CSS: variables to represent values
Calculates values: colors, lengths
Bubbles up: Media Queries can be written within their
element
Supports Advanced Logic/if..then, while, else, etc.
Adopted by WordPress Core team & GPL Compatible*
* Reference: http://wptavern.com/wordpress-core-adopts-sass-css-preprocessor
11. How is Sass
More Efficient?
When writing code: DRY Don’t Repeat Yourself!
Reduces HTTP requests with multiple stylesheets
@import
Helps you write more advanced code faster
Cleaner, easier to read once you are familiar
Using variables, make site-wide changes in fewer places
Different output styles can be chosen depending on
goals
12. Different Output Styles
Nested (default)
Expanded (closest to hand-crafted CSS)
Compact (saves space)
Compressed (saves most space, minified)
Output style can be specified in your config.rb
15. Rename your .css file with
an .scss extension to get started
Are Sass Files Hard to Create?
16. Compiling Your Sass
Issue the “compass watch” command in your project directory
through Terminal or Command Prompt
When you save changes, the .CSS is automatically compiled
Adjust the values in your config.rb file as necessary to get
desired output
17. Will it affect my workflow?
After initial setup,
development is easier than before
18. Where Can I Get Sassified
WordPress Starter Themes?
All the cool kids are making starter themes from
Underscores, Sass & different responsive grid systems,
Here’s a few that I like, but feel free to explore!
27. _partials.scss
Partials are files that exist only as a fragment to be used in
another file
Partials are not complete by themselves, but they help you
modularize your code
Partials can be included in elaborate folder structures
Begins with an _ and end with .scss
Drop your partial folder on Sublime to open the folder - time
saver!
29. @import
Modularize your CSS into separate pages or partials
Re-use your favorite mixins on all of your projects
Compiled into one .css file at end
Fewer HTTP requests - performance!
Import others’ mixins and use them
31. Nesting All The Things
Repeated selectors are nested inside curly
braces
& is a placeholder for the parent selector
Namespaces can also be nested, ie font,
background
Compiled CSS will always be more verbose
34. $variables
Finally! Variables for CSS!
Declare in your .SCSS file like $name: value;
Call by $name in your CSS
Ability to change variables in one place and use
everywhere
Useful for defining colors in color palette, font
stacks, grid systems
Don’t forget 140 color names in CSS3! (Google it)
36. @mixin
Finally! Macros for CSS!
Re-usable blocks of styles
Define with @mixin declaration
Call with @include
Useful for CSS3 Vendor Prefixes
Powerful with arguments
Many pre-made mixins you can use in community
Compass, Bourbon, GitHub, Your Own Library
39. darken, lighten, adjust-hue, saturate, desaturate,
invert, compliment, etc.
Full list at:
http://sass-lang.com/documentation/Sass/Script/
Functions.html
Hexidecimal # is calculated & output in final CSS
Sass Color Functions