Aubrey Portwood

JOB TITLE: Senior Engineer
YEARS AT WEBDEVSTUDIOS: 6+

Six years ago I landed my dream job, yep, right here at WebDevStudios.

I actually started off as a Frontend Engineer, but less than a year later I switched to being a full-time Backend Engineer. I was then promoted to Senior Engineer, and it wasn’t long until I eventually made it to Lead Engineer!

That’s when my story got interesting.

You see, I wasn’t cut out to be a lead. It was not because I wasn’t capable but simply because my heart wasn’t in management. I wanted to be a leader on projects, but I wanted to keep my hands dirty, do the work, and write the code.

If you’re dying to do more, want to keep your hands dirty, but stay out of management, being a Senior Engineer might be the right calling for you. Pay attention to these points throughout this blog for tips on making the move.

WebDevStudios (WDS) understands what it means to love your work; and so when I went back to being a Senior Engineer, I found my sweet spot. Being a Senior Engineer is seriously the most fun position at WDS, if you ask me. Keep your eye out for WDS Senior Engineer job postings here.

So what does a Senior Engineer at WebDevStudios do anyway?

Leads from the Middle

I had never heard of this concept until our Engineering Manager, Justin Foell, defined it for me. Just because I didn’t want to be a Lead Engineer didn’t mean I didn’t want to lead—quite the opposite.

I just didn’t want to manage.

I wanted to be in the trenches and get my hands dirty with my friends. Being in the senior position for the second time gave me an opportunity to learn what it means to lead from the middle. Leading from the middle is made up of a few ingredients:

• Experience
• Willingness
• Awareness

On any given project, you can count on a Senior Engineer to know just about what everyone’s thinking: from the client, to the Project Manager, to the rest of the engineers, to the Lead, and up. A Senior Engineer has their ear to the ground and is intently invested in knowing what’s going on at all times in the group. That’s what makes them leaders from the middle.

Lead by doing (don’t just wait to be told what to do—call your shots), and help keep projects on track. 

Helps Pave the Path

I am a natural organizer and communicator—whether that’s code, Slack, my office layout, or a Jira board. I’m the type of person who gains comfort from executing a clear and well-defined plan. Therefore, part of my time is spent helping my favorite people at WebDevStudios: Project Managers (PM). 

Not all PMs know node from git; so as a Senior Engineer, I’m often helping PMs get a technical grasp of the engineering side of a project. This usually involves helping a PM understand the technical details of a bug, plan out a new feature, organize a small team of engineers, or asset ways to keep a project thriving for our clients. I’ve also helped out on a project plan or two.

When a Project Manager has a question, have a helpful answer.

Senior Engineers have been around the block a few times.

If you’re a senior, there’s probably one single fact that can be said about you: you’ve been around the block a few times.

You’ve seen things crash and burn, and you’ve seen things flourish and thrive! You were once upon a time a really stressed out individual, but have since learned how to find perspective, keep calm, and march on.

At some point along the road, you’ll simply reach a level where you start to notice the patterns from project to project, the seasons of a year, and connect with the ebb and flow of working in the field we do. Time helps define and refine a senior engineer. So, take a walk around the block a few times before jumping into this role.

Learn from your past, give it time, and be open to new and challenging experiences.

You Stuck?

I like to think I’ve mastered the art of smashing the blocking pattern. Is WP-Rocket’s API not able to access the site because we have to keep basic auth enabled? Well, can we maybe allowlist WP-Rocket’s IP’s so it can get through? Let’s open up WP Engine chat and figure that out. Can’t get an ACF field to work the way you want? Can we inject some JavaScript to stop its default behavior and hack it to do what we want? Something important come up and can’t get connected to the right person?

I think you get the point.

A big part of how a Senior Engineer helps out is putting their experience to good use helping others get unblocked and back to rocking!

Have a nothing is impossible attitude and help others find answers and their confidence.

Makes Noise

I have been accused of being an over-communicator—and I’m fine with that.

I believe communication is the oxygen of a successful project and company. I think an important part of being a Senior Engineer comes from your willingness to make (and put up with) some noise. Whether that’s pulling someone out of their comfort zone (usually yourself), the zillions of pings in Slack, documenting “all-the-thingz,” saying what everyone is thinking on a Zoom call, or asking for accountability from others—as a Senior you’re going to have to make some noise.

Be the one to speak up when everyone else is silent, and remember the squeaky wheel gets the grease.

Mentors Others

I remember a time when I was always anxious and nervous about what to do next, whether my code was good enough, or whether I even belong here. Again, I’ve been around the block… not everyone has.

Often other engineers need a different mirror to look at themselves in, as a Senior, you’re that mirror. The best cure to imposter syndrome is a Senior Engineer who can relate to their fellow engineers and let them know it’s okay. Mentoring (or just being an experienced friend, as I like to call it) is one of my favorite roles as a senior-level engineer.

I have built many of my strongest friendships at WDS mentoring (or being mentored by) others.

Relate to others more; judge them less.

Does the Hard Stuff

If you thought you were going to get away with learning only about the cool things of being a Senior Engineer, you’re reading this blog post wrong!

Being a senior requires a great deal of courage, strength, and endurance as you are often called in to do the hard things. Remember, though: it’s because you can!

Being willing to drudge through the dirt and mud is all part of being a Senior Engineer. However, you know there’s light at the end of tunnel (remember, we’ve been around the block a few times), and you have the experience to know you will get through hard times and come out the other side alive. (With scars to show off when it’s all said and done.)

Volunteer to do more hard stuff (don’t worry; you’ll come out alive).

Turns Things Around

The most rewarding part of being a senior is being able to turn things around.

Nothing is better than seeing something going south turn around for the better, and often Senior Engineers are at the heart of helping that happen. No one wants things to go wrong, but when they do, you need to turn things around—and usually quickly!

Getting a project back in balance, or fixing a critical time-sensitive bug can be nerve-wrecking, sure, but seeing it all turn around makes it all worth it. The super power of a Senior Engineer is the ability to turn things around.

Find valuable goals on projects and help others focus on them.

If you’re a Senior Engineer I’d love to hear what you think being one is all about. What did I miss, or what do you think I got wrong? Please leave a comment.

The post WebDevStudios: Day in the Life of a Senior Engineer appeared first on WebDevStudios.

Note: You can check out the videos below, but you can also watch it in a YouTube Playlist (or save for later). All the same notes are in the video descriptions on YouTube and with links to specific times in the videos, which may be helpful.

Introduction and Running the Addon Generator

https://www.youtube.com/watch?v=j0gVm3LDZ-Q

After a quick introduction, I explore what it will take to create an addon for Local and start off by running the create-local-addon addon generator.

Links to know:

• Repo
• Generator
• NVM

Please note that for create-local-addon to work, you must be using the latest version of node. I recommend using NVM, but in this video I am running the most stable version.

00:10 Introduction
01:36 What you’re going to need
02:50 Node, NVM
06:00 Starting by running the Local Addon Generator Tool: create-local-addon
10:35 Reviewing the result and symlinking

Explore the Generated Code, Built Tools, and Coding Standards

https://youtu.be/NQAMQVYeAGE

In this video, we look at what the generated addon gives us, explore build tools, and how to work with Local via Electron Inspection Tools/Develop tools.

00:05 Reviewing the generated code and tweaking generated code
01:30 NPM scripts and build tools
03:30 Running Chromium (Electron) Devtools (more later on in the video)
04:00 NPM run watch
05:45 Installing Yarn
06:05 NPM run build and NPM run prepare
06:35 Coding standards and babel-eslint fix (boring)
16:05 Review of tagging in the repo and how to push to a repo
18:39 Deeper overview of the generated code in src/
19:19 Review of main.ts (Note: I forgot to clear this file out; see result in repo.)
21:11 Hooks
21:46 Look at what the generated boilerplate does by default
23:10 Using Chromium/Devtools and console.log for examining data and the build tools

Build the Addon

https://youtu.be/R7pRlOxBgvA

In this video, we build our actual addon that queries the database for the active theme and shows it in the overview panel and explore the methods our component has from the generator and what they do.

Links to know:

• Local Content Hooks
• setState
• TablePlus Example
• MySQL Module

00:07 What our addon will do (feature decision)
00:40 Dive in and start building our addon and reworking the boilerplate into our own component
02:42 Keeping super(props) around
07:50 Please see the repo on the final content for main.ts, as there was a lot of code removed
09:07 Looking up the hook we need
11:33 Adding our hook
11:56 Exporting hooks and exploring context variable
13:42 Site variable and other React variables
15:40 Passing variables to the component
19:14 Looking at the site object
20:07 Playing with the render() method (“Hi”)
21:27 Start building the content of our component
22:28 this.state of the component (I explained poorly)
23:27 Getting the active theme via MySQL
49:29 Modifying state
50:20 Working results, what did we do?
58:27 componentDidMount and componentWillUnmount methods and improving the result
01:03:55 setState
01:11:40 Cleaning up lib/ (and you might break it, just like I did)

Branding Your Addon, Distributing It, and Fixing Bugs

https://youtu.be/_sEbz17Yqkk

In this last video, I go over how to brand your addon, distribute it, and along the way, we even find a bug, fix it, and push out a new tested release.

00:05 Cleanup and customization
04:43 Packing up your addon for distribution
10:42 Testing your package
13:20 Finding a “bug” with our addon and fixing it
14:32 How to re-symlink your development addon
19:42 Fixing out new bug and releasing a new version
27:36 Binding this keyword
32:42 Releasing a new version
38:35 Conclusion

Good luck creating your addon for local. Hopefully, these videos will help. Remember, you can always return to the playlist and learn at your own pace. For more technically savvy content like this, be sure to read our blog daily and sign up for our email newsletter.

The post How to Create an Addon for Local by Flywheel appeared first on WebDevStudios.

Tasked with helping someone who knew very little about HTML, JavaScript, CSS, or web programming languages build a university website was a bit daunting. We had a big project ahead of us, but I knew exactly what would help… WordPress!

I had used WordPress for some personal projects in the past because I found it easy to use, build on, and maintain. Back then, WordPress was a content management system (CMS) built just for bloggers and powered very few sites that weren’t blogs. But even back then, I knew WordPress could accomplish more than just blogging.

WordPress now powers over 40% of the web, including more than just your average blog. That’s because the way that WordPress is built, you can do almost anything with it, from blogging, to pages, eCommerce sites—really anything you can dream up. WordPress has continued to power the website I helped build at the previously mentioned educational institution, and that was over 12 years ago! Eventually, WordPress became the university’s primary CMS a few years later. Faculty and staff found it easy to use and IT departments found it easy to maintain. It’s no wonder universities like Wharton University of Pennsylvania, Harvard, Boise State, Georgia State, and USC all use WordPress to power their web presence.

Need more convincing? Let me give you 10 great reasons to use WordPress for a university website.

1. Ease of Use

If you’ve ever managed web content before, the first thing you’ll notice is how easy WordPress is to use. It feels natural, makes sense, and simply put: it just works. Want to create something? Just hit the Add New button, add a title, write your content, and hit Publish. It’s that easy. Want to edit later? Just click Edit and save your changes. WordPress is open-source, and despite what you might have heard about open-source software, all that really means is that lots of very professional, highly-skilled people have helped build it. That makes it the best and most capable CMS in use today on the web.

2. Easy to Learn

WordPress is used everywhere, from bloggers to small and even enterprise businesses. So many different kinds of people have used it to do so many different things that you can almost figure out how to do anything with WordPress with a few keystrokes on Google.

Through tools like the WordPress.org Support Forums (where you can get free support on just about anything), WordPress.tv, and many more resources available on the web, you won’t ever feel lost trying to do something amazing with WordPress. WordPress is an open and inviting community, not a locked down company where you have to dial up support, wait on hold, and jump through hoops to get assistance. WordPress lets you help yourself.

Want to learn even more? WordPress hosts annual conferences (usually at very low cost) around the world called WordCamps. Every WordPress user, no matter level of experience, is invited and welcomed to attend.

3. Roles, Capabilities, and Security

WordPress comes with a simple-to-understand role system that gives you complete control. This is especially helpful in educational and university settings where multiple people may be logging in to work on different areas of the website. Because every user has a role and fine-grained capabilities, you can ensure that there isn’t content chaos happening on your higher education website.

These roles and capabilities are also highly customizable. Just because it’s simple to start off with doesn’t mean you can’t also get very detailed and customize every facet of what your users have control over and what they do not.

WordPress is also very secure because it’s open-source. Aaron Campbell of the WordPress Security team has a great presentation that explains exactly how and why WordPress is as secure as it is.

4. Branding Consistency

One thing you’ll find useful right away is that you are more in control of branding consistency. Because WordPress has a de-coupled theming system, you can distribute easily downloadable and installable themes that can be used at multiple department sites. Or, if you use Multisite (see reason number seven), branding can be even more consistent. This also means that faculty and staff don’t have to muck around with HTML and CSS anymore, helping you keep web pages properly branded and well-built.

(Branding consistency was one of the biggest challenges at my university, but out of all the sites I built, they were always the most brand compliant because the various departments all used the same theme.)

5. Freedom and Customization

WordPress was built to be highly customized. With its hook and filter system, you can get WordPress (and any site built with it) to change and do just about anything you want when and where you want it. And, since you aren’t locked behind proprietary NDAs or some other company code, you can make changes when you want, done by whomever you want (like us), the way you want, and when you want it. (Oh yeah, and no waiting!) Because WordPress is the most popular open-source CMS, you’re also never bottle necked or locked into any one company for hire (but we’d love if you hired us!).

6. LMS vs CMS

WordPress has come a long way since my last class in college. It used to be that you would maintain your Learning Management System (LMS) or eLearning system separate from your CMS system. Your content and your learning materials were in totally different environments, and often sharing resources between the two got really messy. Not to mention the same issues that came from using proprietary LMS systems (usually some mess built on Java) couldn’t be customized and tweaked to your unique needs.

Those days are behind us. Today your learning materials and content can live under the same house in WordPress. With tools like LearnDash, LearnPress, Sensei, and CoursePress (just to name a few), creating learning content is a breeze and works in-tandem with your content and users, since they all work within the same system. Plus, any of these tools can easily be customized and added by our highly knowledgeable team, given that all these solutions are also as highly customizable as WordPress itself.

7. Multisite

WordPress has a unique feature that lets you run multiple sites on one install called (you guessed it) Multisite. This allows you to set up multiple departments and multiple sites, while having a single library of users. This also allows full customizations on each site (if you want it), and even lets you control them all with administrative users.

Using Multisite also has the benefit of using a single environment for your install and reducing maintenance responsibilities since all your sites run on one stack (one hosting environment). University administrators that have had an employee leave their educational institution know how much work goes into removing them from multiple environments, websites, etc. With Multisite, you can control a single user across your entire network of sites with ease. Lastly, Multisite really shines when it comes to code. Since all your sites are using themes and plugins that you control in one simple location, you can count on all of your websites working seamlessly.

8. School Directories, Profiles, and Groups

Every user has a profile they can edit in WordPress. Adding custom fields are limitless and aren’t controlled by some limitation that you would normally encounter with a proprietary platform. You can control who can edit what fields because WordPress has roles and capabilities built in. This makes building a directory of users quite simple since all your users are right there in a single place, and it’s all super easy to manage.

Want to go a step further? Tools like BuddyPress can extend WordPress into a private (and even public) social media experience with groups, discussion boards, private messaging, and more.

9. News and Social Media

As mentioned before, WordPress was originally built for blogging and news. That means WordPress comes complete with RSS feeds, post scheduling, and commenting all built in. WordPress is full of plugins you can use to connect your content to your social media. At WebDevStudios, we can even customize these tools and build custom plugins that communicate with social media APIs to do even more.

WordPress also loves embedded content from social media and other platforms. Want to embed a tweet? Just paste the link. A YouTube video? Just paste the link. Instagram post… I think you get the point. WordPress will take care of all the rest. Say goodbye to copying HTML codes that fail to work years down the road due to changes in embedding codes. WordPress automatically figures things out and makes sure your social media content shows correctly on your site.

10. Maintenance Is Easier

Easy maintenance is probably the biggest reason to rely on WordPress for a university website. By running all your sites on WordPress (especially with features like Multisite), the time and resources you put toward maintaining your site will decrease. WordPress continually releases new updates with enhanced features, security fixes, and keeps users updated. Many administrators can perform updates themselves, but for those who need assistance, our WordPress maintenance company is designed to do it for you. So, instead of maintaining multiple CMS platforms (and even custom code), multiple hosting environments, supporting multiple faculty and staff using different platforms (requiring many tiers of training and support), just use WordPress! It’s that easy.

Let’s talk about WordPress!

Seven years ago, I chose to pursue a career in WordPress because I knew it was the future, and it has been, and it still is. If you would like to talk about how WordPress can help your university, school, or higher education institution, contact us to start a discussion about how we might be able to help. If you’re already using WordPress, WebDevStudios is one of the top enterprise level WordPress shops. We’ve done enterprise level work with companies like Microsoft, Discovery Channel, and the YMCA. We’d love to partner with you!

The post 10 Reasons to Use WordPress for a University Website appeared first on WebDevStudios.

1. How can I break this?
2. Where’s Murphy hiding?
3. Who do I trust?
4. What’s dangerous?
5. What are the real limits?
6. Who is this for?

For example, what could go wrong with this example?

<?php _e( 'What could go wrong here?' ); ?>

Well, it turns out, a lot.

Have you ever tried breaking this by adding malicious scripts in language file? Turns out an innocent function, like this, opens a huge opportunity for people to break things. This was my own revelation a few weeks ago, and it dawned on me that I do not spend enough time trying to break things and learning the skills I need to detect these hidden opportunities in my code. The first step was simply realizing that with every new feature, comes new opportunities, but the following are a few steps I’ve been taking before I complete and turn in any new feature.

How can I break this? (Go break it)

During the drudge of daily tasks and code commits, we often can overlook the need to go in and actually break things we build. The definition of hacking isn’t necessarily malicious; it’s simply taking something and re-purposing it for a different reward. MacGyver was famous for this kind of hacking! That said, hacking is commonly used to break things, and that’s what we’re looking to fix, which is why we should try to break our own stuff.

It takes more than just trusting functions and methods to get the job done. You have to actually get in there and try and break what it is you just made. I feel we aren’t encouraged enough to go in there (and especially spend the time) and be a hacker. But I call all developers out! Become a hacker daily! Break your stuff! In doing so, you are going to build better products, serve your clients better, increase the reliability of your company, and, ultimately, become a better developer.

I also encourage CEOs, business owners, leads, and project managers to change the rhetoric behind security to go beyond just coding, but making the actual act of hacking your own solutions a part of the development process. Tell your developers to ask themselves, before turning in a task or pull request, “How can I break this?” And give developers permission to take the time to become a hacker.

Where’s Murphy hiding?

Anything that can go wrong, will go wrong. – Murphy’s Law

So we’re trying to hack our new feature, and we find a way that a user can pass a combination of query arguments, and somehow, logged in as a subscriber, could possibly run a server-intensive script we just built over and over. I feel (admittedly, through my own experience) we tell ourselves too much that they would never figure out how to do that, and we move on. But someone will!

I’ve just created a problem that will happen in the future. Thinking of these findings as problems that will undoubtedly happen, no matter how unlikely we think it is, will help us keep the internet and clients safe. It allows us to strategize.

Who do I trust?

Developers can be too trusting, and we shouldn’t be. Never trust anyone.

<?php _e( 'What could go wrong here?' ); ?>

In our example here, we might admit that the only one who could really cause a problem are the people who translate. Maybe they’re our own people, maybe they’re strangers, or maybe they’re future translators that a client hired six months down the road that know nothing about WordPress. Whoever it is, I say, they automatically get the “I don’t trust you” stamp of non-approval. It’s strange, but developers have to live in a very untrustworthy world, and we’re better developers for it! Having an skeptical approach will lead you to creating more secure code and features. Take your paranoia and make something rock solid.

What’s dangerous?

In the spirit of Murphy’s Law and trusting no one, you have to see information itself as a potential transmitters for viruses, illnesses, and things that cause bad things to happen and blow up the Internet. Data and information are dangerous! By shifting your view of information to something dangerous, and hiding some disease inside, we can be better devs.

An example.

$image = get_the_post_thumbnail();
echo $image;

In this example, we might view $image as completely innocent and trustworthy.

But it’s not.

Did you know that get_the_post_thumbnail() has a filter? Yeah, it’s post_thumbnail_html and anyone can filter the output and push out a harmful script! $image is dangerous; variables are dangerous! How do you know someone with server access didn’t inject a Must-Use plugin that filters that output?

If we put on our Hat Of Mistrust, we’ll be aware that leaving that variable alone is risky, and take action:

$image = get_the_post_thumbnail();
echo wp_kses_post( $image );

This should allow img tags that are allowed in the WordPress post editor, and if anyone tries to inject a harmful script, it won’t let them. We need to start seeing information as potentially dangerous, and ask ourselves if it is, because we don’t know all the filters or ways people can turn information against us. Using critical thinking and strategy in the ways we work helps us stay one step ahead of people who either don’t know or possess malintent.

If we were really paranoid, we might write something like:

$image = get_the_post_thumbnail();
echo ( is_string( $image ) && stristr( $image, '<img' ) ) ? wp_kses_post( $image ) : '';

What are the real limits?

Another question I think developers rarely ask themselves are, “What are the real limits?”

Really thinking about this question can produce interesting answers.

For instance, what is the limit of get_posts? At first, you might think, well -1 (I did). Set that posts_per_page to -1 and we’ll get all the things, yeah baby! But, a smarter developer might find that…

• The server’s execution time is a limit
• The server’s memory is a limit
• 15, the limit is 15; there will always be 15

We should be thinking about real limits, not just limits in code, and what happens when these limits are reached. Like the server’s execution time or memory limits resulting in a 503. Or, getting fifteen posts–no harm there, right? Have you ever asked yourself how many posts_per_page actually result in a timeout or a 503 on your server? It’s a good question.

Our job as developers is to eliminate the harmful effects of reaching real limits and we need to be aware of what these limits are and make sure we’re not breaking them.

Who is this for?

The last question I pose developers to ask is,

“Who is this for?”

I think every feature should have a name associated with it. Is it all administrators, or all authors? Is it just Jane or Joe? Is it the United States? Are they English speakers or Spanish speakers? Who are these people!?

Knowing (or even guessing at) who will be using our features, by giving our features ownership, helps make sure we’re prepared to create features with privilege in mind.

Even if your answer is “everyone,” we probably should be looking hard at the detailed, real time answers. For instance, “everyone” includes many languages; how many Spanish speakers need to use your product? Do you have a plan to have your content translated? What about A11y? That includes everyone too! Thinking of your features as privileged and belonging to someone helps us take more responsibility with our features, who has access, and who shouldn’t. This also allows you expand your reach and make sure that people who might otherwise be excluded in a generic “everyone” can access what you made.

What about you?

Do you have any tactics that help you build more secure features? What are some ways you work secure features into your build?

The post The Six Questions Developers Need to Ask Before Turning in Tasks appeared first on WebDevStudios.

Please note that this post isn’t meant to be evangelical; take what works for you, what resonates with you, and leave out what doesn’t.

These are some tenets that have helped me be a better developer (and all around better person!):

Employing Reason

The first rule is to keep an untroubled spirit. The second is to look things in the face and know them for what they are. –  Marcus Aurelius

To a Stoic, virtue is looking at life with perfect reason. Stoics believe that the only thing that brings you happiness in life is your ability to use reason, and nothing else. Stoics believe that if you want to be happy, you have to employ reason and that it is the only thing in life that is good.

Why? Often times things occur and we look at it simply at face value. All too often our initial reaction to something is based on just how we feel. When feelings of fear, anxiety, or even love happen we often take them this way and we aren’t really looking at them reasonably for what they are and end up reacting to them badly. Because Stoics seek to use reason instead of pure emotion, they are often misunderstood as emotionless and unfeeling. But in reality, Stoics do not shun emotion–only emotions that have not been reasonably thought through, and so good Stoics are seen as calm and never seem controlled by their temperament.

Just reacting based on emotions alone, in Stoic thought, is a vice that brings you grief, simply because it lacks reason. Next time you have a negative feeling about something, try employing reason and see if it makes you feel better.

Employing Indifference

The materials are indifferent, but the use we make of them is not a matter of indifference. – Epictitus

Stoics have a label for things that are neither good nor bad; they call them indifferents. The only thing good in life, to a Stoic, is virtue, or using your mind to apply reason; everything else is indifferent.

For example, if my computer is suddenly not connecting to the Internet (we remote workers know how this feels), the “indifferents” in this example are my computer, my ISP, and the guy on the help line. We might tend to think that these things are to blame for us being happy or not, but if we look at the Stoic definition of indifference, we can clearly identify that these things are not directly to blame for our tranquility. Again, it is the application of reason, or the lack of it, that controls our tranquility. Therefore we can’t get angry at these things.

The idea is to, first, identify these external things as indifferent (not directly to blame for our happiness or grief). Through this practice, we’ve clearly identified that chucking our computer out the window or ripping the help-desk guy a new one is not going to help us be happier, resulting in possibly a computer that is in once piece and a more pleasant and useful call to the local ISP.

Applying the practice of first identifying the indifferents has helped me avoid a lot of initial frustration. When things go wrong, we tend to take our finger out and point at other people, things, and events as the cause for our unhappiness. A Stoic is taught that this is untrue, and that the effort of pointing the indifferents helps us realize it faster. What you’ll find is that people, things, and unexpected events don’t usually cause you to be unhappy anymore. Try this practice out next time Windows installs hundreds of updates when you turn your computer on (this does not apply to Mac users, obviously).

Employ Social Duty

…he and I were born to work together, like a man’s two hands, feet or eyelids, or the upper and lower rows of his teeth. To obstruct each other is against Nature’s law… – Marcus Aurelius

Stoics place high importance to the duty towards our communities. The Stoic call to live in accordance to nature calls us to be good social beings. Nature has made each and every one of us highly social beings. We have language, writing, text messages, satellites circling the planet, and, of course, HipChat. A Stoic, therefore, looks at their life in proximity to the communities they are in. But that doesn’t mean that we all just love each other all the time, right? Conflicts and disagreements come and go. But Stoics spend time constantly reminding themselves to play their part in the community and remember that we’re all here to work together in the end.

Begin each day by telling yourself: Today I shall be meeting with interference, ingratitude, insolence, disloyalty, ill-will, and selfishness – all of them due to the offenders’ ignorance of what is good or evil. But for my part I have long perceived the nature of good and its nobility, the nature of evil and its meanness, and also the nature of the culprit himself, who is my brother (not in the physical sense, but as a fellow creature similarly endowed with reason and a share of the divine); therefore none of those things can injure me, for nobody can implicate me in what is degrading. Neither can I be angry with my brother or fall foul of him; for he and I were born to work together, like a man’s two hands, feet or eyelids, or the upper and lower rows of his teeth. To obstruct each other is against Nature’s law – and what is irritation or aversion but a form of obstruction. – Marcus Aurelius

Marcus, here, is noting that troublesome people are indifferent. What really matters is how he looks at the people around him. He reasons that, clearly, we’re meant to work together. Our very nature causes us to form communities and live around one another, and to do that well we have to uphold our social duty. Next time someone unjustly criticizes your work, take time to remember that we are social beings and ultimately need to work together as a community. The WordPress community is a great example of this in practice; though there are disagreements and conflicts, WordPress has always seemed to move along as a community because that is help in higher priority than personal conflict.

We’re all on the same team, and keeping that centered can help us all grow, both personally and professionally.

Employ Negative Visualization

Is [a wise and good man] surprised at anything which happens, and does it appear new to him?  Does he not expect that which comes from the bad to be worse and more grievous than what actually befalls him? And does he not reckon as pure gain whatever (the bad) may do which falls short of extreme wickedness? Such a person has reviled me. Great thanks to him for not having struck you. But he has struck me also. Great thanks that he did not kill you.  – Epictetus

The Stoic practice of Negative Visualization is pretty simple–just remember things can always be worse. I personally spend about ten minutes before work visualizing just how worse off things could be. The idea here is to go a bit beyond just recognition; you want to actually visualize it.

When you do, you feel an immediate release of stress when you stop, and suddenly you’re a bit happier because you don’t have to deal with those situations. It puts things into perspective. It also prepares you for when those things do come up. If you already thought you might encounter a negative situation, you might take better steps to prepare for them. This seems obvious, but applying this practice daily and intentionally helps make sure your day goes much more smoother.

Ultimately, Keep Your Cool

I ultimately feel Stoicism can help you keep your cool at work. Work can get stressful and things are always bound to change. I have found that these few practices of my own personal philosophy have trickled down into my work habits and help me do better work by avoiding unnecessary stress and grief. I think it’s important to talk about how our personal philosophies and beliefs help us professionally.

If you feel philosophies you follow can help at work, please share in the comments below!

And if you want to read more about Stoicism, check out this Reddit FAQ.

The post Philosophy at Work: Stoicism and Web Development appeared first on WebDevStudios.

$layers: (
    'navigation', // z-index: 0
    'logo', // z-index: 2
    'login-popup', // z-index: 3
    'overlay', // z-index: 4
);

@function layer-index($layer) {
    // This just returns the named layer's 
    // location in the list, which becomes it's z-index.
    @return index($layers, $layer); 
}

@mixin z-index($layer, $position:relative) {
    position: $position; // relative by default
    
     // Set the z-index to the named layer's index in the list.
    z-index: layer-index($layer);
}

.navigation {
    // Use this to name your layers and position them.
    @include z-index(navigation, absolute); 
}

.logo {
    @include z-index(logo); // Relative by default
}

.login-popup {
    @include z-index(login-popup, absolute); 
}

.overlay {
    @include z-index(overlay, absolute);
}

Just use @include z-index(your-name-goes-here, absolute); to name your layers, and specify its position. Then, add the name to the list of layers in $layers at specific positions in the list (top most layers go towards the bottom). The order of the $layers list is what does the trick. If we wanted the logo to show over the overlay, for instance, we would just move 'logo', right below 'overlay', to get the effect.

All you have to do now is make sure all your elements with z-index use the @include z-index() mixin to name the layer and add it to a position in the $layers list.

An Example

Here we have two menus on a mobile layout. On a mobile layout they are going to overlap a bit, especially if they use both menus at the same time. Right now, the secondary navigation is not accessible; we need to bump that layer up.

Let me show you what we need to do get those two layers squared away with ease:

Now your days of complicated layer management is over. No numbers to keep track of–just layers you can order easily!

The post Using Sass to Manage Layers with z-index appeared first on WebDevStudios.

So, you get an email like this one every time WordPress publishes a new release. 4.2 just went out, so I got this email a few days ago. I’m not a serious plugin developer like most out there. They aren’t premium plugins; I just share my code because it’s helpful and it’s nice to know people use my stuff to help them do things. So, usually, I update my plugins after the release. Serious plugin developers are going to test their plugin before the release. For this tutorial, we’ll be updating it post release.

It’s good to let users know what version your plugin works on. When I looked at this list, I thought a lot of these plugins should work in 4.2, but people are probably not trying them because they are so outdated. This is not uncommon, especially if you’re just starting out or have that usual nine-to-five. I just got this email, so it totally sparked this post! Let’s get these updated!

In this tutorial you will learn how to:

1. Use WordPress on Git to easily switch back and forth between versions for testing
2. Update your plugin’s ‘Tested up to’
3. Publish your changes to WordPress.org quickly

So, some pre-requisites.

1. You have a local development setup and Git installed
2. You have a plugin on WordPress.org that needs to be updated
3. You developed your plugin using Git (we’ll be using Github here)

Let’s get started!

WordPress.org plugins (and WordPress itself) are hosted using SVN, but like a good amount of people building plugins, I develop my plugin primarily with Git and update my plugin on WordPress.org using a shell script. Some people don’t know that WordPress is actually on Github and you can clone it down, work on it, and even submit patches to it using Git!

So it’s nice to have WordPress on Github. It’s also nice to know that for each release of WordPress (e.g. 4.2) there is a release branch in the repo for that release (e.g. 4.2-branch). This makes it easy for us to switch versions of WordPress very quickly and easily.

Note: For security and hotfix releases such as 4.2.1, it lives in the 4.2-branch. Justin, another WDSer, tells me you can also check out specific releases using tags! But, know the 4.2-branch release branch is up to date with the latest 4.2.x.

As you can see, some of these plugins date back to version 3.3 [this email did spark this blog] of WordPress, most of them need to be updated. But some of these plugins don’t actually work with WordPress anymore, such as Google Destination URL. With the changes to Tiny MCE in WordPress 4.0, I couldn’t get the plugin to work the same as it had before. The last version it actually worked with was 3.9, and so I probably won’t be updating that since it doesn’t work in anything beyond 3.9 at the moment. So there are reasons not to update.

The plugin I’ll be updating today is one of my latest plugins, WP NoteUp. The last version I tested it in was version WordPres 4.1, so we’re going to test it in WordPress 4.2, and get it updated in no time.

First, get your localhost fired up

There are lots of different ways to do this, but you probably already have that set up for yourself. If not, check out Getting Started with Vagrant & VVV For Local Development for a great way to get started. Get a site setup that you can access locally, such as http://localhost/ or http://wordpress-tests.dev (as I have) and find the folder of the files for that site, that’s where we’re going to need to download WordPress from Github.

Clone WordPress from Github into that folder (here I’m using the command line, but a GUI would work too). Use what you like to use.

As you can see, I’ve cloned down WordPress from Github to my local environment to a folder I can access using http://wordpress-tests.dev. I’ll have to setup a database and install WordPress of course.

Git WordPress 4.2 (See what I did there?)

Now that we have WordPress setup for testing, let’s look at the repository we have cloned down locally. Having a look, we start off on the master branch, and if we use git branch -a we can see all the different release branches, let’s check out 4.2 (4.2-branch) using: git checkout 4.2-branch.

Let’s clone down our plugin

Now that we’re using WordPress 4.2, in a jiffy we can switch versions easily using Git. Let’s clone down our plugin now. Below, I will be cloning down my plugin from Github, but you might host your code somewhere else (this tutorial is Git dependent, not Github dependent). There are even ways to do this with the SVN version of your plugin with a few symlinks, but I won’t cover those here. All you need to end up with is your plugin in the plugins folder so it shows up in the plugins list.

Note: You might be asked to update your WordPress database when you switch–this is perfectly normal when switching versions. Also, I keep the latest stable version of my plugin on the master branch, but you might do something different. Make sure and check out the latest version of your code that was released to WordPress.org.

Now to actually test our plugin

Activate it and start testing things! For my plugin, I made sure things were working as normal. It’s a small plugin, so I just did a few small tests. Try to break it–try the new stuff added to the release and see if it breaks there. After trying to break WP Noteup, I was happy to see my plugin didn’t need any updates and worked great in 4.2. Your plugin might need updates, so code those and be prepared to release a new version of your plugin.

The last step is to make sure we tell WordPress.org that our plugin has been tested and works on version 4.2. You do this by updating your readme.txt file header that says Tested up to: and the version you tested it up to next to that. Edit your file, save, commit your change, and you’re ready to go!

Push to WordPress.org

I just updated my Github repo, but now I need to update WordPress.org via SVN. But we won’t be using SVN to push our changes (wut?!). We can use a single shell script to quickly update WordPress.org without having to mess with SVN (though I do recommend you learn how to). The script method only works on Mac/Unix (sorry my Windows friends, check out this on how to do it without the deploy script).

Use the script…

Note: The current readme on the script itself recommends you add it to your plugin’s code via subtree. This is optional, and I won’t be using that method for the rest of the tutorial.

First, I download the script and put it in my plugin’s directory.

Once the script is there, its usage is as follows: sh deploy.wordpress.org.sh [plugin_file_with_header.php] [WordPress.org Username] [Update Readme Only: true|false]

So what I want to type is: sh deploy.wordpress.org.sh wp-noteup.php aubreypwd true

This tells WordPress to deploy the plugin (sh deploy.wordpress.org.sh), find the plugin information (plugin header) in wp-noteup.php (sh deploy.wordpress.org.sh wp-noteup.php), my username on WordPress.org is aubreypwd (sh deploy.wordpress.org.sh wp-noteup.php aubreypwd), and just update the readme.txt file since we aren’t releasing another version (sh deploy.wordpress.org.sh wp-noteup.php aubreypwd true).

Note: In the case of someone releasing a new version of a plugin, you would set the last parameter from true to false. Make sure and update the Version section in the plugin header to the new version of your plugin before you do.

Let’s push our Tested up to changes to WordPress.org!

The deploy script sent everything to WordPress.org auto-magically! It probably saved me about 10 minutes worth of work. Shortly after I got an email from WordPress.org showing my changes (commits) were received!

Sometimes it can take up to fifteen minutes for the change on WordPress.org to take effect. But once it updated, the plugin’s page went from (see Compatible up to):

-to-

Though going through the tutorial the first time might be somewhat time-consuming, once you get the hang of it, this is a quick way to get the job done. Got another plugin? Clone it down, rinse, and repeat (make sure to deactivate other plugins). Now I’m off to go finish the rest of these off!

…before I leave.

I just wanted to point out one more awesome thing about using Git to test your plugins. Let’s just say we’re in a hypothetical situation where I need to test my plugin in WordPress 2.7 (just for fun)! Using Git it’s easy!

I just switch to it using: git checkout 2.7-branch

And now I’m running 2.7! Now I can test my plugin for that version as well, which does not work by the way:

Happy coding!

Resources

• WordPress is on Github
• Submit patches to it using Git
• WordPress.org Plugin deployment shell script
• Getting started with Vagrant & VVV for local development
• Updating your plugin using SVN (Windows Friends)
• Releasing Plugin Updates and Handling Security Vulnerabilities

If you have any suggestions, tips, or tricks up your sleeves, please leave them in the comment section.

The post Use Git to Test & Update Your Plugins for WordPress 4.2 appeared first on WebDevStudios.