We recently completed making updates to our incident response plan for Drupalize.Me and I wanted to share some of what we learned along the way, and help you write your own. An incident response plan is all about being prepared. So that in the moment, under pressure, when everything that could possibly go wrong is going wrong, you can remain calm, cool, and level-headed. If you've ever had to write a social media message, or respond to a support request during an un-planned site outage you know how easy it can be to misstep—even if your intentions are good.
Release Day: Wrapping up PHP Part 3
Blog postWe've covered a lot of material in the three parts of PHP for Beginners. Today we are wrapping up Part 3, on databases. This week's tutorials are more focused on the PHP side of things, taking a look at PHP function arguments and query parameters, along with an example of how PHP function scope works. We finish up this series with a very important lesson on SQL injection attacks, and how to make your PHP database code secure.
January Content Update
Blog postHappy 2015, members! We’re welcoming this new year with new Drupal tutorials. Here’s what you can expect over the next few weeks.
Staring at a blank screen, notebook, or any other space flooded with emptiness can conjure feelings of worry, confusion, and definitely fear. Yet this is a ritual anyone who considers themselves a creative willingly puts themselves through on a regular basis. Some may dread these less than pleasant feelings, but I am sure there are also many who embrace them, and I am one of them. Full disclosure, creating something is a scary process for me, and that's ok. From beginning to final product there are plenty of uncomfortable moments that I find extremely beneficial and rewarding to a successful creative process. Hopefully after I share how these often referred to as negative emotions are helpful, you, too, will see how essential they are to your creative process, and why they should be embraced and not avoided.
This week we're continuing PHP for Beginners Part 3 , which is working with databases in PHP. Last week, we started off my covering the fundamentals of SQL and working with a MySQL database. Today we hook this up with the PHP site we're building. Additionally, we have a bonnus lesson YAML.
YAML, which stands for YAML Ain't Markup Language, is a human-readable data serialization format that's been widely adopted in a variety of use cases in Drupal. Anyone wanting to write modules, or themes, for Drupal will need to understand YAML syntax. Even site builders are likely to encounter YAML at least in passing as YAML is the data-serialization format of choice for Drupal's configuration management system. Good thing it's pretty easy to learn even with the most basic of programming backgrounds.
This tutorial will look at the YAML data format and provide examples of how to write and read YAML. Starting with an introduction to the language's syntax and some of the strengths of YAML. Then looking at the difference between scalar data types like strings and integers, and collection data types like lists and associative arrays.
Since YAML in the Drupal world is read into PHP and ultimately becomes a PHP data structure that we can use in our own code we'll also look at how the YAML we write in a .yml file is represented in PHP data types. To do this we'll use the YAML Sandbox module that provides a handy textarea into which we can type YAML and have it parsed into PHP data structures.
Learning objectives
- Explain what YAML is and its strengths as a data serialization format
- Create scalar key/value pairs in YAML
- Create lists, and associative arrays using YAML collections
- Understand how the YAML you write is represented in PHP
Tips
- In Drupal, use the .yml extension and not .yaml
- Ensure your code editing application is configured to use spaces (preferably 2 spaces, as per Drupal coding standards), not the tab character when the TAB key is pressed. If you have tab characters in a YAML file within a Drupal environment, a fatal PHP error will be thrown and you'll see a White Screen of Death (WSOD).
- Copy and paste from an existing YAML file to ensure the formatting is correct, and edit from there.
Additional resources
- http://www.yaml.org
- YAML Sandbox module
- Find other tutorials and external resources related to YAML on our YAML topic page (Drupalize.Me)
Drupal 8 Upgrade Path
Blog postAll this excited talk of Drupal 8 has a lot of people dreaming of the day they get to start working with it. Some people get to build new sites from scratch all the time, but a lot of Drupal work out there is maintaining and upgrading existing sites. How will the Drupal 8 upgrade path work, and will it be as shiny as Drupal 8 itself? Well, upgrades will be radically different in Drupal 8, and I'd say it has all the shiny you could possibly want.
So far from PHP for Beginners, Part 1 and PHP For Beginners, Part 2, we have a basic site that uses a JSON file to create a list of pets in our store. Now in PHP for Beginners, Part 3, we're going to dive into the world of databases and PHP. We'll get an overview of working with MySQL databases and how to connect them with a PHP-based site.
Podcast Episode 54: D8 Accelerate
Blog postWhat is D8 Accelerate? In episode 54 of the Drupalize.Me Podcast, Amber Himes Matz chats with Angie Byron and Holly Ross about this new pilot program from the Drupal Association to put $125,000 of community funds toward resolving critical issues and accelerating the release of Drupal 8.
December Tech Update
Blog postHappy holidays, members! We’ve been working hard this month, and we have lots of new features to show off. Read about them here!
Got some Drupal 7 modules that use the Form API lying around? Want to learn how to port them to Drupal 8? The process could just be the crash course you've been looking for in Drupal 8, object-oriented, module development.
Happy Release Day! Today we are wrapping up the Getting Started with Responsive Web Design in Drupal series. We're going to look at a responsive Views-based slideshow plugin based on the Flexslider Javascript library and refactor our Views Slideshow with Flexslider instead. Then, we're going to tackle a variety of "clean-up" tasks. It's all about the details, right? First, we'll update the styles of our search form so that it doesn't break out of its sidebar region. Next, we'll take a critical look at our header and navigation content on a mobile-sized screen and make room for more important content as well as update the styles of our responsive menu provided by a contributed module to better match our site's design. Finally, we'll look at an option for making our content contained in an HTML table more reader-friendly on smaller, but important, devices. We'll also address a problem of up-scaled images and have a bit more fun with media queries.
Some of the content that's been added to our case study site isn't responding ideally as the viewport size increases and decreases. We have an HTML table that is a bit too flexible, making the columns too narrow for the text inside them to be very readable. The images in our slideshow are presenting us with a problem when the screen size gets too big: the images are scaling up and losing their quality in the process. To address these miscellaneous problems, we'll change how our content is placed, find some new breakpoints, and add new media queries for our grid_6 regions. We'll also learn some CSS tricks that will transform our table data into lists, making it more legible and sensibly presented on smaller screens.
Additional resources
https://github.com/DrupalizeMe/demo-rwd-7x (checkout branch 14-cleaning-up)
As we design for mobile, we want to look critically at each component and what it's communicating or how it's adding value. Now that we've refactored our theme to be more mobile-friendly, some elements in our header appear redundant when viewed in a narrow, stacked content column. This is causing our header elements to fill up that important initial screen on mobile. We want to ensure that our valued mobile users get more content and fewer redundant header elements when the page first loads.
In this lesson, we'll identify a breakpoint where the header gets too cluttered with elements essentially communicating the same thing. Then we'll add a new set of media queries, creating styles that will present a more mobile-friendly first impression of our site.
Additional resources
https://github.com/DrupalizeMe/demo-rwd-7x (checkout branch 13-mobile-friendly-header)
In the original theme, the width, margin, and padding of the elements that make up the search component are set using pixels. Since the width is static, it's breaking out of the sidebar region when the screen size is small enough.
In this lesson, we'll refactor the styles in the search form so that it flexes with its parent container, instead of breaking it. In working through this example, you'll learn the merits of keeping components flexible and respectful of their parent containers.
Additional resources
https://github.com/DrupalizeMe/demo-rwd-7x (checkout branch 12-search-form)
Our image gallery plugin has long been known to be barely navigable on a small screen. Let’s fix our images and replace our photo gallery plugin with a responsive image slider that will work on small to large screens. We'll swap out Views Slideshow in favor of FlexSlider in this lesson.
Additional resources
https://github.com/DrupalizeMe/demo-rwd-7x (checkout branch 11-flexslider)
YouTube is a great service for storing and managing your videos. While this is handy, many people want to be able to display their videos within their own website as well. In this tutorial we'll see how the Media, Media Internet Sources, and Media: YouTube modules can help give you a nice, seamless way to integrate YouTube videos into your site, and give really nice control over how those videos look, along with some built-in media management tools.
Podcast Episode 53: Coding in Schools
Blog postGetting coding into the curriculum in Minnetonka Schools
Today, we're releasing the next installment of our series, Getting Started with Responsive Web Design in Drupal with me, your hostess, Amber Himes Matz. Up until this point, we've been focusing on making our site's layout more flexible and ensuring that our typography is expressed in relative units, not pixels. Now, we'll explore a newer feature of CSS that enables us to create blocks of CSS that apply under certain conditions, called media queries. We'll learn about viewport meta tags, breakpoints, flexible images and video, and a Drupal contributed module that provides mobile-friendly navigation.
So far, we've adapted our layout to be flexible and fluid using relative units like percentages and ems, instead of absolute ones, like pixels. The problem is that smaller devices will often use resolutions much greater than the actual size of the screen size or viewport. So while our relative sizing is technically working, it's not going to be terribly useful or make our content more readable and accessible until we add an important tag to the head of our html template file: the viewport meta tag.
By adding the viewport meta tag to the head of our html template file, we're letting the browser know that we want the viewport size to be the size of the device, not some huge resolution more suitable for a 17" monitor, for example. This is a small but critical step in implementing a responsive design. Without it, our hard work of converting to relative units just isn't going to pay off.
In this lesson, you'll learn how to add a viewport meta tag to the head of all html pages using a special Drupal template file that we'll create. Then we'll step back and admire the results using our mobile emulation tools.
Additional resources
https://github.com/DrupalizeMe/demo-rwd-7x (Checkout branch 06-viewport-meta)
Written tutorial based on this video