Service Worker: 웹페이지와 별개로 브라우저가 백그라운드에서 실행시키는 자바스크립트 코드. 푸쉬, 동기화, 오프라인 모드 지원 https://developers.google.com/web/fundamentals/primers/service-workers/ Workerbox: 구글에서 제공하는 자바스크립트 라이브러리로써 웹앱의 오프라인 지원을 쉽게 할 수 있도록 해줌. https://developers.google.com/web/tools/workbox/ Workerbox 설치 법: Step 1/2: In the bottom of your website, add following Javascript code snippet: Step 2/2: Create service-workers.js and add following snippet:
Category: Javascript
Javascript project devtools
Javascript project development tools Babel: https://babeljs.io/docs/en/ Javascript compiler – Transform syntax, Polyfill features and so on $ babel -o dist/package.js dist/package.js Standard: https://standardjs.com/ Javascript style guide, linter and formatter $ standard src/*.js Rollup: https://github.com/rollup/rollup Javascript module bundler $ rollup src/main.js –format iife –name “SamplePackage” –file dist/package.js UglifyJS: https://www.npmjs.com/package/uglify-js Javascript parser, minifier, compressor and beautifier $ uglifyjs dist/package.js -c -m…
WebSocket Sample
The sample process Send event to Web Socket for getting order id Web Socket connects MySQL orders table and get next order id Send event back to client with message and next order id Sample Environment Node.js Modules: mysql, socket.io PHP MySQL Filename: serverfile.js // Open port 3000 var io = require(‘socket.io’).listen(3000); // Load mysql…
Javascript Skill Test
Found this test from the internet (Download: JavaScript_Skill_Test-blank) Tried to solve without using Google. FAILED. With help from Google, solved questions. There was someone’s solution for exact same questions; I resisted a lot to not see his solution. Some questions are referred to understand what question was. If I get this test in the interview without…
Detect when scroll is reached end of scroll
Using jQuery, determine that user has been scrolled until the end of element. Reference: http://stackoverflow.com/questions/6271237/detecting-when-user-scrolls-to-bottom-of-div-with-jquery $(‘.scrollable’).bind(‘scroll’, function(){ if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) { alert(‘end reached’); } });
SQLite – could not prepare statement (1 too many SQL variables)
During development for SQLite, I have got this error could not prepare statement (1 too many SQL variables) Accroding to this article, this error is because of SQLite limitation, which cannot put variables more than 999 variables. After I reduce the amount of variables, it worked very well.
Bootstrap Modal Remote Example
Reference: http://twitter.github.com/bootstrap/javascript.html#modals Reference: http://jsfiddle.net/mmfansler/cp67J/ <a data-target=”#myModal” role=”button” class=”btn” data-toggle=”modal”>Launch demo modal</a> <div class=”modal fade hide” id=”myModal” tabindex=”-1″ role=”dialog” aria-labelledby=”myModalLabel” aria-hidden=”true” data-remote=”/mmfansler/aQ3Ge/show/”> <div class=”modal-header”> <button type=”button” class=”close” data-dismiss=”modal” aria-hidden=”true”>×</button> <h3 id=”myModalLabel”>Modal header</h3> </div> <div class=”modal-body”> <p>One fine body…</p> </div> <div class=”modal-footer”> <button class=”btn” data-dismiss=”modal” aria-hidden=”true”>Close</button> <button class=”btn btn-primary”>Save changes</button> </div> </div>
Draw Polygons in Google Maps and Determine whether an Address is in Polygons
Draw Polygons in Google Maps and Determine whether an Address is in Polygons This sample source code uses Google Maps Javascript API V3 to draw polygons in Google Maps. (Refer https://google-developers.appspot.com/maps/documentation/javascript/examples/drawing-tools) The address auto-complete uses Google Places Javascript library. (Refer https://developers.google.com/maps/documentation/javascript/places#places_autocomplete) The server-side code will retrieve address’ latitude and longitude using Google Gecoding API. (Refer…
Prototype Ajax.Request modifying header
new Ajax.Request({ajax-url}, { method:’get’, requestHeaders: { “Accept”: ‘application/json’ , “User-Agent”: {custom-user-agent} }, onCreate: function(){}, onComplete: function(){}, onSuccess: function(data){}, onFailure: function(){} }); Point: “User-Agent”: {custom-user-agent} ex) Mozilla/5.0 (Windows; U; Windows NT 5.1; de; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3 (FM Scene 4.6.1)
[jQuery] defaultChecked VS checked
jQuery defaultchecked VS checked Situation: I have checkbox elements on div(‘#dialog-a’) for a dialog. When an user clicks a button, then jQuery will bring the dialog with html code of div(‘#dialog-a’). Once, the user set checkbox and click “Close” button in the dialog, “Close” function supposes to set checkbox as “checked” in div(‘#dialog-a’). I use…
Google Analytics에서 jQuery AJAX 호출들을 추적가능하도록 만들기
원본 글: http://www.alfajango.com/blog/track-jquery-ajax-requests-in-google-analytics/ The code This code will automatically log all jQuery AJAX requests in our application, including those using $.ajax(), $.get(), or $.post(). This will also work for any jQuery plugins using AJAX requests (e.g. lightbox plugins, etc.), as well as for all Rails 3 remote links and forms(provided we’re using the jQuery UJS driver). In the page layout…
jQuery UI – Operation Aborted
Reference: Why do I receive an “Operation aborted” error message when I visit a Web page in Internet Explorer? – http://support.microsoft.com/kb/927917#more_information When use jQuery code, the Internet Explorer 7.0 in Windows Vista causes “Operation aborted” error. To resolve this problem, jQuery code must be wrapped by $(document).ready(function() {});
[Javascript] Iframe dynamic resize for all browsers
Iframe dynamic resize for all browsers [code] <script type=”text/javascript”> $(document).ready(function() { var i = setInterval(function(start){ resize_ifrm(); }, 20, new Date); $(“#tabs”).tabs(); }); function resize_ifrm(){ $(‘#ifrm_report’, parent.document.body).height($(‘#ifrm_report’, parent.document.body).contents().find(‘body’).height() + 30) } </script> [/code]