![]() ![]() I’ve not used EdgeInspect yet – well not in it’s current form anyway – but if you have an Adobe CreativeCloud subscription you can use it for free. But there are some cool products out there that are starting to make device testing easier for us. However, testing on devices isn’t as easy as it is on Chrome or Firefox with their awesome built-in dev tools – at least natively. Frankly, there’s nothing that beats testing on a real device. Desktop testing is very reliable (though I still prefer to test old versions of IE on virtual machines which Microsoft offer up at modern.IE), however device testing on BrowserStack is only via device emulators at best – not as good as testing on the real thing. If you’re not familiar with it, BrowserStack is a brilliant tool that allows you test your site on a plethora of different browsers, operating systems and devices. We often use BrowserStack for browser testing in-house. Since launching, I’ve been doing more R&D into device and browser testing. Works well on desktop, but device testing was a huuuuuuuge deal. Some of the front-end features are pretty out there, most notably the header blocks on each page using CSS transforms over fixed backgrounds. The site is for Revera – a SaaS provider recently purchased by Telecom. ![]() #Vanamco ghostlab for windows full#I’ve recently launched the first full site that I’ve worked on since starting my new Front End Dev role. Although I have to confess I’ve not actually started using them yet, the number of efficiency wins I can see from setting up a style guide or pattern library at the start of the project are huge. #Vanamco ghostlab for windows code#It allows us to take a more modular, considered and streamlined approach to CSS development, making it quicker for us to develop our sites and making it easier for someone to take over our code later if they have to ( bus factor). It delivers us a more consistent look and feel and – on the performance end of the spectrum – reduces the weight of our CSS. This is how they will look no matter where you put them (more specific styling aside). Each element stands on it’s own outside of any content block. Starting development from a style guide allows FEDs to style more succinctly – and without context. Quite often we’ll find ourselves with an H3 that looks a particular way because it’s styled to look that way once it’s inside a specific container – but take it outside of that container and suddenly it’s in a different context and doesn’t look right – or even worse – is completely unstyled. It leads to inconsistencies in the way elements appear. Overly-specific selectors that slow down browsers, that sort of carry on. The way I see style guides fitting into my workflow isn’t as a crapton of extra work at the end of a job. ![]() ![]() I live and breath HTML, CSS and JS and daily I take the work of our super talented digital designers and turn it into something that our propeller heads can then craft into a living website. I used to be a PHP developer, but now my 8-5 is as a front end dev for an international award winning dev team. From this point of view it’s added value to the client – and even creating this level of documentation for a smaller client would be a huge win for a digital agency in terms of professionalism.īut it’s a crapton of extra work, right? Added Front-End Dev & Performance Value This shows the end user exactly what to expect when they use a particular element somewhere on the site – and I understand there are a huge number of users / authors on Code for America, so this is hugely important. Taking a look through the style guide, you can see there is basically a style for EVERYTHING. I actually couldn’t even tell you what Code for America was really, but their style guide is something to melt hearts. What I’m talking about is something like (the mecca of FE style guides / pattern libraries) Style Guide over at Code for America. Style Guidesįirstly I’ve been looking at what are loosely labeled as style guides or pattern libraries – loosely because they seemed to be called one or the other depending on whether you’re looking at them from the front end or the design perspective, and each has a pretty varied definition anyway. I’ve just been into a little bit of R&D time at work at the mo and thought I might share some of the awesome that I’ve come across today alone. Style guides, Ghostlab and the Open Device Lab – TGM | The Geek Mythologiesĭeprecated: Function get_magic_quotes_gpc() is deprecated in /home/moonij/.nz/wp-includes/formatting.php on line 4388ĭeprecated: Function get_magic_quotes_gpc() is deprecated in /home/moonij/.nz/wp-includes/formatting.php on line 2448 ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |