Tag Archiv: php
Our mission at Tutorialzine is to keep you up to date with the latest and coolest trends in web development. That’s why every month we release a handpicked collection of some of the best resources that we’ve stumbled upon and deemed worthy of your attention.
Ligthweight UI framework for Vue.js built using the popular flexbox-based CSS library Bulma. It has all the components a typical web app needs inluding dynamic elements like modals, toasts, and notifications, enableing devs to quickly add any user interface to their existing Vue.js projects.
Zero-dependency library for programatically highlighting and replacing strings within the DOM. The HR.js API couldn’t be simpler – just use a CSS selector to target the parent HTML element holding the desired text, choose which words to highlight, set the background color, and you’re done!
React VR is a framework for the creation of VR applications that run in your web browser. It pairs modern APIs like WebGL and WebVR with the declarative power of React, producing experiences that can be consumed through a variety of devices.
Pure JavaScript library for animated tooltips. It provides a wide range of different on-hover effects and a ton of customization with over 20 options. Tippy.js is super ligthweight and has rather good browser compatibility, automatically falling back to regular title attributes when not supported.
Dependancy-free JavaScript library for creating smooth transtitions between the views of your single page apps. The logic is built around PJAX (push state AJAX) which checks all valid URLs, prevents their normal behavior and instead loads the new page via a XMLHttpRequest. Barba also makes sure the change in state is properly reflected in your app’s URL via the Push State API.
Excellent CSS and JavaScript front-end framework, including its own SVG icon font and dozens of components. UIkit is designed very well, both in looks and as a framework, with unified styles, easy to remember API, many customization options, and useful modifyer classes. The docmentation is also top-notch.
Haul is a command line tool for developing React Native apps. It can be used as a direct replacement of the React Native packager, providing better webpack support, improved error messages, and greatly reduced compilation times. Haul is well documented, customizable, and completely open-source.
JavaScript library for communicationg between cross-origin browser tabs, making it possible for one web page to open and close additional browser tabs. The parent tab has access to useful information about its children tabs, including unique ids and whether the child tab is still open or has been closed.
Stylelint is a modern CSS linter that will help teams eforce unopinionated CSS standards in their stylesheets. The library is pretty powerful and can forbid or whitelist specific properties, catch errors, and recognize SCSS syntax. Stylelint is totaly cusotmizable, giving you the option to add new rules or opt-out of those that you don’t agree with.
Awesome vanilla JavaScript library that allows you to transform one icon to another on click, with a variety of smooth animations. Iconate works with all CSS icon fonts – just add an icon to your HTML and use the simple JavaScript API to choose what to transform it into and which of the 15+ animations to use.
React component that can be used for adding fully functional Excel-like datasheets to your apps. Table cells can be freely edited, group-selected, copied, pasted, deleted, and everything else you’d expect, with keyboard navigation also available. There are 3 useful examples on their GitHub – a basic table, spreasheet with formulas, and table with nested components.
Modular CSS framework with a minimal footprint. The entire library is just 3.8 kb minified and gzipped but this size can be further reduced by excluding the parts you don’t need. Modules include a base set of styles, a responsive grid, form components, buttons, tables, and menus.
Huge collection of free icons for popular social networks, apps, services, and other brands. Since all the icons are made with SVG they can be scaled to any size without fear of pixelation or smudges. Being SVG-based also makes them super lightweight – most are under 500 bytes, more detailed ones around 1 or 2 KB.
Tiny JavaScript library for working with colors. It offers a rich API with over 50 functions for manipulating colors, letting you swtich between color modes, change brightness and saturation, create gradient scales, and many other useful methods.
Weex is a framework for building cross-platform mobile apps, similar to Reat Native but for Vue.js. It allows you to write your app in HTML, CSS, and JavaScript, which then will be rendered in Java for Android and Swift for iOS. The framework has a number of built-in components, APIs, and other helpful utilites.
A collection of cool libraries and web experiments that will help JavaScript developers make their first steps in machine learning.
Machine learning libraries are becoming faster and more accessible with each passing year, showing no signs of slowing down. While traditionally Python has been the go-to language for machine learning, nowadays neural networks can run in any language, including JavaScript!
The web ecosystem has made a lot of progress in recent times and although JavaScript and Node.js are still less performant than Python and Java, they are now powerful enough to handle many machine learning problems. Web languages also have the advantage of being super accessible – all you need to run a JavaScript ML project is your web browser.
Most JavaScript machine learning libraries are fairly new and still in development, but they do exist and are ready for you to try them. In this article we will look at some of these libraries, as well as a number of cool AI web app examples to get you started.
Brain is a library that lets you easily create neural networks and then train them based on input/output data. Since training takes up a lot of resources, it is preferred to run the library in a Node.js environment, although a CDN browser version can also be loaded directly onto a web page. There is a tiny demo on their website that can be trained to recognize color contrast.
Educational web app that lets you play around with neural networks and explore their different components. It has a nice UI that allows you to control the input data, number of neurons, which algorithm to use, and various other metrics that will be reflected on the end result. There is also a lot to learn from the app behind the scenes – the code is open-source and uses a custom machine learning library that is written in TypeScript and well documented.
FlappyLearning is a JavaScript project that in roughly 800 lines of unminifed code manages to create a machine learning library and implement it in a fun demo that learns to play Flappy Bird like a virtuoso. The AI technique used in this library is called Neuroevolution and applies algorithms inspired by nervous systems found in nature, dynamically learning from each iteration’s success or failure. The demo is super easy to run – just open index.html in the browser.
Probably the most actively maintained project on this list, Synaptic is a Node.js and browser library that is architecture-agnostic, allowing developers to build any type of neural network they want. It has a few built-in architectures, making it possible to quickly test and compare different machine learning algorithms. It’s also features a well written introduction to neural networks, a number of practical demos, and many other great tutorials demystifying how machine learning works.
Land Lines is an interesting Chrome Web experiment that finds satellite images of Earth, similar to doodles made by the user. The app makes no server calls: it works entirely in the browser and thanks to clever usage of machine learning and WebGL has great performance even on mobile devices. You can check out the source code on GitHub or read the full case study here.
Although it is no longer actively maintained, ConvNetJS is one of the most advanced deep learning libraries for JavaScript. Originally developed in Stanford University, ConvNetJS became quite popular on GitHub, resulting in many community driven features and tutorials. It works directly in the browser, supports multiple learning techniques, and is rather low-level, making it suitable for people with bigger experience in neural networks.
Thing Translator is a web experiment that allows your phone to recognize real-life objects and name them in different languages. The app is built entirely on web technologies and utilizes two machine learning APIs by Google – Cloud Vision for image recognition and Translate API for natural language translations.
Framework for building AI systems based on reinforcement learning. Sadly the open-source project doesn’t have a proper documentation but one of the demos, a self-driving car experiment, has a great description of the different parts that make up a neural network. The library is in pure JavaScript and made using modern tools like webpack and babel.
Another library that allows us to set up and train neural networks using only JavaScript. It is super easy to install both in Node.js and in the client side, and has a very clean API that will be comfortable for developers of all skill levels. The library provides a lot of examples that implement popular algorithms, helping you understand core machine learning principals.
DeepForge is a user-friendly development environment for working with deep learning. It allows you to to design neural networks using а simple graphical interface, supports training models on remote machines, and has built in version control. The project runs in the browser and is based on Node.js and MongoDB, making the installation process very familiar to most web devs.
An excellent series of blog posts by Burak Kanber that goes over some of the machine learning fundamentals. The tutorials are well written, clear, and targeted specifically towards JavaScript developers. A great resource if you want to understand machine learning more in depth.
Conclusion
Although the JavaScript machine learning ecosystem is not fully developed yet, we recommend using the resources on this list to make your first steps in ML and get a feel for the core techniques. As the experiments in the article show, there are tons of fun stuff you can make using only the browser and some familiar JavaScript code.
In this quick tutorial we present you the Pointer Events interface - a new JavaScript API that improves the way we handle touch and stylus input on the web.
With more and more people using their mobile phones and tablets for web browsing, we as developers have to make sure that our web interfaces are fully accessible via touch. Setting up click and hover event listeners sort of works, but it is clearly a leftover solution from the mouse era.
Thankfully, there is a new API in town that accommodates the needs of mouse, touch, and stylus devices. It’s called Pointer events (not to be mistaken with the CSS property of the same name) and it allows us to add event listeners that are better suited for working with all types on input.
Meet The New Events
The new Pointer Event API is an evolved version of the Mouse Event interface we’ve all been using so far. It extends the functionality of the old API and adds support for multi-touch gestures, precise pen input, and overall smoother touchscreen interaction.
Most of the Pointer Events have direct alternatives among the old mouse events. Once the new API gets full browser support we can directly substitute with the more modern alternatives:
const button = document.querySelector("button");
// Instead of mouseover
button.addEventListener('mouseover', doSomething);
// We can use pointerover
button.addEventListener('pointerover', doSomething);
Interacting with a mouse should be the same in both cases. Using fingers or a stylus, however, will be easier to program with the new API.
Recognizing Input Type
An awesome feature of the Pointer Events API is that it can tell which type of input has been used. This can be helpful when you want to ignore some of the input methods or provide special feedback for each one.
button.addEventListener('pointereover', function(ev){
switch(ev.pointerType) {
case 'mouse':
// The used device is a mouse or trackpad.
break;
case 'touch':
// Input via touchscreen.
break;
case 'pen':
// Stylus input.
break;
default:
// Browser can't recognize the used device.
break;
}
});
Other Properties
The Pointer Events interface provides some some other interesting data as well. It includes all the MouseEvent properties plus the following:
- pointerId – Unique ID for the pointer causing the event.
- width and height – Size of the contact area in pixels.
- pressure – Pressure of touch, if available.
- tiltX and tiltY – The angle at which a stylus is touching the screen.
- isPrimary – Determines whether an event has been emitted by the pirmary pointer device.
Mouse clicks always have a width and height of 1 while touch size varies.
Browser Support
Pointer Events are fairly new, so browser compatibility isn’t perfect yet. Chrome (desktop and mobile), Edge, IE, and Opera have full support; Firefox and Safari don’t.
Pointer Events Browser Compatibility on Can I Use
To check whether a browser has the Pointer Events API you can use the window object:
if (window.PointerEvent) {
// Pointer Events enabled.
} else {
// Pointer Events not supported
}
A popular open-source pollyfill is also available for those who don’t want to wait for full browser adoption.
Conclusion
Although it doesn’t have full browser support yet, the Pointer Events API is eventually going to take over the old mouse events. It provides a lot of cool features that will increase web accessibility and enable developers to create more advanced touch and stylus-based apps.
If you want to learn more about the Power Events API we recommend checking out these resources:
A beginner's introduction into the world of webpack. We'll setup a working environment, write some modules, and bundle some code.
Build tools have become an integral part of web development, mainly due to the ever-increasing complexity of JavaScript apps. Bundlers allow us to package, compile, and organize the many assets and libraries needed for a modern web project.
In this tutorial we will take a look at webpack, a powerful open-source bundler and preprocessor that can handle a huge variety of different tasks. We’ll show you how to write modules, bundle code, and use some of the loader plugins. The tutorial is designed for total beginners to webpack, but having some JavaScript knowledge is advised.
Why webpack?
Much like any other aspect of web development, there isn’t a standard for which build tool to use. Right now, developers have to choose between webpack, Gulp, Browserify, NPM scripts, Grunt, and like 10 others. There are many in-depth comparisons out there, but all of these tools are very similar, so most of the time it comes down to personal preference and what project you are working on.
Here are some pros and cons to help you decide whether webpack is the tool for you:
Pros:
- Great for working with singe-page apps
- Accepts both
require() and import module syntaxes
- Allows for very advanced code splitting
- Hot Reload for quicker development with React, Vue.js and similar frameworks
- Мost popular build tool according to the 2016 JavaScript survey
Cons:
- Not suitable for beginners in web development
- Working with CSS files, images, and other non-JS resources is confusing at first
- Documentation could be better
- Changes a lot, even most 2016 tutorials are already outdated
1. Installation
The easiest way to install webpack is by using a package manager. We will go with npm but feel free to use Yarn or another hip alternative. In both cases you need to have Node.js on your machine and a package.json ready to go.
It is preferred to install it locally (without the -g tag). This will make sure everyone working on your project has the same version of webpack.
npm install webpack --save-dev
Once we have it installed, it’s best to run webpack via a Node.js script. Add these lines to your package.json:
//...
"scripts": {
"build": "webpack -p",
"watch": "webpack --watch"
},
//...
Now by calling npm run build from the terminal we can make webpack bundle our files (the -p option stands for production and minifies the bundled code). Running npm run watch will start a process that automatically bundles our files when any of them change.
The last part of the setup is to tell webpack which files to bundle up. The recommended way to do this is by creating a config file.
2. Webpack Config File
Here we will look at the config file in its most basic form but don’t let that fool you – the webpack config file is quite powerful, varies a lot from project to project, and can become super complex in some cases.
In the root directory of your project add a file called webpack.config.js.
webpack.config.js
var path = require('path');
module.exports = {
entry: './assets/js/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
The entry option tells webpack which is our main JavaScript file. There are many different strategies for configuring entry points but in most cases a single entry is enough.
In output we specify the name and path of our bundle. After running webpack we will have all our JavaScript in a file called bundle.js. This is the only script file that we will link in our HTML:
<script src="./dist/bundle.js"></script>
This setup should be enough to get us started. Later we will add some more stuff to it, but first let’s see how modules work.
3. Webpack Modules
Webpack provides multiple ways to work with modules, and most of the time you are free to go with whichever one you like. For this tutorial we will use the ES6 import syntax.
We want to add a module that greets our users. We create a file called greeter.js and make it export a simple function:
greeter.js
function greet() {
console.log('Have a great day!');
};
export default greet;
To use this module, we have to import it and call it in our entry point, which if you look back at the config file is index.js.
index.js
import greet from './greeter.js';
console.log("I'm the entry point");
greet();
Now when we run the bundler with npm run build, and open our HTML in the browser, we see this:
Our entry point and our greeter module were compiled into one file called bundle.js and it was executed by the browser. Here is a simple flow chart of what’s happening so far:
4. Requiring Libraries
We want our app to specify which day of the week it is when it greets users. To do so we will use moment.js by directly importing it into our greeter module.
First we need to install the library via npm:
npm install moment --save
Then in our greeting module, we simply import the library exactly the same way we imported local modules in the previous point:
greeter.js
import moment from 'moment';
function greet() {
var day = moment().format('dddd');
console.log('Have a great ' + day + '!');
};
export default greet;
After we bundle up again to apply the changes, in the browser console we will have the following messages:
Our flow diagram now looks like this:
Note: There are other, more advanced techniques for including libraries but they are outside the scope of this article. You can read more about them here.
5. Loaders
Loaders are webpack’s way to execute tasks during bundling and pre- or post-process the files in some manner. For example, they can compile TypeScript, load Vue.js components, render templates, and much more. Most loaders are written by the community, for a list of popular loaders go here.
Let’s say we want to add a linter to our project that checks our JS code for errors. We can do so by including the JSHint loader, which will catch all kinds of bad practices and code smells.
First we need to install both JSHint and the webpack JSHint loader:
npm install jshint jshint-loader --save
Afterwords, we are going to add a few lines to our webpack config file. This will initialize the loader, tell it what type of files to check, and which files to ignore.
webpack.config.js
var path = require('path');
module.exports = {
entry: './assets/js/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
// Add the JSHint loader
module: {
rules: [{
test: /\.js$/, // Run the loader on all .js files
exclude: /node_modules/, // ignore all files in the node_modules folder
use: 'jshint-loader'
}]
}
};
Now when webpack is started, it will show us a list of warnings in the terminal (which we will ignore):
Since moment.js is located in the node_modules folder, it won’t be linted by the JSHint loader:
Further Reading
This concludes our introduction to webpack! Since this is a lesson for beginners, we tried to cover only the most useful and must-know concepts of webpack. We hope the tutorial has been helpful, not too confusing, and within the 15 minute limit from the title.
In the near future, we are planning to add a second part to this tutorial, explaining how to work with CSS modules and other more-advanced features. In the meantime, if you want to learn more about webpack (and there is a lot more) we recommend checking out these awesome resources:
Our mission at Tutorialzine is to keep you up to date with the latest and coolest trends in web development. That’s why every month we release a handpicked collection of some of the best resources that we’ve stumbled upon and deemed worthy of your attention.
Based on Bootstrap 4, Core UI is an admin template offering a highly customizable solution to building control panels. There are separate boilerplate versions that allow you to quickly integrate it with some of the most popular frameworks right now: AngularJS, Angular 2, React.js, and Vue.js.
A React component by the Unsplash team that can be used to create beautiful line graphs suitable for displaying trending and activity metrics. This project follows a minimalistic approach and gives you a simple, polished solution to one specific problem, so don’t expect a full charting library. An unofficial Vue port is also available here.
Element is a UI framework based on Vue.js 2.0. It includes a set of over 50 components that are styled very consistently, following certain design and color choices. Each element is well documented and super easy to customize and implement into any Vue.js project. There is also a useful Sketch Template of the components for building mockups.
This project provides us with a solid foundation for creating cross-browser extensions. The boilerplate is based on WebExtensions, making it possible to write extensions once, and then deploy them simultaneously to Chrome, Opera & Firefox. It also has other cool features such as live-reload and a bundle of various Sketch assets needed for submitting to the respective app stores.
Modern lightbox plugin that works simultaneously for images and videos, providing smoothly animated overlay pop-ups. An awesome feature of BigPicute is that it works both with <img> tags and with background-image elements, giving developers freedom in their markup. As for the video, YouTube, Vimeo, and direct video links are supported.
Don’t let the name fool you, this isn’t a React component. Reactive listener is a tiny library by Zurb that allows us to create advanced event listeners that respond to more complex actions than simply clicks and hovers. Right now it can only recognize when the user is moving towards an element, but in the future more cool listeners may be added.
Eagle.js is a Vue.js framework for making web-based slideshows, similar to Reveal.js. It supports animations, themes, interactive widgets (for web demos), and makes it easy to reuse components, slides and styles across presentations.
This project is a JavaScript rerwite of the popualr C++ Box2D physics engine, used by game developers for years. Plank.js optimizes the engine for web and mobile browsers, and provides an open-source JavaScript-friendly codebase and API. This way web developers can be more comfortable when making 2D games and other physics related experiments.
Following the success of the Create React App boilerplate, here is a tool for making React Native apps without the need for any build configuration. It allows for React Native apps to be set up and tested without having to install Xcode or Android Studio.
A tiny library with CSS-only 3D buttons that have a smooth pushing down effect when pressed. The buttons come in 4 sizes and 3 colors and can be easily customized via SASS or by simply modifying the source .css file.
React Overdrive allows developers to animate elements on the page and to create smooth transiitons between the different states (or pages) in an app. The API is component based so setting up transitions is super easy, even when switching between multiple JavaScript files.
Our monthly resources compilation wouldn’t be complete without the addition of at least one click-to-scroll animation library. This month we have moveTo – a zero dependency JavaScript library that is only 1kb gzipped, super easy to use, and utilizes the native window.scroll API for doing animations.
Anchorme is a powerful JavaScript library that takes any string or text file and detects all the URLs inside it. It is fast, reliable, and has lots of useful features and customization options. Possible use cases include converting links in a text to clickable HTML <a> tags, extracting URLs from a string, or as a validator for emails, URLs, and IPs.
Free icon font that is packed with nearly 500 fantasy themed vector icons. It covers everything from weapons and armor to magic and inventory items. RPG Awesome can be used just like any other web icon font (<i class="ra ra-sword"></i>) and is customizable via simple CSS or SASS.
Tent CSS is a framework (or as its creators call it a CSS survival kit) that provides you with all the basic necessities needed for building a responsive website. It is very lightweight (only 5kb gzipped), follows the BEM standard, and has a modern flexbox grid for doing layouts.
This April we have prepared for you a wonderful list of web dev resources, including some React libraries, a framework for cross-browser extensions, and a JavaScript physics engine!
Anyone who has tried to make HTML upvote arrows, speech bubbles or other pointy elements, knows that in order to create a CSS-only triangle you have to use some sort of hack. The two most popular solutions are to create your triangles out of borders, or to use unicode characters.
We have to admit that both these CSS hacks are pretty clever but they still are terrible solutions, and as such make our code much uglier and less flexible. For instance, we can’t have a triangle with a background image, since borders and characters can only be one color.
Introducing Clip-path
Clip-path is a fairly new addition to the CSS spec that allows us to show only part of an element and hide the rest. Here is how it works:
Let’s say we have an ordinary rectangular div element. You can click Run in the editor below to view the rendered HTML.
(Play with our code editor on Tutorialzine.com)
To make a triangle we will need the polygon() function. It expects as argument comma separated 2D points which will define the shape of our mask. A triangle = 3 points. Try and change the values to see how the shape transforms.
(Play with our code editor on Tutorialzine.com)
Everything inside the path we created stays, everything outside it is hidden. This way we can make not only triangles, but all sorts of asymmetrical shapes that will behave like regular CSS blocks.
The only drawback of this technique is that we have to carefully calculate the coordinates of our points in order to get a good looking triangle.
Still, it’s way better than using borders or ▲.
Browser Support
If you open the caniuse page for clip-path things don’t look very good at first sight, but in reality the property works perfectly fine unprefixed in Chrome and with the -webkit- prefix in Safari. Firefox users have to wait till version 53. IE/Edge is behind the curve as usual but we can expect support sometime in the future.
Further Reading
The clip-path property has many other tricks up its sleeve, including some SVG magic. To find out more about it check out the links below.
- Clip-path on MDN – here
- In-depth tutorial for clip-path on Codrops – here
- Clippy, a clip-path generator – here
