app sparkler – Coffee Soul Combinations

Crash recovery after updating plugins

Sometimes, after upgrading the plugins with atom ( atom upgrade ), the IDE fails to load. In such cases we can delete the contents of the folder ~\.atom\storage and then try restarting the atom IDE.

Typeahead : Setting up Remote-Datasets `Remote DataSets`

The setup is quite self-explanatory:-

/* 
example data-source
[
  {
    id:1,
    name:'Batman'
  },{
    id:2,
    name:'Superman'
  } 
]
*/

$('#my-typeahead').typeahead({
    hint: true,
    highlight: true,
    minLength: 1
}, {
    name: 'myDataset',
    source: function(str, sync, async) {
        // abstracting out the "REST call and processing" in a seperate function
        restCall(str, async);
    },
    templates: {
        suggestion: function(user) {
            return '<div><h5>' + user.name + '</h5><br/><p>Line 2</p></div>';
        },
        notFound: '<div>User Not Found</div>',
        pending: '<div>Please wait...</div>'
    }
});

function rest(str, async) {
    return $.ajax('http:/url-for-remote-data-source/query?name=' + str, {
        headers: {
            // add all headers
            'Content-Type': 'application/json',
        },
        success: function(res) {
            return async(res.data);
        }
    });
}

example data-source

[

{

id:1,

name:'Batman'

},{

id:2,

name:'Superman'

}

]

$('#my-typeahead').typeahead({

hint: true,

highlight: true,

minLength: 1

}, {

name: 'myDataset',

source: function(str, sync, async) {

// abstracting out the "REST call and processing" in a seperate function

restCall(str, async);

templates: {

suggestion: function(user) {

return '<div><h5>' + user.name + '</h5><br/><p>Line 2</p></div>';

notFound: '<div>User Not Found</div>',

pending: '<div>Please wait...</div>'

}

});

function rest(str, async) {

return $.ajax('http:/url-for-remote-data-source/query?name=' + str, {

headers: {

// add all headers

'Content-Type': 'application/json',

success: function(res) {

return async(res.data);

}

});

}

References:

Typeahead Docs – Datasets : https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#datasets

jQuery $.ajax() : https://api.jquery.com/jquery.ajax/

Stackoverflow: https://stackoverflow.com/questions/12621823/ajax-call-populate-typeahead-bootstrap/38300862#38300862

Fix Search Issue – Windows 10

Sometimes on trying the windows search, the results don’t come up and it shows as “fetching” indefinitely. This can be quickly resolved by following the steps:-

Open Task Manager
Go to “Details” tab and look for “SearchUI.exe” under the “Name” column
End this task by clicking on “End Task”.
Now click on File >> Run New Task and type “searchUI.exe” and hit enter.
The search should be working and you can test it out by pressing the “Windows” button and typing “mspaint” as search query and we should see the “msPaint App” in the results.

Good Luck.

Ref : http://www.whatibroke.com/2015/08/10/windows-10-search-not-working/

Change FullCalendar background color

1. Change day background color:

.fc-today {
        background-color: blue;
}
.ui-widget-content .ui-state-highlight {
        background-color: #ffffff;
        background-image: none;
}

.fc-today {

background-color: blue;

}

.ui-widget-content .ui-state-highlight {

background-color: #ffffff;

background-image: none;

}

2. Add box shadow to events

#calendar .fc-event{
	box-shadow: 2px 2px 2px #706868;
}

#calendar .fc-event{

box-shadow: 2px 2px 2px #706868;

}

3. Style time and days:

.fc-agenda-axis, #calendar .fc-widget-header{
	background-color: #C2E6FF;
	border-color: #AED0EA;
	font-weight: normal;
	padding: 3px;
	border-radius: 3px;
}

.fc-agenda-axis, #calendar .fc-widget-header{

background-color: #C2E6FF;

border-color: #AED0EA;

font-weight: normal;

padding: 3px;

border-radius: 3px;

}

4. Change calendar background color:

.fc-content{
	background-color: #FFFFFF;
	font-size: 80%;
}

.fc-content{

background-color: #FFFFFF;

font-size: 80%;

}

Ref:- http://www.whatibroke.com/2013/01/01/change-current-day-color-jquery-fullcalendar/

Creating an Object interface that accepts any property name.

If we want to a typescript definition for an Object that accepts any property value. For example, the the $stateParams Object in AngularJS UI Router, we can work with the following declaration for the interface.

...
interface IStateParamsService {
        [key: string]: any;
}
...

...

interface IStateParamsService {

[key: string]: any;

}

...

Interface for an Array of Objects

To create an Interface that is an array of object, we first create an interface of the Object and than extend it as an Array.

interface EnumServiceItem {
    id: number; label: string; key: any
}

interface EnumServiceItems extends Array<EnumServiceItem>{}

interface EnumServiceItem {

id: number; label: string; key: any

}

interface EnumServiceItems extends Array<EnumServiceItem>{}

Ref : http://stackoverflow.com/a/25470775/4742733

HTML – Entities

[table caption=”HTML Entities”]

Result, Description, Entity Name,Entity Number
,non-breaking space, ,  
<,less than,<,<,

[/table]

Important Links

[table]

Sr #,Description,Link

1, Writing more organized code in CSS and also any language. Specially check out BEM – it is for any programming language,http://stackoverflow.com/a/2253402/4742733

[/table]