The third stage of our journey across Southern California started at 5 am. In order to drive from Furnace Creek, CA to Sequoia National Park you must traverse a rather deviating course that heads south towards Bakersfield–opposite the direction you eventually need to drive. The long ramp out of Death Valley is actually quite incredible. You gain hundreds of feet of elevation as you ascend into Pinto Peak’s foothills. Watching the moon set and the sun rise while driving past desert tundra evokes a curious sense of longing to stay in one of the most inhospitable terrains on Earth.
The six and a half hour drive from Furnace Creek to Azalea Campground is a long haul, but the sights to be seen are spectacular. Barren desert, rolling green hills, smokey forests, and central valley orchards ring the foothills of the Sequoia National Forest. I highly recommend the Azalea Campground because it rests 6,000 feet deep inside the forest. The campgrounds to the south, though easier to get to, tend to get crowded and are in the lower elevation which lends itself to insect infestations and hotter, less pleasant climate.
Camping
Azalea is a beautiful campground with mountainous terrain and a dense redwood canopy which blocks out the sun, dissuading scruffy foliage from overtaking the campground. The American Redwood is a unique instance of specialized adaptation. The oily red bark of its namesake is flame retardant, serving to stave off the common forest fires of this region and the blistering winter’s cold. Redwoods survive by outlasting other species of plants. While wildfires rampage through the hills, the redwood’s protective bark resists the heat while competing foliage is destroyed.
Due to the danger of local black bears, and the occasional grizzly, bear boxes are found at each camp site. Leaving food in your car is highly discouraged as bears have been known to tear through the thin aluminum body.
At night, especially early March, the temperatures can drop to below freezing. In our particular campsite, the pitch of the hill created a wind tunnel that effectively blew cold air up the mountain towards our tents. To remedy this, we lined a few trees with cordage and strung our tarps up in order to form a wall. These walls managed to provide some relief to the cold, they also helped contain the warmth from our fire. Nonetheless, the cold is very real. The best way to avoid freezing to death was to drape a tarp over our tents and sleep under layers of blankets. Fortunately, the brisk mornings yielded to relatively warm afternoons.
I highly recommend you bring firewood with you, as the park service frowns upon scavenging from the campgrounds. Also, be sure to have dry kindling. We found it very difficult to get a fire started until we dried out enough kindling. Always think ahead and be sure to keep drying wood while you have a fire going.
The sites
On our drive out of the mountains, we stopped to tour the most notable attractions.
Azalea is home to many fantastic views of sprawling mountain and dense redwood forests. The hiking is challenging, yet can be achievable even by novice trekkers. Popular destinations like General Sherman and General Grant are not that far away, offering you a great exploratory look into the history of the mighty redwood.
A must see location is Moro Rock, a grand vista overlooking the San Joaquin Valley and the Great Western Divide. Perched 6,725 feet above sea level, the narrow trail to the overlook is actually rather dangerous, especially during tourist seasons, mostly because nervous mobs of tourists do not make great tour guides.
After a long trip through desert, valleys, and forests, the main takeaway is that our natural resources are comparable to none. I could not help but feel like these places were not real, considering how unusual they were compared to the suburban/urban life I am used to. The isolating enormity that comprises our National Park system is something every person should partake in and endlessly protect and preserve. If you haven’t taken the plunge into an American parkland, what’s stopping you? Get out there!
Pahrump, NV may be your last chance at civilization, so stock up on supplies. The journey into this 160-mile gash of barren salt flats may be an insurmountable challenge for some, but the trek is worth the effort. Death Valley is considered one of the most inhospitable places on earth, and for good reason. This sunken crag is ringed by mountains and cliff sides ranging in the thousands of feet of elevation. Home to sidewinders, rattlers, coyotes and roadrunners, the specialized nature of this formidable tundra is both fascinating and awe-inspiring.
Death Valley runs from the Sierra Nevada mountain range in the northwest to the Amargosa River in the southeast. To trek across the middle of the valley may leave you stranded in one of the driest environments in the northern hemisphere if proper planning is not done beforehand. The National Park system has threaded highways throughout the valley’s most desirable trekking locations and has an approachable camping network designed to be family friendly. The main site can be found at Furnace Creek which comes complete with a small general store, resort and showers. Alongside Furnace Creek are a couple of campsites built to “rough it”—to a degree. For instance, the Texas Spring campsite has flushable toilets and running water.
Note: Furnace Creek requires reservations. As in all National Parks campers must stick to the campgrounds; off-site camping and driving is forbidden without proper permits.
[/bs_notification]
Further north is Stovepipe Wells, the second major camp zone. Located across the road from the Mesquite Flats Sand Dunes, this campground is more unforgiving and brings the dry heat of the desert with it. Regardless, all of the campgrounds have spectacular views and wonderful hiking just minutes off the park arterial road.
Preparation
Desert camping can be unforgiving so plan your trip ahead of time. The heat can be cruel and overbearing especially during the day. At times you may find yourself hiding under the slightest shade just to stay reasonably cool. As with all National Park campgrounds, be sure to arrive prior to eleven a.m as these grounds sell out quickly. When you reach your campground your first task is to build some sort of shade retreat. This can be either a large tent or a tarp secured from your car to a nearby overhang. Shade is essential as the midday sun can dehydrate you in just a few hours. As they say—if you are thirsty, you’re already dehydrated. Once your water source is secure and a campground is set up then you can begin planning your trek across the local trails.
What’s interesting about a dry heat is that given the time of year an 80 degree day can be very pleasant in the shade. With very little moisture in the air the heat cannot permeate much further than where it directly contacts a surface. In a humid environment the heat can transfer through the air more easily due to convection forces. An 80 degree day in Georgia can cause more suffering than the same temperature in place called Death Valley. Strange.
But then again the real threat isn’t so much the heat but the arid terrain. The lack of water is stifling. Your lips, eyes, and all moistened skin will begin to dry out, crack, and crust over. Very little is required to becoming dehydrated as moisture is continuously wicking away from your skin. This dry climate is rather comfortable otherwise. The lack of moisture means less uncomfortable sweating, and the dirt of Death Valley is relatively gentle and fine leaving your skin smooth and dry. Go figure the hills are actually ripe with talc, the primary ingredient in talcum powder.
In the end, be sure to avoid Death Valley in the summer when temperatures can easily reach the high 120s fahrenheit. Provided that you brought at least a gallon of water per day, per person, you should find your stay at the lowest point on Earth unforgettable.
Sights to See
A highly anticipated touring area is the Badwater Basin sitting 282 feet below sea level just 20 miles south of Furnace Creek. The basin’s dry salt flat is both impressive and menacing. If you have never seen a mirage before then do not be surprised as you drive along Badwater Road and the salt lake out your passenger window transforms into an empty basin of crystallized salt. Along this route is Arch Rock and the Artist’s Drive. Both showcase the auburn, mineral laced foothills and wonderment surrounding the valley.
Death Valley is perhaps one of the most inspiring and breathtaking locations in the United States. This extremely desiccate stretch of land is both heaven and hell on earth for those who enjoy one of nature’s most unique and spectacular journeys. But to the pioneers who first traveled this forsaken land, all they could bare to say as they fled this treacherous stretch of rock was “Goodbye, Death Valley.”
An oasis in Southern California, Palm Springs is the last major destination skirting the border of one of North America’s most dynamic National Parks.
There are three entrances into the Joshua Tree Park. Two are located to the north of the park along Route 62 just south of Joshua Tree and Twentynine Palms. The third is located to the south along Route 10. The main artery through the park is Park Boulevard. This road will loop through the main attractions such as Jumbo Rock and Lost Horse Trail. If you choose to camp, you may do so at one of the campgrounds for up to a week at a nominal rate of roughly $15-18.
You must arrange to arrive at your campsite early. If you arrive after eleven a.m., especially during peak season, you can expect to enter the caravan of tardy drivers and spend a few hours looking for a spot. Pro-tip: check the orange pay slips on each campsite and look for people who may be leaving soon, asking a campsite if they are set to leave that day can sometimes land you a spot.
Camping
Camping in the park is restricted to the campgrounds, and for good reason. Leaving the trail and pathfinding on your own can cause incremental damage to the park’s grounds. With nearly a million visitors a year, the damage would be unsustainable.
The ideal time to tour the park is in the spring. The summers can reach blisteringly hot temperatures averaging in the high 90s. Be advised, campsites provide potable water but you should always pack at least a gallon per person for each day. The desert has infamous ‘dry heat’. The danger therein is how unnoticed dehydration is. You will begin to feel your lips chap almost instantly. If you find yourself thirsty, you are already dehydrated. The trick is to drink small sips continuously.
You should expect to drink at least two liters per day, anything less can lead to dehydration. Besides the usual critters such as rattlesnakes, scorpions, and the occasional coyote, the park is relatively safe.
One unexpected element is the wind. The gusts can roll across the unobstructed landscape at 25-30mph which can make camping nearly impossible without proper equipment. If you find yourself stuck with a windy campsite you can apply this quick fix. Try fashioning a makeshift tent out of your campsite picnic table. These heavy concrete tables can withstand the high winds. Use tarps and cordage to wall off every side and provide yourself a retreat from the elements.
Sites to See
Just off the park trail, you can find challenging rock climbing and cave systems in the boulders that dot the horizon. The Hall of Horrors, Jumbo Rock, and Ryan Mountain offer excellent bouldering trails with amazing vistas and intimate cave systems. If you are cautious with your footing you shouldn’t have any problems.
As your day comes to an end, make time to drive to Keys Point. This 5000-foot vantage point overlooks the Palm Springs valley with iconic views of the setting sun over San Jacinto Mountain and Coachella valley. An environment of dynamic extremes, tread carefully but definitely experience the beauty of the desert at Joshua Tree Park.
Communication is a concept we all believe to be learned naturally, but good or even great communication is a commonly abandoned skillset. Sometimes we find ourselves in the grip of a good conversation, while other times we struggle to openly and directly convey what we need. This is especially relevant in customer service because you will come across many varying types of personalities, all with their charming and irksome characteristics. The reason one conversation is successful while another fails is because ‘good’ communication requires open and direct delivery of ideas, which isn’t always easy.
But what if I told you that there was a method to make sense of this madness?
Enter Dr. David Burns Five Secrets of Effective Communication.
By internalizing these listening and self-expression techniques, you can better communicate with your customers, your teammates, and anyone else in your life. I will provide the technique then give a realistic example in a typical customer service interaction. Let’s imagine we work for a popular digital services company that provides a blogging software service.
Listening Skills
The Disarming Technique. You find some truth in what the other person is saying, even if you feel convinced that what they are saying is totally wrong, unreasonable, irrational, or unfair.
When a customer reaches out to customer service, it is usually because their experience was not as expected. They wanted Scenario A to happen, but Scenario B happened instead. As the customer service representative, it makes sense for scenario A to work as expected, the software is flawless! Or perhaps it is knowingly flawed but usually, acts as expected. Either way, the customer has a notion that their experience was not what it should have been. By using the disarming technique, we can find a grain of truth in what they are saying and then turn this adversarial relationship into a constructive relationship.
Customer
Question: I tried to log in, but the screen went blank. My username and password is correct, shouldn’t I be logged in? What gives?
Representative
Wrong Answer: Did you enter your credentials correctly?
Right Answer: You are correct, you should be brought to your dashboard. Let’s collect a bit of information so we can troubleshoot the problem together.
As you can see, by disarming the customer we put them in a place of mutual understanding and respect. We are acknowledging that they have a problem instead of questioning their competence. We can gauge their competence as we troubleshoot the issue further.
Empathy. You put yourself in the other person’s shoes and try to see the world through his or her eyes.
Thought Empathy: You paraphrase the other person’s words.
Feeling Empathy: You acknowledge how they’re probably feeling, given what they are saying to you.
Empathy is a basic human need but it is a skill that needs to be developed. Different people develop different levels of emotional intelligence over time, and some individuals are more naturally inclined to learn emotional intelligence at a faster rate. Fortunately, anyone can improve their emotional intelligence and ability to empathize with practice. In the next scenario, we will detail both types of empathy, ‘thought’ and ‘feeling.’
Customer
Question: I just can’t stand this new feature! Why do you always have to change things around? I just want it back the way it was.
Representative:
Wrong Anwer: The new way is much better and provides a lot of great new features, would you like me to explain them to you?
Right Answer: I can see that you are not a fan of the new layout. Though it can be frustrating at times to experience such a shift to your normal routine, we take a lot of care to ensure that the changes we make are beneficial to our community. Would you like me to explain why we made the changes?
With empathy, you need to reiterate the other person’s concerns and then describe the feelings associated with those concerns. Everyone wants to be heard and understood, and by reciting back the customer’s concerns, without sarcasm, you not only correct your own understanding of the problem but also address the customer’s feelings.
Once you have addressed their feelings, the customer should become easier to work with, you can then continue to help them understand the new features from a constructive approach that communicates why the company chose to make the change.
Inquiry. You ask gentle, probing questions to learn more about what the other person is thinking and feeling.
Once you have disarmed the customer and empathized with their needs, you can then ask them direct questions about the issue and their experience, this will yield more insight and help facilitate better communication. Using these listening skills in symphony can be conducive to a better customer experience. Let’s look at an example:
Customer
Question: I entered my username and password and now I am staring at a blank screen, this can’t be right. I am sick of all these changes you are making to the software! What gives?
Representative
Wrong Answer: The new features make the service better, did you enter your username and password correctly?
Right Answer: You are right, you should be brought to your dashboard. Though it can be frustrating at times to experience a delay in your normal service, we take a lot of care to ensure that the changes we make are beneficial to our community. Let’s collect a bit of information so we can troubleshoot the problem together. Can I ask you to please check that you entered the correct username and password before we troubleshoot further?
In this example, we incorporated the techniques from the other examples to create a better answer. The customer is angry that they cannot log in, this is upsetting because they pay for the service and it is not working properly. We disarmed their argument immediately by confirming that their concern is valid. Then we empathize by acknowledging their thought that ‘they can’t log in’ and that this event is frustrating to them. We then ask to collect some information and then inquire as to whether they wrote the correct username and password.
Self-Expression Skills
Apart from listening skills, we also have two self-expression skills, they are I feel statements and stroking (stroking is also known as affirmation).
“I feel” statements. You express your feelings with “I feel” statements (such as “I feel upset”) rather than with “you” statements (such as “You’re wrong!” or “You’re making me furious!”).
“I feel” statements can be tricky in a customer support environment. You typically do not want to bring your feelings into the matter unless they are conducive to helping the customer understand. But since we are all human, your feelings do matter, especially if they are intuitive and can help solve the problem. “I feel” statements are not just the domain of customer support, but are also very helpful in a team where communication is oxygen. The most important aspect of the “I feel” statement is the emphasis on avoiding ‘you’ statements. By nature, using a ‘you’ statement will instigate an argument.
Customer
Question: Your customer support is absolute garbage! How can you even call yourself customer care?!
Representative
Wrong Answer: You are a lousy customer who is unwilling to learn even the basics of our service! How can you even call that trying?!
Right Answer: I may not have answered your question as well as you had hoped (disarming), you seem to be angry about your experience (thought/feeling empathy). I feel we can find a solution if you are willing to bear with me (I feel statement showing compromise). Perhaps there is a better way I can address your needs (inquiry)?
This is an example of an irate customer. For one reason or another, the customer is very angry about their experience. Perhaps the customer is a good example of a difficult personality. But since we do not know enough about the customer we must assume that the breakdown in communication is on our end as well.
We begin by disarming the customer, an angry customer is not someone who is usually willing to listen. By admitting that our answers were not sufficient for the customer, we allow them to feel validated in their feelings of discontentedness. We then confirm that we understand the cause of their anger and also the feeling of anger. We can then employ the “I feel” statement to convey our willingness to work through the problem if the customer is willing to as well. We finally follow up with an inquiry about the method that failed to answer their question originally and whether we can rephrase it in a more understandable manner.
Stroking (Affirmation). You find something genuinely positive to say about the other person, even in the heat of battle. This indicates that you respect the other person, even though you may be angry with each other
The last technique is stroking. When you are in the heat of a contentious conversation you may find yourself under attack –or– feel the urge to go on the offensive. Don’t. Anger can distort your cognitions and lead to bad communication. Stroking serves to convey respect for the other person and reminds you to treat them with compassion.
Customer
Question: I’m no computer scientist, but this should be easy! What am I paying you people for?!
Representative
Wrong Answer: This is an easy fix, I’m sure you can figure this out, we have a lot of customers who don’t have this problem.
Right Answer: Web technology is no easy feat (thought empathy), it can be frustrating for anyone (feeling empathy)! I admire your tenacity and persistence (stroking), perhaps if we walk through the steps we can figure out how to get this to work (inquiry)?
We can empathize with the customer since we have all experienced difficulty with one thing or another that we weren’t familiar with. What is easy for a customer service technician is not necessarily easy for a customer. And not all customers share the same experience. It can create a much more constructive environment by encouraging the customer, it already took a lot of work and motivation to reach a customer service agent! After affirming the customer’s persistence, you can then ask further questions to try and help them reach their goal.
Wrap Up
Working with customers is not easy. There are a lot of different personalities, some more difficult than others. There are also a lot of bad communication behaviors that we all possess, and even our own cognitions can become distorted and affect our mood. But thoughts and mood are something we all share, and also something that we can all change in ourselves and each other. By employing these five communication techniques, we can effectively nurture constructive relationships with the customer and affect their cognitions and mood. No outlook is finalized from the start, the end result is determinant on how we approach the subject, and how we control which variables are available to us. Try practicing these techniques in your day to day life, or try writing out likely scenarios and practice at home. These techniques take practice, but even with just a few attempts, you will realize that your way of thinking and communicating has changed for the better.
The issue with web fonts is that they can sometimes block the page render, especially on mobile devices. This issue stems from the rendering path. As a website is trying to download resources it may get hung up trying to download a bunch of webfont libraries.
Often you will come across terms such as Flash of Invisible Text (FOIT) or Flash of Unstyled Text (FOUT) . These terms refer to the scenarios that occur when web fonts are loaded from a hosted library.
The first happens when a website waits for the webfont to load, this pauses the loading of the page till the font downloads completely. This is typically considered the worst of the two scenarios. The FOUT is preferable because a default style will load while the webfont is downloaded and then the webfont will style the page causing a brief disruption to the user experience as the styles change. Typically, unstyled text is better than no text.
Enter the WebFont Loader. Google has created a javascript library that will add styling to the <code>html</code> block that will provide whichever default style you wish until the webfont is properly loaded, then seemlessly switch the styles to webfont, thus allowing the page to load properly before styling. This will have a great effect on your page load.
The plugin is in its infancy but basically adds the link to the javascript library, add the script for the Webfont Loader and then allows the user to specify in the dashboard which fonts they would like to load from Google.
I plan to add functionality for other webfont libraries such as Fonts.com etc. For now, Google will have to do.
I am launching Version 1.0 this month, check back in for more details in the upcoming weeks!
Note: I have since moved on from my custom theme to Twenty Nineteen (and perhaps something else since this note was added). The principles included in this post are still valid regardless of the theme you use. In practice, using a default theme is a good idea as they’re well coded and usually rather simplistic. As always, less is more on the web especially when building for a mobile first world.
When I began designing this blog I knew it had to be fast and I just couldn’t stand the idea of having too much bloat. It is always tempting to go the route of ‘theme builders’ but a lot of these customizable themes are heavy with extra features that most websites may not use and add in additional resource calls that may slow your page load if not properly dealt with.
So I coded my theme from the ground up. Utilizing TeamTreehouse’s tutorial Bootstrap to WordPress Theme I slowly pieced together a functioning website.
I felt I was on the right track, but my concerns were not being addressed; I wanted this site to load in under two seconds. After running my site through Google Pagespeed Insights, GTMetrix and Varvy.com I took note of the main issues.
Varvy and Google essentially gave me the same information so here is a quick copy paste from Varvy.
Server:
Quick server response time Compression not enabled Browser caching issues Keep-alive not enabled Minimal redirects
Page:
No bad requests HTML not minimized Request size is fine Visible content prioritized Render blocking CSS / JS found
Resources:
Images not optimized Javascripts seem async CSS minified No @import CSS JS minified
Apparently, my website was hurting in a lot of ways. Using this baseline I set out to methodically correct each issue. I will go step by step through these common issues and then list some helpful plugins at the end. These plugins should assist those of you who are hesitant with editing your code.
Server
Compression
Enabling compression on your server is a vital step towards decreasing load speed. Enabling compression allows your server to send smaller files, thereby speeding up your website.
The average user can enable what is called Gzip compression. It is very simple and requires adding a bit of code to your .htaccess file via FTP.
Warning! Whenever you are editing your .htaccess file you must be sure to make a copy of the original before you make edits.
Add the following code to your .htaccess file after ##End WordPress:
Browser caching is a great technique that helps us avoid loading the same files over and over. Browsers can cache all sorts of files such as images, favicons, libraries, and fonts.
By enabling browser caching and setting an expiration for your files you are telling the browser to remember an instance of a file until told otherwise.
Here is the code I use in my .htaccess (remember, make a copy before editing .htaccess):
Usually, the browser will update its cache when the files change on the server in order for the browser to maintain the most recent version. By utilizing browser caching we can speed up our site by avoiding unnecessary calls to the server.
Enable Keep Alive
Enabling Keep Alive in the header of your site tells the browser to keep the initial TCP connection open for additional HTML conversation. Every time files are requested by the browser, the browser must ask the server if the files exist. The server will respond with a ‘yes’ or ‘no’ and then decide whether to send a file. If Keep Alive is not enabled then this process must repeat itself over and over, thus delaying the page load.
Keep Alive, also known as a persistent connection, is usually enabled for most servers. But if you are on a shared hosting platform it is possible your hosting provider has disabled Keep Alive for performance reasons. We can enable Keep Alive with one line of code in our .htaccess file:
[php] Header set Connection keep-alive [/php]
Page
Minimize HTML
Minimizing HTML perhaps has the least impact on a site’s performance, but nonetheless it is easy to do and will increase your speed a bit. By utilizing plugins such as W3 Total Cache we can reduce the file size by eliminating superfluous line breaks and characters.
Render blocking CSS / JS Found
This may be one of the biggest changes to a website to reduce the render time. In order for a page to load, it must first download all of the requested resources. But sometimes there are a lot of resources such as CSS and Javascript. There are three things to pay attention to in order to avoid blocking the page render.
All CSS and Javascript should be minified and concatenated (combined) into as few files as possible. The least amount of calls to the server, the faster the page can render.
Javascript should be loaded from the footer*, typically before the closing tag.
All necessary CSS and Javascript that is needed to show the above the fold content should be inlined. Everything after the fold can be deferred with this amazing code by Patrick Sexton:
This code can be placed before the ending </body> tag in your footer.php file. The file defer.js can be named whatever you like, the only thing to remember is that this file will wait till the page is done loading resources and then will be loaded.
Any scripting you wish to defer should be placed in this file. Things such as Google Analytics, social media code snippets, etc can be loaded after the page render and it should benefit your website load speed if you defer them.
*Warning! jQuery and other Javascript libraries should not be deferred because they are large files that other javascript files, such as your theme.js file, require to load first. There are better ways to defer Javascript libraries.
Resources
Minify CSS & JS
Minifying essentially strips a file of all needless line breaks, spaces, and useless characters. A minified file becomes much smaller than the original file, but is also much harder to read. Typically, minified files should only be used in production because they provide the best performance gains.
There are a number of ways to minify your files. WordPress provides a lot of plugins that can do this. W3 Total Cache, BWP, MinQueue are the ones I am familiar with. But as a developer, it is important to become familiar with task runners such as Grunt or Gulp. I personally use Grunt.
Grunt is a great tool based on Node.js. It is very easy to use and it uses two great plugins: grunt-contrib-uglify grunt-contrib-cssmin
As you would expect, these plugins automatically minimize your CSS files and JS files.
Grunt can be a bit technical, if you are simply just using WordPress to blog you should consider the WordPress plugins I listed earlier. I typically use W3 Total Cache because it also offers a lot of caching and compression options, but I am quite fond of MinQueue. MinQueue not only allows you to minify your main stylesheet and JS, but EVERY stylesheet and JS file including the ones that are brought in by other plugins. W3 Total Cache can also do this, but it is a bit more involved.
BWP does this too but it doesn’t allow you to exclude files. I have found that sometimes there are files with dependencies that fail to load if they are minified incorrectly, so this level of control that MinQueue offers is invaluable.
Image Optimization
Images and fonts are typically the largest files your website will load. Image file sizes can easily get out of hand if they are not optimized. Serving a PNG or GIF where a JPEG would suffice is a common mistake that can really add up with each image that is uploaded to your site. Optimization of images is about getting the smallest file size without compromising image clarity.
When you upload images, WordPress automatically makes various sizes of the image based on how your theme defines these image sizes. So before you drop an image onto the page, be sure to choose the smallest image available in order to serve a smaller image file. This will make loading these images that much easier on mobile devices.
As long as your theme is properly coded, WordPress should serve a version of your image that most appropriately fits the gien device. In theory, if you load your website on a mobile device, WordPress will serve a small image rather than the larger image needed for a laptop or desktop monitor.
There are a variety of ways to optimize your images:
Optimize the image through a program such as Photoshop or Pixlr.com
Use a task runner like Gulp or Grunt
Use a website like Tinypng.com, Tinyjpg.com to manually optmize each image
Convert bulky PDF files to more reasonable JPEGS at https://smallpdf.com/
Or use a plugin such as Smush.it, EWWW, Imsanity, or Tiny Jpg & Png.
However you choose to do it, please optimize your images for the sake of mobile data plans. Mobile traffic makes up ~56% of search traffic these days, so Google does take notice of websites that do not conform to this new frontier.
Check back for my future post on Image Optimization.
Fonts
After installing Better WordPress Minify and using the Google Webfont Loader I checked Pagespeed and was surprised by a stunning 70/100 mobile and 86/100 Desktop. Not bad! The issue with custom web fonts is that they need to be loaded from either an external domain or they need to be hosted on your own server. The difference it that a hosted web font is able to be downloaded from a server that is theoretically closer to your location, resulting is a shorter response time. Unfortunately, you cannot set the cache headers for a resource hosted elsewhere.
On the flip side, if it is a popular font then the user may have already downloaded a copy of it from when they visited another site that also uses the font. The benefit of hosting your font on your web server is that you can cache the font. If you use a CDN, you may be able to also server this resource in a ‘hosted fashion’. This is all debatable.
One major issue with hosted fonts is what they call the FOUT, or ‘Flash of Unstyled Text’. This happens because the text is rendered earlier in the page load than the external font stylings. So for a split second the user sees the unstyled text, this lends itself to a poor user experience.
It isn’t possible to avoid this if you are requesting the style from an outside domain. Another issue is that the font requests can stop the page load until the styles are downloaded. This is also bad because it delays the page render. By using theGoogle Webfont Loader, we can asynchronously delay the download of these fonts till after the initial page render. This greatly improves your load times.
It is important to optimize your website so it loads in under 3 seconds, Google even accounts for it as a ranking factor. Reaching a Google Page Speed of 100 can be a fun activity, but do not let it govern what you spend your time on. There are lots of small factors that make up these rankings and sometimes it may be preferrable to have a feature that doesn’t quite fall under a proper page speed dictation in order to give that feature to your users. We create websites for people, not robots, so if your user experience is great then a 100 on Google Page Speed may be a wasted effort, especially when any number of changes to your website can cause that ranking to inadvertantly drop. Focus on limiting calls in the above the fold content and optimizing your images, these two things are the foundation of a well optimized site.
This year I decided to go for it and attempted, with great success, the Bike MS 180 mile course. Over two beautiful days in late September, Ed Robinson, Jerry Diehl, Ed Diehl, and myself set out on a 80-100 mile ride from Philadelphia to Ocean City, NJ. Somehow, after waking up two hours after the 8,000 person event had finished kicking off, a tired Ed Robinson managed to catch up to us around Mays Landing, NJ. Insane.
Here is the data for day one:
Day One
And here is day two, the 80 mile ride back.
Day Two
Probably one of my most memorable rides. The final 10 miles was just an unbelievable sprint to the finish closing in around ~18-19mph with dead sprints of 23mph.
Setting up WordPress & Underscores on a Local Environment
Before we begin getting into our theme build we should first go over a few prerequisites, namely:
Setting up a local environment
Downloading and setting up WordPress
Downloading and understanding the starter theme ‘Underscores’
Installing and setting up Bootstrap
Let’s get started.
Setting up a local environment
Depending on which platform you are using there are platform specific local environments purpose built for your operating system. A local environment, or localhost, is a virtual server hosted on your laptop or pc. You can adjust many server settings as you would on a ‘hosted’ server, one that is hosted outside your computer. The following local environments also give you access to phpmyadmin and cpanel. Let’s take a look.
WAMP
WAMP is a great option for Windows users, from their site:
WampServer is a Windows web development environment. It allows you to create web applications with Apache2, PHP and a MySQL database. Alongside, PhpMyAdmin allows you to manage easily your databases.
MAMP, with an ‘M’, is a great option for Mac users, and is also available for Windows. From their site:
MAMP installs a local server environment in a matter of seconds on your computer. It comes free of charge, and is easily installed. MAMP will not compromise any existing Apache installation already running on your system. You can install Apache, PHP and MySQL without starting a script or having to change any configuration files! Furthermore, if MAMP is no longer needed, just delete the MAMP folder and everything returns to its original state (i.e. MAMP does not modify any of the “normal” system).
However you choose to go about this is up to you. There are many local environment packages out there, but for the purpose of simplicity I will be showing you how to set up a WordPress installation on WAMP. The two packages I listed should be similar and there are plenty of in-depth tutorials for setting up WordPress on MAMP.
Go to WAMP’s webpage and click on Start using WampServer. This will redirect you, choose either ’32x’ or ’64x’. Typically, if your computer uses over four gigs of ram you are running a 64x version of Windows. Once you click your version, look for the ‘download directly’ link and click that. Wait till the download is finished, then run the WAMP server .exe file. When you complete the installation you will see a folder on your C: drive called wamp which has a subdirectory called www, it is inside this ‘www’ folder that you will create your project folders.
Now that WAMP is set up you will need to activate it. You should see a pink icon either in your start menu, on your desktop, or in your system tray. Click this icon to launch your WAMP server.
Whenever you wish to access something on your local environment you can do so by typing ‘localhost/yourfilename‘ into a browser address bar.
Setting up WordPress on WAMP
Now navigate to https://wordpress.org/download/. Click the blue ‘Download WordPress’ link, then download it to your ‘www’ folder for ease of access. Extract the contents into the ‘www’ folder then rename the extracted ‘wordpress’ folder to ‘One Page Site’ or whatever you choose. For instance, I named mine demosite. Your file structure should be as follows: C:/wamp/www/demosite and inside demosite should be the wordpress files.
Now, navigate down to your system tray and click on your WAMP icon (it should be green, if it is not then please launch your WAMP server), then click on phpmyadmin.
Note: Alternatively, you can type into your browser address bar: localhost/phpmyadmin.
Inside phpmyadmin, click the Databases tab, name your database onepagetheme or something similar and then click create. That’s it for setting up the database!
Now in your address bar, type in ‘localhost/yourfoldername‘. You should be presented with a welcome screen:
Click through this screen and the following screen till you reach the screen depicted below.
Fill in the credentials as I did, but instead write in your database name for the first field, ‘root’ for the Username, and ‘localhost’ for the Database Host. Leave the password field blank and the Table Prefix set to wp_.
Click submit.
If you reach an error page then click back, this means you input the wrong information into the fields, double check that the database name is correct and that you copied my field values. If you received the following,
All right, sparky! You’ve made it through this part of the installation. WordPress can now communicate with your database. If you are ready, time now to…
then you have successfully connected the database to your WordPress installaion. Click ‘Run the install’.
Congratulations, you have successfully setup WordPress on a local environment. Take a quick break, we will now download our starter theme,Underscores.
Download & Setup Underscores
Navigate to Underscores’ website at http://underscores.me/. Underscores is a theme developed by Automattic, the company behind WordPress. This starter theme lays the basic foundation of a theme. It is a great tool for building out your own custom theme because it provides a lot of the structure that can aid you in understanding what a theme should look like.
Type in a name for your theme then click ‘generate’. A download window will open up, navigate to your WordPress installation and then go to the themes file, i.e: C:\wamp\www\demosite\wp-content\themes. Download your underscores theme into this file.
Now, if you open up your WordPress installation at ‘localhost/yourfoldername/wp-admin’ you can login with the credentials you created after you ran the WordPress installer. Navigate to Appearance > Themes. Here you should see your theme, activate it now and then preview your site. Pretty basic right? Exactly, this is a starter theme so it will have basic styling.
Once the existential dread of having to style a whole website begins to fade we can turn to our toolbox and really start developing. In this project we will use a great CSS framework called Bootstrap. This CSS library will help us with a lot of the basic styling we will need.
Adding Bootstrap to our project
In order to use Bootstrap you can either download its directory to your project folder or link to its CDN found here: https://www.bootstrapcdn.com/
We will strive to follow the WordPress Way by enqueuing this file in our functions.php file. Enqueuing is WordPress’ way of lining up files so they can be downloaded most efficiently.
Open up your functions.php file in the text editor of your choice, I personally use Sublime Text.
Enqueuing in WordPress
[php] function psd2wp_scripts() { wp_enqueue_style( ‘bootstrap’, ‘//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css’ );
What happens here is we create a function called yourthemename_scripts. In this function we will have a number of arrays that will take a couple parameters. The first parameter is a ‘handle’ that describes the link, next is the link location, and following that is an array that will list any dependencies i.e if the script needs jQuery to be loaded in order to work. Following that is the version number and a parameter for whether the script should be loaded in the footer or not, this is either true or false.
Copy the code above and adjust it to your needs. You will notice in your functions.php file that a lot of the Underscores scripts are already loaded. Most importantly, the Underscores style sheet is the stylesheet found in the root of your WordPress installation, this is the main stylesheet. This stylehsheet must come last in order to overrule any framework CSS.
Now that we have this added to our functions.php file we can save the file and view our webpage. If we did this correctly you should notice that any basic elements should have styling from Bootstrap.
Now that we have our local testing environment up and running we can move onto coding our theme. Check out Part One here.
Update: I have recently changed the WP_Query function featured in this posting. The original function would query pages by specific names, i.e “Masthead” or “Start”. This proved to be inflexible, and in practice provided a poor user experience. For instance, if a user wanted to label their pages more semantically, they couldn’t. This was because any page that did not use one of the correct content-page endings, such as “Masthead” or “Start”, would not be styled correctly. The answer was to change these required names into categories and then query the pages by category, this way the user can name the page anything they like as long as they select the correct category for the page. See below for an indepth look.
One-page themes are very popular. Whether they employ exciting animations or parallax scrolling, they are a unique way to present information on the web. A one-page theme is fairly simple in theory, it is an HTML file with multiple sections. Usually, a one-page theme employs a navigation bar that jumps the user further along down the page using anchor links.
But as simple as this process seems it begins to get a bit more complicated when we wish to hand over control of the content to an end-user. The beauty of WordPress is the ability to give novice end-users control over a dynamic website. Our aim for this project is to avoid hardcoding functionality as much as possible so an end-user can maintain the content, design, and functionality as they desire.
How does a one-page theme work in WordPress?
WordPress is a great CMS because it allows for people with very little coding experience to maintain and run a website. It does this by using a text editor, widgets, featured images, galleries, custom post types, and a variety of other tools. Our goal with this theme build is to utilize these tools to assist our end user when they use our theme.
Planning a theme
Before we go further!
Run over to BlazRobar.com and download a copy of his free PSD “Take”, we will base our build off of this design. Click here!
If you can visualize it, you can build it.
First, we need to visualize what our average user will want to do with the theme. They will probably want to:
Edit each section’s content
Edit the ‘hero’ images
Add and edit widgets
Customize background images, colors and fonts
In order to achieve these objectives, we will need to create a page that has multiple editors, along with multiple featured images, and areas for widgets. In WordPress, a page can only have one section of content that is created by the editor. In a standard page we would usually output this information with:
<?php the_content(); ?>
This function outputs the content of the current page in the Loop. Because we want multiple sections, each with its own unique content section, we will have to combine multiple pages together into one long page. Each page will serve as its own section and provide its own editor and be output by our function the_content().
One-page-site.php and The Loop
First, we will build a template called one-page-site.php. This page will serve as the ‘base’ page for our one-page scroller. Every other page we create will be pulled onto one-page-site.php via a custom query in The Loop.
WordPress uses a piece of code called the Loop. It’s responsible for querying your posts and pulling them onto a page based on specified criteria.
In our site, the Loop will ask if we have posts, then, while we have posts the Loop will post the_post.
<?php while(have_posts() ) : the_post(); ?>
What the Loop asks for is called a query, and we can query many different things by using the WP_Query() function.
WP_Query is a WordPress function that allows us to specify certain arguments for the Loop. By default, the Loop will loop in any posts. In our case, we would like to loop in specific pages (pages are confusingly considered a post-type but let’s put that aside for now). Using WP_Query we can create an array of arguments that will instruct the loop to select all pages with specific categories, list them in a specific order and to make sure that order starts from lowest to highest, i.e. ascending order.
Now that we have a loop that will pull in our pages we can create our template. This project utilizes Underscores, a WordPress starter theme. This theme provides a couple different template files that work right out of the box. We will bring up the page.php file and delete the content between the main tags. Here, we will nest our code inside of a bootstrap container-fluid tag. Take a look:
[php]<?php /** * Template Name: One Page Site */ get_header(); ?>
The commented section at the top /*** Template Name: One Page Site*/ is how we declare to WordPress that this page is a template file.
Save this file to the root directory of your theme and call it one-page-theme.php. Now, we will go into our WordPress dashboard and create a page called home. This page will not have any content, you can also go ahead and set the template to One Page Site. Publish this page and then click on Settings > Reading in the left hand column of your dashboard. Here, set the Front page displays to a static page and set the ‘front page’ option to the page we just created titled ‘home’. You can ignore the posts page dropdown. Click save.
Content & Categories
At this point, we have a page template called one-page-site.php. This template runs a loop that utilizes the WP_Query() function in order to query pages that are a part of the categories: masthead, start, full-image, three-col-grid, subscribe-options, and contact (we will create these categories further down the page).
Let’s create our pages. Based on our PSD file we will have six sections. In our theme each section is technically its own page. Go ahead and create these pages in the WordPress dashboard. The pages can be called:
Masthead
Start
Full Image
Three Col Grid
Subscribe Options
Contact
But any name will do, just be sure that they properly describe the section.
Create them and give them some filler text, you can use this basic lorem text: Lorem ipsum dolor sit amet, falli instructior te sit, no sit fastidii fabellas urbanitas. Eum et veri conclusionemque, duo an unum feugiat legimus. Ea virtute indoctum iracundia eum, mea denique epicurei cu. Mei harum delenit petentium et, verear placerat scribentur mel at. Sit in legere antiopam, nec utamur theophrastus an. Qui an dolor vocent option, consul graece impetus has an.
Make sure to publish each page.
Now we need to assign each page to a specific category. By default, pages cannot use categories or tags. But by editing our functions.php file we can create this functionality.
Go ahead and open your functions.php file and add the following code to the bottom before the closing ?> tag:
[php] /** *Add categories and tags to pages */ function add_taxonomies_to_pages() { register_taxonomy_for_object_type( ‘post_tag’, ‘page’ ); register_taxonomy_for_object_type( ‘category’, ‘page’ ); } add_action( ‘init’, ‘add_taxonomies_to_pages’ ); if ( ! is_admin() ) { add_action( ‘pre_get_posts’, ‘category_and_tag_archives’ );
} function category_and_tag_archives( $wp_query ) { $my_post_array = array(‘post’,’page’);
This code registers categories and tags for pages. Then it modifies our WP_Query so when Wp_Query asks for a category it retrieves the page category.
Save this file and hover over the Page section in your dashboard. In the slide-out menu click on Categories. Here you will enter in the categories: masthead, start, full-image, three-col-grid, subscribe-options, and contact.
Click save.
Now, go to your Pages section of the dashboard and click each page and assign each with a different category. Also, apply the follow orders to each page: masthead[1], start[2], full-image[3], three-col-grid[4], subscribe-options[5], and contact[6].
As you can see, the name of the page can be anything you like but the category needs to match the intended section. This example page is intended to be the ‘Masthead’ at the top of the page. We can name it anything we like, but by setting the category to ‘Masthead’ it will use the content-masthead.php template which we will discuss in the next post.
Also, note that the Order box is set to ‘1′. This ensures that the Masthead section is the first section to be looped onto the page and will be displayed at the top, this is where order => 'ASC' comes into play.
If you return to your page preview you should see that only the pages in our defined categories should be displaying in the correct order.
Wrap Up
That is all for part one. We have learned how to create a page template and then use the WordPress Loop to query specific parameters with the function WP_Query. We have also set up our functions file so that we can create categories and tags for the pages post type. Using these categories we now can control what pages are outputted to the front page and subsequently are included in our one-page theme.
Coming up, we will discuss how to modify the HTML structure of each individual section using content-parts. Here is the code, try to figure out how we would implement this into our files:
How to turn a PSD into a One-Page Theme for WordPress
I always wondered how to create a one page theme. It seemed like an easy endeavour at first but then I started to realize a few features that were important for a one page theme. Sure, anyone could just hard code a long list of sections together and manually edit all of the content, but I wanted something I could give to a client and let them edit the content, y’know, how WordPress is typically used. So my issue became clear. How would I stack together content sections that were all individually editable?
I came to the conclusion that by looping out pages I could create the effect I wanted. Each page would serve as a content-part that would have its own structure and styling. Each page would also have the benefit of utilizing the WYSIWYG editor. But this project I embarked on ended up being multifaceted. As I progressed through the development process I learned a lot about theme development. Here are just a few things I will talk about in my upcoming tutorial:
[bs_well size=”lg”]
[bs_row class=”row”] [bs_col class=”col-sm-4″]
Very basics of a PSD File
How to setup WordPress on local environment
How to download and setup Underscores starter theme
How to set up functions.php
The ‘post-types’
[/bs_col] [bs_col class=”col-sm-4″]
How pages and posts work
How to set up a one page base template
How to implement wp_query and pull in pages to the home-page by category
How to pull in page content via “get_template_part()” function
How to use content-pages for section structuring
How to style each section
[/bs_col] [bs_col class=”col-sm-4″]
How to widgetize sections using widget areas and posts
How to query posts by ID
How to use post or page featured image as the element background
How to make navigation functional
Extra credit: Adding jQuery to increase user experience
[/bs_col] [/bs_row]
[/bs_well]
The files:
The original PSD file is called “take” and can be downloaded for free here.
If you would like to see the PSD in action check out my demo right here.
Keep an eye open for my tutorial!
The tutorial will guide you in creating a one-page-theme from multiple pages and posts. Using WordPress functions we will display all of these separate pages, posts, and widgets in an organized fashion leaving us with a well design theme. The theme will be built from the Underscores starter theme to ensure a solid foundation. Later on in the tutorial we will discuss refactoring our CSS with Sass, compiling CSS and JS files with a task runner such as Grunt, and loading jQuery and other libraries a variety of hosted libraries. Our end goal is to create a theme that not only looks good, but runs amazingly.
Azalea is a beautiful campground with mountainous terrain and a dense redwood canopy which blocks out the sun, dissuading scruffy foliage from overtaking the campground. The American Redwood is a unique instance of specialized adaptation. The oily red bark of its namesake is flame retardant, serving to stave off the common forest fires of this region and the blistering winter’s cold. Redwoods survive by outlasting other species of plants. While wildfires rampage through the hills, the redwood’s protective bark resists the heat while competing foliage is destroyed.
To remedy this, we lined a few trees with cordage and strung our tarps up in order to form a wall. These walls managed to provide some relief to the cold, they also helped contain the warmth from our fire. Nonetheless, the cold is very real. The best way to avoid freezing to death was to drape a tarp over our tents and sleep under layers of blankets. Fortunately, the brisk mornings yielded to relatively warm afternoons.
After a long trip through desert, valleys, and forests, the main takeaway is that our natural resources are comparable to none. I could not help but feel like these places were not real, considering how unusual they were compared to the suburban/urban life I am used to. The isolating enormity that comprises our National Park system is something every person should partake in and endlessly protect and preserve. If you haven’t taken the plunge into an American parkland, what’s stopping you? Get out there!
Pro-tip: check the orange pay slips on each campsite and look for people who may be leaving soon, asking a campsite if they are set to leave that day can sometimes land you a spot.
One unexpected element is the wind. The gusts can roll across the unobstructed landscape at 25-30mph which can make camping nearly impossible without proper equipment. If you find yourself stuck with a windy campsite you can apply this quick fix. Try fashioning a makeshift tent out of your campsite picnic table. These heavy concrete tables can withstand the high winds. Use tarps and cordage to wall off every side and provide yourself a retreat from the elements.
Quick server response time
Compression not enabled
icon either in your start menu, on your desktop, or in your system tray. Click this icon to launch your WAMP server.
