Meetup Meeting Notes

Advanced: WordPress tools roundup
Presenter: Clark Wimberly
July 2 · 7:00 PM  Capital Factory (in the Austin Centre)

Developers rejoice as we host an advanced tools roundup.
Topics *might* include:
-IDE/development (which editors, clients, apps do we use)
-Plugins/services (which services can’t we live without)
-Social/learning (the best way/places to interact with other coders)

This will be in a roundtable format with a few developers taking your questions and talking about the stuff they think is cool and useful. As Clark put it, “lots of hollerin’ encouraged.”

Note: this is an **advanced** topic. Everyone is welcome, but it’s designed for our WordPress folks who love code (or want to learn to love it!)

Note: Clark uses a MAC and is thus Mac-centric, using Sublime Text 2
SEE http://clarklab.com/tag/wordpress/ where he talks extensively about the Sublime Text 2 text editor tool and why.
– flexible
–  own plug in system – thousands of them; and has snippets
-can find a pkg that can do what you want
e.g sublime sf ftp
also has tons of videos

Much is from Clark’s Outline with additional notes in-between:
IDEs & Editors
Fonts
Services
Plugins
Social & Community
Folks in Austin you should know
and all you should know natively

IDEs & Editors
Sublime Text
My main text editor. Can’t live without its packages, snippets, customization, and portability.
sublimetext.com

some use vbtext (only mac)
Sublime SFTP
Favorite ST package. Makes working remotely almost invisible.
wbond.net

ForkLift
My favorite Mac FTP client, featuring a killer dual-pane interface and a bunch of other goodies.
binarynights.com

FTP -for pc -filezilla , transmit, cyberduck
sftp – forklift better, transmit faster for ftp

WordPress Textmate Bundle
The entire codex in one package (snippets and completes for virtually every WP function).
github.com

Emmet
A plugin for many popular text editors which improves HTML & CSS workflow (with snippets, completes, etc)
emmet.io

autom complete libraries

Q: what debug pkgs?
A: php lint function, php storm – willl tell you more what you did wrong – runtimes error,syntax works, but will look at assign statements

apptana (per NB)  – started playing it with, scriptable, syntax checking, java, and shows browser dependencies; also lets you manage projects

built on flip ide – runs on linus, mac, windows – cross platform

ide= integrated develoment environment (?)

Sass            sass-lang.com
Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more.

does things that css can’t do it on its own

Mixins – variables on steroids
Compass compiles sass (per NB) uses less, wearekidd.vom/simpleless

preprocessors – then all crunched in to css
clark using live reload

LiveReload            livereload.com
LiveReload monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed.

CE using codekid – allows him to add projects, and brings into his javascript
some using haml (?)
monitors your stuff, minutes sees a change, will change it live

bracket built into adobe for profit use – not as robust

clark recenlty did cloud ide review – that’s why likes sublime, saw some bugginess otherwise

bourbon – library for mixins, font variables – forget about vendors prefixes
Bourbon                            bourbon.io
A simple and lightweight mixin library for Sass.

SizeUp                            irradiatedsoftware.com
Makes managing multiple windows a breeze (on any size screen)

Fonts
Typekit                           typekit.com
Font subscription service featuring high-quality typefaces. From $24.99/yr
uses it on almost every project

Google Fonts                google.com
A font library containing free and open-source fonts.
fonts just aren’t as good, reason they’re open source and ree…

cloud.typography                        cloud.typography.com
A subscription service featuring the highest-quality fonts. From $99/yr.

highest quality
Font Squirrel                            fontsquirrel.com
A font library containing free and medium-quality fonts. Also a handy converter you probably shouldn’t be using.

free and medium, same as googlefonts, finds better if pay

Symbolset                            symbolset.com
An icon font with a twist. Ligatures are used (letters combing into a single glyph) to transform words like “home” or “user” into visual icons. From $1.

IcoMoon                            icomoon.io
A tool for mashing together different icon sets into a single font, combining and minimizing the assets in the process. Free, and up.

Services
Dropbox                dropbox.com
My favorite source-control-but-not-really. Used for so many projects in the early stages, across all machines.

Google Drive                drive.google.com
Like Dropbox, but from Google.

Pingdom                    pingdom.com
Know when your website goes down (if you care).

GitHub                    github.com
Build software better, together. Source control and bug tracking and wikis and oh my.

tortoise kit for pc, though git now has one

wordpress core using svn

BrowserStack                browserstack.com
Cross Browser Testing Tool. 200+ Browsers, Mobile, Real IE.

helps visually id stuff

gtmetrex.com for performance testing
e.g optimizing images, hand javascript for overall score

yahoo smooshit – strips out meta data, can 1/2 oaf a file size (gtmetrics also do that)
for windows – earthen user

ifanview
gimp – if you don’t want to pay for photoshop
adobe fireworks – is now free

Plugins

ACF – Advanced Custom Fields            advancedcustomfields.com
The best custom fields library ever. So flexible and robust it’s ridiculous.
updates every 3 months, in 4th version

Jetpack for WordPress            jetpack.me
Bring a bunch of goodies from wordpress.com to your self-hosted installs.
goes on every site he builds –

Manual Control for Jetpack
Put the kibosh on new Jetpack modules.
wordpress.org
gets overzealous, this module will restrict what jetpack does

also slim jetpack

Debug Bar
Submitted by @tnorthcutt
wordpress.org

Debug Bar Extender
Submitted by @tnorthcutt
wordpress.org

Regenerate Thumbnails
Runs through your library and makes images in all defined sizes. Bonus: Bill Erickson to the rescue http://www.billerickson.net/code/dynamic-image-resizing
wordpress.org

imsanity – auto limits filesize

add from server (per NB) – gargantuan won’t let you upload, go from server because of file limit

WP Migrate DB Pro                deliciousbrains.com
Submitted by @tnorthcutt and @pat_ramsey

wpb retina 2x

wp gallery – thickbox, jetpack has own pop up now

wp gallery

wp  backup – CW sends clients to dropbox – check with host company to make sure this is okay

wp engine back up to Amazon for free – just data

automattics is a paid service

watch db size – it doens’t tell  you if php doesn’t complete

Developer
Submitted by @tnorthcutt
wordpress.org

Social & Community

Dribbble                dribbble.com
Think work twitter for designers. Share small shots of whatever you’re working on.

Forrst                    forrst.com
A community for developers and designers looking to sharpen their skills.

CodePen                    codepen.io
A kickass HTML/CSS/JS playground, filled with all sorts of front-end examples.

WordPress Answers                    wordpress.stackexchange.com
WordPress-flavored Stack Exchange. If you can’t find an answer here, I’d start to worry.

Austin WordPress Meetup                    wpaustin.com
The finest WordPress community this city has ever known.

Meetup                    meetup.com
Find a bunch of like-minded people and spend some time with them.

Folks in Austin you should know

Bill Erickson                billerickson.net
Dude can code and drink.

Paravel                    paravelinc.com
Three dudes on point.

Happy Cog                    happycog.com
Transplants that do web design, web development, mobile & content strategy on a whole ‘nother level.

Handsome                    handsome.is
BBQ and cocktails aint the only thing to experience on the east side.

WP Engine                        wpengine.com
You’re sitting in their offices. Everybody waaaave.

per NB –  remember apple widgets
sql pro – navicat  – export code and see what it does,
json tree standard – to make in clickable handable tree
wp is also working on a json rest.api – have an app to make db completely simple
to standardize how calls are made

wpcli – for command line
wp stack – lost of heavy stuff
wodfence- security – to block out people who try to log in as admin – can block up to 6 days,
– don’t use admin anymore is way around it
better wpsecurity plug in per CW  404nscans; but on flip side, lot of 404 errors with a bad theme, can lock out some good
infitnite wp is better to track plugins – what’s needed (per CW)
?authority will tell you what author is and get the admin, but better wpsecurity
any on plugins are for a massive hit and run
25 had known exploits of sql injections
50% through host
hostgator and godaddy are worst

keypass is good for passwords – keep it on dropbox – standalone; generates on the fly, free
onepassword (per CW) – standalone
lastpass is fully hosted
revisions – google easter egg compare revisions

As always, scribing is not a science, so there may be some user error in taking notes.

BTW – We can always use help scribing meeting minutes!

Austin WordPress for Business Central (The Anatomy of a WordPress Theme)
Presenter:  Corey Ellis
July 8 · 7:00 PM The Posh Co-Working Lounge

This session was video-taped and will be available (eventually) on WordPress.TV

The theme of your site at minimum controls how your site looks and many times may offer a multitude of the functionality. The basics of understanding how WordPress themes work is understanding patterns in the 3-5 core files that are required for a theme. Today’s session with walk you through a cursory overview of each of these files so you understand how they all work together to create a WordPress theme. This will be your first step toward learning how to edit or even create themes in the future.

WordPress Theme Anatomy (from Corey’s great outline)
Basic Overview
Header
Footer 1

Basic Overview Links 4 links
Theme Development « see WordPress Codex
Stepping Into Templates « see WordPress Codex
Template Hierarchy « see WordPress Codex
WordPress theme – The Anatomy, an Infographic – Yoast
SEE  codex.wordpress.org

index.php is the one file where a theme would work – though it would get really large and unwieldy
3 thing required
1) index.php
2) style.css –  only thing required is Theme Name / tags help you find the theme
3) Functions – don’t need – but place to act different functionalities – like in Twenty Eleven,  it’s a php file

How does it get from these 3 files to something that actually works?
WP Page Structure
Header
Content
Footer

Another good view – lays out  the hierarchy
what template the wp will get info from
Single
Page
most important two files

Spend time on 1st four links in Yoast blog post – puts together the anatomy of a theme file

Q: What does unicode mean?
A: NB – when internet started there were 26 characters; then as it became more involved, character set increased, then with asian language requirements  – need 2 full bit set – so utf8 or unicode (requiring a diff database setting)

in header.php
meta name content”width=device-width – if this tag isn’t there, it’s not a responsive theme
Q: if everything is put in the index, does it matter what order it’s in
A: yes
3 elements matters
controls,communicate with theme files – this does not show up to the front end user
</head>
<body tag
is what is seen
so head has to become before body

wp_head
or
wp_footer
is where the functionality is
where it is important
CE puts important things in footer
machines has to stop in header to keep reading
if doing slider, JavaScript put in footer, because css loads faster

wp_head has to be before closing head
and
wp_footer has to be before closing body tag </body>
plugins are built for change – so you can override
e.g., so updates won’t get overwritten
what is a hook – way calls are made – actions and hooks
wp has different functionalities
there’s a hook for that – (part of the architecture)
90% of what you do is header or footer
the 10% will be ‘filter’ for the content – manipulate how it’s laid out

Body Class –
in header.php
adds classes to body depending on what page you’re viewing
you can add open body to set up different classes in each section (make sure you close in same section) – so that you could do it in header, one in body, etc.
– might slow cycle down – though nick said just adding more characters so it won’t slow down that much

navigation typically in head file
role ‘navigation’
wp_nav_menu – look in codex file
2 important functions
register_nav_menu (2 params – location and description)
[functions load 1st and it will control, if no functions, will look for index.php]
and then…

(sorry, missed the last part of the meeting)
BTW – We can use help scribing meeting minutes!

Presentation by Jason Cohen, @asmartbear, WPEngine.com co-founder.

Theme: Security – requires trust

Privacy: trust in a shared secret.

• Enigma machines used in WWII by the Germans to send coded messages. One machine sent out a machine, and another with the same configuration could decode it.
• Algorithms are ways to encode things, and keys are the configuration. The algorithm can be open source and public. The key is what is secret.
• Example: Tiny Encryption Algorithm (TEA) – very simple chunk of code. Pretty secure.

Problem: How to make things tamper-proof?

• How would we know if a message has been messed with along the way. License codes work this way. An algorithm generates the code. But how do we prevent guessing or tampering.

Answer: Content + HMAC

Run code through an MD5 hash and that creates a signature.

• hash(content)
• hash(key + content)
• hash(key_saltA+ ontent)
• hash (key_saltA)+ hash (key_saltA+ content)

Problem: how to share a secret?

How do you share a secret with secure connections with banks, etc.? Back in the enigma days they actually met in person to share a key on a piece of paper

That isn’t feasible

Diffie Hellman 

• Alice puts a secret in a box, puts a padlock on it. Lock A
• She sends this locked box to Bob. But it has a padlock.
• Bob puts his own padlock to Alice. Now it has locks A + B
• Alice removes her lock. Now it has lock B.
• Bob can now unlock the box.

How do we know that a spy isn’t involved and put his own lock on it? How does Alice know who is receiving the box?

Problem: Who the f*5k are you

• Quantum mechanics and black holes
• There’s no such thing as a vacuum – spontaneously two particles are created
• Quantum entanglement – particles p and q
• Symmetric key – same key s is used to encode and decode
• Asymmetric key – something encrypted with p can only be decoded with q and vice versa
• What if Bob creates a key, q, that he never shares with anyone, and publishes p everywhere. Public.
• Now Bob can tell Alice, he encrypted message with q, so she can decrypt it with p; if Alice or anyone else encrypts with p, only Bob can decode it.

Next issue of trust: if I am sure p is really Bob’s it’s cool. But how do we know?

Answer: Trusted directory of public keys.

• Directory entry: information about the entity with Public Key. We can trust the directory entry if VeriSign or another trusted directory has encrypted and alidated it.
• E.g. VeriSign – has its own public and private key
• A certificate is when one of these directory companies encrypts your information and verifies the entry.
• Problem: 100s of CAs – which Certificate Authority do I trust? Some are chains of CAs.
• If you look at your browser or laptop settings you will see certificates that are set by the companies behind each (e.g. Apple, Chrome etc).

TLS Handshake:

(aka HTTPS / SSL)

Chase bank: Hi I’m Chase Bank, heres my certificate signed by VeriSign

You: I trust VeriSign so I trust that P is Chase’s public key [p]. Here’s a secret key S. [s]

Chase: [p] okay I understand S. [p] let’s switch algorithms to [s] (Asymmetric keys are super slow, so let’s agree on a key and use a symmetric key algorithm.)

You: [p]okay

[s] blah blah (secure)

TLS: Fancy Pants!

• TCP “FIN” attack – checks for connection to be closed properly
• MD5 attack – hasn’t even happened yet but it’s already addressed – alternative hash to employ make sure an attack is useless
• Renegotiation – new shared keys and algorithms swapped out on the fly so that someone can’t crack it

HTTPS: Special considerations

• Slow to connect – can take seconds. Makes sites muuuch slower if everything is secure. You should only secure sensitive data.
• Keep-alive high – connection remains open and multiple bits of data can be shared. Can be shut down after a certain period of time e.g. 2 minutes
• Connection management – should not use Apache for secure stuff – will keep waiting for the keep alive, but takes up a lot of RAM. EngineX, Lightly, etc. that does better with connection management keeping internet connections alive. Only use Apache when running PHP.
• No virtual hosts (except SNI) – for SSL you can’t run multiple domains at one IP address. SSL secure connection happens first. Certificate has domain in it. Can only provide one certificate at a time. So you can’t have a second domain in the same connection. SNI web servers and browsers can do this. So you either need SNI or a separate IP for each domain.
• Can’t mix (faster) HTTP resources with HTTPS resources – cookies can be transferred and make connection insecure. So once HTTPS  is connected it should all be HTTPS and not go back to HTTP.

SPDY: The future of the web?

• New protocol, not security protocol
• Speed: multiplexing, prioritization, compression
• Multiplexing: Browser asks for all resources at once instead of one at a time. Can go in batches. Can load a page twice as fast.
• Priortization: loads things in a different order to improve user experience
• Compression: compresses headers etc.
• Allows for a persistent connection: server push, server hint. Browser and server establish connection because server can push stuff instead of waiting on browser
• Security: SSL penalties significantly lessened – SPDY solves most of the reasons security is slow
• Google argues that using SPDY would make the whole web secure
• Very few browsers (Chrome) and servers don’t use SPDY for now – experimental
• W3C is forming a consortium
• More info: http://en.wikipedia.org/wiki/SPDY

Questions:

Self-sign certificate

• Here’s my public key. I don’t use VeriSign or anything else. No trust at all.
• Easy to set up, if you trust it, then it’s okay.
• Your WordPress login is completely insecure. If someone is watching packets at a coffee house then they can get your password.
• One way to solve that is to install a certificate. Expensive and somewhat difficult but you can encrypt the admin.
• Since you know it’s you logging in, you can use a self-signed certificate on your own server. Browser will ask and you’d be okay. NOT good for ecommerce. So it’s a good thing for your own login.

Shared Certificate

• Wildcard certificate e.g. *.wordpress.com so anything at WordPress.com can ride along
• GoDaddy is a certificate authority. They could issue you a certificate on the spot for a domain name.
• Just because you share a certificate, you aren’t sharing a TLS connection. Everything after a public key is unique so many users can be using a shared connection simultaneously.

Should you spring for your own IP address?

• It’s a trivial cost. Pay a buck or so a month for the IP address. You would need one for each domain that needs security.

When you go between secure and insecure connections does that hurt your connection? (e.g. going away from shopping car to read reviews, coming back to shopping cart).  

• If the swapping is fast, probably not. If there’s more of a lag, but if it’s a problem, make the keep-alive window high. Some people will allow an entire site is HTTPS so once you leave the secure content, the site will keep as a secure connection.

For log in screen, use relative links rather than absolute links for images etc.

SPDY vs AJAX

• Completely different things. AJAX: browser is still pulling everything in one at a time. SPDY: things done in batches. Server can push things at you. Lazy loading, still AJAX.

With CDNs:

• When you have a secure page, the CDN can slow you down because it’s another connection. Because the latency is better between browser and CDN, it’s good if there’s a lot of secure requests. If there aren’t a lot of requests, it may not make sense. It depends.

SPDY would hopefully eliminate need for sprites