Avoid Breaking All the Things: How to Develop Safely

A look at some best practices when developing for the web.

Transcript

1. AVOID 
 BREAKING THE THINGS how to develop safely ALL
2. Alison Barrett Senior Web Engineer at 10up @alisothegeek You betcha
6. HAVE A DEVELOPMENT SITE 01
7. Why?
8. Testing ground for changes
10. Local development environment = web server on your computer
11. Vagrant/VirtualBox
 Runs a virtual computer
 on your computer
12. Varying Vagrant Vagrants
13. Varying Vagrant Vagrants
14. Comes with three WordPress installations: ! wordpress-default (latest stable version) wordpress-trunk (latest development version) wordpress-develop (for working on WP core)
15. local.wordpress.dev
16. VVV Site Wizard
17. example.dev
18. 1. Copy the files 2. Copy the database* 3. Profit *Replace the live URL with your local URL
19. Staging site = copy of the site at a URL the client can access
20. example.com staging.example.com
21. example.com example.mycompany.com
22. Restrict access to logged-in users: ! • Search engines can't see it • Random people can't find it
23. USE VERSION CONTROL 02
24. Why?
25. Never lose any work again
27. Version control = history of changes to files
30. Git Subversion
32. Free online at git-scm.com
34. Commit: One change (or set of changes)
36. Branch: Pointer to a specific commit
37. Branch (concept): Keeping complete versions of the codebase separate from each other
38. master branch first commit Author: Vincent Driessen Original blog post: http://nvie.com/archives/323 License: Creative Commons
39. master Author: Vincent Driessen Original blog post: http://nvie.com/archives/323 License: Creative Commons
40. master Author: Vincent Driessen Original blog post: http://nvie.com/archives/323 License: Creative Commons
41. master Author: Vincent Driessen Original blog post: http://nvie.com/archives/323 License: Creative Commons
42. master Author: Vincent Driessen Original blog post: http://nvie.com/archives/323 License: Creative Commons Overwrote a change? ! It's okay; that change was recorded right there.
43. master Author: Vincent Driessen Original blog post: http://nvie.com/archives/323 License: Creative Commons
44. master Author: Vincent Driessen Original blog post: http://nvie.com/archives/323 License: Creative Commons develop live site development site
45. Scenario: A bug needs fixing on a live site immediately
46. The fix needs to be in functions.php… ! …but an unfinished feature has changes in functions.php
47. master Author: Vincent Driessen Original blog post: http://nvie.com/archives/323 License: Creative Commons develop
48. master Author: Vincent Driessen Original blog post: http://nvie.com/archives/323 License: Creative Commons develop hotfixes
49. Git Flow
51. Git Flow ! Google it, look for "A successful Git branching model"
52. 03 PLUGIN: RESTRICTED SITE ACCESS
53. Why?
54. Controlled downtime
55. Logged-in users see the site, visitors see something else
57. Use this when the site is broken but WordPress still functions
58. Example: Broken plugin was installed
59. Example: Menus got deleted
60. Example: Site was hacked
61. You can fix the problem without users seeing a broken site
62. 04 CUSTOMIZE WP ERROR PAGES
63. Why?
64. More friendly to visitors
65. Briefly unavailable for scheduled maintenance. Check back in a minute.
66. Error establishing a database connection
70. More useful to you
71. header(  'HTTP/1.1  503  Service  Unavailable',  true,  503  );   header(  'Content-­‐Type:  text/html;  charset=utf-­‐8'  );   header(  'Retry-­‐After:  600'  );  //  10  minutes
72. mail(    'alison@10up.com',    'example.com  is  down',    'Database  error!  Go  fix!'   );
73. mail(    'client@example.com',    "example.com  is  down,  but  I'm  on  the  case!",    "Howdy  Client,        Your  site  is  currently  down,  but  I'm  aware  of   the  problem  and  am  working  on  a  fix  right  now.   I'll  let  you  know  as  soon  as  it's  back  up.   ! -­‐Alison  Barrett"   );
74. wp-content/ maintenance.php db-error.php
75. <?php   header(  'HTTP/1.1  503  Service  Unavailable',  true,  503  );   header(  'Content-­‐Type:  text/html;  charset=utf-­‐8'  );   header(  'Retry-­‐After:  600'  );  //  10  minutes   ?>   <!DOCTYPE  html>   <html  lang="en-­‐US"  dir="ltr">   <head>     <title>Sorry,  We're  Getting  Tuned  Up</title>     <meta  charset="utf-­‐8"  />     <link  rel="stylesheet"  href="http://alisothegeek.com/wp-­‐content/themes/…/style.css"  />   </head>   <body>   ! <div  id="content">     <h1>We  needed  a  tune-­‐up.</h1>     <p>We're  doing  a  bit  of  site  maintenance  that  should  only  last  a  few  minutes.</p>     <p>Go  grab  a  cup  of  coffee,  and  we  should  be  back  by  the  time  you  are!</p>   </div>   ! </body>   </html>   <?php  die();
76. Note: WordPress is broken, so you can't use WordPress functions
77. wp_mail(…);   mail(…); × ✓
78. 05 HOPE FOR THE BEST, PREPARE FOR REVERT
79. Why?
80. You can't predict everything
81. master Author: Vincent Driessen Original blog post: http://nvie.com/archives/323 License: Creative Commons develop hotfixes
82. master Author: Vincent Driessen Original blog post: http://nvie.com/archives/323 License: Creative Commons develop hotfixes revert work with the broken code on your development site
84. 1. Make development & staging sites 2. Use git and Git Flow 3. Use the Restricted Site Access plugin 4. Customize error pages 5. Revert code in case of emergency
85. THANKYOU aliso.me/develop-safely