Hello and welcome to episode 4 of Inspect. In this week's episode I'll be talking about CSS Grid and also some of the latest updates that have been coming out of Apple recently. The first bit of follow-up. In last week's show if you stuck around after the outro music you would have heard myself and Les completely ramble on about Star Wars and complete lack of knowledge about the subject.
So this week I spent a couple of evenings just catching up on all the movies that I hadn't seen. So I'd originally seen episode 4, 5 and 6 there was an trilogy. That's all those were quite a few years ago and I was never really a huge fan of them. I thought they were okay but they didn't really make me want to rush out and watch the rest of the movies when they were coming out over the last few years.
But I thought this is a good time for me to catch up and after watching the rest of the episodes I really enjoyed the whole set. Even episodes 1, 2 and 3 which I know a lot of people do say aren't very good and not really worth watching. But I thought overall I'll do a decent films. So I watched episodes 1, 2, 3, 7 and Rogue One all in that order so I'm all caught up now and I went on Twitter and I wrote a series of tweets with my thoughts.
Things that I liked, things that I didn't, questions that still remained in my head. So yeah I'll put a link to that in the show notes so you can have a read and try me and answer some more questions but also last week's show we were talking about personal portfolios and Dan Petty, a couple of days later Dan Petty was on Twitter and he had a bit of a Twitter storm about portfolio sites and how people aren't really using them for their full potential. So he's been doing a lot of recruiting recently so he's been sifting through a lot of portfolios trying to find good content and good designers but one of the gripes you had is that people are using sort of valuable real estate on their sites and filling it with oversized images or big bold headings or just graphical elements which aren't really adding any real value and how you would prefer it to just be a much simpler way to find your content and yeah this follows on quite nicely from what we were talking about last week where people are using the content to third party sites and it's making it harder for recruiters to look at your portfolio and find your content. So yeah it's an interesting read and there was some extra opinions as there was our Twitter but I think overall you know the message was quite quite an important one and it's something to definitely consider if you are updating your personal portfolio and you are trying to use it as a recruitment tool as well.
So now on to today's main topic which is CSS Grid. The grid is a powerful new layout system available in CSS and it allows content to be displayed in flexible responsive layouts which haven't really been possible within your previous layer systems. The key here is responsive so grid is responsive by default and it massively reduces the amount of code that needs to be written to create responsive and fairly complex layouts and the beauty of it is that it allows you to visually change the display of your elements without having to change the order of them in your source code. Now as of March Grid is now fully supported in the latest versions of Chrome, Firefox, Vyre and Opera and IE 11 and Edge have got partial support which isn't 100% aligned with the official spec of Grid but the Microsoft Edge developer team have tweeted recently saying that they are working on a proper implementation of Grid in the next version of the browser so hopefully that should be out soon.
So a little bit about the grid so there's two main parts to Grid. There's a Grid container which is the parent element which wraps around all the Grid items which are the direct children of the Grid container. The Grid also introduces Grid lines which are the lines either side of a Grid item and those can be used to position Grid items at very specific locations in the Grid so Grid items don't all have to be adjacent to each other and in sequence they can be moved anywhere within the Grid container based on kind of like coordinate values of the Grid lines and then the space that is left between Grid lines is known as the Grid track so that can be either vertical or horizontal to create columns and rows and so the Grid track is one of the most useful features of the Grid and it's probably one of the things that you'll use the most by defining how many Grid items are available on a Grid track for example. A Grid cell is a single unit within the Grid so this isn't the same as a Grid item because a Grid item can actually span across multiple Grid cells whereas a Grid cell is kind of like a single unit of a Grid and finally you've got a Grid area which is basically a collection of Grid cells both horizontally and vertically so you can create like a 2x3 or 4x4 Grid area so you can lay out content over a larger area and make it take up more space within the overall Grid container and the beauty of that is when you've got Grid area all the rest of the Grid cells and Grid items they will float around the area even though it is to fill the rest of the space and they will use the rest of the space that is available to them so it's a little bit hard to explain what Grid can do over audio so if you look at the show notes at inspector.fm I'll put a few links to some good examples on this so the first one is a website called Grid by example by Rachel Andrew.
Now this is quite an in-depth guide to what's possible with Grid and it's got a lot of well-explained examples and Rachel Andrew's also got quite a few videos on YouTube explaining the ins and outs of Grid as well so it's definitely worth watching those. Secondly there's an article by Chris House on CSS tricks called The Complete Guide Grid. Again this is quite an in-depth guide it's one of those sites that you definitely want to bookmark it's similar to the Flexbox guide that was on CSS tricks when Flexbox was first released and it tells you about all the terminology and explains which properties are available on the parent and the child elements so definitely one worth bookmarking and then also if you want to see some more sort of interesting experiments with Grid then you should check out the Labs section on Gen Simmons website. Now what she's done is she's created various experiments with Grid such as different card layouts she's created them on Opliboard and she's created like even some responsive Mondrian style art and various other bits and bobs so she's really been playing around with some more sort of experimental features that Grid can allow you to achieve.
Now I've been experimenting with Grid as well on Code Pen with some of the basics just getting my head around how it all works and one of my favorite features is Grid template areas so again it's a bit hard to explain without visuals but essentially what it allows you to do is assign names to each of your Grid areas and then use those names to create a visual representation of how the area should be laid out. I'll put a link to my pen in the show notes so have a look at there and hopefully it should be fairly self-explanatory but yeah it's a great way of laying out the overall structure of your content such as the header, sidebar content and footer areas which generally don't change drastically and are fairly static so yeah I recommend that you update your browsers to the latest versions start experimenting with CSS if you haven't already have a look at some of the examples in the show notes that I've left and yeah let me know what you create so you can tweet me examples at inspectfm or have a look on the website inspect.fm for other ways of getting in touch as well. So the second thing I'd like to talk about is Apple and some of the announcements they made over the past few weeks. Firstly we had the iPhone 7 which is now available in product red which is a red-backed iPhone 7 with a white front which looked nice I mean some people aren't too happy with the way it looks and wish that it was released with a black front same as the jet black iPhone.
I've seen a few mock-ups which do look nice but also came across a YouTube video by Danny Winger where he takes a product red iPhone and a jet black iPhone takes them both the parts and swaps the parts around to create this red and black phone which everyone is wishing for so yeah it definitely looks nice but it is a high price to pay for what is essentially just a cosmetic upgrade but then you know this is Apple and people do crazy things when it comes to Apple products but yeah have a look have a look at the video and I mean I think he does say that everything is working fine but the phone is not the seal of the phone isn't perfect now so some of the waterproofing is it's not as good as it should be but you know it's an experiment and he's made it work so some people enjoy it so Apple also recently released a new iPad which they're simply just calling iPad now this is probably an attempt to simplify the lineup which was getting a bit confusing with all the various models so now the the new iPad has replaced the iPad Air and the full lineup is now the 12.9 inch iPad bro the 9.7 inch iPad bro the new iPad and the iPad Mini 4 now it's a bit strange that the iPad Mini still has a version on the end but that's probably something they'll scrap them in the next version as well so that everything's just got a very short and precise name so this new iPad is now the cheapest in the lineup and starts at £339 which is still £80 cheaper than the iPad Mini which is £419 of the UK of course it doesn't quite match up to the specs of the pro models but this would be a good replacement for say one of the older iPads which weren't able to upgrade to iOS 10 and didn't have some of the latest features such as Touch ID which is available in all the current models now so I recently just sold my iPad 3 which was capped at iOS 9, 9.4 I believe so I couldn't make use of any of the newer features that are available in iOS 10 so this would be quite good replacement for the likes of me who had an old model and couldn't update any further and couldn't really make use of the features that iPad brings and finally this week Apple also announced that they're going to be completely rethinking the Mac Pro and also getting back into the display business now they haven't said when this is going to be happening they've just said that it's not going to be this year so whether that's going to be next year or the year off there still remains to be seen it's been over three years since the Mac Pro was released and there hasn't been a spec update since then so in conjunction with this announcement they've also given the current model a slight bump in spec in terms of CPU and GPU nothing major no design changes but it is now officially a new model so if someone does want to update they this is probably the best time to do it so Apple made this announcement at a roundtable in their crypto offices with a few select journalists one of which was John Gruber from there in viable so John's written quite a detailed article about what was discussed at this meeting he outlines the updates that the current model has had and also goes into details of some of the difficulties that Apple were having with updating the current model to use some new components but yeah it's definitely worth a read and it quotes Phil Schiller as well word for word about what he said at the meeting so it's definitely worth a read if you want to know a little bit more granular information about the Mac and Apple in general I recommend listening to the accidental tech podcast which is available at atp.fm the guys who host that show they talk about Apple all the time and they're going to a lot of depth so if you're interested in if the Apple then I would definitely recommend that show okay so as usual all the show notes and links from this episode can be found at inspect.fm if you enjoyed the show please share it with a friend leave us a review or rating on iTunes ratings do help the show become more discoverable on the iTunes store so that will really help if you have any feedback or questions you can get in touch via twitter at inspectaffem where you can email me on inspectaffem at gmail.com and thanks for listening and I will catch you in the next show.