Favorite material design button with or without JS

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

Being creative – Making logos with css

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.

From json data to responsive design example

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.

• Google API for news data in json format
• Handlebars for json to html rendering
• jQuery
• Html, Css, Javascript


 


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.

 


Lego Kaizen at work

I have been working a couple of years now using agile methodologies (Scrum).

I started in a new team recently where they use the Scrum methodology.

The team works in the spirit of agile mindset and is constantly finding small improvements. Besides the daily scrum tasks we have the flexibility to take upon Kaizen tasks with the purpose of improving the daily workflow which are not necessarily related to the user stories.

The next thing recently just introduced are the ability to flag your current mode at your desk.

• Green – Available if you have questions or want help
• Yellow – Only contact me if it is important
• Red – Busy at the moment

You take a lego piece and display your current mode.

With this hopefully the team can be more effective where communications is directed at those available and the busy ones have ability to flag that they want to be left alone to complete their tasks without being disturbed.

K-nearest neighbor in 2D dimension space

K-nearest neighbor

There are miscellaneous algorithms for searching nearest neighbors.

An alternative method is to use grid indexing strategy.
Slowly expand the grid boxes from the center to find the k-nearest neighbors.
The grid is used as a filtering mechanism to reduce the search space.

This works fast for distributed data across the space and is a good alternative algorithm for dynamic data that changes position frequently.

Reference links:

Project implemented in C# is available at Github:
A survey of techniques for fixed radius near neighbor searching:

The origin is in ring 0.
The origin can anywhere in the box and the distance to test on first iteration must be at least 1 x grid distance. The first iteration starts with data from ring 0 and 1.

The algorithm goes like this:

i = 0
Point origin
list currRing = empty
list nextRing = empty
list temp
while all rings not explored
   i = i + 1
   temp = empty
   for all point in nextRing test distance between origin and point
       if distance is within i * grid put it in currRing
       else put it in temp

   nextRing = empty
   Add all from temp to nextRing

   temp = empty
   if(i==1) temp = points from ring 0 and ring 1
   else temp = points from ring i

   For all point in temp test distance between origin and point
       if distance is within i * grid put it in currRing
       else put it in nextRing

   If there are at least k points in currRing then exit while loop
end while loop

if currRing count is < k then add all from nextRing to currRing

sort currRing by distance
take first k from currRing

---

Grid version algorithm:
Apply algorithm described above.
Searching: O(n * m) where m is grid cells and k << n.

Naive version algorithm:
For origin point check the distance to every other point.
Take k first items sorted by distance.
Searching: O(n log n)