I recently bought a USB GPS receiver; it was something I decided I could use with my Raspberry Pi that would be a fun thing to play with for an inexpensive cost and requiring minimal hardware tinkering.
The project I decided to make was a program that scanned for wifi access-points, and recorded their basic information along with the GPS data I was also receiving. I would then roughly map out where wifi hotspots were once I ventured out with my raspberry pi.
One of the best parts of being a developer is being able to solve your own problems with code.
As someone who likes to keep up with a basic level of fitness, the most important problem I wanted to solve was to create a fitness app that was simple enough to keep me motivated.
What I wanted to solve
Create an app that would be used primarily on mobile devices
Enable the ablity to add exercises, with number of reps, and how many days rest until performing again
Have a schedule for when to perform certain exercises
Be able to mark when an exercise is completed
Give the app a native feel
Have all of this work without an internet connection
Do this all in web technologies, as a web app
What’s really cool is that the web has come a long way, and as such, features that we’d previously consider native-only can now be done on the web. The kind of things you can do now include: offline pages, full screen web apps, local storage and push notifications.
Here’s an overview of the project:
Mobile App - Using manifest.json, I was able to create a web app that could be added to a mobile home screen with an icon, and could be opened full screen
Managing exercises - Using localstorage I was able to store data on the mobile device. This included adding exercises and marking them as completed
Exercise schedule - Based on when exercises were last completed and how long the rest period is, I was able to produce a schedule for when exercises needed to be done
Native feel - I used Google’s Material Design Lite library as a basis for the layout to make the web app feel more like an app than a website
Offline Use - Using Service Workers I was able to cache the web page and assets so it would continue to work without an internet connection (I initially used Application Cache, however this is now deprecated for the more sophisticated Service Workers)
Note: I found that with certain projects I couldn’t do ‘Show in finder’ on the built product for some reason. To get around this go to the Organiser in xcode, click the Projects tab, click your project down the left, then open the path shown in the main part of the window.
The problem with creating a footer with an image background on a web page is that when the page is shallow or the visitor is using a high resolution monitor the footer image does not extend to the bottom of the page.
This happens because there’s no way in CSS to know the space between the top of the footer and the bottom of the window, otherwise we’d be able to scale the footer area’s height to compensate.
We are adding a large padding to the bottom of the footer to extend the background, then we bring up the bottom margin by using a negative value so the DIV’s space effectively ends where it did before the padding relative to the DOM elements around it.
The site-container has an overflow to hide the overflowing footer padding and stop the vertical scrollbars. However to stop the container cropping too far up the page we set it’s min-height to be 100% so the earliest the footer will be cropped is the bottom of the window unless the content is larger than the window size.
In CSS you can’t normally use 100% for a min-height (or height) so to fix this you need to add a 100% height to the html and body element. This quirky code will fix that for you.
It’s worth noting that I’ve also added a min-width to the site-container, this should be your site’s width. It will ensure that we still get horizontal scrollbars when we scale down the browser while we have the ‘overflow: hidden’ set.
You’ve created a website design which looks great, until your content causes one column to extend longer than the other, causing the second column’s background to come short.
Of course you can fix these issues by having all your backgrounds in one graphic that sits behind your site, but you have issues with scalability and large graphic images. A better solution is possible; with a bit of understanding you’ll have this down in no time:
Make sure your 2 columns are floated next to each other in a container. As you see in the above code, I’ve added 30,000px extra padding to the bottom of both columns to extend them for as much as we’ll need down the page. The negative margins will stop their Container from being pushed down in height.
The columns’ backgrounds will still show below the Container so the overflow hidden style on the container will fix this. As long as the Container does not have a fixed height set, it will not clip your content:
You have just designed a complex layout and have started implementing it on the web, but some layered elements that stick out over the right-hand side of the page creating horizontal scrollbars at the bottom of the page.
I have found in my experiences with Wordpress installations that sometimes they work like a dream, yet at other times, or on other web hosts they seem to work fine until you try to upload an image to the Media library or try to update a plugin automatically without FTP. I decided to try to solve this issue once and for all.
It’s surprising it hasn’t been done before, or at least by a leading company like Adobe; develop a set of programs for designing for the web that doesn’t require the ability or knowledge to write code.
It may be in the future that developing for the web becomes practically obsolete. It makes sense that you should be able to design for the web without code. It’s not often that you find people that can master both design and development.
Why should designers need to learn HTML or CSS? Designers lay out visually for print design in software such as Adobe InDesign, yet it comes to lay out a web design you are confronted with code. Even software such as Adobe Dreamweaver really doesn’t lend itself to designers and you find that your result does not work correctly on all platforms; you are required to learn to code to fix browser consistencies.
Magento doesn’t give the ability natively to clear/remove existing orders. You may find that after testing you have test records left over. The following SQL will delete all orders from your Magento installation, so you should do this before you go live with your site. It is recommended that you back-up your database before executing these rules. ...keep reading