blog.dayjo.orgdayjo.org - A blog from the mind of Brighton Web Developer and Musical Maverick, Joel Day

dayjo.org A blog from the mind of Brighton Web Developer and Musical Maverick, Joel Day Menu About Me Duck Doom Deluxe Zelda Sound Effects Free RPG Music No new vnStat data fix My latest node project streams a lot of video and therefore uses a hell of a lot of bandwidth on the server (well, a lot more than I’ve dealt with before), so I wanted to get an idea of exactly how much bandwidth I was using. I’m using a DigitalOcean VM running Ubuntu with vnStat to monitor my bandwidth usage. vnStat reports are pretty good, and it started to give me an idea of how much bandwidth I’d use a day, however I ran into a recurring issue where vnStat data would stop after a few days, as if the service had stopped (though it hadn’t). The live logs worked fine, so clearly vnStat was running fine, but for some reason just not saving any new data. vnStat Data is back! It turns out that there was no new vnStat data after a day or two because of the MaxBandwidth setting in the vnstat.conf file. I couldn’t find a log, or a status that could tell me this, but I just did lots of hunting and managed to find it. After setting MaxBandwidth to 0 (unlimited), the logs immediately started appearing again, and hopefully will continue to log without fail. Share this: Tweet Author Dayjo Posted on April 9, 2014 April 9, 2014 Categories Life Leave a comment on No new vnStat data fix Make Chrome DevTools responsive with media queries Please Note; Google Chrome DevTools has recently been updated meaning that the below techniques no longer work. I intend to fix this soon! I recently discovered a new theme for my Chrome DevTools ( Zero-Dark-Matrix ) thanks to @aidanthreadgold . Whilst experimenting with my development flow and how I use DevTools on a daily basis, I found in some situations I would use DevTools docked to the bottom of the screen, and others with it docked to the right. There are benefits to both; Dock to the bottom The horizontal panel across the bottom gives you the ability to easily read long lines of code, full network information and access all of the toolbar tabs (Elements, Resources, Network, e.t.c.). Dock to the right The vertical panel gives you more room to view the application you’re working on, see a longer network and profiling timelines, and obviously more lines of code. I found when using DevTools in the vertical panel that my most used tab: Console , was being dropped off of the toolbar first due to the width of the panel. This can be pretty inconvenient if you are regularly switching between tabs. Making Chrome DevTools responsive I wanted to do something to make DevTools responsive so I decided to edit the Custom.css theme file which is used to make it pretty, and add media queries so that I could specify which tabs are hidden, leaving only the most important tabs visible. Note; This solution isn’t ideal for everyone, your development flow is important to get right, I like to tweak my tools to try and make them more useful to my particular work. Prioritising Tabs My tab list is as follows in order of priority; Console , Elements , Network , Sources (scripts), Resources , Timeline , Profiles , Audits . Finding the breakpoints I used DevTools itself to inspect the toolbar and determine the breakpoints. See my blog post: Inspecting the Inspector – How to Inspect Chrome DevTools , for more information. The first tab to go was Audits , here’s the css I used; /* When DevTools width is 624 pixels or less */ @media all and (max-width: 624px) and (min-width: 0px) { /* Hide the audits tab */ #-webkit-web-inspector #toolbar .toolbar-item.audits { display: none !important; } } Most properties you set in Custom.css will need !important to override Chrome’s default css for DevTools. I duplicated the css for each tab, working out the breakpoints at which the next tab needed to be hidden to come up with the most effective toolbar for me; Note; This is relative to the particular theme I’m using and although the theme isn’t much different, the media queries may not work precisely for your theme. You can fiddle with the max-width values in the CSS to find the right breakpoints for your theme. Caveats The tabs don’t appear in the drop down menu to the right when they drop off, though you can still navigate left and right through all panels using the shortcut keys CMD + [ and CMD + ] The CSS Here’s my full Custom.css for making Chrome DevTools responsive , including the Zero-Dark-Matrix theme. View on Github Share this: Tweet Author Dayjo Posted on October 19, 2013 January 28, 2014 Categories Life 1 Comment on Make Chrome DevTools responsive with media queries Inspecting the Inspector – How to Inspect Chrome DevTools If you didn’t know already, you can use Chrome DevTools to inspect, hack and play with Chrome DevTools. I’ve been customising my DevTools lately with new themes and trying to optimise my use of it. How to inspect Chrome DevTools Video Video available on QuickCast http://quick.as/bbpmsqbe Instructions Use the keyboard shortcut to open Chrome DevTools: cmd + alt + i . Then click the icon in the bottom left corner of DevTools labeled Undock into separate window”. Make sure you are focused on the DevTools window, then use the same keyboard shortcut to open a new DevTools window targeted at the original. cmd + alt + i . Share this: Tweet Author Dayjo Posted on October 19, 2013 October 19, 2013 Categories Life Leave a comment on Inspecting the Inspector – How to Inspect Chrome DevTools Ordering a Pizza from Dominos.co.uk – a brief summary What happened Entered home post code. Added two (customised) pizzas to the basket as it was Two for Tuesday”. Re-added two (customised) pizzas to the basket via the Deals page. Got the checkout, tried to change post code because I wasn’t home. Told different stores deliver to different post codes so would have to start again. Entered new post code (same store). Re-re-added two (customised) pizzas to the basket via the Deals page. Forced to choose one of the incorrect addresses from the address list they offer based on the post code. Enter ‘extra delivery info’ to explain the actual address and buzzer code. What should have happened Enter incorrect postcode. Add two (customised) pizzas to the basket ( it’s a day-wide deal, apply it automatically ). Checkout and change post code ( If there’s a problem, show an error). Wait 18 seconds for the pizza to arrive. Share this: Tweet Author Dayjo Posted on August 28, 2013 August 28, 2013 Categories Life Leave a comment on Ordering a Pizza from Dominos.co.uk – a brief summary Foscam IP Camera Tool, Question Marks Problems While configuring a Foscam IP Camera (FI8918W) for a client , I had some problems when needing to change the router. When trying to access the camera settings via the Foscam IP Camera Tool, the dialog was in some way broken displaying a load of question marks in place of text, and broken message Subnet doesn’t match, dbcli M”. Slightly broken Foscam IP Camera Tool camera list dialog. Broken Foscam IP Camera Tool Dialog full of question marks. I could only assume that something wasn’t loading the correct language file, causing the ?? but for IP” to remain the same. I tried using the Foscam IP Camera Tool on my Mac and had the same problem. Attempting to fix it with Foscam After re-installing the application and having the same problem I decided to contact Foscam directly. Unfortunately they were unable to help and actually suggested that the camera be returned to the retailer for replacement. I refused to believe that the camera had been damaged in any way, as it has been static on the ceiling of a barber shop for over a year with no problems. Woops I tried many combinations of re-installing, trying different computers e.t.c. I realised that I had the camera plugged directly into my PC. This was a vital mistake, although the camera does appear on the list when you have it plugged in directly to your machine, that’s not how to configure it! Connecting the...