Software Programming

Kunuk Nykjaer

Archive for the ‘Javascript’ Category

React ES6 getting Started – slides

leave a comment »

I made a slide about React ES6 getting started, you can view it here

https://doсs.google.com/presentation/d/19YgTFjvgsuTIfC7NdX8QXyf43U4LKjf8xZM2342_sO8/

Written by kunuk Nykjaer

August 22, 2016 at 10:06 am

Posted in Development, Javascript

Tagged with

Motion Design – slides

leave a comment »

I made a slide about Motion Design – you can view it here

https://doсs.google.com/presentation/d/1xycVCpGnVgz1VAnO0iaXDP7bc8K8bfl3JXZLiDvkDws/

Written by kunuk Nykjaer

August 22, 2016 at 10:03 am

Posted in Css, Design, Javascript

Tagged with

Favorite material design button with or without JS

leave a comment »

I am having fun creating things at Codepen.io.

I have created a toggle button with JS and without using JS.
For the non-JS version I used the radio-button hack technique with stacked radio buttons.

Without JS

 

With JS

Written by kunuk Nykjaer

March 10, 2016 at 4:57 pm

Posted in Css, Javascript, Visualization

Tagged with

Fizz Buzz

leave a comment »

Written by kunuk Nykjaer

March 2, 2015 at 12:23 am

Posted in Javascript

Tagged with

Browser only CMS

with 2 comments

This is an idea for a very minimalistic CMS solution.

You only need a browser to run the CMS solution. No web-server or DB are needed to host your CMS solution.

The content is separated to a resource folder (the content folder).
Text resources are stored inside a JavaScript file and not on a markup (html) page.

Here’s a snippet example of multiline text in markdown format stored in the resource file.

app-data.js

 Site.data = {
        multiline: function() {
            /*!
# browser only cms

**Dependencies:** 
any modern browser and your favorite text editor.

Open the index.html with your browser.

  * Your browser is the server
  * Your CMS is the content folder
  * Your CMS editor is your favorite text-editor.

To edit the content open the 
`content/text/app-data.js` file 
and refresh your browser to see the update.
            !*/
        }.parseMarkdown()
}


 

Browser only CMS is available at https://github.com/kunukn/browser-only-cms

Written by kunuk Nykjaer

February 24, 2015 at 10:52 pm

Posted in Development, Javascript

Tagged with ,

Javascript clean code idea – avoid comments – make your code self documenting

leave a comment »

The book clean code book by
Robert C. Martins
has some great ideas about how to write clean code.

I thought about how to write cleaner Javascript code and would share some ideas on that topic.

The authors prefer self documenting code over writing descriptive comment about the function.

For example.

Instead of writing

// closes the responsive menu on menu item click
$('.navbar-collapse ul li a').click(function() {
   $('.navbar-toggle:visible').click();
});

// ** BEGIN setup articles layout and filtering
// init Isotope
var $container = $('.articles-container').isotope({
    itemSelector: '.article-item',
    layoutMode: 'masonry',
    masonry: {
        columnWidth: 320
    }
});
// bind filter link click
$('.article-filter').on('click', 'a.filter', function() {
    var filterValue = $(this).attr('data-filter');
    $container.isotope({
        filter: filterValue
    });
    return false;
});
// ** END setup articles layout and filtering

You could write

+function closesTheResponsiveMenuOnMenuItemClick() {

   $('.navbar-collapse ul li a').click(function() {
      $('.navbar-toggle:visible').click();
   });

}();

+function setupArticlesLayoutAndFiltering() {

    var $container;

    +function initIsotope() {

        $container = $('.articles-container').isotope({
            itemSelector: '.article-item',
            layoutMode: 'masonry',
            masonry: {
                columnWidth: 320
            }
        });

    }();

    +function bindFilterLinkClick() {

        $('.article-filter').on('click', 'a.filter', function() {
            var filterValue = $(this).attr('data-filter');
            $container.isotope({
                filter: filterValue
            });
            return false;
        });

    }();

}();

Written by kunuk Nykjaer

February 9, 2015 at 1:42 pm

Posted in Javascript

Tagged with

From json data to responsive design example

leave a comment »

Synopsis:

Somebody (your boss or customer) comes to you and says:
‘Create a web page which displays this data and the design must be responsive. I will give you a REST API to a service.’

If you work with front-end tasks, you probably would now be thinking JavaScript templating, Media queries and a JavasScript library to work with the REST API (maybe jQuery?).

In my previous blog I gave hello world code demo of Handlebars. I will continue with Handlebars and this time use data from an external source and also think in responsive design.

All these wonders (freely) available in the Internet available. I Use:

  • WordPress.com for blogging
  • Gist for sharing code samples
  • Codepen.io for making web page prototypes
  • Various Javascript libraries to help me ‘get the job done’


For this example I will use.


 

Demo

Try to resize the screen width and see how the content adapts.


 

Data structure

This is the given data source structure which is to be parsed and rendered on a web page. A list of news with title, date, link, author and categories.


 

Styling

Mobile first approach. Style for smallest device first and gradually adjust the styling for the larger devices. The breakpoint sizes are the same as used in the Bootstrap 3 framework.

Literally make your browser the same width as the smallest device. Start the styling with that size. You will notice there are not much space. Usually that means you use all the width space available and stack the items below each other. You focus on the the essential which is (usually) the content. You hide or minimize navigational items, minimize images, cut part of content or designs which are less important.
For the increasing screen sizes the items can be aligned horizontally and there are more rooms for adding ’empty’ spaces, larger images, bigger menus. That’s the usual approach.

As you go up in screen size override the styling. Here I have added debug information of the target device.
e.g.

#rendered .title::after {
    content: ' - Phone';
}

I start with 100% width (default value). As the devices increases the text size increases and the width percentage reduces.


 

Markup

This is more or less the same as my Helloworld example. The markup is the template.


 

Scripting

Here I fetch the data and parse it to the template and add a couple of Handlebars formatter helpers. In case something goes wrong I use stub data to render the display.

 

Written by kunuk Nykjaer

January 10, 2015 at 10:32 pm