InstaNews

Responsive Mobile-First News App Using The New York Times API

Technologies used

• HTML5
• CSS3
• SASS
• JQuery
• JSON
• v2 NYT API
• GULP
• Git
• bash

Media Query Breakpoints

Device	Width	Height
Mobile	320	568
Tablet	768	1024
Desktop	1240	800

Personal Learnings

SASS:

This was the first time I was introduced to the stylesheet language SASS. I used SASS variables, nested rules, and mixins to create a more symantic readable stylesheet.

Example:

$font-family: 'Open-Sans-Light';

@mixin tablet{
    @media (min-width: 768px){
        @content;
    }
}

header{
    @include tablet{
        // media query here 
    }
}

JSON:

I was introduced to JSON(JavaScript Object Notation) a lightweight data-interchange format. Linked to the New York Times API(v2 NYT API), I was able to return real time data and format it accordingly into my webpage.

Example:

$.getJSON("path/to/(v2 NYT API)/mykey")
.done(function(data)){
    // Use data here
}

GULP Task-runner

I learnt how to utilise task-runner GULP to Automate and streamline my work flow. I created a gulp.js file that streamlines my SASS into pure CSS3, minifies my app.js and style.css, then places them in a build directory, live using browser-sync.

Example:

gulp.task("sass", function(){
    return gulp
    ...
}

gulp.task("scripts", function(){
    return gulp
    ...
}

gulp.task("browser-sync", function(done){
    return gulp
    ...
}

Custom menu

To add some personal flavour to my page I implemented a custom cursor, and matched the colour pallet to that of the site.

Environment

• macOS Mojave: 10.14.6
• VS Code: 1.39.1

Contributing

Please feel free to clone this project, feedback and improvements welcome.

Authors

• Bruce Pouncey - Initial work - BPouncey

License

(MIT)

Acknowledgments

RED Academy