I will go over some of the core content from my book, Responsive Design with WordPress, which teaches you how to leverage WordPress to get the most out of responsive design, implement best practices, automate important processes, and make your life easier overall.
The Dean wants to Make this WordPress Site ResponsiveJoe Casabona
Suppose the dean comes to you and says I need this website to look good on tablets and phones. What do you do? I will go over some of the core content from my book, Responsive Design with WordPress, which teaches you how to leverage WordPress to get the most out of responsive design, implement best practices, automate important processes, and make your life easier overall.
Join me as I hit some of the major topics of my book, including a primer on Responsive Design, how WordPress handles images and how to integrate picturefill, navigation and menu techniques, and a small bit about using WordPress frameworks.
A brief summary of our first month experience using Mojolicious: what worked and what didn't work.
Taken from the Oslo Perl Mongers talk given October 5th, 2011
Mojolicious - Perl Framework for the Real-Time Web (Lightning Talk)Dotan Dimet
A lightning talk given at Rails Israel 2014
(http://railsisrael2014.events.co.il/presentations/1319-mojolicious-perl-framework-for-the-real-time-web).
Uses some slides lifted from Glen Hinkle's YAPC 2012 talk
(https://speakerdeck.com/tempire/intro-to-mojolicious-perl)
and an image created by Marcus Ramburg.
The Dean wants to Make this WordPress Site ResponsiveJoe Casabona
Suppose the dean comes to you and says I need this website to look good on tablets and phones. What do you do? I will go over some of the core content from my book, Responsive Design with WordPress, which teaches you how to leverage WordPress to get the most out of responsive design, implement best practices, automate important processes, and make your life easier overall.
Join me as I hit some of the major topics of my book, including a primer on Responsive Design, how WordPress handles images and how to integrate picturefill, navigation and menu techniques, and a small bit about using WordPress frameworks.
A brief summary of our first month experience using Mojolicious: what worked and what didn't work.
Taken from the Oslo Perl Mongers talk given October 5th, 2011
Mojolicious - Perl Framework for the Real-Time Web (Lightning Talk)Dotan Dimet
A lightning talk given at Rails Israel 2014
(http://railsisrael2014.events.co.il/presentations/1319-mojolicious-perl-framework-for-the-real-time-web).
Uses some slides lifted from Glen Hinkle's YAPC 2012 talk
(https://speakerdeck.com/tempire/intro-to-mojolicious-perl)
and an image created by Marcus Ramburg.
WordPress Kitchen 2014 - Александр Стриха: Кеширование в WordPress WordCamp Kyiv
Если ваш блог читает не только мама и одноклассники, то вы наверняка сталкивались с проблемой нагрузки на ваш трехдолларовый хостинг. Мы расскажем как решить эту проблему, используя встроенные функции кеширования WordPress.
Uploading image file to a folder using php and saving its location in mysql database. This code saves image file path in the database and displays it on a browser. What you need is a local server and a reliable web browser for this to work , Then follow all steps.
2012-03-20 - Getting started with Node.js and MongoDB on MS AzureJohannes Hoppe
This talk concentrates on Microsoft's cloud platform, called Azure. Johannes gives an introduction to the new platform and speaks about its possibilities and limitations. By utilizing the Windows Azure SDK for Node.js he is going to demonstrate a simple JavaScript-driven browser game that bases on Node.js and MongoDB.
Drupal isn't a content management system. It's an application development platform that happens to ship with a great CMS as it's default implementation. Look at any chart comparing features of development frameworks and you'll see user management and authentication, forms management and validation, data storage, database migrations, internationalization and translation, MVC model with flexible templating, unit testing, and caching. Sounds a lot like Drupal. We'll look at why Drupal is an ideal application development platform for apps beyond content management, talk about where Drupal can improve in these areas, and look at an example application.
Reviews the basis of using JavaScript within WordPress. How to load in scripts correctly and move PHP data into JavaScripts for later use. Presented at WordCamp LA 2012
WordPress Kitchen 2014 - Александр Стриха: Кеширование в WordPress WordCamp Kyiv
Если ваш блог читает не только мама и одноклассники, то вы наверняка сталкивались с проблемой нагрузки на ваш трехдолларовый хостинг. Мы расскажем как решить эту проблему, используя встроенные функции кеширования WordPress.
Uploading image file to a folder using php and saving its location in mysql database. This code saves image file path in the database and displays it on a browser. What you need is a local server and a reliable web browser for this to work , Then follow all steps.
2012-03-20 - Getting started with Node.js and MongoDB on MS AzureJohannes Hoppe
This talk concentrates on Microsoft's cloud platform, called Azure. Johannes gives an introduction to the new platform and speaks about its possibilities and limitations. By utilizing the Windows Azure SDK for Node.js he is going to demonstrate a simple JavaScript-driven browser game that bases on Node.js and MongoDB.
Drupal isn't a content management system. It's an application development platform that happens to ship with a great CMS as it's default implementation. Look at any chart comparing features of development frameworks and you'll see user management and authentication, forms management and validation, data storage, database migrations, internationalization and translation, MVC model with flexible templating, unit testing, and caching. Sounds a lot like Drupal. We'll look at why Drupal is an ideal application development platform for apps beyond content management, talk about where Drupal can improve in these areas, and look at an example application.
Reviews the basis of using JavaScript within WordPress. How to load in scripts correctly and move PHP data into JavaScripts for later use. Presented at WordCamp LA 2012
Everything is Awesome - Cutting the Corners off the WebJames Rakich
The web is awesome despite it's detractors. But we can't forget our fundamentals when we're trying to forge ahead with new tech. This talk is about how to approach the building blocks of the web in a way that takes advantage of their strengths and avoids their weaknesses.
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)Igor Bronovskyy
09 - Express Nodes on the right Angle - Vitaliy Basyuk - IT Event 2013 (5)
60 вузлів під правильним кутом - миттєва розробка програмних додатків використовуючи Node.js + Express + MongoDB + AngularJS.
Коли ми беремось за новий продукт, передусім ми думаємо про пристрасть, яка необхідна йому, щоб зробити користувача задоволеним і відданим нашому баченню. А що допомагає нам здобути прихильність користувачів? Очевидно, що окрім самої ідеї, також важлими будуть: зручний користувацький інтерфейс, взаємодія в реальному часі та прозора робота з даними. Ці три властивості ми можемо здобути використовучи ті чи інші засоби, проте, коли все лиш починається, набагато зручніше, якщо інструменти допомагають втілити бажане, а не відволікають від головної мети.
Ми розглянемо процес розробки, використовуючи Node.js, Express, MongoDB та AngularJS як найбільш корисного поєднання для отримання вагомої переваги вже на старті вашого продукту.
Віталій Басюк
http://itevent.if.ua/lecture/express-nodes-right-angle-rapid-application-development-using-nodejs-express-mongodb-angular
Progressive Web Apps are one of the hottest things to come to the web platform in years, but how much of it is just hot air? When can you actually start shipping these things? Decades ago! In a hands on presentation, I'll show how PWAs are truly meant to be progressive - building on an evolution of web technologies nearly as old as the web itself, and still let you ship one of the most performant and cutting edge web apps around.
Burn down the silos! Helping dev and ops gel on high availability websitesLindsay Holmwood
HA websites are where the rubber meets the road - at 200km/h. Traditional separation of dev and ops just doesn't cut it.
Everything is related to everything. Code relies on performant and resilient infrastructure, but highly performant infrastructure will only get a poorly written application so far. Worse still, root cause analysis in HA sites will more often than not identify problems that don't clearly belong to either devs or ops.
The two options are collaborate or die.
This talk will introduce 3 core principles for improving collaboration between operations and development teams: consistency, repeatability, and visibility. These principles will be investigated with real world case studies and associated technologies audience members can start using now. In particular, there will be a focus on:
- fast provisioning of test environments with configuration management
- reliable and repeatable automated deployments
- application and infrastructure visibility with statistics collection, logging, and visualisation
Author: Oleg Gomozov, Senior Software Engineer
Agenda:
- Chose yours: flexible, fluid, adaptive, responsive
- Some data about units
- Media Queries Magic
- JavaScript practices
- Browser, please, help me
- Mobile first, how and why
- Tricks, tools and hacks
A short presentation given at the November Melbourne WordPress developer group meetup. The presentation covered how I approach responsive projects, included some of the tools that I utilise and some tips and techniques on how to avoid some common mistakes.
Derek Willian Stavis (Pagar.me)
Todo mundo diz que Webpack é só um module bundler. Mas o que é um módulo? O que é um bundler? Porque precisamos disso? Vamos caminhar pela história do desenvolvimento web para entender estes conceitos, e no final vamos dissecar a configuração e o output do Webpack para entendermos como ele funciona e como ele pode facilitar o seu processo de desenvolvimento.
Vale do Carbono Conference
Webpack is just a module bundler, they said. What they didn't say is why we need it, and what was the motivation that made us achieve what Webpack have been doing for us. In this talk we will navigate through the years of front-end development, ranging from 2003 to nowadays to understand this, and in the end, we will walk thought a complete Webpack project to understand how it works.
PrimeFaces, JavaServer Faces icin gelistirllen ve dunya capinda populer olan zengin bir arayuz kutuphanesidir. Bu sunumda PrimeFaces Bilesenleri, Mobil, Ajax Push, Tema Destegi gibi modullerin yani sira PrimeFaces ekibinin gelistirdigi yeni jQuery javascript kutuphanesi PrimeUI'da tanitilmaktadir.
This is a ‘sequel’ to the talk I gave at WordCamps last year; taking the principles I spoke about and putting them into practice, I will talk about how in Parsec, I made images responsive, lightened load time, and introduced Sass into the original theme from my book. “
At The University of Scranton, we recently completed a year+ long process to upgrade our user portal, were students, faculty, and staff login to find information and perform tasks. Moving from Luminis 4 to 5 proved to be a big project that required us to rethink a lot of processes, clean up the portal, and give it a redesign. In this talk, I'll be going of what we did- the good, the bad, and the ugly.
Wearable Technology: The Next Big ThingJoe Casabona
As more wearable devices (Google Glass, Jawbone Up, Fitbit, the Pebble Watch, etc) hit the market, it's important to understand what they do and how they are being used. At this talk we will answer those questions, how it's being used in higher-ed, and have a live demo of Google Glass and more.
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.
UiPath Test Automation using UiPath Test Suite series, part 3DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 3. In this session, we will cover desktop automation along with UI automation.
Topics covered:
UI automation Introduction,
UI automation Sample
Desktop automation flow
Pradeep Chinnala, Senior Consultant Automation Developer @WonderBotz and UiPath MVP
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
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
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualityInflectra
In this insightful webinar, Inflectra explores how artificial intelligence (AI) is transforming software development and testing. Discover how AI-powered tools are revolutionizing every stage of the software development lifecycle (SDLC), from design and prototyping to testing, deployment, and monitoring.
Learn about:
• The Future of Testing: How AI is shifting testing towards verification, analysis, and higher-level skills, while reducing repetitive tasks.
• Test Automation: How AI-powered test case generation, optimization, and self-healing tests are making testing more efficient and effective.
• Visual Testing: Explore the emerging capabilities of AI in visual testing and how it's set to revolutionize UI verification.
• Inflectra's AI Solutions: See demonstrations of Inflectra's cutting-edge AI tools like the ChatGPT plugin and Azure Open AI platform, designed to streamline your testing process.
Whether you're a developer, tester, or QA professional, this webinar will give you valuable insights into how AI is shaping the future of software delivery.
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
Let's dive deeper into the world of ODC! Ricardo Alves (OutSystems) will join us to tell all about the new Data Fabric. After that, Sezen de Bruijn (OutSystems) will get into the details on how to best design a sturdy architecture within ODC.
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.
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.
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
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.
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.
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.
18. The next era in designing for the web is a more
advanced, mature and intelligent one. It’s about
streamlining, semantics, great markup,
responsive or fluid design, great typography,
web fonts, content first, rapid prototyping and
advanced javascript. My argument is that html,
CSS and the browser tools we need have all
advanced us past the point of needing
Photoshop.
- Josh Long (rwdwp.com/94
)
18
29. <span data-picture data-alt="A photo of a
thing">
<span data-src="small.jpg"></span>
<span data-src="medium.jpg"
datamedia="(min-width: 400px)"></span>
<span data-src="large.jpg"
datamedia="(min-width: 800px)"></span>
<span data-src="extralarge.jpg" datamedia="(min-width: 1000px)"></span>
<noscript>
<img src="small.jpg" alt="A giant
stone face at The Bayon temple in Angkor Thom,
Cambodia">
</noscript>
</span>
29
34. ❖ iPhone 4, 5
❖ iPad 2 or new iPad
❖ Android 4.0+ Phones: Galaxy Nexus, Galaxy Note II,
S3 or S4, Droid Incredible (one of them), Droid DNA
or Razor Maxx
Devices
❖ Android pre-4.0 Phones: Moto DroidX, Evo4G
❖ Android Tablets: Nexus 7, 10, Samsung Galaxy Note
10, Galaxy Tab 8.9, Kindle Fire, Moto XOOM
❖ At least one Blackberry (Q10, Z10)
❖ At least one Windows Phone (Lumia or HTC 8x)
34
35. ❖ Broadband (wired or wifi connection)
Connectivity
❖ 4G (on multiple carriers if possible)
❖ 3G (on multiple carriers if possible)
❖ 4G and 3G while traveling
35
36. ❖ The device’s native browser (Safari,
Browser, etc)
Browsers!
❖ Chrome on Android and iOS
❖ Mobile Opera
❖ Dolphin
❖ Mobile Firefox
36
37. Slides will be at
casabona.org/events
Questions?
Discount Code: RWDWP with you order
from peachpit.com
37
Editor's Notes
Web Developer, Writer
Started Freelancing at 15
HS, College, Grad School
2 years full time, PT Fac
tell mt carmel story. Tell them to interrupt me and not to make users feel dumb
Out Dec. 16.
Presentation will be a teaser for the book.
casabona.org: Visit it on Desktop & Smartphone, and the same site will display 2 different ways.
***Just as much about big screens as small screens***
* Look at all of those devices (photo from bradfrostweb.com)
* Projected by 2015, 50% of American Adults will using mobile as main source for Internet. It already is that in other place, like parts of Africa and India.
* Mobile e-commerce traffic was over 50% and mobile was responsible for over 25% of purchases made on Thanksgiving in 2013.
* Recently the Galaxy Gear was hacked to include a browser.
BUT - RWD is more than Screen Resizing!
We want GOOD RWD.
That means EM breakpoints. these adapt to the user’s settings, not just set pixel widths
No arbitrary breakpoints based on device. then all you have is a website that looks good on 3 devices.
75% of users abandon a website after 5 seconds. And not everyone has fast internet! (I know; I was just in the Philly airport)
* REsponsive Design + Server Side Programming.
* Basically, do device detection on the sever end and display template files/section of code based on the results.
* One note: You cannot test RESS driven elements by only resizing your browser. You will have to use a real device.
* 2 plugins that can help: Mine & Jesse Friedman's
“Wireless Universal Resource FiLe”
This API give you access to a full list of devices and features you can get by using built-in functions ex: screenwidth, wireless,
There are open source, free, downloadable- but you need to update manually and they lag 2-3 months behind.
Monthly Subscription
There is a free version with limited capabilities
This is automatically updated for you.
built-in to WordPress
Does user agent testing.
I built a function that makes them work together.
Sidebar: Do error checking/catching.
**NOT different content…different layouts.
Perfect example usage: navigation…will look at later
In WP, we can even enqueue different scripts based on device.
It’s important to remember NOT to change the content though!
Also, know your users!
- From what class/type of devices do my users access the site?
- Are my users there to see what’s on the home page, or do they usually go to a different page?
- What information do I want to present as most important?- How tech-savvy are my users?
How do I do RWD?
I’m not much of a photoshop guy, so I never really designed in photoshop.
My tools: Paper, pencil, Code and the browser.
The mobile design bible, written by Luke Wroblewski
Start with the smallest screen! This will allow you to determine what the most important content.
Helps you avoid things like too many nav items, hiding content, and overloading the user
Lots of stats and UX info (one thumb, one eyeball)
Don’t hide or change content for mobile devices.
You can’t capture the essence of a responsive site with photoshop.
How do you choose what resolutions to mock up?
Designing in the browser let’s you rapidly prototype, and see what you need to do in real time.
This is how you determine breakpoints
Move your browser out until the content looks bad. When it does, that’s a breakpoint.
Start with lowest common denominator.
What about determining the site’s style?
talk about when to include JS (do I really need this?)
Tools like image-optim for shrinking images
tools like picturefill.js (we will look at)
Whole point of my book!
Too much to cover all of the points, but I will mention some of the more fun stuff, and even include some never release code from the book!
* HnC is bad. Don't use that one.
* With Jump to & Select Box I make use of RESS as to not load 2 different navs.
*
* Jump to technique with RESS
* Why? Now we don’t have to show/hide elements with CSS, meaning that users will see all of the markup added.
* Could do the same thing for Select box, but select will require custom walker (covered in my book!).
*Note about adding smooth scrolling with jQuery
Remember to style things nicely- especially the form! Make it easy for users to input date.
As far as rendering… I propose 3 possible methods:
-Incremental Loading (load only a few- requires JS)
-Pagination (may require extra loading; must load page each time)
-Separate page (I like this one)
Really tricky
* WordPress creates multiple versions of image when uploaded.
* You can even create more using add_image_size()
* There are libraries that will display images based on width- like picturefill.js
One proposed method for responsive images is a <picture> element where you can select images to display based on screen width.
This is a long way away, so Filament Group made this!
* We can use this technique with the multiple WordPress uploads.
* There is a lot that goes into this portion so I won’t go over it here, but it’s explained thoroughly in the book
* One Note- during research, I found that doing this for every image on the site on the fly…not very efficient (crazy, right)? At the moment, there is not a great way to do this- hopefully in the future.
* To combat this, you could use a short code, however, this would render the media uploader/inserter useless.
* At the very least, using jQuery, we can remove the width and height that the WordPress editor adds in.
This is a problem still being solved.
Aside from sizes there is retina issues, loading issues, and much more.
It will likely continue until there is some sort of browser support.
* Multiple Devices
* Multiple Connections
* Browsers on devices
You MUST test on devices!! Don’t just rely on your computer’s browser
That’s a lot of devices!
Use discretion of course; what are your users using?
Look for open devices labs, buy cheap devices, ask friends
There are tools like browserstack to help as well (also, Edge Inspect)
Not everyone will have super fast Internet connections.
Some people might even have…edge.
(net neutrality joke)
Not to mention desktop browsers…FF, Chrome, Safari, Opera, and (dun dun dun) IE.
IE: at least 9, 8 if your users need it. Remember: 9 doesn’t support media queries.