Thursday, February 16, 2017

Electron - Overview

Why Electron?

Electron enables you to create desktop applications with pure JavaScript by providing a runtime with rich native (operating system) APIs.
This doesn’t mean Electron is a JavaScript binding to graphical user interface (GUI) libraries.

Electron - Installation

To get started with developing using the Electron, you need to have Node and npm(node package manager) installed. If you don’t already have these, head over to Node setup to install node on your local system. Confirm that node and npm are installed by running the following commands in your terminal.

How Electron Works

Electron takes a main file defined in your package.json file and executes it. This main file creates application windows which contain rendered web pages and interaction with the native GUI (graphical user interface) of your operating system.

Electron - Hello World

We have created a package.json file for our project. Now we'll create our first desktop app using electron.
Create a new file called main.js. Enter the following code in it:

const {app, BrowserWindow} = require('electron')
const url = require('url')
const path = require('path')

Electron - Building UIs

The User Interface of Electron apps is built using HTML, CSS and JS. So we can leverage all the available tools for front end web development here as well. You can use the tools like Angular, Backbone, React, etc as well as Bootstrap, Foundation, etc to build the apps.

Electron - File Handling

File handling is a very important part of building a desktop application. Almost all desktop apps interact with files.
We will create a form in our app that'll take as input a Name and Email address. We'll save this to a file and create a list that'll show this as output.

Electron - Native Node Libraries

We used a node module, fs, in the previous chapter. We'll now look at some other node modules that we can use with electron. We'll start off with the OS module.

Electron - Inter Process Communication

Electron provides us with 2 IPC(Inter Process Communication) modules called ipcMain and ipcRenderer.
ipcMain module is used to communicate asynchronously from the main process to renderer processes. When used in the main process, it handles asynchronous and synchronous messages sent from a renderer process (web page). Messages sent from a renderer will be emitted to this module.

Electron - System Dialogs

It is very important to make the user feel home when they're using your app. As a result you should not create dialog boxes using alert() calls. Electron provides a pretty good interface to accomplish the task of creating dialog boxes. Lets have a look at it.

Electron - Menus

On desktop apps we generally have 2 types of menus, namely the application menu(on the top bar) and a context menu(right click menu). We will learn how to create both of these in this chpater.
We'll be using 2 modules namely Menu and MenuItem.

Electron - System Tray

System tray is a menu outside of your application window. On MacOS and Ubuntu it is located on the top right corner of your screen. On Windows it is on the bottom right corner. We can create menus for our application in system trays using Electron.

Electron - Notifications

Electron provides native notifications API only for MacOS. So we are not going to use that, instead we'll be using a npm module called node-notifier. It allows us to notify users on Windows, MacOS and Linux.
Install the node-notifier module in your app folder using the following command in that folder:

Electron - Webview

The webview tag is used to embed 'guest' content like web pages in your Electron app. This content is contained within the webview container. An embedded page within your app controls how this content will be displayed.

Electron - Audio and Video Capturing

Audio and video capturing are important characterstics if you're building apps for screen sharing, voice memos, etc. They're also useful if you require an application to capture the profile picture.
We'll be using the getUserMedia HTML5 API for capturing audio and video streams with electron. Lets first set up our main process in the main.js file as follows:

Electron - Defining Shortcuts

We typically have memorized certain shortcuts for all the apps that we use on our PC daily. To make your applications feel intuitive and easily accessible to the user, you must allow the user to use shortcuts.
We'll use the globalShortcut module to define shortcuts in our app.

Electron - Environment Variables

Environment Variables control application configuration and behavior without changing code. Certain Electron behaviors are controlled by environment variables because they are initialized earlier than the command line flags and the app’s code.

Electron - Debugging

We have 2 processes, as we discussed in the start of the tutorial, that run our application. The main process and the renderer process.
Since the renderer process is the one being executed in our browser window, we can use Chrome Devtools to debug it. To open DevToolsuse the shortcut "Ctrl+Shift+I" or the <F12> key. You can check out how to use devtools here.

Electron - Packaging Apps

Packaging and distributing apps is an integral part of the development process of a desktop application. Since Electron is a cross platform desktop application development framework, packaging and distribution of apps for all the platforms should also be a seamless experience.

Electron - Resources

I have used the following resources to learn about electron as well as referred from them to create this tutorial.
The most important resource is the Electron documentation. The Documentation has extensive coverage of almost all features and quirks of the framework. They are alone enough to make your way through building an app.

What is Drupal?

Drupal is a free and open source Content Management System (CMS) that allows organizing, managing and publishing your content. It is built on PHP based environments. This is carried out under GNU i.e. General Public Licence, that means everyone have a freedom of downloading and sharing it to others.

Drupal - Installation

This article provides step-by-step procedure for Drupal installation. Befor installing Drupal, you require following system requirements.

Drupal - Architecture

Drupal is a platform for web content management which is powerful tool for building simple and complex sites. In this chapter, we are going to discuss the architectural style of Drupal for implementing user interfaces. The following diagram shows architecture of Drupal:

Drupal - Main Menu

In this chapter, we will study about how to Create Menus in Drupal. Menus are very important to navigate your website easily.Menus offer a set of links as a result, you can navigate your website. The Drupal menu allows you to add, remove and rename the menus and menu items.

Drupal - Blocks & Regions

In this chapter, we will study about Drupal Blocks & Regions. Blocks are container objects that are used to organize your content of your website. It can be displayed in the regions on your page.
Following are the simple steps for creating Drupal Blocks.

Drupal - Themes & Layouts

In this chapter, let us study about Themes and Layouts. Drupal will install Bartik theme as default theme during installation. You can select paid or free themes from Drupal official site. In general, layout is an arrangement of text and graphics. It is a good thought to choose a theme, keeping what different layouts to use on your site.

Drupal - Front Page

In this chapter let us study about, how to create Front Page in Drupal.If you have a good content on your website and expect your visitor to see that particular content first, then that article must be on the front page. Here Drupal provides solution for this.

Drupal - Static Pages

In this chapter we will study about how to create Static Pages in Drupal. Let's add some static pages named About Us and Services. The main purpuse for using a static pages is speed and steadiness. Static websites are more faster than a dynamic site.

Drupal - Create Blog

In this chapter we will study about how to Create Blogs in Drupal. Blog entries can be made public or private, to the site members, depending on which roles have access to view content.
Following are the simple steps used for creating Drupal Blogs
Step(1): click on the Modules as shown below.

Drupal - Create Articles

In this chapter, we will study about Creating articles in Drupal. Creating articles help your visitors know about the company and your website in detail in the form of articles.
Following are the steps used to create articles in Drupal.

Drupal - Create Pages

In this chapter, we will study about how to Create Pages in Drupal. It is very easy to create pages in Drupal.
Following are the simple steps used to create pages in Drupal.
Step (1): Click on Content in the top menu.

Drupal - Create Content

In this chapter let us study about Creating content. In Drupal content type defines the style in which contents are collected and displayed. When you install Drupal, by default two content types will be fixed and they are Articles and Basic page. When you enable other core and contributed modules by visiting Modules you can use other content types also.

Drupal - Modify Content

In this chapter let us study about how to Modify content in drupal. You can modify any of the previously used content type's content such as Articles, Basic page and Blog entry.
Following are the simple steps used for modifying content.

Drupal - Delete Content

In this chapter let us study about Deleting content. You can delete any of the previously written content such as Articles, Basic page and Blog entry.
Following are the simple steps used to delete content.
Step(1): Click on the Content as shown below.

Drupal - Publish Content

In this chapter let us study about how to Publish content. Every content is either published or unpublished. Published content will be seen by everyone where as unpublished content will not be seen. We can make use of this to hide the content from public view without deleting it.

Drupal - Menu Management

In this chapter we will study about the Menu Management in Drupal. Menu Management is the important part to navigate through your Drupal admin page. Below is the Drupal Menu Management.

Drupal - Taxonomies

Taxonomy can be thought of classifying website content which display specific content based on taxonomy terms. Drupal taxonomy is made up of several terms such as:

Term: It is used to manage or describe the content.
Vocabulary: It is set of terms.

Drupal - Comment

In this chapter we will study about Comments in Drupal. You can enable or disable the comments on your website. You can control, who can comment on your website's content and can manage those comments.
Following are the simple steps to configure comments in Drupal.

Drupal - User Management

User Management manages the information of the user, which allows creating or deleting the user, changing passwords, time and roles.
Following are the simple steps to manage the users in Drupal
Step (1): Click on People --> Permissions Tab.

Drupal - Optimization

In this chapter we will learn about how to optimize Drupal to improve its performance and speed. There are few steps through which we can improve the performance of the website.
Following are the steps that would help one optimize the website.

Drupal - Site Backup

In this chapter we'll study about Site Backup in Drupal. It helps in backing up the files and the database file.

Backup Files in Drupal
Backup Database in Drupal

Drupal - Site Upgrade

In this chapter we'll study how to upgrade the Drupal site. Upgrade is a process of replacing the old version to the latest version. Here we will upgrade the Drupal to the latest version.
Below are simple steps to upgrade the site in Drupal.

Drupal - Announcements

In this chapter we will learn about Announcements in Drupal.
If you want to make any announcements through your website then you can do it through this feature.Declaration given to a visitor or user with the help of your website is announcements.

Drupal - URL Alias

In this chapter, we will study about Drupal URL Alias. URL or Uniform Resource Locater Aliases is a page address in your web page, it changes the existing system path to new path alias.
Following are the simple steps for URL Aliases in Drupal.

Drupal Site Search

Drupal allows to search for specific content on your site. You can search both user and words in the site. We will see how to setup site search in Drupal as specified in the following steps:
Step (1): Go to Configuration and click the Search settings link under SEARCH AND METADATA section.

Drupal - Error Handling

In this chapter, we will study about Drupal error handling for managing error messages on Drupal site.
Error Handling is a process of detection and finding the resolutions for the errors, this can be programming application errors or communicable errors.

Drupal - Multilingual Content

In this chapter we will learn about multilingual content. That means your content can be written and will be displayed in different languages. For this you may either install a multilingual content module or an Internationalism module.

Drupal - Triggers & Actions

In this chapter we will learn about Triggers and Actions in Drupal. First let's look into Triggers.
It can be defined as changes happening within your site. The actions can be carried out either after creating a new content or any page.

Drupal - Social Networking

In this chapter let us study about Social Networking in Drupal. Social media is becoming more important these days, drupal has many social media modules for this purpose. Let us take ShareThis module as our example, you can choose any other of your choice.

Drupal - Internationalization

In this chapter we will learn about Internationalization in Drupal. Internationalization is a module which lets you create multilingual sites. This way you can display your website in different languages.
Following are the steps to use Internationalization:

Drupal - Extension

In this chapter we will learn about Drupal Extensions. To extend the functionality of the site different extensions can be installed.
Following are the steps to install Extension module in Drupal.
Step (1): Click on Modules from the menu bar.

Drupal - Default Modules

In this chapter, we will study about Default Modules in Drupal. After installing Drupal, you will see total 44 default modules present in Drupal. You can see all these modules in Core section. By default 29 modules are enabled after installation.

Drupal - Pane Module

In this chapter we will learn about using Pane Module in Drupal. Pane module is used to translates the custom panel's pane with optional title that will be stored as variables and it can be translate or edit quickly.
Following are the steps of how to add Pane Module.

Drupal - Book Module

In this chapter we will study about Book Module in Drupal. Books have an in-built hierarchical navigation, which means that you can organize them to read in a special order. The book content type also allows you to create your website content easier for site visitors to print.

Drupal - Aggregator Module

In this chapter we will study about Aggregator Module in Drupal. Aggregator Module takes the content from other websites but does not generate any feeds. It is also known as a feed reader. It gathers, displays texts and images and other sites and blogs.

Drupal - Contact Module

In this chapter we will study about creating contact form in Drupal. Contact form is used to submit the information of user in Drupal.
Following are the steps to add contact module.
Step (1): Click on Modules menu .

Drupal - Form Module

In this chapter we will learn about Form module in Drupal. This module lets you create a form in your Drupal based on the website for your users.
Following are the steps to install Form Module in Drupal.

Drupal - Poll Module

In this chapter we will study how to create a Poll module in Drupal. This module helps you create polls for your website. You can ask questions, give any number of answers and your visitors can vote.
Following are the steps to Poll Module.
Step (1): Click on Module from the menu bar.

Drupal Site Security

In this chapter we will study about how to secure the Drupal site. This chapter specifies security configuration suggestions for site administrators and alerts the administrator how to secure the site.
There are many contributed modules which help you with security configuration in which Security Review module automates testing the mistakes that makes your site insecure.

Drupal - Setup Shopping Cart

Basically cart is a process of collecting items or services and uses checkout to collect payment. In this article, we will see how to setup shopping cart for Drupal site by using Commerce Kickstart module.

Drupal - Create Products

In this chapter we'll study about Creating Products in Drupal site. Products are the items that are offered for sale.
Following are the simple steps used for Creating Product.
Step(1): Click on Add Product.

Drupal - Create Categories

In this chapter, we will study about how to Create Categories in Drupal. Taxonomy can be considered as categories or tags. Drupal taxonomy is built up of vocabularies and terms. A vocabulary is a set of terms and terms are just another word for categories.

Drupal - Setup Taxes

In general, tax is a financial charge upon a taxpayer or source of public revenue. Sales tax is a basic type for taxes that do not display inclusive with product prices.
You can specify the tax rate for the products as defined in the below steps:
Step (1): Go to Store and click on the Configuration.

Drupal - Setup Discounts

In general, discount is a amount or percentage deducted from the normal selling price of the product. It is the way of offering products for sale at a low or reduced price.
You can specify the discount for the products as defined in the below steps:
Step (1): Go to Store and click on the Configuration.

Drupal - Receive Donations

In this chapter we will learn how to Receive Donation in Drupal. Donation is some amount of gift given by an organisation or individual to a non-profit organisation or private foundation.
Following are the steps to receive donation in Drupal.

Drupal - Setup Shipping

In this chapter let us study about Setup Shipping in Drupal. In general Shipping refers to transport of goods from one location to another. In order to Setup Shipping you have to install Commerce Flat Rate and Commerce Shipping modules. In this chapter let us create Free Shipping for orders greater than $100 and Paid Shipping for orders less than $100.

Drupal - Setup Payments

In this chapter we will study how to Setup Payments in Drupal. Payment is a process of paying money in an exchange of goods, services or both to a company or a person.
Following are the steps to setup payments in Drupal.

Drupal - Invoice Generation

In this chapter we'll study how to generate invoice in Drupal. Invoice is a document with a statement of amount and cost, unique invoice number and tax information.
Following are the steps to generate invoice in Drupal.

Drupal - Email Notifications

In this chapter we will learn how to send Email Notifications to the owner or creater, when a new comment is posted to the article. Email Notification is an alerts that a new mail has been arrived in your mail box.
Following are the simple steps to notify email in Drupal.
Step (1): Click on Configuration menu on Drupal.

Drupal - Order History

Order history is dependent on the ordered products by the user after checkout. It includes history of the product which includes order number, user name, order status etc.
You can view the order history of the product by using the following steps −
Step 1 − Go to Store and click the Orders link.

Drupal - Interview Questions

Dear readers, these Drupal Interview Questions have been designed specially to get you acquainted with the nature of questions you may encounter during your interview for the subject of Drupal.

Drupal - Overview

Drupal is a free and open source Content Management System (CMS) that allows organizing, managing and publishing your content. It is built on PHP based environments. This is carried out under GNU i.e. General Public License, which means everyone has the freedom of downloading and sharing it with others.

Drupal - Useful Resources

The following resources contain additional information on Drupal. Please use them to get more in-depth knowledge on this.

Discuss Drupal

Django - Basics

Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design. Django makes it easier to build better web apps quickly and with less code.
Note − Django is a registered trademark of the Django Software Foundation, and is licensed under BSD License.

Django - Overview

As you already know, Django is a Python web framework. And like most modern framework, Django supports the MVC pattern. First let's see what is the Model-View-Controller (MVC) pattern, and then we will look at Django’s specificity for the Model-View-Template (MVT) pattern.

Django - Environment

Django development environment consists of installing and setting up Python, Django, and a Database System. Since Django deals with web application, it's worth mentioning that you would need a web server setup as well.

Django - Creating a Project

Now that we have installed Django, let's start using it. In Django, every web app you want to create is called a project; and a project is a sum of applications. An application is a set of code files relying on the MVT pattern.

Django - Apps Life Cycle

A project is a sum of many applications. Every application has an objective and can be reused into another project, like the contact form on a website can be an application, and can be reused for others. See it as a module of your project.

Django - Admin Interface

Django provides a ready-to-use user interface for administrative activities. We all know how an admin interface is important for a web project. Django automatically generates admin UI based on your project models.

Django - Creating Views

A view function, or “view” for short, is simply a Python function that takes a web request and returns a web response. This response can be the HTML contents of a Web page, or a redirect, or a 404 error, or an XML document, or an image, etc.

Django - URL Mapping

Now that we have a working view as explained in the previous chapters. We want to access that view via a URL. Django has his own way for URL mapping and it's done by editing your project url.py file (myproject/url.py). The url.py file looks like −

Django - Template System

Django makes it possible to separate python and HTML, the python goes in views and HTML goes in templates. To link the two, Django relies on the render function and the Django Template language.

Django - Models

A model is a class that represents table or collection in our DB, and where every attribute of the class is a field of the table or collection. Models are defined in the app/models.py (in our example: myapp/models.py)

Django - Page Redirection

Page redirection is needed for many reasons in web application. You might want to redirect a user to another page when a specific action occurs, or basically in case of error. For example, when a user logs in to your website, he is often redirected either to the main home page or to his personal dashboard.

Django - Sending E-mails

Django comes with a ready and easy-to-use light engine to send e-mail. Similar to Python you just need an import of smtplib. In Django you just need to import django.core.mail. To start sending e-mail, edit your project settings.py file and set the following options −

Django - Generic Views

In some cases, writing views, as we have seen earlier is really heavy. Imagine you need a static page or a listing page. Django offers an easy way to set those simple views that is called generic views.

Django - Form Processing

Creating forms in Django, is really similar to creating a model. Here again, we just need to inherit from Django class and the class attributes will be the form fields. Let's add a forms.py file in myapp folder to contain our app forms. We will create a login form.

Django - File Uploading

It is generally useful for a web app to be able to upload files (profile picture, songs, pdf, words.....). Let's discuss how to upload files in this chapter.

Django - Apache Setup

So far, in our examples, we have used the Django dev web server. But this server is just for testing and is not fit for production environment. Once in production, you need a real server like Apache, Nginx, etc. Let's discuss Apache in this chapter.

Django - Cookies Handling

Sometimes you might want to store some data on a per-site-visitor basis as per the requirements of your web application. Always keep in mind, that cookies are saved on the client side and depending on your client browser security level, setting cookies can at times work and at times might not.

Django - Sessions

As discussed earlier, we can use client side cookies to store a lot of useful data for the web app. We have seen before that we can use client side cookies to store various data useful for our web app. This leads to lot of security holes depending on the importance of the data you want to save.

Django - Caching

To cache something is to save the result of an expensive calculation, so that you don’t perform it the next time you need it. Following is a pseudo code that explains how caching works −

given a URL, try finding that page in the cache

Django - Comments

Before starting, note that the Django Comments framework is deprecated, since the 1.5 version. Now you can use external feature for doing so, but if you still want to use it, it's still included in version 1.6 and 1.7. Starting version 1.8 it's absent but you can still get the code on a different GitHub account.

Django - RSS

Django comes with a syndication feed generating framework. With it you can create RSS or Atom feeds just by subclassing django.contrib.syndication.views.Feed class.
Let's create a feed for the latest comments done on the app (Also see Django - Comments Framework chapter).

Django - Ajax

Ajax essentially is a combination of technologies that are integrated together to reduce the number of page loads. We generally use Ajax to ease end-user experience. Using Ajax in Django can be done by directly using an Ajax library like JQuery or others. Let's say you want to use JQuery, then you need to download and serve the library on your server through Apache or others.

Django - Quick Guide

Django - Useful Resources

The following resources contain additional information on Django. Please use them to get more in-depth knowledge on this.

Discuss Django

Django is a web development framework that assists in building and maintaining quality web applications. Django helps eliminate repetitive tasks making the development process an easy and time saving experience. This tutorial gives a complete understanding of Django.

What is CSS?

Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable.

CSS - Syntax

A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding elements in your document. A style rule is made of three parts −

Selector − A selector is an HTML tag at which a style will be applied. This could be any tag like <h1> or <table> etc.

CSS - Inclusion

There are four ways to associate styles with your HTML document. Most commonly used methods are inline CSS and External CSS.

Embedded CSS - The <style> Element

You can put your CSS rules into an HTML document using the <style> element. This tag is placed inside <head>...</head> tags. Rules defined using this syntax will be applied to all the elements available in the document. Here is the generic syntax −

CSS - Measurement Units

Before we start actual exercise, we would like to give a brief idea about the CSS Measurement Units.
CSS supports a number of measurements including absolute units such as inches, centimeters, points, and so on, as well as relative measures such as percentages and em units. You need these values while specifying various measurements in your Style rules e.g border = "1px solid red".

CSS - Colors

CSS uses color values to specify a color. Typically, these are used to set a color either for the foreground of an element (i.e., its text) or else for the background of the element. They can also be used to affect the color of borders and other decorative effects.

CSS - Background

This chapter teaches you how to set backgrounds of various HTML elements. You can set the following background properties of an element −

The background-color property is used to set the background color of an element.
The background-image property is used to set the background image of an element.

CSS - Fonts

This chapter teaches you how to set fonts of a content, available in an HTML element. You can set following font properties of an element −

The font-family property is used to change the face of a font.
The font-style property is used to make a font italic or oblique.
The font-variant property is used to create a small-caps effect.

CSS - Text

This chapter teaches you how to manipulate text using CSS properties. You can set following text properties of an element −

The color property is used to set the color of a text.
The direction property is used to set the text direction.
The letter-spacing property is used to add or subtract space between the letters that make up a word.

CSS - Using Images

Images play an important role in any webpage. Though it is not recommended to include a lot of images, but it is still important to use good images wherever required.
CSS plays a good role to control image display. You can set the following image properties using CSS.

CSS - Links

This chapter teaches you how to set different properties of a hyper link using CSS. You can set following properties of a hyper link −
We will revisit the same properties when we will discuss Pseudo-Classes of CSS.

CSS - Tables

This tutorial will teach you how to set different properties of an HTML table using CSS. You can set following properties of a table −

The border-collapse specifies whether the browser should control the appearance of the adjacent borders that touch each other or whether each cell should maintain its style.

CSS - Borders

The border properties allow you to specify how the border of the box representing an element should look. There are three properties of a border you can change:

The border-color specifies the color of a border.
The border-style specifies whether a border should be solid, dashed line, double line, or one of the other possible values.
The border-width specifies the width of a border.

CSS - Margins

The margin property defines the space around an HTML element. It is possible to use negative values to overlap content.
The values of the margin property are not inherited by the child elements. Remember that the adjacent vertical margins (top and bottom margins) will collapse into each other so that the distance between the blocks is not the sum of the margins, but only the greater of the two margins or the same size as one margin if both are equal.

CSS - Lists

Lists are very helpful in conveying a set of either numbered or bullet points. This chapter teaches you how to control list type, position, style, etc., using CSS.
We have the following five CSS properties, which can be used to control lists:

CSS - Paddings

The padding property allows you to specify how much space should appear between the content of an element and its border −
The value of this attribute should be either a length, a percentage, or the word inherit. If the value is inherit, it will have the same padding as its parent element.

CSS - Cursors

The cursor property of CSS allows you to specify the type of cursor that should be displayed to the user.
One good usage of this property is in using images for submit buttons on forms. By default, when a cursor hovers over a link, the cursor changes from a pointer to a hand.

CSS - Outlines

Outlines are very similar to borders, but there are few major differences as well −

An outline does not take up space.
Outlines do not have to be rectangular.
Outline is always the same on all sides; you cannot specify different values for different sides of an element.

CSS - Dimension

You have seen the border that surrounds every box ie. element, the padding that can appear inside each box and the margin that can go around them. In this tutorial we will how we can change the dimensions of boxes.
We have the following properties that allow you to control the dimensions of a box.

CSS - Scrollbars

There may be a case when an element's content might be larger than the amount of space allocated to it. For example, given width and height properties do not allow enough room to accommodate the content of the element.

পৃষ্ঠাসমূহ

Labels

.

Search Your Article

Total Pageviews

Thursday, February 16, 2017

Why Electron?

What is Drupal?

Drupal - Overview

Embedded CSS - The <style> Element