AV-Portal 3.23.3 (4dfb8a34932102951b25870966c61d06d6b97156)

Reuse, Recycle: One Team’s Journey from Projects to Products

Video in TIB AV-Portal: Reuse, Recycle: One Team’s Journey from Projects to Products

Formal Metadata

Reuse, Recycle: One Team’s Journey from Projects to Products
Title of Series
CC Attribution - ShareAlike 3.0 Unported:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this license.
Release Date
Confreaks, LLC
Production Year

Content Metadata

Subject Area
When building app after app at what point do you stop mining your past projects to quickly prototype and commit to maintaining a configurable product? This is a story of building a successful digital agency in a sea of tech startups by figuring out how to transition from one-off Ember SPAs to maintaining reusable products.
Web 2.0 Standard deviation Pixel Group action Process (computing) Linker (computing) Software developer Term (mathematics) Website Videoconferencing Product (business)
Pixel Mobile app Web-Designer Real number Decision theory Software developer Optics Computer programming Computer architecture
Metropolitan area network Email Software developer Cellular automaton Installable File System Physical system
Web page Information management Mobile app Dependent and independent variables Connectivity (graph theory) Projective plane Sheaf (mathematics) Set (mathematics) Template (C++) Process (computing) Event horizon Different (Kate Ryan album) Website Simulation Library (computing) Physical system
Multiplication sign Website Computer-assisted translation Frame problem
Scaling (geometry) Hypermedia Software developer Archaeological field survey Musical ensemble Quicksort Product (business) Social class
Mobile app Service (economics) Observational study Multiplication sign Image resolution Client (computing) Information technology consulting Product (business) Template (C++) Goodness of fit Mathematics Different (Kate Ryan album) Business model Videoconferencing Observational study Software developer Projective plane Boilerplate (text) Keyboard shortcut Product (business) Checklist Type theory Personal digital assistant Self-organization Library (computing)
Mobile app Multiplication sign Decision theory Sheaf (mathematics) Shared memory Time series Codebuch Word Radio-frequency identification Personal digital assistant Videoconferencing Linearization Hill differential equation Quicksort Musical ensemble Library (computing)
Web page Metropolitan area network Facebook Electric generator Shared memory Square number ACID Set (mathematics) Quicksort Binary file Metadata
Point (geometry) Frame problem Dataflow Functional (mathematics) Consistency Software developer State of matter Multiplication sign Decision theory Computer-generated imagery Electronic program guide ACID Branch (computer science) Entire function Number Template (C++) Product (business) Wiki Digital photography Mathematics Goodness of fit Information Lie group Webcam Domain name Mobile app Link (knot theory) Dataflow Consistency Web page Projective plane Shared memory Code Cartesian coordinate system Template (C++) Twitter Database normalization Facebook Function (mathematics) Revision control Quicksort Damping Internationalization and localization
Facebook Digital photography Voting State of matter Computer configuration Decision theory Software developer Structural load Cuboid Quicksort
Web page Scale (map) Source code Addition Overlay-Netz Content management system Information Multiplication sign Web page Counting Menu (computing) Template (C++) Formal language Wiki Digital photography Goodness of fit Process (computing) Software Revision control Alpha (investment) Descriptive statistics
Point (geometry) Installation art Multiplication sign Boilerplate (text) Projective plane Boilerplate (text) Mereology Mereology Product (business) Checklist Template (C++) Goodness of fit Different (Kate Ryan album) Password Library (computing)
Euclidean vector Multiplication sign Sheaf (mathematics) 1 (number) Cloud computing Set (mathematics) Open set Client (computing) Formal language Mathematics Atomic number Extension (kinesiology) Social class Service (economics) NP-hard Link (knot theory) Namespace Physicalism Term (mathematics) Element (mathematics) Product (business) Hand fan Randelemente-Methode Googol Configuration space Website Pattern language Quicksort Figurate number Block (periodic table) Web page Frame problem Dataflow Mobile app Functional (mathematics) Service (economics) Computer file Connectivity (graph theory) Letterpress printing Online help Graph coloring Metadata Template (C++) Frequency Dokumentvorlage Goodness of fit Googol Configuration space Data structure Default (computer science) Default (computer science) Dataflow Key (cryptography) Electronic program guide Client (computing) Letterpress printing Cartesian coordinate system Template (C++) Frame problem Component-based software engineering Word Function (mathematics) Speech synthesis Library (computing)
Game controller Computer icon Menu (computing) Instance (computer science) Cartesian coordinate system Sequence Template (C++) Product (business) Component-based software engineering Type theory Type theory Object model Blog Function (mathematics) Software testing Configuration space Local ring Prototype Booting Booting Default (computer science)
Game controller Mobile app Service (economics) Service (economics) Server (computing) Cartesian coordinate system Mereology Template (C++) Twitter Theory Product (business) Component-based software engineering Event horizon Object model Blog Personal digital assistant Website Object (grammar) Quicksort Website Summierbarkeit Sanitary sewer Modem Routing
Presentation of a group Information Divisor Closed set Software developer Multiplication sign Projective plane Mereology Product (business) Type theory Sign (mathematics) Curvature Data management Word Inclusion map Hypermedia Blog Electronic visual display Quicksort Local ring
Service (economics) Multiplication sign Boilerplate (text) ACID
Linker (computing) Coma Berenices Square number Daylight saving time
Block (periodic table) Data type
and due to the fact that this you don't see this thing and the
fact that you know
that the which of the standard
group my name is Serre Bostic I work at pixel agency in downtown Los Angeles and we make our websites and went out for a movie studios with the movies and for those of you who are not familiar with the term creative technologists is kind of unusual title but it's very applicable in our agency as basically had to do my day job but also bridge the out with the creative team and esteemed and pitch technology ideas and as great protests and be an advocate for the dentine general before becoming developer of finite this for many years and they're really interested in how Web film in gaining are converted into 1 experience of storytelling so as an artist I wasn't documented I Cassin
program look real architecture and
where individuals make decisions and the
histories recorded optics the used every day so when it became a web developer if
America I thought it would naturally the creative developer which is true but not in way that I originally thought as an artist in the winter got a bit lonely so I started with the app pixel as the
sole developer we surely help there then their team quickly grew and we're now about 20 and it's like 4 by developers and contractors on an epic cell and found I fell in love with designing
finance systems and so I worked on the front for fuck's movies con-
Universal Pictures I found evidence that
town where I really learned how to to work with templates and work with scaling
systems so served my background is PHP apps but it's the same concept of components like these sections that can be reused on movie pages as for these 3 sites and our each component can be moved around on the page and have different amounts of data and like and had to account for their being absolutely no data for movie and and then being like so much and having it look good at every stage show and then from this work and set of projects are company learned how to like create libraries so that this is the the social plug-in that we use reuse and each project improving along the way but and this is that's like Regius library which I love it but it everywhere as so responsive Carousel jobs people going
on and then we also do 1 of sites for for movies that are done member so Amber when we use it as an agency it's not to create ambitiously large its decree ambitiously fast indeed ask because at the 2 teams of with solutions that are in very short time frames conquers will get the art from the studios and immediately need to make something so this is an example that where'd the user can make a custom movie poster with their face and it so and then you can customize the text on it and internally we call this active face and also it's seems like the boardwalk and you have to cut out of the mermaid secure faces like an early itself the idea and
so this is the same codebase but it's for the and 1 ancestry and this is my cat buster as Diego
and this is is produced albums girlfriend fragmentariness I n this was as an intuitive in February just we thought this go this was never in music again they're like like we would like this in a week so here is that a promotion for love Simon which is a team coming out stories he could create a valentine that was found on social media found so you know and this
is last year's survey but and then you can change too much I read in in in the sort of the idea that most people in this you were working on a product and I think as a freelancer and agency you we do much smaller scale things but embers still works really well for us so it's sort of I wanted to tell a story of how a agency like learned about product development to remember so were in the 10 to 13 per cent of doing class work the and so some
of the terminology and they've been using the target is when a time of products and high resolution has built and sold so the features are defined as an MDP it as created the products sold and then teachers are out and it just continues on and then projects are sold and then builds so at project has a scope of work client agrees to pay for the project and the project is executed and so these are totally different business models so why would you you know turn projects into products to make my projects and that's in to again undergo so who's a stock were on agencies consultancies freelancers like anyone using internal tools that 2 for repeated projects so why would you follow this project a project to look at this project product affronted pipeline 1 reason is to create company assets so as an agency or consultancy year are in the service industries year on assets are the talent in the room so how do you hold on to that knowledge on 1 ways to create a libraries and templates and hadn't that you can pass on to the the new developers it's a way to revisit years work their past work in organize way and you can make incremental document it prove this that and also you know the boilerplate futures a dancer so then you can spend time at polishing and being more creative so it is a gallon of the talk and then I have a case study of these and also the and can provide attackers to decide when to commit because it is a lot of work and I will point is it's a good idea and dips fertilizer project African policy run into and templates for so that I might want to choose and between the 2 types of internal products and some resources so this
is an app that we need for a I states a 2 years old so if there's any binds don't tell me about it and if they are not only averse to point the I but he was was fun example of mathematical account and so this is actually a video
active so it wouldn't get kind of here on so that has like a little in show showing you why you would use it kind of explaining what happens if you upload a picture and there's all you're going to get so they kind of play with the characters the obligated to your pet music and you can count transform them so here of linear picture times there at and he goes on to initial 5 canvas on and we use average library so it can be cast or other makes everything easier and and then you can add pictures on top of but the same AppleTalk in attacks text on top you can have upgraded pictures behind and it's easily adapted for a new use cases but the thing that we want to remember was that like the user wants to go to the next section or they wanna be able to go back and fix their apps so these decisions were on they're all premade and and slowly beginning to a lot very that that I got into in the video and the Valiant and its tail also so he's got aligned him but luckily I mean I think this is the no years so OK so that we can add his name and then we can make that sort of a word of what what what animals with characters that time series now and then
as we don't create the share so right away we do it on when when the user clicks the share button this is a codebook white on app so children in using this and there's lots against social activity for children so we
generate sort that share set of with PHP PHP when you press buttons we didn't have to create so many pages but we wanted to have this metadata page with the Facebook show a s a discussant to 1 the eBay and then you have pre-populated sweet and then you can also
just download the acid is it's a square the can share on into so that's the only thing now so why like this work is good
example and is it has consistent functionality and user flow so we're able to come talk well we train our alright to you then they kind of stuff so what we had already the base features that we already had and then they just added on to that I and this template I was easily be customize it really easily because all in 1 codebase like we had although bring all the projects the branches off of master so I could see my past work in 1 place or herbal teas past work in 1 place and then the fir whom we had different kinds we just pushed out out to another remote you can push a different removed and I worked on other projects within this didn't work as well like those to locked in like I was afraid to change anything that's would affect other projects but this way also siloed and you can do whatever you want with it and then we kept it up today which is a small miracle if it if I good documentation there's a burgeoning wiki installation guide I mean I made some of these things for the talk but they exist now and we're going to keep going that and also evangelism and these are all things that have learned from and were and why would we all like to use numbers because we know how to use it and we know what features exist and I think we can learn a lot from them and use them in their own companies so this is a
picture of the get have just all the projects we have redundant like 20 on branches of it and his though it is my 1st Wiki because that this is only good for new developers but because my creative team is never going to get up and read up on my product products but it's good for a lie contractors and that's the vacancy was that is about and sort of I had like least to acid requirements and design templates on and features features the 1 that exists and things I wanna change I and there's the disease flow that I've made for this for this topic was really find the use lose the chart I would read originally kind of others is out of my domain but I think in our highlighted in this room have written news of flows and it's a good way to say that when using and the state the database and like a bird and also the creative team can look at this and we know what's available on to them and I also made few X that teachers have all of our predators so fast people will just look at past projects and then make a design really good because there's no time so I actually this year it's like after made that how many times I I really understood by the general idea and how do I don't wanna just keep making the same thing over and over and I wanna keep it open enough so people can make creative decisions but I do want them to tell the introductory story and show the user what they're going making and like the fact that you can add pictures on or text and the share flow and that's the whole point of applications these and that the users but the share and here's like Photoshopped
template but what I liked about this is that each layer is a state of the absolute only 1 place and it can open the can do whatever
they want it this is without looks all of the boxes not beautiful I wanted to keep it sort of on style and so you don't get locked into certain decisions and you can make whatever you want with it and these are all the available options so a new development has been this up and they can see that you can in debt load a photo the user can voters from Facebook here is
that can as it in no nights additives exposed there you can add pictures text and and so moving on
this is my 1st attempt at versioning so I just followed embers the example I use the gooey on get have that was really easy and use said in tag here your title here years on description and then this is helpful documentation up to the right that's saying exactly how cementing semantic versioning works which was really helpful this is this is a picture of our internal wiki which I hesitant to to to do because duplicating information from the get have and also doing internal wiki by I my designed to McDonald's is never going to go to get have they don't even have give count so it's really important that they understand what's available and that these this tool exists and that there's this template that they can start from they don't have to reinvent everything every time and this is example of I feel like my documentation is like a really serious this and I think it's helpful and and I want people to read it my colleague as you movie like wrote likely pages of documentation about what's movies in the 19 across this it's just some general advice about staying hydrated and you think it's just the this extra thing can get in the way but only I mean obviously if you're on the Wiki you don't know what you're doing so it's kind of nice to have this like little and you know friendly language in the middle there so you actually read closer to you like looking for the jobs as I feel like when I read documentation items you know skim it's so this kind of this is good advice and it's good
advice is 200 and project emphatic Chickliss maybe you have similar projects requested multiple times faster and they would benefit from boilerplate you're visiting here were a password work for the good parts and if it's mostly the same thing where you just copying happened and changing it like that might be a good template but if you're picking and choosing little pieces from different projects like maybe those are good al-Ansary libraries so here's a quote forever checks so you
can have and the easily solve from get you there's no need to publish an Indian to consumers obviously ever comfort and encourage everyone to make the add-ons public but if they were needed to be private like you can include them in repose this way so if you want to make internal tools this is a good way to include you just have Europe but mainly in your ear and sometimes at some point in time your
library so some pitfalls that you can run into the designs and functionality change too much so maybe even communicate with their ultimate exactly what existed and they made something crazy and you can even use your templates speech start over as is maybe their product assume general like here recreating WordPress and you just use were pressed some of choosing between a template in and and not like we have allow libraries that we can piece together quickly to create these custom websites for our clients but maybe we can piece together a commonly used ones are so you have sort of this that combination add-on in template together so what I mean by template and talking about something that has that at base I Apple the designed user or defined user flow so not just like in worst templates which may be some people are just think about and there are also simple as I think the key to the templating is to be specific but open so I'm having your class means in JavaScript language be like specific to that functionality but open enough to be used in different places of that same goes many things is hard on some things translating that I found helpful Werner print out the wire frames and cut them up this is like a deer from atomic design word on you could piece by cutting up this physical abuse of paper like you can kind of see with repeated patterns are and you can just write on those little piece of of paper what they're called and also you can work with your UX designer to name things here all agreed to call things the same thing so I we've gone so far as to make a good google dot to show a decline so when you're talking about a component like they know what you're talking about and they're not calling in a modular a section everyone's on the same page I am also a big fan of the I know functional CSS very popularity and they're not mutually exclusive and I think that I think Amber really lends itself to this namespace component structure and so I really enjoy that silence CFS because it enables users from Scalia applications and also they're really made it possible to have a living inside out that like I've always read about and wanted to do it but it didn't seem quite like I was gonna keep it living that for readers the lighter components on a page and you have to feed it the data so you can see the components you can actually see when your styles changes here now the components change and if you can share designer and can see what components existing and so when they create a new page they can just use reuse what's sentence about simply convict figuration like we use sending stylesheets on initializes the the jobless Spirit and services for the data like our apps don't use data most of time because they're so small that it is nice to have like a configuration file so when you can switch out like the title and the metadata really quickly and
so this just an example of how I set my and CSS I'm obviously the component folder might change and after this week this yesterday no we had like a color settings file defaults and typography makes sense an emissions and this is example of topography contain fell from in component style sheets so we I I and the reason why I like them because you can just take the component name put as a classroom on the component itself and namely the style sheets same-named so you can find everything on 2 N I thought about creating like an extension of the book period generator to just automatically add their class of components of an a starting place
initializes of provide an opportunity to configure application as it boots there's 2 types of application initializes an application initial instinct initializes and further face and
whole we have been application initial to bigger than the fabric Gs sequence set like the corner shapes and and things like that before the abolition boots on
and and service is services member object that means for the duration of application and can be made available in different parts of your applications so this
example firm face whole lectures have we call API money get but college that just in case we turn into motion and so I just make a consonant with all the reviewed and then and then and resolve in a promise and if we do Fetch it eventually it would come all worked work so we have like settings for like the hashtag in the theory you are all of the website and sort of you can see that
where it's configured there's FIL of sign in our information so some
resources are right the doctor that work I really like this resources for a week with resources for all types of documentation so for like technical writers engineers scientists they have a conference in a flat channel and local media that's and it's kind of nice to talk to others who actually enjoy documentation because so few people do know and also I really enjoyed and the closing cue from lectures and work on this this about a factor and without permission and found that really inspiring because I did ask permission once that's to work out so you just have to I basically had clean your room and the coded signal little harder than that's great advice and so like maintaining a product as part of a project scope so when you use the sort of internal product development you obviously need some time decades that but just support packages to master I mean you should be responsible for that like it's part of the job and and also to give presentations to your team and and let me know that up updated given announced like let everyone know that this this success so last it is when it's mentioned you know development terminology which ensure everyone in this room uses that it was new to me working in agencies so we take the log like product lifecycle product teams from the owner of manager and us from stories at fixed fast friends like this all this new terminology and once they realize they were collected fictions just so we can work together like as wish I did not well I'm sure you know about those words but I means from after I do want to stay ahead of time so and I read this Gray article I can't pronounce the name of this blog but is called my 20 years of experience of supper development methodologies and it kind of display instead you can try everything and pick and choose what works for your team because it you're all sitting in a room together you can have a very different needs than you know of a distributed team itself Tao is very comparable at inclusions are in conclusion
agencies and sciences or service industries internal products are acid and so you can spend time inventing instead of repeating boilerplate specific your company and to take the wisdom of amber and apply the same principles of documentation and then to listen to your own internal products and get people to use the tools that you it thinking this and if
you this then
you have this in the
in in the the fact in
the you know the of
the the and you
in the think that and
this fact