I've been using Blisk for some time now and find it to be quite reliable at showing me what my website will look like on various devices. Not 100%, of course, but my impression is 95% of the time.
I currently use a Galaxy S4. Not by choice, but I slipped and fell on my premium mobile, rendering it all but useless. I've used Blisk numerous times to simulate a site's rendering on a Galaxy S4 and have found it reliable enough to make alterations before uploading. The S4 is a fickle device and if Blisk can render a project reliably for the S4, then I'm pretty certain that the other renderings are also reliable.
You'll find that there are two 'versions' of Blisk: a standard and a premium version. The standard version works for a couple of hours and then asks you to return later for your next session. As I seldom use Blisk more often than twice a day, I find this o.k. The premium version is quite pricy at $9.99/month, or $101.88/year, but, if you use it on a regular basis, possibly worth the money.
So what is Blisk exactly? Blisk is a freemium, Chromium-based web browser that aims to improve productivity and code quality by providing a wide array of tools for Web development and testing for different type of devices: desktop, tablet and mobile. Blisk comes with a seemingly endless pre-installed set of phones and tablets in emulated mode that makes it easy for developers to test how their code renders across multiple devices and browsers. The feature is used to compare how design responds to different screen resolutions and pixel ratios. Emulation functionality enables testing page behavior in various environments without having to rely on actual devices, but emulating them directly on a PC or Mac.
As the current machine that I use for website development is a MacBook Pro, I often wondered what my sites looked like on a large screen. Now I know that they can look quite terrible!
Blisk has a number of useful features – it can take screenshots and make videos, which are stored online, it displays errors during page load, has a page inspector and can rotate the device being emulated. Scroll sync is activated by default, so your current position on the page is always mirrored in both portions of the screen.
I suggest that, if you haven't already tried it, you give Blisk shot. If you decide to use it multiple times a day, then the time limit will be annoying, but a quick glance (directly from RW, of course; Blisk appears as one of the browsers for the preview) at how your page looks on the Galaxy Edge, is always useful.
Something that is especially useful, is the fact that CodeBox syncs with the cloud!
Recently my hard drive crashed and – not having an adequate backup system in place – I lost a lot of information. Because CodeBox was set to sync with my Dropbox account, however, as soon as I reinstalled the app all of my snippets were immediately available again – The necessary CSS is still in place on my server, so I can still add rollovers or this link enhancement to my blog posts without having to search online for the code again!
CodeBox has a multitude of formatting options, so no matter if your code snippets are destined for Ruby On Rails, or are simply text snippets, they will aways be formatted correctly. And once you've discovered the snippet that you're looking for, just click the 'tick' box beneath the snippet and it is copied to the clipboard for use in the next application.
If you are constantly forgetting which HTML is related to which CSS, or JS snippet, then I can highly recommend CodeBox. It doesn't cost the earth an it is extremely useful.
Oh, and the social icons below — they were also added via CodeBox and I also use CodeBox to store standard replies to various forums that I'm active on ¯\_(ツ)_/¯
A News ticker, or a marquee displays a running line of text – useful for displaying large amounts of information in the compactest possible space. You see marquees regularly, displaying the latest stock prices, or breaking news. The <marquee> tag was never actually an official HTML tag and is not supported by all browsers.
NewsTicker is a stack that was originally developed by Tsooj Media. It uses a combination of jQuery and CSS and works with all browsers. Originally NewsTicker wasn't fully responsive, the text would break and form multiple lines on narrower screens, making it difficult to read.
Will has rewritten NewsTicker. It is now fully responsive, and scrolls infinitely, it will now accept Styled Text, HTML, or Markdown and the colour options have been expanded. NewsTicker can now load with the text visible on the page, there is a new option for Line height and multiple NewsTicker stacks can be placed on the same page. All that's missing for a Nasdaq feed is an option for an API.
NewsTicker: General Settings
Content Type: Styled Text (Default), HTML and Markdown
Direction Left: (Default), Right
CSS Class: (editable)
Start Delay: In ms
Duration Default: 10000ms
Gap Default: 50px
NewsTicker has two option boxes – Pause On Mouse Over and Start Visible.
Styling: Custom Styling, Inherit Theme Styles
Font Style: Normal, Bold, Italic, Bold+Italic
Font Size: Default 15px
Line height: Default 2.5 em
Font Colours and Link Colours: Normal, Hover
Tips: NewsTicker breaks out of its container and runs across the whole page. If you wish to restrict it to a specific width, Useful Stack (available free from S4S) will come to your aid.
Always place NewsTicker in a containing stack e.g. Useful Stack, or a column stack, otherwise it may not be visible on the page.
Don't place NewsTicker in the same container as and immediately preceding a Headline! If you do, the headline develops an eratic marquee effect too! (I'm assuming that this is an oversight which will soon be fixed)
Andrew Tavernor has done it again! If Andrew excels at one thing, it is extending the possibilities available in RapidWeaver (his support is also second to none). Blueprint is another set of stacks to prove the point.
If you need a column that has 45% page width within a Foundation project (or any other project), instead of adhering to the strict 12-column layout, Blueprint will come to your aid. Two columns with 85%, divided into 60/40% columns – no problem for Blueprint. Tired of not being able to view your SVG's in RW preview…
Blueprint is currently a set of three stacks. ONE, Sidebar and Blueprint SVG.
ONE is a single column stack. O.K. there are dozens of those available for RapidWeaver, but it isn't until you investigate further that you realise just how incredible ONE is.
Blueprint will free you from the constraints of Foundation and Bootstrap (better known to Weavers as Foundry), by allowing you to define column widths in % instead of 1, 2, 3, etc. columns of a twelve column layout grid. But Blueprint doesn't stop there.
Let's say, you'd like to float an image caption over an image within a text block, whilst indenting the text. A simple undertaking with just three ONE stacks: Starting at the top – position your text and image within a ONE stack and go to Add Spacer in the settings panel and define the Width and Height of the space. This will move your content to the left or the right within the ONE stack, depending on the setting you chose.
Next add your image caption to a ONE stack and set the stack width to say, 10%. If your first stack contains more than a couple of lines of text and a larger image,drop the 'caption' stack into a third ONE stack (for the runaround). Just like Sections Pro, this third stack will automatically adapt to its content width.
Now go to the Overlap settings of the 'caption' stack, set it to Move Up and set the overlap in pixels.
Sidebar – the christening was perhaps made before the full potential of the stack was realised – is a two column stack that is, of course, ideal for sidebars, but is also flexible enough to build complex column layouts that would otherwise be impossible – especially with Foundation, or Bootstrap.
The screenshot above demonstrates a possible use as the name states – a sidebar – a container for a menu. No more messing around with various column settings, trying to get approximately the width you'd like, but not quite because of those damned invisible columns in the background.
Set the Aside Position to Left. Set the Width to 5%. Define a Maximum Width and you're good to go! Take a closer look at http://bit.ly/verti-tab
But Sidebar feels perfectly at home when functioning as a normal two column stack. A contact form, for instance. 70% of the page width, with 45/55% columns:
Childsplay with Sidebar, but an hour's work with standard Foundation stacks – and then still not perfect. Not that I'm dissing Foundation, it's the only theme that I currently use, but with the addition of Blueprint, life suddenly gets so much easier. And – Sidebar stacks can be nested to create extremely responsive three, or four, (or five…) column stacks.
Annoyed that you can never see, or exactly position your SVG's in RW edit mode? Blueprint SVG to the rescue!
Open your SVG in a text editor, copy the content between (and including) the <svg> tags and drop the text into Blueprint SVG. The result: Not only can you suddenly see your SVG, you can also edit the stroke and fill colours from within the stack settings – apart from being able to just set the size and alignment.
A tip: if you're having problems with your SVGs, take a look at this page. You can drop in your SVG files and it will convert them to 'clean' SVGs without the added data that some illustration apps add.
I could probably write a book about Blueprint. Instead, I advise that you RTFM i.e. that you download and dismantle the demo project and take a look at the instruction videos that Andrew has kindly put online.
Blueprint is another game changing set of stacks from BWD.
Whilst the stacks are free to download, please don't forget to make a donation. Andrew spends up to 18 hours a day and more developing and supporting BWD stacks. He also pays ever rising annual fees to host them.
Over the years Henk supplied many eye-catching themes, gave us useful code snippets and addons. Joost specialised in the production of useful stacks.
With their parting, we lose two innovative contributors to the RW community. But have no fear — their names may disappear, but their products will live on…
… The very capable Will Woodgate hasn't officially announced it yet, but the Tsooj and Vrieselaar products will be integrated into the Woodgate stables.
So if you've been wondering why there's been so little news around Will for some time, it's because he has been hard at work updating the products ready for their release under a new banner. I may be wrong, but I'm speculating that the stacks will be integrated into the Stacks4Stacks and the themes into the Themeflood collections. Henk implies as much in his parting announcement and Tsooj Media is already advertising website construction.
As for working hand in hand, the parting messages on both sites are almost identically worded, implying that the two gentleman will continue to work together.
I, for one, would like to thank Henk and Joost for the invaluable service they've provided over the years and wish them all the very best for their future undertakings. They can rest assured that their products are in the very best hands.
Links to the developers ® All trademarks cited on this page are the property of their respective owners.
Do you have a question regarding RapidWeaver?
Would you like help with your new project?
Would you like us to build your new RapidWeaver website?
Don’t miss a post!
Sign up for our monthly newsletter.
A monthly digest of all the latest updates from our RapidWeaver blog, keeping you up to date with the hottest new stacks and themes.
265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.
We do not harvest or sell personal information.
© rjh web design 2010—16