Software Programming

Kunuk Nykjaer

Being creative – Making logos with css

leave a comment »

My latest hobby is to find logos as images and re-create them with css and responsive design.
I have added mouse over effects to make the logos dynamic.
You can resize the width of the browser window and you should see the logos adapts to the screen width.

Build for modern browsers, tested with latest Chrome and Firefox
(I don’t want to spend too much time with browser-testing in my leisure time).

Here are some of the results.

Written by kunuk Nykjaer

April 4, 2015 at 10:15 pm

Posted in Css, Visualization

Tagged with ,

Creating responsive ad from newspaper ad

leave a comment »

I stumbled upon an ad for Ramboll from a Danish newspaper which I liked and I wanted to re-create the ad as an animating responsive web page. I changed the background image as I couldn’t find the same on image the internet. I found a project which they have won with the Big architect company and used two images from that project.

This is the result.

The newspaper ad inspiration from Ramboll

ramboll

Written by kunuk Nykjaer

March 22, 2015 at 3:22 am

Posted in Design

Tagged with , ,

Working with Sass and Media Queries

leave a comment »

If you want responsive design and use Sass you could do this. Setup your break points
(this post is similar to my Less post, but with Sass this time).

Setup Sass and Media Queries

/* Setup */
$device-extra-small-width: 480px;
$device-small-width: 768px;
$device-medium-width: 992px;
$device-large-width: 1200px;

@mixin device-extra-small {
 @media (min-width: #{$device-extra-small-width}) { @content; }
}
@mixin device-small {
 @media (min-width: #{$device-small-width}) { @content; }
}
@mixin device-medium {
 @media (min-width: #{$device-medium-width}) { @content; }
}
@mixin device-large {
 @media (min-width: #{$device-large-width}) { @content; }
}

When you want to apply responsive design for a component you structure the Media Queries like this.

Html

<div class='responsive-component'>
  sass and media queries example
</div>

Sass

/* Usage */
.responsive-component {
  
   /* default is device-extra-extra-small */
   font-size: 100%;
   background: tomato;

   @include device-extra-small {
    font-size: 120%;
    background: aqua;
  }
   @include device-small {
    font-size: 140%;
    background: orange;
  }
  @include device-medium {
    font-size: 160%;
    background: lime;
  }
  @include device-large {
    font-size: 180%;
    background: yellow;
  }
}

Here is a demo. Edit on Codepen, resize the browser horizontally and see how the content changes.

Reference reading:

Written by kunuk Nykjaer

March 15, 2015 at 2:14 pm

Posted in Css

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 ,

json-server is not recognized as an internal or external command

leave a comment »

if you want to run npm json-server on a windows the command json-server might not exists.

It’s probably because your missing this on the system PATH variable:
C:\Users\YOUR_NAME\AppData\Roaming\npm

You should check and add it if it is not already added, then open a new console and try again.

Alternatively you can start the server (requires nodejs and json-server installed) in the command prompt with:
node “C:\Users\YOUR_NAME\AppData\Roaming\npm\node_modules\json-server\bin\index.js” db.json

 

Or you create a bat-file and name it run-json-server.bat with the content:
node “C:\Users\YOUR_NAME\AppData\Roaming\npm\node_modules\json-server\bin\index.js” %1 %2 %3 %4 %5

E.g. to start the server on port 3001 and with a db.json file.
run-json-server -p 3001 db.json

Written by kunuk Nykjaer

February 21, 2015 at 4:37 pm

Posted in Development

Tagged with ,

Web application development steps of creating working software

leave a comment »

The steps represent the process of creating features for a web application.

Web application development steps for working software


 

Client-side is the browser.
Client-side only means it is not dependent on a back-end server.

Step 1 – prototyping

This is the step where you make a proof of concept of ideas and make demonstration for the customer to get early feedback. The content is hard-coded inside the presentation. When you search for html templates on the internet they will almost always be based on step 1.
e.g.


 

Step 2 – dynamic content

This is the step where you separate the content from presentation. You have verified that the presentation is accepted. You create a client-side template layout to enable dynamic presentation rendering. If you don’t want a single page application you can sometimes skip this step and go for a server-side template layout. The content is usually json-data where a client-side template system is used to render the presentation. This steps also enables more flexible adjustment of the content and enables easier testing of the presentation result by experimenting with the content without needing a backend server-system.


 

Step 3 – backend power

This is the step where you implement the communication between the client and the server. The content resides at the server-side. The server delivers the content to the client. If you don’t use a client-side template layout you create a server-side template layout. The data is usually to be persisted securely somewhere and that is almost always at the server-side. That’s why you will need this step.

Examples

The visual result of the code samples below can be seen here.


 

Step 1

Presentation and content are mixed

html

<section class='spots-section clearfix'>
    <div class='spot apple'></div>
    <div class='spot orange'></div>
    <div class='spot banana'></div>
    <div class='spot tomato'></div>
    <div class='spot silver'></div>
</section>


 

Step 2

Presentation and content are separated (Knockoutjs code sample).

html

<section class='spots-section clearfix' data-bind='foreach: spots'>
    <div class='spot' data-bind="css: type"></div>
</section>
<script src='//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js'>
</script>

javascript

var app =
    (function () {
        var spots = ko.observableArray([
            { type: ko.observable('apple') },
            { type: ko.observable('orange') },
            { type: ko.observable('banana') },
            { type: ko.observable('tomato') },
            { type: ko.observable('silver') }
        ]);
        var data = {
            spots: spots
        };
        ko.applyBindings(data);
        return data;
    })();

I have the flexibility to dynamically edit or add/delete content at run-time.

e.g. to add an apple spot i can use this code.
app.spots.push({type: 'apple'})

e.g. to change the first item to a tomato i can use this code.
app.spots()[0].type('tomato')


 

Step 3

For this step we can keep the client-side template and communicate using ajax or we can create a server-side template instead.

Here’s a simple similar server-side version of the client-side template in Asp.net MVC Razor and PHP Twig.

Razor

@model List<string>
		   	 
<section class='spots-section clearfix'>
	@foreach (var type in Model)
	{
		<div class='spot @type'></div>
	}
</section>

PHP Twig

<section class='spots-section clearfix'>
{% for spot in spots %}
    <div class='spot {{ spot.type}}'></div>
{% endfor %}
</section>

Written by kunuk Nykjaer

February 15, 2015 at 3:20 am

Posted in Development

Tagged with