Archive for the ‘Javascript’ Category
React ES6 getting Started – slides
I made a slide about React ES6 getting started, you can view it here
https://doсs.google.com/presentation/d/19YgTFjvgsuTIfC7NdX8QXyf43U4LKjf8xZM2342_sO8/
Motion Design – slides
I made a slide about Motion Design – you can view it here
https://doсs.google.com/presentation/d/1xycVCpGnVgz1VAnO0iaXDP7bc8K8bfl3JXZLiDvkDws/
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
Browser only CMS
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
Javascript clean code idea – avoid comments – make your code self documenting
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;
});
}();
}();
