In this lab, you will learn about how to make your code reusable. You’ll learn about what it is, why you want to change your mindset to build code in a reusable way, and then how to do it. You are a professional web developer. It’s your career and/or business. You need to make money. Designing your code to be reusable is a strategy to reduce your time and thus costs over the entire lifecycle of the code itself. In other words, it makes you more profitable. To get started, make sure that you have completed Part 1 and 2 […]
Labs
Labs are hands-on coding projects that you build along with Tonya as she explains the code, concepts, and thought processes behind it. You can use the labs to further your code knowledge or to use right in your projects. Each lab ties into the Docx to ensure you have the information you need.
Each lab is designed to further your understanding and mastery of code. You learn more about how to think about its construction, quality, maintainability, programmatic and logical thought, and problem-solving. While you may be building a specific thing, Tonya presents the why of it to make it adaptable far beyond that specific implementation, thereby giving you the means to make it your own, in any context.
PHP Examples – Laravel & Symfony
As you build your PHP expertise, you will likely grow into other frameworks and applications outside of WordPress. Laravel and Symfony are two awesome frameworks. Many times, you can pull in the modules and packages from their libraries even into a WordPress application. Yes, that’s how well these frameworks are built. Let’s take a quick look at the namespacing in each of these frameworks to show you how it’s used in the wild. You can also take a look at code construction and architecture too, i.e. to further your software building skills.
Making the Collapsible Content Plugin Reusable – Part 3
One of our jobs is to build quality code that is reusable again and again without changing the codebase. Ideally, we’d like to configure what’s different and have the codebase the same for all of our projects. In Part 3, you will convert the Collapsible Content plugin into the ModularConfiguration design pattern by moving all runtime configurable parameters into configuration files Then the codebase will be made reusable. The actual implementation then is determined by the configuration file that’s loaded. This approach will save you time.
Laying Out the Theme’s Architecture – Part 2
In this episode, you will continue adding files to your new Genesis developer’s starter theme. You will be adding in the file PHP DocBlocks including the package name. You’ll learn about how to name your packages for the namespacing, which I show as YourCompanyName\ThemeName. Upon the completion of this episode, you will have the baseline theme file/folder architecture completed. This is now the shell of your theme, ready for you to start adding in the code into the appropriate buckets.
Handling Media Queries
The prevalent design pattern at the moment is to move the media queries into the partials and right where the components and styling attributes are. Why? It makes much more sense to have all of your styles in one place for each attribute/component. Think about it. Instead of having all of your media queries (responsive) styles at the bottom of the stylesheet, now it’s nested right with the attributes/components. No more having to jump around to find stuff. It’s all together within the module itself. That makes so much sense. Doesn’t it?
Migrate Site Footer & Widgets
Let’s continue now by working on the footer widgets and site footer area.
Migrate Content & Sidebars
Let’s migrate the entry content area, comments, pagination (which is really navigation), and sidebars. You will have three separate modules with when you’re done. You will continue improving your refactoring skills.
Migrate Site Navigation
Let’s work on the site navigation in this episode. This modular includes the base styles, primary, secondary, and accessible menus. You will continue migrating and refactoring.
Migrate Site Header
Did you do your homework? Well, let’s go through it together. I’ll show you how I migrated it and we’ll talk about different refactoring strategies. You can select the technique that works best for you. Then let’s create a new header color variable and then add that to the partial. Little-by-little you are cleaning up the styles. Tip: Think of the variables partials as configuration parameters for your project. You will also learn about why you want to refactor: Don’t repeat yourself. Don’t repeat yourself. Don’t repeat yourself. Write your code to be DRY (don’t repeat yourself). Remember: You don’t […]
Migrate Skip Links
Time to migrate over the skip links. Then your homework is to try to migrate and refactor the site header styles on your own. Then we’ll do it together in the next episode.