Pushbar.js

Pushbar.js is a tiny javascript plugin for creating sliding drawers in web apps

It is fully customizable and dependency free.You can use it as sidebar menus or option drawers.

Get it: https://github.com/oncebot/pushbar.js

Explore: https://oncebot.github.io/pushbar.js/



Join @javascriptdaily for more updates of Daily JavaScript / JS community news, links and events.

Natural Language Processing with NoSQL and JavaScript

In this article we'll see how to apply sentiment analysis on film (movie) reviews. Sentiment analysis means, that, based on an unknown review, an algorithm can decide whether a newly added review is positive (i.e. the review liked the film) or negative (i.e. the reviewer did not like the film).


Join @javascriptdaily for more updates of Daily JavaScript / JS community news, links and events.


https://fullstack-developer.academy/natural-language-processing-with-nosql-and-javascript/

Make Your PWA Work Offline Part 1:—Static Files

Creating a basic SW file to store static resources in the browser cache is only the first step of adding offline support to your application. You can extend this solution by introducing new features or modifying existing ones. 

Join @javascriptdaily for more updates of Daily JavaScript / JS community news, links and events.

https://www.monterail.com/blog/pwa-working-offline

Pug.js to make your life easier with HTML templates

Pug.js is a HTML templating engine, which means you can write much simpler Pug code, which Pug compiler will compile into HTML code, that browser can understand. But why not write HTML code in the first place?

Pug has powerful features like conditions, loops, includes, mixins using which we can render HTML code based on user input or reference data. Pug also support JavaScript natively, hence using JavaScript expressions, we can format HTML code.

An application of that would be Email Templates to send email customized to particular user.

https://itnext.io/pug-js-to-make-your-life-easier-with-html-templates-9c62273626e0

See more here:
https://pugjs.org/api/getting-started.html

Fork it from:
https://github.com/pugjs/pug

Join @javascriptdaily for more updates of Daily JavaScript / JS community news, links and events.

Creating a Markdown editor/previewer in Electron and Vue.js

To explore Electron, we will build a Markdown editor with live preview of generated HTML, using an HTML template of your choice. The UI will be built with a combination of Vue.js, Bulma/Buefy, and the ACE editor component.

Vue.js is a framework for implementing components that run in the web browser. Vue.js applications are built using these components and in theory one could build the UI entirely with Vue.js plus custom-developed CSS and JavaScript. But, again, there are several open source projects offering prebaked UI components with responsive web best practices built-in.

https://blog.sourcerer.io/creating-a-markdown-editor-previewer-in-electron-and-vue-js-32a084e7b8fe

Fork the code:
https://github.com/sourcerer-io/electron-vue-buefy-editor

Join @javascriptdaily for more updates of Daily JavaScript / JS community news, links and events.

localForage: Offline Storage, Improved - (Wraps IndexedDB, WebSQL, or localStorage using a simple API.)

https://github.com/localForage/localForage

Join @javascriptdaily for more updates of Daily JavaScript / JS community news, links and events.

fullPage.js

A simple and easy to use library to create fullscreen scrolling websites (also known as single page websites or onepage sites). It allows the creation of fullscreen scrolling websites, as well as adding some landscape sliders inside the sections of the site.

A perfect plugin for web slides...

https://alvarotrigo.com/fullPage/

Fork it here: https://github.com/alvarotrigo/fullPage.js/

Join @javascriptdaily for more updates of Daily JavaScript / JS community news, links and events.

Looking for inspiration to work on VueJS?

Here is a showcase site you would like to watch and tinker with...

https://madewithvuejs.com/

Join @javascriptdaily for more updates of Daily JavaScript / JS community news, links and events.

Building a Hangman Game with Vue.js

Working on a project that you are motivated to build is one of the most effective ways to learn how to code. This is a fun little project to learn about Vue.js, HTML and CSS.

To build the Hangman game, we will explore a few of Vue’s core features:
* Declarative Rendering and Template Syntax.
* List Rendering.
* Event Handling and Methods.
* Conditional Rendering.

https://www.30platforms.com/post/building-a-hangman-game-with-vue-js/

Video Tutorial: https://www.youtube.com/watch?v=y4yf5DRJI6k

Tinker with this code:
https://github.com/30platforms/vue-hangman-game

Join @javascriptdaily for more updates of Daily JavaScript / JS community news, links and events.

DraxtJS

Draxt is a utility module for selecting and manipulating filesystem objects in a Node.js environment. It uses glob patterns as its "selector engine". draxt also provides several DOM-like interfaces representing filesystem objects which build on promisified APIs for the fs and fs-extra modules.

Fork it here:
https://github.com/ramhejazi/draxt


Join @javascriptdaily for more updates of Daily JavaScript / JS community news, links and events.

Want to create Duotone effect on Images ?

Explore this design tool to easily create and generate Duotone images.

https://cssduotone.com/


Join @javascriptdaily for more updates of Daily JavaScript / JS community news, links and events.

AJAX

Asynchronous JavaScript + XML, while not a technology in itself, is a term coined in 2005 by Jesse James Garrett, that describes a "new" approach to using a number of existing technologies together, including HTML or XHTML, Cascading Style Sheets, JavaScript, The Document Object Model, XML, XSLT, and most importantly the XMLHttpRequest object.

https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX

Join @javascriptdaily for more updates of Daily JavaScript / JS community news, links and events.

Uploading Files with AJAX

The ability to communicate with a web server without reloading the page has revolutionised how web applications are built. The primary technology that enables AJAX (XMLHttpRequests) has evolved significantly since the initial conception of dynamic websites.

A nice feature added to XMLHttpRequests in recent years is the ability to handle file uploads. Traditionally many developers have resorted to using technologies like Flash to upload files to a server. The problem with this approach is that the user needs to have a third-party browser plugin installed.

In this post you’ll learn how to upload files to a server using native JavaScript technologies. The example we’re going to use supports uploading multiple files in a single request. However, you can apply the same principles to single-file uploads too.

http://blog.teamtreehouse.com/uploading-files-ajax

Join @javascriptdaily for more updates of Daily JavaScript / JS community news, links and events.

A basic tutorial for HTML & CSS

HTML & CSS Is Hard to be the only introduction to HTML and CSS that you’ll ever need. If you put in the effort to read every section and write every code snippet, this tutorial has the potential to replace hundreds or even thousand of dollars worth of online courses and live training.

Our goal is to make it as easy as possible for complete beginners to become professional web developers, so if you’ve never written a line of HTML or CSS, but you’re contemplating an expertise, grab a cup of coffee, take a seat, and let’s get to work.

https://internetingishard.com/html-and-css/introduction/

Join @javascriptdaily for more updates of Daily JavaScript / JS community news, links and events.

An experiment by https://twitter.com/cassidoo using HAML Loops.

https://codepen.io/cassidoo/pen/MBELdq

Join @javascriptdaily for more updates of JavaScript / JS community news, links and events.

HTML abstraction markup language

Haml (HTML abstraction markup language) is based on one primary principle: markup should be beautiful. It’s not just beauty for beauty’s sake either; Haml accelerates and simplifies template creation down to veritable haiku.

Unspace Interactive and several other professional Rails shops use Haml exclusively for their projects, valuing its focus on cleanliness, readability, and production speed.

http://haml.info/

Fork it from: https://github.com/haml/haml

Join @javascriptdaily for more updates of Daily JavaScript / JS community news, links and events.

Flexbox — The Animated Tutorial

If a picture is worth a thousand words — how many more animation? Flex cannot be efficiently & fully explained by text or static images. To cement your knowledge of flex here are some animated samples.

https://medium.com/@js_tut/flexbox-the-animated-tutorial-8075cbe4c1b2

Join @javascriptdaily for more updates of Daily JavaScript / JS community news, links and events.

**Learn SVG in 10 Minutes**

SVG, short for Scalable Vector Graphics, is an image format based on XML syntax. Other image formats are based on pixel processing, while SVG makes a shape description for the image, so essentially it is a text file with small size, and will not be distorted no matter how many times it is enlarged.

https://www.tutorialdocs.com/article/svg-learn.html

Join @javascriptdaily for more updates of Daily JavaScript / JS community news, links and events.

Serverless Machine Learning with TensorFlow.js:

http://jamesthom.as/blog/2018/08/13/serverless-machine-learning-with-tensorflow-dot-js/

Join @javascriptdaily for more updates of Daily JavaScript / JS community news, links and events.