John MacAdam @appsbyjohn

http://appsbyjohn.com/learn/

Not regularly on Instagram. Best reached at [email protected] I build websites and apps to help people reach more mobile users πŸ“²

  • Posts
    235
  • Followers
    2576
  • Following
    175
I have been working on syncing data to an account using #firebase for Hours Worked. I keep getting distracted trying to design a nice landing page. I gave up trying to make it perfect and launched this oversimplified version. 
Soon users will be able to log into an account and view saved data from the Hours Worked app. For now there is only a link to download the app. Baby steps! 
#mobiledevelopment #iosdevelopment #ionicframework #mobileappdesign #landingpage #webdevelopment #webdesign #comingsoon
  • Comments 9

I have been working on syncing data to an account using #firebase for Hours Worked. I keep getting distracted trying to design a nice landing page. I gave up trying to make it perfect and launched this oversimplified version. Soon users will be able to log into an account and view saved data from the Hours Worked app. For now there is only a link to download the app. Baby steps! #mobiledevelopment #iosdevelopment #ionicframework #mobileappdesign #landingpage #webdevelopment #webdesign #comingsoon

Advertising
Drafting another @medium post πŸ“#ionicframework #angularjs #mobiledevelopment #iosdeveloper
  • Comments 1

Drafting another @medium post πŸ“#ionicframework #angularjs #mobiledevelopment #iosdeveloper

Created a Preview video for the Hours Worked App Store listing. 
#iosdeveloper #appstore #mobiledevelopment #timetracker #timetracking
  • Comments 11

Created a Preview video for the Hours Worked App Store listing. #iosdeveloper #appstore #mobiledevelopment #timetracker #timetracking

Adding support for other languages to the Hours Worked app πŸ‡¨πŸ‡³πŸ‡ΊπŸ‡ΈπŸ‡ͺπŸ‡Έ#ionicframework #angularjs #mobileapp
  • Comments 1

Adding support for other languages to the Hours Worked app πŸ‡¨πŸ‡³πŸ‡ΊπŸ‡ΈπŸ‡ͺπŸ‡Έ#ionicframework #angularjs #mobileapp

Advertising
New blog post: Using the Foundation Framework for Responsive Web Design πŸ‘¨β€πŸ’»πŸ‘©β€πŸ’» #responsivedesign #zurbfoundation #webdesign #linkinbio
  • Comments 4

New blog post: Using the Foundation Framework for Responsive Web Design πŸ‘¨β€πŸ’»πŸ‘©β€πŸ’» #responsivedesign #zurbfoundation #webdesign #linkinbio

New blog post on using Google Chrome DevTools to debug a Responsive Web Design #responsivedesign πŸ‘
  • Comments 5

New blog post on using Google Chrome DevTools to debug a Responsive Web Design #responsivedesign πŸ‘

Remote Debugging using Chrome DevTools on your computer πŸ’» with an Android device plugged in through USB πŸ“²
#responsivedesign #mobiledevelopment #webdesign
  • Comments 4

Remote Debugging using Chrome DevTools on your computer πŸ’» with an Android device plugged in through USB πŸ“² #responsivedesign #mobiledevelopment #webdesign

Advertising
Quick tip: with DevTools open in Google Chrome you can right click (or click and hold) on the refresh button to clear cache and refresh 
#webdesign #webdevelopment #tutorials
  • Comments 3

Quick tip: with DevTools open in Google Chrome you can right click (or click and hold) on the refresh button to clear cache and refresh #webdesign #webdevelopment #tutorials

Chrome DevTools has a nice color picker for quickly previewing new colors πŸ‘¨β€πŸŽ¨πŸ‘Œ
  • Comments 1

Chrome DevTools has a nice color picker for quickly previewing new colors πŸ‘¨β€πŸŽ¨πŸ‘Œ

Often times spacing of items were originally optimized for a desktop screen size πŸ–₯ Spacing breaks down on smaller screens πŸ“±

Step 4/4 when getting started with #responsivewebdesign is to use Flexbox to align items. 
#responsivedesign #webdesign #html
  • Comments 1

Often times spacing of items were originally optimized for a desktop screen size πŸ–₯ Spacing breaks down on smaller screens πŸ“± Step 4/4 when getting started with #responsivewebdesign is to use Flexbox to align items. #responsivedesign #webdesign #html

Advertising
A flexible layout is not enough to deliver a good mobile experience. CSS allows us to apply custom styles at different screen sizes.

Step 3/4 when getting started with #responsivewebdesign is to use media queries to adjust styles based on screen size. 
#responsivedesign #webdesign #html
  • Comments 2

A flexible layout is not enough to deliver a good mobile experience. CSS allows us to apply custom styles at different screen sizes. Step 3/4 when getting started with #responsivewebdesign is to use media queries to adjust styles based on screen size. #responsivedesign #webdesign #html

With the viewport meta tag mobile browsers will honor fixed width #css declarations. This can cause content to overflow the existing layout. 
Step 2/4 when getting started with #responsivewebdesign is to eliminate fixed width elements. 
#responsivedesign #webdesign #css
  • Comments 0

With the viewport meta tag mobile browsers will honor fixed width #css declarations. This can cause content to overflow the existing layout. Step 2/4 when getting started with #responsivewebdesign is to eliminate fixed width elements. #responsivedesign #webdesign #css

NEXT