As some of you know I created CodeBoxers over the Christmas break as a side project, I've just started with a screencast series and have done 3 videos so far.
Would really appreciate if you guys could spare a few minutes to give me some feedback on them and let me know if they're on the right track, easy to understand etc or indeed if they're super boring or too fast and so forth.
The videos are awesome all around. One of the most useful things is the actual workflow you use, SublimeText2, Emmet, SCSS, etc... are all so important for people to see because this is how it should be done (the workflow).
The one thing I would even suggest is to possibly make the video pages display in a full width template so I don't have to zoom in to full screen to see the actual code,
Great screencast, Andy. I'm tempted to start working with sass (is that the correct term?). It seems quite simple to grasp and faster to write. I wasn't aware you could create variables which is pretty neat.
One thing I don't like about full width videos is how the video is taller than my browser's viewport (like on this site), so I automatically click fullscreen anyway.
Would love to see a screencast on working with Kirby compared to Wordpress and then link it up in my discussion. By the way, glad to see that heartbeat demo. Nice job.
@chrisburton Would love to see a screencast on working with Kirby compared to Wordpress and then link it up in my discussion. By the way, glad to see that heartbeat demo. Nice job.
@nilspedersen - Hmm, I'll definitely do some testing, I've been using Screenflow so maybe theres something in the settings.
@scottnix & @frijolito56 - Thanks for the recommendation, I've adjusted the video article container now so they will appear as full width. I'm using FitVids.js by @chriscoyier so they will downsize nicely if you want to trim them down a bit, or have your code editor side by side.
@chrisburton - Great idea, I'll be using Git Tower later when the static HTML/CSS is done, so creating a fork for a Wordpress theme - so at that time, or indeed once the WP theme is done, we can fork again and create a Kirby theme.
@andy_unleash@chriscoyier I actually prefer longer videos that explain in detail what you're doing and why you're doing it. The only part I dislike about any screencast, are long introductions.
@chriscoyier - Many thanks for the encouragement. I think I'm going to stick to the 10min mark as well, I don't want people to get bored and switch off and also want to make it easy for them to jump in and out.
Thanks for the recommendation on ScreenFlow as well - totes awesome.
@chrisburton - Cheers for the feedback, I think some may have to.
For my next series or during this one I'll do a "Learn a tool in 5 mins" thing, like show someone how to use Codekit in 5 minutes or something.
Thanks for going full width on the video, much better. :)
Couple of questions, which will also give you a valid excuse to bump this in a bit since you are creating quality material others should see.
So far the videos have been excellent examples for new people to see how a good workflow is achieved. I was curious why you use Emmet for HTML, but not for SCSS? I think a lot of people would be blown away by how awesome it is for CSS/SCSS.
I was curious why you would opt to add the @include box-sizing(border-box); in specific areas, vs using the (*) selector to target everything and just be done with it? (css-tricks uses it)
Also, I was wondering why you would opt to add a actual clearfix (.cf) to the HTML itself? What about possibly using the Compass @include pie-clearfix; method in the CSS where you need it so it is one less class in the HTML, which if encased in a CMS's may not be as easy to change as the CSS would (cleaner). I have been wondering this lately. :)
Regarding not using Emmet for SCSS - Simply, my brain doesn't have enough room in it to memorise those shortcuts! To be honest the HTML stuff in emmet is great for me, since it's ul>li*3 (so a ul with 3 li's in it) so it's expressive, but because the CSS stuff is just shortcut's I would spend so much time trying to remember it would be quicker just to type them out!
Re: border-box, I usually do stick it straight onto the *, for the video though I wanted to ease people into it with a straight forward example, I'll likely be doing that in the next video.
On the clearfix, I choose to add it as a class for two reasons, one of which is habit, the other is because I can quickly see in my HTML code that I've setup clearing already.
I can appreciate the CMS point though, so it's definitely worth considering, but most of the customer projects Unleash does we use Perch as our CMS, so they just get multiple regions they can type into where all the HTML is behind the scenes.
I'm quite a control freak with my code as well, it took some convincing to use Compass at all at the beginning, I was crafting my own mixins to be 100% in charge!
Makes sense, just was curious behind some of the reasoning and checking to make sure there wasn't something I was missing. Thanks for the response.
I still say you show them some Emmet in the CSS, a quick mention, even if you don't use it. I only say that because your video is already such a good example of a speedy workflow, epic for beginners. :)
@scottnix - Will do, thanks again for your feedback - I think I'll definitely do a show and tell of apps and workflow as a separate series as well to highlight some of the tools and sublime plugins I use.
@jshjohnson - Many thanks for your feedback, I'm going to keep cracking on with these. Is there anything in particular that you would like to learn more about or have something explained in more depth?
@AndyHowells - I can not see the videos in work as they block the use of Vimeo on the network. So therefore I am unable to tell whether or not you have included anything about RWD in them. Apologies if you have...
I noticed that Code Boxers is responsive and also your company website is so you obviously know what you're doing :) it'd be great to maybe get a better insight into that part of web development.
@Watson90 - Ah sorry about that! The RWD side of things will be getting covered probably in video 7-8, I'll be unleashing a custom variation of one of @chriscoyier's awesome mixins below;
@frijolito56 - Well it would definitely be a beginners guide - I've had a cursory look around it so definitely not experienced, so it would be me learning it from the ground up too!
With regards to length I suppose its balancing who gets more annoyed. People who like longer screencasts probably find it less annoying to click Next Video than people who don't like long screencasts. So, while I prefer 20-30min screencasts, I won't get annoyed at clicking next when it ends at 10 mins (as long as there isn't a massive intro as @chrisburton said).
One thing I'd suggest is explaining and maybe giving a link to any addons/plugins you use in your programs, as it can be quite confusing when screencast authors forget to do this.
I've only watched the first half of part 1 but I'm definitely going to go through the series, cheers for making them!
@patrickzdb - Absolutely, that's what I've done with Part 8 (1&2) it's a double length one but cut into 15-20 min chunks.
Regarding plugins and stuff, absolutely, the only real one that I'm using that others may not have is Emmet and the package manager on Sublime but I covered those in an earlier video.
That being said, I'll be using Git Tower in the next one so will provide links and info on it.
I know I promised Wordpress this time but needed to finish up the styling and sort out the responsive side of things! Video 10 will absolutely categorically revolve around Wordpress!
Hey guys,
As some of you know I created CodeBoxers over the Christmas break as a side project, I've just started with a screencast series and have done 3 videos so far.
Would really appreciate if you guys could spare a few minutes to give me some feedback on them and let me know if they're on the right track, easy to understand etc or indeed if they're super boring or too fast and so forth.
http://codeboxers.com/videos/
Many thanks!
I'll definitely give you my opinion later tonight when I actually have time. Looking forward to seeing these.
Hi Andy,
First of great vids - Finaly someone is showing how SASS is working in realtime.
Saw the screencasts in crome, and it seemed to my like there was a little delay from when you're doing the coding and speaking afterwoulds.
Other than that I enjoyed watching the vids.
Regards Nils
The videos are awesome all around. One of the most useful things is the actual workflow you use, SublimeText2, Emmet, SCSS, etc... are all so important for people to see because this is how it should be done (the workflow).
The one thing I would even suggest is to possibly make the video pages display in a full width template so I don't have to zoom in to full screen to see the actual code,
I agree with @scottnix its very hard to look at the code when your not in fullscreen mode.
Great screencast, Andy. I'm tempted to start working with sass (is that the correct term?). It seems quite simple to grasp and faster to write. I wasn't aware you could create variables which is pretty neat.
One thing I don't like about full width videos is how the video is taller than my browser's viewport (like on this site), so I automatically click fullscreen anyway.
Would love to see a screencast on working with Kirby compared to Wordpress and then link it up in my discussion. By the way, glad to see that heartbeat demo. Nice job.
Yes that would be awesome!
Hey all,
Many thanks for the awesome feedback.
@nilspedersen - Hmm, I'll definitely do some testing, I've been using Screenflow so maybe theres something in the settings.
@scottnix & @frijolito56 - Thanks for the recommendation, I've adjusted the video article container now so they will appear as full width. I'm using FitVids.js by @chriscoyier so they will downsize nicely if you want to trim them down a bit, or have your code editor side by side.
@chrisburton - Great idea, I'll be using Git Tower later when the static HTML/CSS is done, so creating a fork for a Wordpress theme - so at that time, or indeed once the WP theme is done, we can fork again and create a Kirby theme.
As a side question, what would be an ideal length for these videos?
2 have gone up to the 20 minute mark, the others are around 10 or so, but I'm conscious that people don't necessarily have loads of time to spare.
What would be the optimum for you guys?
I struggle with that length thing too. I went long in a lot of the Lodge videos, but I know that most people prefer short and I know I do too.
I've started a new series and I'm trying to stay under 10.
These are great Andy, keep going!
@andy_unleash @chriscoyier I actually prefer longer videos that explain in detail what you're doing and why you're doing it. The only part I dislike about any screencast, are long introductions.
@chriscoyier - Many thanks for the encouragement. I think I'm going to stick to the 10min mark as well, I don't want people to get bored and switch off and also want to make it easy for them to jump in and out.
Thanks for the recommendation on ScreenFlow as well - totes awesome.
@chrisburton - Cheers for the feedback, I think some may have to.
For my next series or during this one I'll do a "Learn a tool in 5 mins" thing, like show someone how to use Codekit in 5 minutes or something.
Thanks for going full width on the video, much better. :)
Couple of questions, which will also give you a valid excuse to bump this in a bit since you are creating quality material others should see.
So far the videos have been excellent examples for new people to see how a good workflow is achieved. I was curious why you use Emmet for HTML, but not for SCSS? I think a lot of people would be blown away by how awesome it is for CSS/SCSS.
I was curious why you would opt to add the @include box-sizing(border-box); in specific areas, vs using the (*) selector to target everything and just be done with it? (css-tricks uses it)
Also, I was wondering why you would opt to add a actual clearfix (.cf) to the HTML itself? What about possibly using the Compass @include pie-clearfix; method in the CSS where you need it so it is one less class in the HTML, which if encased in a CMS's may not be as easy to change as the CSS would (cleaner). I have been wondering this lately. :)
@scottnix - Thanks dude.
Regarding not using Emmet for SCSS - Simply, my brain doesn't have enough room in it to memorise those shortcuts! To be honest the HTML stuff in emmet is great for me, since it's ul>li*3 (so a ul with 3 li's in it) so it's expressive, but because the CSS stuff is just shortcut's I would spend so much time trying to remember it would be quicker just to type them out!
Re: border-box, I usually do stick it straight onto the *, for the video though I wanted to ease people into it with a straight forward example, I'll likely be doing that in the next video.
On the clearfix, I choose to add it as a class for two reasons, one of which is habit, the other is because I can quickly see in my HTML code that I've setup clearing already.
I can appreciate the CMS point though, so it's definitely worth considering, but most of the customer projects Unleash does we use Perch as our CMS, so they just get multiple regions they can type into where all the HTML is behind the scenes.
I'm quite a control freak with my code as well, it took some convincing to use Compass at all at the beginning, I was crafting my own mixins to be 100% in charge!
Makes sense, just was curious behind some of the reasoning and checking to make sure there wasn't something I was missing. Thanks for the response.
I still say you show them some Emmet in the CSS, a quick mention, even if you don't use it. I only say that because your video is already such a good example of a speedy workflow, epic for beginners. :)
@scottnix - Will do, thanks again for your feedback - I think I'll definitely do a show and tell of apps and workflow as a separate series as well to highlight some of the tools and sublime plugins I use.
These screencasts are awesome, learnt a lot to increase workflow!
@jshjohnson - Many thanks for your feedback, I'm going to keep cracking on with these. Is there anything in particular that you would like to learn more about or have something explained in more depth?
@AndyHowells - I can not see the videos in work as they block the use of Vimeo on the network. So therefore I am unable to tell whether or not you have included anything about RWD in them. Apologies if you have...
I noticed that Code Boxers is responsive and also your company website is so you obviously know what you're doing :) it'd be great to maybe get a better insight into that part of web development.
Keep up the good work, man!
@Watson90 - Ah sorry about that! The RWD side of things will be getting covered probably in video 7-8, I'll be unleashing a custom variation of one of @chriscoyier's awesome mixins below;
I would like if you showed how to use Kirby, Mabey a beginners guide.
@frijolito56 - Well it would definitely be a beginners guide - I've had a cursory look around it so definitely not experienced, so it would be me learning it from the ground up too!
I spent some time watching a single video of yours last night and was able to convert my blog comments into SCSS. So effing simple.
I think what I like the most about Sass is that you can make it as complex or as simple as you want.
Variables will cover most scenarios, extends for repeating styles and mixins for calculations or if statements.
Compass is really the icing on top so you don't have to repeat and maintain loads of vendor prefixes.
Sweet! I'd like to see you do some SASS/Codekit specific videos
As for the time issue you mentioned, I'd stick with longer videos for project tuts and shorter ones that get straight to the point for specific tasks
@karlpcrowley - Thanks for your feedback mate, will definitely put together some application specific videos next.
Hooray, 2 new videos up as we ramp up and get ready for Wordpress.
Thanks to @chrisburton I decided to do a double video this time, so it's around 15-20 mins each, or 40 if you watch them one after another!
Part 8 (1/2)
Part 8 (2/2)
With regards to length I suppose its balancing who gets more annoyed. People who like longer screencasts probably find it less annoying to click Next Video than people who don't like long screencasts. So, while I prefer 20-30min screencasts, I won't get annoyed at clicking next when it ends at 10 mins (as long as there isn't a massive intro as @chrisburton said).
One thing I'd suggest is explaining and maybe giving a link to any addons/plugins you use in your programs, as it can be quite confusing when screencast authors forget to do this.
I've only watched the first half of part 1 but I'm definitely going to go through the series, cheers for making them!
@patrickzdb - Absolutely, that's what I've done with Part 8 (1&2) it's a double length one but cut into 15-20 min chunks.
Regarding plugins and stuff, absolutely, the only real one that I'm using that others may not have is Emmet and the package manager on Sublime but I covered those in an earlier video.
That being said, I'll be using Git Tower in the next one so will provide links and info on it.
Part 9 is now up!
I know I promised Wordpress this time but needed to finish up the styling and sort out the responsive side of things! Video 10 will absolutely categorically revolve around Wordpress!
Thanks Andy