Detailed Notes
In the latest Building Better Developers episode, Rob Broadhead and Michael Meloche discuss the “Kitchen Sink App.” This season emphasizes building better habits for developers. The Kitchen Sink App involves creating a prototype or template with essential project controls and elements. It helps developers refine designs, ensure consistency, and facilitate productive client conversations.
*Read More*... https://develpreneur.com/kitchen-sink-app-the-ultimate-developer-tool-for-consistent-and-scalable-software-design/
*The Episode’s Challenge:* Build Your Own Kitchen Sink App
Rob wraps up the episode with a challenge for developers: build a Kitchen Sink App for your current or upcoming project. Whether you are developing a desktop application or a web-based interface, create a simplified version that includes all essential controls and styles. This exercise not only sharpens your development skills but also prepares you to handle unexpected client requests with ease.
*Additional Resources*
* The Power of Clickable Demos in the Software Development Lifecycle (https://develpreneur.com/the-power-of-clickable-demos-in-the-software-development-lifecycle/) * Building Your Personal Code Repository (https://develpreneur.com/building-your-personal-code-repository/) * Building Out Your Application From a Demo (https://develpreneur.com/building-out-your-application-from-a-demo/) * Successful Presentation Tips for Developers: Effective Demo Strategies (https://develpreneur.com/successful-presentation-tips-for-developers-effective-demo-strategies/)
*Follow-us on:*
* https://develpreneur.com/ * https://www.youtube.com/channel/UCZOuFN_LhczvGyT2KSItH_g/featured * https://facebook.com/Develpreneur * https://twitter.com/develpreneur * http://linkedin.com/develpreneur
Transcript Text
[Music] so we're going to do oh we're going to do CSS kitchen sinky type stuff this time around oh we just hit record as far as you know uh like Hello everybody we were back and we were talking about this episode I think this episode we've decided last episode um we decided I think we're g to do talk about like kitchen sick apps and in particular uh my focus I want to talk about like the world of CSS and using an HTML page CSS file uh you know style sheet combining those kinds of things in the world of uh kitchen sink apps and how you can use that not just to uh it's useful from a developer point of view but also this is to sort of show some stuff off to your your customers so I think we'll focus on this one uh any comments before we dive in no I think we talked through most of that in the previous episodes all right because you're such a whiner I'll give you my little like here we go hello and welcome back we are building better developers we are developing or we are in season 23 and we are building better habits this season so this time around we are going to talk about something that actually Michael has talked about many many times uh particularly in the last season uh I think we we we've really gotten into detail on it before but we're going to swing back around it's the idea of a kitchen sink app and really what we're going to look at is using um sort of like a template or prototype to really like jump start your development but also to jump start your conversations with your customers before we get into that we should introduce ourselves and so I'll start by introducing myself my name is Rob Brad one of the founders of develop andur of building better developers also a founder of RB Consulting where we help you Wrangle in all of the Technologies out there we do things from we start with like an assessment we figure out where you are we walk you through some things talk about your business understand your business your goals and then we find ways to marry the technology you have and thech techology that's available with where you want to go so that you're prepared not only when we walk away for today but 6 months six years down the road beyond that okay it's technology you're going to have to look at stuff but we do put things in place so you don't have to reinvent the wheel five or 10 years from now we do that through simplification automation integration we find ways to leverage as all of the right technology it's not necessarily build versus buy it's not necessarily you know um a monolithic approach versus a uh you know ad hoc kind of approach or alart kind of approach it is finding the best way to put those things together and to pick the best Solutions out of how it works for you for your organization good thing bad thing this is one that actually goes back to what I just talked about in technology sprawl I am working with a new customer and uh they have the sprawl to end all sprawls they have had Wild West there it's a this a big organization they've got a lot of stuff going on and they've got a lot of very smart people solving a lot of really complex problems which means a lot of times when you're solving a complex problem you're going to think that I have to solve this in a very customized way not entirely wrong but that doesn't mean that you can't leverage the work of others so they haven't done that they have built this huge thing and sometimes people move on so there is a there is zero people in the world that know all of the things going on in this organization there just isn't there's and there's a lot of stuff out there that people have nobody knows anything about it basically they just know that it's out there and that's about it so that's the bad thing this is a a nightmare of sorts the good thing is there's a lot of work to do I am not going to get bored anytime soon and when you have a fire of this magnitude anywhere you start is at least you're making progress so it's one of those it's like you don't have to you have a ton of work to do you can really start literally anywhere and I don't think anybody's ever going to come back and say no you shouldn't have worked on that you should have worked on this instead because it's all like super critical priority so it's one of those it's like okay you the bad thing is there's a lot of work to do the good thing is you can start anywhere and you're immediately going to be making some progress for it I am going to start with my big world of things I need to do with passing stuff over to Michael so he introduce himself hey everyone my name is Michael malash one of the co-founders of developer building better developers I'm also the founder of Envision QA where we build small uh where we help small to midsize companies and Healthcare professionals build software that meets their needs we can help you with customized soft software we can help you with existing Legacy software and our main focus is really building software with testing in mind so everything we build is test driven so that any changes to the software we know immediately upfront when something breaks versus getting it in front of the users and you cannot lose that uh you know your credibility when software goes out that's bad good and bad uh I'll start with the bad um working on a project we're kind of at the tail end of it and there's no clear direction from the business as to where we're going or if we're even going to be working on this project in the months to come so we're kind of in that little limbo and you kind of we're kind of getting that anxiety of you know are we going to be working on this or not uh so it's kind of one of those things where it's like you know do you jump ship or not the good thing is kind of knowing that's coming along um working with other uh companies trying to bring in more business and also looking at some additional skill sets that I can build into and expand my company into those roles so let's talk about a kitchen sync app and I want to I want to have my focus is how you utilize this as a way to Envision sort of as a more like in the requirements and design phase as a way to Envision what you're going to eventually build now some of it is uh ideal definitely some of this is very much design driven this is very much about design because to me it goes back to really like the core of component development and object-oriented approach and stuff like that where even in a visual sense it makes a lot of sense to have objects and controls and most Frameworks Embrace this now so there are things you have particularly if you if you look at the world of like for example responsive design whether it's you know angular or bootstrap or uh I forget wa U not flutter but I think it's the all of those different things those different libraries out there I for so much I always like mix and match their names they're basically the same thing just you know slightly different in the syntax but the core thing is that like this is what a table looks like this is what uh a data entry form looks like this is what a menu item looks like this is what a a button looks like you know those kinds of things those are all controls and those are all going to have a specific look and feel for your application now this holds whether you are using web applications or whether you're using any other visual like a desktop application back in the day when I built a lot of desktop applications one of the first things I would do is have a page and I would go through and I would build controls that I was going to use all through the application and it was the kinds of things where it was like with this control I'm always going to have like maybe a a micrel kind of thing or a specific kind of label thing uh a lot of times I would group control so I would have things like this is what an address form looks like this is what a uh contact form looks like this is what your basic input Fields look like as far as labels and the um the width of the of the text entry this is what buttons look like this is what a uh a visual container looks like you know in the web World it be things like spans versus divs and uh field sets and forms and some of those kinds of things it's like do I have a uh do I have a different background color do I have a border do I have a dash border do I have an inset do I have an outset all of those kinds of design choices I would do that from the start and that's where this kitchen sync app kind of thing looks like it's it goes to of having a page in this sense you have a page or a form and you have all of your all your controls live there so you can think about when you're building your application let's say it's a standard web application you probably have a and we'll just for lack of better terms we'll just say let's assume you have a header a footer uh some sort of navigation you know menu type items You've Got U form entry Fields you've got reports you've got table kind of stuff you've got search forms you've got filters you've got lists you've got dropdowns those things there's all these things that are part of your application part of what you're going to deliver and so what you do is you build a page you can just throw random data into there basically but the key is to show all of these controls and then for you to be able to see all of them and decide how you want to do it because there's going to be some things that you're going to say particularly in the world of web and this happens really in I think almost every user interface framework and structures out there you start with a a panel you start with some sort of Base you know it's like the body of an HTML document or some sort of canvas that you're painting these things on depending on what you're using it's actually called a canvas and that is like the default for everything and so from there you've got the default for everything which you want to build that up and then you want to start with all of your specific controls say well this is how this thing differs this is how I want to approach this now you may have something that is very complicated where it's like I want to do this uh I've said you very often you see it three different ways I want to do it for like a phone I want to do it for a sort of standard mobile device and I want to do it for a big honkin UI when I have you know almost infinite real estate the nice thing about doing this kitchen sync app whether it's um a web application or a graphical application is what you're doing as your within this these are your in the object oriented World these are like your core objects so what you can do is you can actually inherit from the control for each of those and then just boom you bring in all the stuff that you need to do and that's with and in the web world that's called cascading stylesheets basically that's your CSS is you're going in there and you're saying these are all of my uh core uh objects that exist in the world of HTML you know your headers your anchors your Di your tables your forms all that kind of stuff but then you're also adding within that your classes your style classes that you're going to put on top of these or use within these so they're going to be things like you know you may have like this this uh if it's a button that's great but if it's a informative button versus an action button uh enabled versus disabled and those kinds of things that you can build all that stuff in put it all on a page and the nice thing is yes you can then take that and use that as the foundation for all of the work that you do and save yourself copy and paste and things like that and making sure that um all of these things you know sync up properly not only that the maintenance side of it so if a customer suddenly says I don't want that red I want this other red then you can just change that it's like boom everything just inherits that change that's sort of the stretch goal for this but the other thing I use that CW customer is you want to be able to take this and show it to them to some sent to say early on say this is sort of how these things are going to look this is what a standard report page is going to look like this is what a data entry page is going to look like so your you know your kitchen sync this is where it becomes maybe an app and not just a page but you may have three or four different pages to say this is what this style looks like this is what this style looks like and you see that if you want a good example of how that kind of thing can be useful go out to Wordpress go to one of their themes and you will see effect L the same thing is they have these themes which is essentially CSS because usually it's all of the default standard WordPress tagging and all that kind of stuff just with a CSS slapped on top of it so those are the kinds of things you're going to have a bonus before I pass over to Michael is a another place to look that we've we've both experienced before and it is really a useful place to go is go look up CSS zen garden because it is really it is the same HTML and they just put different CSS and it looks dramatically different which is in itself is that Zen it is very like relaxing to just look through those designs but it's also very helpful because you can steal from some of those and say oh I really like that style of text or whatever they're using and then you can utilize that within your own site so I've I've laid a lot out there and now I'm going to let Michael sort of like you know digest some of that and add all of his little sprinkles on top thanks Rob I really like how you set up the kitchen sink app especially the way you were talking about using The Styling in if you look at the progression of the web basically how the web and building applications has kind of transformed over the last couple of decades we went from building nothing but desktop applications and you had to kind of had this looking feel for Windows you had this looking feel for Mac uh and Linux everything kind of was structured like if you were doing Java it was kind of all Java apps look the same regardless of what platform you were on over time we started having the internet building web pages having more design structures it got a lot better we now actually could take those marketing documents we had for companies those branding documents and actually build the brand into our applications into these designs and then we got into the mobile world and all these mobile devices and now we kind of had a paradigm shift so we went from building desktop applications building web applications building mobile applications each of these at for a time was Standalone applications they did not play well together you could not write one program and have it apply to all well here we are today and there are so many different Frameworks and languages out there now where you can write one application and push it out to multiple devices so the cool thing is especially with this kitchen sink app is you can pick one of those languages or one of those Frameworks and build it and then at a push of a button you can show your customer hey here's what a desktop application would look like oh but by the way if you want to translate that and also have it as a web page click a button here's what it looks like on the web should look very similar and then again bring up on a mobile device here's what it looks like on mobile it can be native applications they don't just have to be here's a web browser we're trying to conform it to the browser you can actually say hey this is what it looks like on Windows this is what it looks like on Mac and ironically enough they actually look like their Windows Dev like their native applications but in reality it's this kind of neutral application you've built and you're using all these stylings for multiple devices it is awesome it is so much fun I I've Loved this transition i' fought through this through the '90s it was hell uh in in the mid 2000s we started having um cross platform or cross mobile development because of a couple lawsuits that thankfully opened up some of the architectures on the different devices so we were able to start doing things uh at a native level but for multiple devices so you could actually create a mobile app that worked on both uh iPhones and Android devices instead of just having okay I've got to build an Android device oh okay I got to duplicate the codebase and create and xcode or an iPhone application so this conversation we've been having about styling and kitchen syn apps is more back to that styling that zen garden because we can now build those applications in a way where we basically have a template every device has the same kind of controls you have tables you have buttons you have input Fields how it looks is what you do with your styling so you can create multiple different styles at a push of a button just some customizations so if you build this kitchen syn app right it should be a very simple copy paste change some styling show it to your new customer and it should look very similar to what they currently have if they have anything at all one interesting note is if you use web tool if it's a web application and they have no idea what their styling or branding is you could use uh tools like Chrome or Safari open up the developer tools and over on the right when you go to a web page you can see all the CSS all the colors all The Branding right there so you could go scrape that or literally copy that put it into your kitchen sync app and now all of a sudden Your Design app looks very similar to that company so there's a lot of benefits to doing this and it it's a lot of fun it really from me personally I like playing with that it's like oh hey let me go do this let me see how this works works or if you do it right the cool part is the web language or I guess what we're at now like 3.0 or hasn't really changed in a while and even when it does change they really only introduce new tags they don't really take away too much um there were a few things they took away for security reasons to help uh you know avoid uh fishing and spy wear but the majority of the the framework what is a web document what is a mobile application it's pretty static these days that doesn't change all the other stuff changes all the styling changes all the JavaScript changes all the stuff behind the scenes that actually help show those controls is really what's important and that's what you just kind of want to go through and refresh yourself on from time to time because then you have this app you can just go hey this works pull it in change some CSS and then present it to the customer so that brings us to our challenge for uh this episode for this week I think and this really it comes actually from something I was doing to to do a a little lecture a little technology session but I think it's it's worthwhile for each of us to do this and I'm actually going to go back and and flesh this out a little bit more is particularly if you're doing web development create a kitchen sync app for your stylesheet which is all it is it's an HTML page H maybe a couple but it's effectively it starts with one HTML page and one CSS document now you may have an application that's rather complex and it needs you know eight different CSS documents so be it put them in order particularly like let's say you're using like I use a lot I use bootstrap very often uh so I'll have the bootstrap Library and then include your customization of that your CSS library on top of that and then have an HTML page or series of pages that is it should be the views of stuff the views of data that your application has and it could be things like a standard homepage uh reporting page filter search page uh you know things like that it maybe like a profile page uh login log out something like that now some of these I think as you put these together you will realize that there's probably the idea of the general framework of your page headers and Footers and navigation and then there is uh like a main section let's say a Content section that is maybe report specific or data entry specific or uh dashboard specific you know things like that so that you would the idea is for you to start thinking through this and say well what really is what are the core elements that I'm using to build this interface now I'm using the words you know CSS and HTML page if you're building a desktop application then build take what you've done and build a stripped down version of your application that is just the guey now there are other things we can do with this idea of kitchen SYNC apps but this for this app you know this excise that we want to do is we want to have a sample of the interface that ideally is going to be something that when you're done with this you'll have something that you can now very quickly play around with it and say what if I did this like what if I wanted to change the color the know the general color schemes of my application what would that look like and how would that flow um it's the kinds of things I think is very good and Michael sort of got into it you can do this within Chrome and Safari and a lot of the browsers you can start tweaking stuff and see like live very quickly you can tweak a few values and the next thing you know it's like oh this is what that this is what it would look like if I did this this is what it look like if I did that but I think it's nice to have the the full uh expanse of what of all the different controls or objects of your application and do that so that's your your challenge is to build that out and if you can put it somewhere if you want to share it I would love to see it particularly the interesting thing is how complicated you don't have to give us the details but I'd be really interested like how complicated you make if you're using the CSS how complicated do you make that do you have you know five or 10 things do you have hundreds of things because it really does get it can get very long very quickly if you have a lot of different controls and a lot of different customizations to it but I think that's a really good exercise and you know before we come around to next time is spend a little bit of time and play with that if you want to go flashback to our prior lesson maybe do a Pomodoro or two where you are just focused on building this kitchen snc app out that being said we will wrap this one up want to make sure we can give you some time to get back into whatever that work is that you're doing you can build your katchen sync shoot any feedback that you have if you have ideas for some other uh building better habits kinds of topics let us know info@ develop ur.com you can reach us on X develop andur there is a develop andur page out on Facebook you can go to developer.com and leave us there's ways to leave forms and contact us so you can give us some feedback that way you can like us and comment and all that kind of good stuff wherever you find all the places that you can find podcast uh you can also go out to YouTube develop actually the developing Channel there you can see this plus lots of other stuff and lead us feedback there that being said with the big breath we get to wrap this one up as well so go out there and have yourself a great day a great week and we will talk to you next time and bonus material so other than of course we've talked about CSS zen garden look at other things if you're not re you know depending upon where you're at at your skill level you know if you are just kind of starting out and really new at this check out things like the W3 uh C sites they have lots of good examples on building HTML and the types of things you can do with CSS there those are good starting points if you are a more mid-level to Advanced developer get a little creative you know once you get the base down go one step further especially if like you're dealing with web navigations and that apply a framework pick a framework one of the coolest ones that I run into a lot and I found a couple good books on this is build a uh like a table that you load data into and then how are you going to load large amounts of data do you need pagination are you going to need a reactive search filter where you just kind of type in you can build the table with a bunch of divs and just make it plain vanilla and then you can apply CSS to add all those controllers at runtime so then you could just oh I want to show page Nation click this on yep your page looks like that oh I don't want page donation I want where you click the uh load more button and it just keeps adding to the list again just tweak boom it's right there you don't change the page you change the CSS you change the controls and think that I'll take that one step further as sort of a bonus I think if you are a mid to advanced level I think one of the things that's really nice to have is not only let's say in the stay in the web world not only the CSS library but actually a JavaScript library because there's going to be a lot of things like that that you start getting into you know clicking a button and hiding a div clicking a button and showing the div um some of the the Ajax related stuff like I want to click a button and have it submit a form or I want to have it go out call an API and then display a value that came back you there uh sort of like messages like you how do I do alerts or how do I do uh shadow boxes and things like that is like those kinds of things you know modal windows and stuff like that how do those work how does it look having those sections of code to be able to show it to see it to test it is awesome but it also allows you a way to quickly then like I said steal from that and say I have just this little snippet of code boom it's available now you may want to be able to you know if you create a new application you want may want to strip that stuff down so you keep it as height as possible but that's okay you can go in and then you start with that and you say well I'm not going to use this not going to use this not going to use this knock those things out and then you're off and running and this goes back to go ahead and throw it into your own little personal repository have like a an application uh template or something like that that you can work from we will talk more about that kind of stuff in the future because we do have some things there about how to uh some other habits we want to build that are about being a better developer through standards and things like that that being said I think we've wrapped this one up we've given you guys enough stuff to uh to think through and to uh you know ruminate over we've got your your task so let us know how that goes give us feedback what are your thoughts on us any additional conver uh like recommendations and stuff like that that you have uh and challenges as well if you've got something like that even if you're like oh I would love to see this challenge but you don't even know what the topic is behind it you know give us that and we'll try to figure out a way to go from the you know reverse engineer something like that as always go out there go out there I'm gonna learn how to speak that's my challenge of the next little thing go there and have yourself a great day and we will talk to you next time [Music]
Transcript Segments
[Music]
so we're going to do oh we're going to
do CSS kitchen sinky type stuff this
time around oh we just hit record as far
as you know uh like Hello everybody we
were back and we were talking about this
episode I think this episode we've
decided last episode um we decided I
think we're g to do talk about like
kitchen sick apps and in particular uh
my focus I want to talk about like the
world of CSS and using an HTML page CSS
file uh you know style
sheet combining those kinds of things in
the world of
uh kitchen sink apps and how you can use
that not just
to uh it's useful from a developer point
of view but also this is to sort of show
some stuff off to your your customers so
I think we'll focus on this one uh any
comments before we dive in no I think we
talked through most of that in the
previous episodes all right because
you're such a whiner I'll give you my
little like here we
go hello and welcome back we are
building better developers we are
developing or we are in season 23 and we
are building better habits this season
so this time around we are going to talk
about something that actually Michael
has talked about many many times uh
particularly in the last season uh I
think we we we've really gotten into
detail on it before but we're going to
swing back around it's the idea of a
kitchen sink app and really what we're
going to look at is using um sort of
like a template or prototype to really
like jump start your development but
also to jump start your conversations
with your customers before we get into
that we should introduce ourselves and
so I'll start by introducing myself my
name is Rob Brad one of the founders of
develop andur of building better
developers also a founder of RB
Consulting where we help you Wrangle in
all of the Technologies out there we do
things from we start with like an
assessment we figure out where you are
we walk you through some things talk
about your business understand your
business your goals and then we find
ways to marry the technology you have
and thech techology that's available
with where you want to go so that you're
prepared not only when we walk away for
today but 6 months six years down the
road beyond that okay it's technology
you're going to have to look at stuff
but we do put things in place so you
don't have to reinvent the wheel five or
10 years from now we do that through
simplification automation integration we
find ways to leverage as all of the
right technology it's not necessarily
build versus buy it's not necessarily
you know um a monolithic approach versus
a uh you know ad hoc kind of approach or
alart kind of approach it is finding the
best way to put those things together
and to pick the best Solutions out of
how it works for you for your
organization good thing bad thing this
is
one that actually goes back to what I
just talked about in technology
sprawl I am working with a new customer
and uh they have the sprawl to end all
sprawls they have had Wild West there
it's a this a big organization they've
got a lot of stuff going on and they've
got a lot of very smart people solving a
lot of really complex problems which
means a lot of times when you're solving
a complex problem you're going to think
that I have to solve this in a very
customized way not entirely wrong but
that doesn't mean that you can't
leverage the work of others so they
haven't done that they have built this
huge thing and sometimes people move on
so there is a there is zero people in
the world that know all of the things
going on in this organization there just
isn't there's and there's a lot of stuff
out there that people have nobody knows
anything about it basically they just
know that it's out there and that's
about it so that's the bad thing this is
a a nightmare of sorts the good thing is
there's a lot of work to do I am not
going to get bored anytime soon and when
you have a fire of this
magnitude anywhere you start is at least
you're making progress so it's one of
those it's like you don't have to you
have a ton of work to do you can really
start literally anywhere and I don't
think anybody's ever going to come back
and say no you shouldn't have worked on
that you should have worked on this
instead because it's all like super
critical priority so it's one of those
it's like okay you the bad thing is
there's a lot of work to do the good
thing is you can start anywhere and
you're immediately going to be making
some progress for it I am going to start
with my big world of things I need to do
with passing stuff over to Michael so he
introduce
himself hey everyone my name is Michael
malash one of the co-founders of
developer building better developers I'm
also the founder of Envision QA where we
build small uh where we help small to
midsize companies and Healthcare
professionals build software that meets
their needs we can help you with
customized soft software we can help you
with existing Legacy software and our
main focus is really building software
with testing in mind so everything we
build is test driven so that any changes
to the software we know immediately
upfront when something breaks versus
getting it in front of the users and you
cannot lose that uh you know your
credibility when software goes out
that's bad good and bad uh I'll start
with the bad um working on a project
we're kind of at the tail end of it and
there's no clear direction from the
business as to where we're going or if
we're even going to be working on this
project in the months to come so we're
kind of in that little limbo and you
kind of we're kind of getting that
anxiety of you know are we going to be
working on this or not uh so it's kind
of one of those things where it's like
you know do you jump ship or not the
good thing is kind of knowing that's
coming along um working with other uh
companies trying to bring in more
business and also looking at some
additional skill sets that I can build
into and expand my company into those
roles so let's talk about a kitchen sync
app and I want to I want to have my
focus is how you utilize this as a way
to Envision sort of as a more like in
the requirements and design phase as a
way to Envision what you're going to
eventually build now some of it is uh
ideal definitely some of this is very
much design driven this is very much
about design because to me it goes back
to really like the core of component
development and object-oriented approach
and stuff like that where even in a
visual sense it makes a lot of sense to
have objects and controls and most
Frameworks Embrace this now so there are
things you have particularly if you if
you look at the world of
like for example responsive design
whether it's you know angular or
bootstrap or uh I forget wa U not
flutter but I think it's the all of
those different things those different
libraries out there I for so much I
always like mix and match their names
they're basically the same thing just
you know slightly different in the
syntax but the core thing is that like
this is what a table looks like this is
what uh a data entry form looks like
this is what a menu item looks like this
is what a
a button looks like you know those kinds
of things those are all controls and
those are all going to have a specific
look and feel for your application now
this holds whether you are using web
applications or whether you're using any
other visual like a desktop
application back in the day when I built
a lot of desktop applications one of the
first things I would do is have a page
and I would go through and I would build
controls that I was going to use all
through the application and it was the
kinds of things where it was like with
this control I'm always going to have
like maybe a a micrel kind of thing or a
specific kind of label thing uh a lot of
times I would group control so I would
have things like this is what an address
form looks like this is what a uh
contact form looks like this is what
your basic input Fields look like as far
as labels and the um the width of the of
the text entry this is what buttons look
like this is what a uh a visual
container looks like you know in the web
World it be things like spans versus
divs and uh field sets and forms and
some of those kinds of things it's like
do I have a uh do I have a different
background color do I have a border do I
have a dash border do I have an inset do
I have an outset all of those kinds of
design
choices I would do that from the start
and that's where this kitchen sync app
kind of thing looks like it's it goes to
of having a page in this sense you have
a page or a form and you have all of
your all your controls live there so you
can think about when you're building
your
application let's say it's a standard
web application you probably have a and
we'll just for lack of better terms
we'll just say let's assume you have a
header a footer uh some sort of
navigation you know menu type items
You've Got U form entry Fields you've
got reports you've got table kind of
stuff you've got search forms you've got
filters
you've got lists you've got dropdowns
those things there's all these things
that are part of your application part
of what you're going to deliver and so
what you do is you build a page you can
just throw random data into there
basically but the key is to show all of
these controls and then for you to be
able to see all of them and decide how
you want to do it because there's going
to be some things that you're going to
say particularly in the world of web and
this happens really in I think almost
every user interface
framework and structures out there you
start with a a panel you start with some
sort of Base you know it's like the body
of an HTML document or some sort of
canvas that you're painting these things
on depending on what you're using it's
actually called a canvas and that is
like the default for everything and so
from there you've got the default for
everything which you want to build that
up and then you want to start with all
of your specific controls say well this
is how this thing differs this is how I
want to approach this now you may have
something that is very complicated where
it's like I want to do this uh I've said
you very often you see it three
different ways I want to do it for like
a phone I want to do it for a sort of
standard mobile device and I want to do
it for a big honkin UI when I have you
know almost infinite real
estate the nice thing about doing this
kitchen sync app whether it's um a web
application or a graphical application
is what you're doing as your
within this these are your in the object
oriented World these are like your core
objects so what you can do is you can
actually inherit from the control for
each of those and then just boom you
bring in all the stuff that you need to
do and that's with and in the web world
that's called cascading stylesheets
basically that's your CSS is you're
going in there and you're saying these
are all of my uh
core uh objects that exist in the world
of HTML you know your headers your
anchors your Di your tables your forms
all that kind of stuff but then you're
also adding within that your classes
your style classes that you're going to
put on top of these or use within these
so they're going to be things like you
know you may have like this this uh if
it's a button that's great but if it's a
informative button versus an action
button uh enabled versus disabled and
those kinds of things that you can build
all that stuff in put it all on a page
and the nice thing is yes you can then
take that and use that as the foundation
for all of the work that you do and save
yourself copy and paste and things like
that and making sure that um all of
these things you know sync up properly
not only that the maintenance side of it
so if a customer suddenly says I don't
want that red I want this other red then
you can just change that it's like boom
everything just inherits that change
that's sort of the stretch goal for this
but the other thing I use that CW
customer is you want to be able to take
this and show it to them to some sent to
say early on say this is sort of how
these things are going to look this is
what a standard report page is going to
look like this is what a data entry page
is going to look like so your you know
your kitchen sync this is where it
becomes maybe an app and not just a page
but you may have three or four different
pages to say this is what this style
looks like this is what this style looks
like and you see that if you want a good
example of how that kind of thing can be
useful go out to Wordpress go to one of
their
themes and you will see effect L the
same thing is they have these themes
which is essentially CSS because usually
it's all of the default standard
WordPress tagging and all that kind of
stuff just with a CSS slapped on top of
it so those are the kinds of things
you're going to have a bonus before I
pass over to Michael is a another place
to look that we've we've both
experienced before and it is really a
useful place to go is go look up CSS zen
garden because it is really it is the
same HTML and they just put different
CSS and it looks dramatically different
which is in itself is that Zen it is
very like relaxing to just look through
those designs but it's also very helpful
because you can steal from some of those
and say oh I really like that style of
text or whatever they're using and then
you can utilize that within your own
site so I've I've laid a lot out there
and now I'm going to let Michael sort of
like you know digest some of that and
add all of his little sprinkles on top
thanks
Rob I really like how you set up the
kitchen sink app especially the way you
were talking about using The Styling in
if you look at the progression of the
web basically how the web and building
applications has kind of transformed
over the last couple of decades we went
from building nothing but desktop
applications and you had to kind of had
this looking feel for Windows you had
this looking feel for Mac uh and Linux
everything kind of was structured like
if you were doing Java it was kind of
all Java apps look the same regardless
of what platform you were on over time
we started having the internet building
web pages having more design structures
it got a lot better we now actually
could take those marketing documents we
had for companies those branding
documents and actually build the brand
into our applications into these
designs and then we got into the mobile
world and all these mobile devices and
now
we kind of had a paradigm shift so we
went from building desktop applications
building web applications building
mobile applications each of these at for
a time was Standalone applications they
did not play well together you could not
write one program and have it apply to
all well here we are today and there are
so many different Frameworks and
languages out there now where you can
write one application and push it out to
multiple devices so the cool thing is
especially with this kitchen sink app
is you can pick one of those languages
or one of those Frameworks and build it
and then at a push of a button you can
show your customer hey here's what a
desktop application would look like oh
but by the way if you want to translate
that and also have it as a web page
click a button here's what it looks like
on the web should look very similar and
then again bring up on a mobile device
here's what it looks like on mobile it
can be native applications they don't
just have to be here's a web browser
we're trying to conform it to the
browser you can actually say hey this is
what it looks like on Windows this is
what it looks like on Mac and ironically
enough they actually look like their
Windows Dev like their native
applications but in reality it's this
kind of neutral application you've built
and you're using all these stylings for
multiple devices it is awesome it is so
much fun I I've Loved this transition i'
fought through this through the '90s it
was hell uh in in the mid 2000s we
started having um cross platform or
cross mobile development because of a
couple lawsuits that thankfully opened
up some of the architectures on the
different devices so we were able to
start doing
things uh at a native level but for
multiple devices so you could actually
create a mobile app that worked on both
uh iPhones and Android devices instead
of just having okay I've got to build an
Android device oh okay I got to
duplicate the codebase and create and
xcode or an iPhone
application so this conversation we've
been having about styling and kitchen
syn apps is more back to that styling
that zen garden because we can now build
those applications in a way where we
basically have a
template every device has the same kind
of controls you have tables you have
buttons you have input Fields how it
looks is what you do with your styling
so you can create multiple different
styles at a push of a button just some
customizations so if you build this
kitchen syn app right it should be a
very simple copy paste change some
styling show it to your new customer and
it should look very similar to what they
currently have if they have anything at
all one interesting note is if you use
web tool if it's a web application and
they have no idea what their styling or
branding is you could use uh tools like
Chrome or Safari open up the developer
tools and over on the right when you go
to a web page you can see all the CSS
all the colors all The Branding right
there so you could go scrape that or
literally copy that put it into your
kitchen sync app and now all of a sudden
Your Design app looks very similar to
that company so there's a lot of
benefits to doing this and it it's a lot
of fun it really from me personally I
like playing with that it's like oh hey
let me go do this let me see how this
works works or if you do it right the
cool part
is the web language or I guess what
we're at now like 3.0 or hasn't really
changed in a while and even when it does
change they really only introduce new
tags they don't really take away too
much um there were a few things they
took away for security reasons to help
uh you know avoid uh fishing and spy
wear but the majority of the the
framework what is a web document what is
a mobile application it's pretty static
these days that doesn't change all the
other stuff changes all the styling
changes all the JavaScript changes all
the stuff behind the scenes that
actually help show those controls is
really what's important and that's what
you just kind of want to go through and
refresh yourself on from time to time
because then you have this app you can
just go hey this works pull it in change
some CSS and then present it to the
customer so that brings us to our
challenge for uh this episode for this
week I think and this really it comes
actually from something I was doing to
to do a a little lecture a little
technology session but I think it's it's
worthwhile for each of us to do this and
I'm actually going to go back and and
flesh this out a little bit more is
particularly if you're doing web
development create a kitchen sync app
for your stylesheet which is all it is
it's an HTML page H maybe a couple but
it's effectively it starts with one HTML
page and one CSS document now you may
have an application that's rather
complex and it needs you know eight
different CSS documents so be it put
them in order particularly like let's
say you're using like I use a lot I use
bootstrap very often uh so I'll have the
bootstrap Library
and then include your customization of
that your CSS library on top of that and
then have an HTML page or series of
pages that is it should be the views of
stuff the views of data that your
application has and it could be things
like a standard
homepage uh reporting page filter search
page uh you know things like that it
maybe like a profile page uh login log
out something like that now some of
these I think as you put these together
you will realize that there's probably
the idea of the general framework of
your page headers and Footers and
navigation and then there is uh like a
main section let's say a Content section
that is maybe report specific or data
entry specific or uh dashboard specific
you know things like that so that you
would the idea is for you to start
thinking through this and say well what
really is what are the core elements
that I'm using to build this interface
now I'm using the words you know CSS and
HTML page if you're building a desktop
application then build take what you've
done and build a stripped down version
of your application that is just the
guey now there are other things we can
do with this idea of kitchen SYNC apps
but this for this app you know this
excise that we want to do is we want to
have a sample of the interface that
ideally is going to be something that
when you're done with this you'll have
something that you can now very quickly
play around with it and say what if I
did this like what if I wanted to change
the color the know the general color
schemes of my application what would
that look like and how would that flow
um it's the kinds of things I think is
very good and Michael sort of got into
it you can do this within Chrome and
Safari and a lot of the browsers you can
start tweaking stuff and see like live
very quickly you can tweak a few values
and the next thing you know it's like oh
this is what that this is what it would
look like if I did this this is what it
look like if I did that but I think it's
nice to have the the full uh expanse of
what of all the different controls or
objects of your application and do that
so that's your your challenge is to
build that
out and if you can put it somewhere if
you want to share it I would love to see
it particularly the interesting thing is
how complicated you don't have to give
us the details but I'd be really
interested like how complicated you make
if you're using the CSS how complicated
do you make that do you have you know
five or 10 things do you have hundreds
of things because it really does get it
can get very long very quickly if you
have a lot of different controls and a
lot of different customizations to it
but I think that's a really good
exercise and you know before we come
around to next time is spend a little
bit of time and play with that if you
want to go flashback to our prior lesson
maybe do a Pomodoro or two where you are
just focused on building this kitchen
snc app out that being said we will wrap
this one up want to make sure we can
give you some time to get back into
whatever that work is that you're doing
you can build your katchen sync shoot
any feedback that you have if you have
ideas for some other uh building better
habits kinds of topics let us know info@
develop ur.com you can reach us on X
develop andur there is a develop andur
page out on Facebook you can go to
developer.com and leave us there's ways
to leave forms and contact us so you can
give us some feedback that way you can
like us and comment and all that kind of
good stuff wherever you find all the
places that you can find podcast uh you
can also go out to YouTube develop
actually the developing Channel there
you can see this plus lots of other
stuff and lead us feedback there that
being said with the big breath we get to
wrap this one up as well so go out there
and have yourself a great day a great
week and we will talk to you next time
and bonus material
so other than of course we've talked
about CSS zen garden look at other
things if you're
not re you know depending upon where
you're at at your skill level you know
if you are just kind of starting out and
really new at this check out things like
the W3 uh C sites they have lots of good
examples on building HTML and the types
of things you can do with CSS there
those are good starting points if you
are a more mid-level to Advanced
developer get a little creative you know
once you get the base down go one step
further especially if like you're
dealing with web navigations and that
apply a framework pick a framework one
of the coolest ones that I run into a
lot and I found a couple good books on
this is build a uh like a table that you
load data into and then how are you
going to load large amounts of data do
you need pagination are you going to
need a reactive search filter where you
just kind of type in you can build the
table with a bunch of divs and just make
it plain vanilla and then you can apply
CSS to add all those controllers at
runtime so then you could just oh I want
to show page Nation click this on yep
your page looks like that oh I don't
want page donation I want where you
click the uh load more button and it
just keeps adding to the list again just
tweak boom it's right there you don't
change the page you change the CSS you
change the controls and think that I'll
take that one step further as sort of a
bonus I think if you are a mid to
advanced level I think one of the things
that's really nice to have is not only
let's say in the stay in the web world
not only the CSS library but actually a
JavaScript library because there's going
to be a lot of things like that that you
start getting into you know clicking a
button and hiding a div clicking a
button and showing the div um some of
the the Ajax related stuff like I want
to click a button and have it submit a
form or I want to have it go out call an
API and then display a value that came
back you there uh sort of like messages
like you how do I do alerts or how do I
do uh shadow boxes and things like that
is like those kinds of things you know
modal windows and stuff like that how do
those work how does it look having those
sections of code to be able to show it
to see it to test it is awesome but it
also allows you a way to quickly then
like I said steal from that and say I
have just this little snippet of code
boom it's available now you may want to
be able to you know if you create a new
application you want may want to strip
that stuff down so you keep it as height
as possible but that's okay you can go
in and then you start with that and you
say well I'm not going to use this not
going to use this not going to use this
knock those things out and then you're
off and running and this goes back to go
ahead and throw it into your own little
personal repository have like a an
application uh template or something
like that that you can work from we will
talk more about that kind of stuff in
the future because we do have some
things there about how to uh some other
habits we want to build that are about
being a better developer through
standards and things like that that
being said I think we've wrapped this
one up we've given you guys enough stuff
to uh to think through and to uh you
know ruminate over we've got your your
task so let us know how that goes give
us feedback what are your thoughts on us
any additional conver uh like
recommendations and stuff like that that
you have uh and challenges as well if
you've got something like that even if
you're like oh I would love to see this
challenge but you don't even know what
the topic is behind it you know give us
that and we'll try to figure out a way
to go from the you know reverse engineer
something like that as always go out
there go out there I'm gonna learn how
to speak that's my challenge of the next
little thing go there and have yourself
a great day and we will talk to you next
time
[Music]