Slide 1

Slide 1 text

Welcome to Front Porch! Thank you for coming out! [SHOW NOTES] This is our second year doing this. A lot has changed in the past 12 months. Last year, we were at Kessler Theater. It was very cozy. We had a projector that was giving us attitude off and on. This year, we have two projectors, more speakers, more attendees, so that’s awesome.

Slide 2

Slide 2 text

Dallas got more people too. We grew 100K. Our industry according to BLS went up 2% as opposed to down 1.3% nationally.

Slide 3

Slide 3 text

Our phones got better. These are the major phones that came out last year. Manufacturers usually talk about the new camera, or the new apps, not much about the browsers though. I pulled their sunspider benchmarks as one example, and performance has improved almost 5 times what that iPhone 4s is running. Note: iPhone 4s did NOT come out last year, but I have it there to remind me to upgrade already. Mainly because I installed iOS 8…

Slide 4

Slide 4 text

Which is loses its battery so fast now. But iOS now comes with all these awesome things. Other browsers are using more and more of this stuff. It’s getting into their nightly builds so we can start learning how to use them. Most of us probably don’t know what these new features in Safari are. For instance, I don’t know the difference between hi-res timing api and nav timing api. But thats why conferences like this are important.

Slide 5

Slide 5 text

Ongoing education is required to keep up with the constant improvements and changes in tech. Whether it’s “Lunch and Learns”, or Meet Ups, or conferences like this, staying up to date with this stuff is part of our job.

Slide 6

Slide 6 text

Today, we’re talking about these topics. This is a lot of technology that has nothing to with how we used to build sites.

Slide 7

Slide 7 text

We’re not here to learn PhotoShop. Nor WYSISYG editors either. Those may have been the tools we used a few years ago. Totally legitimate tools at the time.

Slide 8

Slide 8 text

And given that much of the understanding in what it takes to make a website is PSD -> HTML5, you would think that a FED conf would be all about this process. These ads are still very popular too.

Slide 9

Slide 9 text

This kind of process seems so natural for designing sites though. I’ve got a brand campaign, and it’s got packaging and that same specific packaging needs to be constant from billboard to commercials to the website. So a 1-to-1 transfer from PhotoShop to the browser was — and still is for many — a totally legitimate and profitable way to build for the web.

Slide 10

Slide 10 text

But users are a captive audience you get from billboards or television, or even radio. You don’t know how the user is going to view the site. Go back about three years. An ad agency I worked for was doing this elevator pitch for RWD and in the middle, the creative director interrupted with: “So you’re telling me, in order to make a site that works for Desktop, Tables and Phone, I have to make 3 photoshop documents?!”

Slide 11

Slide 11 text

Now, that would have been a great strategy to begin with. A way to start thinking about RWD. That creative director (with a very traditional background) was asking a legitimate question because his tools have been in desktop publishing.

Slide 12

Slide 12 text

But when you are taking into account the unending combinations of sizes and resolutions? Or Bandwidth? But the obvious answer was, no. The not so obvious answer is, why PSD at all?

Slide 13

Slide 13 text

The tools we use now are way more powerful — and necessary — than what PS can keep up with. When it comes to RWD, and everything involved — interaction, optimization, testing and debugging… We’ve got some options to say the least.

Slide 14

Slide 14 text

So going back to todays agenda. These are our tools too. This stuff here. These components, frameworks, methods, technology. This is what happens with an evolving platform that everybody contributes to. It’s always changing and we get to be a part of it. But the truth is : the web can be however it works for you, and what you want to get out of it.

Slide 15

Slide 15 text

We don’t need to learn an entirely different set of languages to build for the web. With frameworks like the Ionic Framework — which you’ll see later today — you can build native apps.

Slide 16

Slide 16 text

Or you can learn those native languages and have them run in the browser instead. With ASM.js and emscripten Mozilla and Epic got their Unreal engine, written in C++ code to compile to run in the browser. It took about a week. This is without any additional software. No plug-ins, no browser extensions. Just the browser running at near 60fps. Chrome supports this now. IE is putting in into consideration. I have no idea what Apple is doing.

Slide 17

Slide 17 text

Or let’s skip the browser altogether Just as we can push our code to git repo’s, we can push javascript to hardware.

Slide 18

Slide 18 text

Projects like Nodebots, or Skynet perhaps, we can use our existing languages to solve real-world problems. Or travel back in time to find Sarah Conner and quash the human rebellion once and for all.

Slide 19

Slide 19 text

Or just make a kick-ass dress. Kassandra Perch shown here, is literally pioneering wearable technology. Sure, the dress lights up with blinking LEDS. But it comes with a photo cell to adjust how the brightness on the flashing lights. Even more awesome is the accelerometer. So when you twirl around the lights flash quicker.

Slide 20

Slide 20 text

We all know about node.js? Javascript as a server. Which is great for running local dev environments. Or if you’re Walmart, run your backend servers for mobile devices users.

Slide 21

Slide 21 text

So we’re really not under any kind of limitations how we build for the web. Or what “the web” means. We are not beholden to the decisions of software vendors, and hardware vendors. We have a large voice in shaping our industry in the direction we see fit.

Slide 22

Slide 22 text

GDI is a perfect example of us shaping the our industry. GDI is a non-prof that brings affordable edu to women who want to learn web development. This one of their launch parties. There are several of these happening all over the place Mina Markham, the other organizer of FP, started her own chapter here in Dallas. Chirag Gupta, Alexis Abril are both heavily involved in their own groups, and I hope they tell you more about it. We’re not production staff. to be another extension of some branded experience. We don’t just output websites and call it a day. We’re advocating, building communities, were educating. We want to make our jobs safer for everyone who wants to be a part of it.

Slide 23

Slide 23 text

We want to strengthen diversity. This is a code of conduct. It’s not exclusive to FED conferences but this ours. I’m sure you’ve read it. This started because people began to speak out. Abut a year ago, a few brave women spoke out against harassment they received at tech conferences this (CoC) became a thing. Like overnight. Because we collectively said “that’s bullshit” and decided that it wasn’t acceptable not to have safe spaces. It’s not even thinkable to skip this anymore. This is the kind of stuff that says “what we do is important”. That what we do has meaning.

Slide 24

Slide 24 text

So is this. That the people who work hard to make our jobs better are also important. This is new name for purple. Eric Meyer who’s work affects so much of what we do, lost his 6yo daughter to cancer after a long battle. This was her favorite color. As a kind of memorial, we asked about having “rebeccapurple” be the official name for #663399.

Slide 25

Slide 25 text

And now it is.

Slide 26

Slide 26 text

We’re much more capable of shaping how the web should work than any other software industry. In this case, it took the work and advocacy of us to make happen. When we had this problem of not knowing which images to load that best suits the user - screen sizes, resolutions, we were pretty much doing some really backwards stuff to get that to happen. The came about through us working with browsers vendors. Lindsey Norman is talking about this and it’s really great.

Slide 27

Slide 27 text

BTW, almost all of this happened within this year. Picture element took some ramping up but it was within this year we first got a polyfill, then nightly browsers are starting to support it.

Slide 28

Slide 28 text

I’m really excited for next year. We still have a bunch more coming through.

Slide 29

Slide 29 text

Prediction: Diversity is going to continue to be a big focus, that’s without question. And that’ll only improve tech companies both culturally and intellectually. And if you don’t think diversity isn’t a thing, try getting MailChimp to be sponsor without a CoC and at least 1/3 women.

Slide 30

Slide 30 text

Prediction: WebGL now runs on iOS 8, Android has been for a while. So I’m thinking games. Can you imagine being able to distribute games without going through the App Store? We don’t need the approval of some committee to decide if our apps are “worthy”. We just publish them. Isn’t that how the web should work?

Slide 31

Slide 31 text

Prediction: Offline First is a going to be big too. We’ve gone from RWD -> Mobile First. Now we’re building on that to talk about offline first strategies. Chrome and Mozilla are both trying to get Service Workers. Service Workers are more than just cache. With push notifications, Service Workers will prefetch the data and have it for you when you go to that webpage. Something apps aren’t doing. So we’re talking about addressing the shortcomings of not being an app, leveraging it with the advantages of being a website.

Slide 32

Slide 32 text

Prediction: The IE team is actively working with developers to make the mobile web better. They’re doing a better job than Safari in some respects. I think we’re going to see a lot more active competition in browsers again. And instead of the first “browser war” where each one was trying to make their version of the web proprietary. These browsers are trying to out-do each other in pushing web standards we all want.

Slide 33

Slide 33 text

Last prediction? I’ll leave that to you. We’ve seen how open and boundless front-end development is. Apps, machinery, wearable tech, emerging tech that rivals even native apps. So whatever it is that you want to build, I encourage your to think about that today. Listen to our presenters who are so passionate about what they do, and think about how all of this can apply to you. And then, go do that thing and tell us! Come back here next year, and be on this stage. Show us what you made, what you learned, or what you’ve started.

Slide 34

Slide 34 text

Thank you.