HTML

Setting up Electron framework for Desktop apps

Standard

So, I recently came across a bunch beautifully designed and developed desktop apps on my Linux. Now, as a Linux user, I am used to overlooking design and aesthetics over functionality. Linux desktop developers usually don’t spend their energy on making their apps more user-friendly and appealing instead they invest it in improving its functionality. And it is generally assumed by them that the user is someone who is well versed in Linux Vedas and can handle the “rugged” nature of their desktop apps. But this notion is slowly changing with the introduction of new cross-platform desktop application frameworks like Electron. I have been using a few Electron apps for a couple of months now and I will just leave it to you to decide how aesthetically pleasing they are.

This slideshow requires JavaScript.

What is Electron ?

Electron is an open source library developed by GitHub for building cross-platform desktop applications with HTML, CSS, and JavaScript. Electron accomplishes this by combining Chromium and Node.js into a single runtime and apps can be packaged for Mac, Windows, and Linux.

Want to build cross-platform desktop applications ? Here’s how you go about setting up Electron in Linux.
First, we install npm to manage Node.js packages :

$ sudo apt-get install npm

Then we install Node.js :

$ curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
$ sudo apt-get install -y nodejs

Finally, we install Electron package. This command installs Electron globally but you can install it locally for your project.

$ sudo npm install -g electron

Now that we have installed Electron let us try a “Hello World” example as a part of our initiation ceremony! Any Electron app source code primarily has three important components, the JavaScript, the HTML (CSS optional) and the JSON file called package.json.

This package.json file is important with respect to Electron to define the app name, version and its main process, which usually is the JavaScript (index.js).

{
  "name" : "Hello World",
  "version" : "0.1.0",
  "main" : "main.js"
}

The JavaScrip file consists of all the Electron APIs and it is necessary to define const {app, BrowserWindow} = require('electron') in the .js file to include the Electron APIs. In this file you can include the rest of your app’s specific main process code. You can also put them in separate files and require them here.

function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({width: 800, height: 600})

  // and load the index.html of the app.
  win.loadURL(`file://${__dirname}/index.html`)

  // Open the DevTools.
  win.webContents.openDevTools()

  // Emitted when the window is closed.
  win.on('closed', () => {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    win = null
  })
}

The BrowserWindow object creates a Window using the given width and height dimensions. When Electron has finished initialization and is ready to create browser windows we call the  app.on('ready', createWindow) method. Some APIs can only be used after this event occurs.
At last, we define the HTML tags we want to use in our index.html file and design our app as per our requirements. In this example, we will stick to the h1 tag.
To execute our Electron app, go to the project directory and execute with the electron command:

$ electron .
hello-world_006

Hello World – Electron App running on Linux Mint 18

Download the Hello World example here:

image4233

Further Readings :

Let me know your thoughts and experiments with Electron in the comments section below.

Advertisements

CSS Overflow property.

Standard

      A few days ago I was working on the design of a website when I faced a problem. Whenever I used the images, paragraph, heading or any other tag in the HTML, the text-box the box used to break and would again continue when the tag would end. Now obviously this was making the site look ridiculous. For example, whenever we put groceries in a plastic bag more than it can withstand the bag tears up. Now tried everything to keep that text box from breaking in between, until I found this solution.

     In your CSS style sheet when you add the box, you add the following attribute,

overflow: auto;

     Now this property works fine with all the browsers and is supported by CSS 2 and above. Here I have given the overflow property’s value as auto , that is it any accommodate any number of data and if it exceeds the limits then the browser simply adds a scroll bar to it. But depending on your requirement you can use (here overflow means the extra data which cannot be accommodated inside the box):

  • visible: This one is a default and the overflow is not clipped.
  • hidden: The overflow is clipped but the rest of the content is hidden…
  • scroll: The overflow is clipped but the rest of the content can be see with the help of a scroll-bar.
  • auto: The overflow is clipped and the decision of adding a scroll-bar is left up to the browser.
  • initial: Sets this property to tis default value (visible).
  • inherit: Inherits this property from its parent element.

      The overflow property basically, decides what will happen if the box isn’t capable of holding the entire content and what if the content breaks out of the box. Here I have an example of CSS box using this property:

         .box {    
      height: 500px;     
      width: 800px;
      overflow: auto;     
      background-color: #BFCFFF;
      text-align: center;
      padding-top: 25px;
      padding-left: 20px;
      padding-right: 20px;
      padding-bottom: 20px;
      margin-left: 260px;
      margin-top: 100px;}

You can also use ‘div’ instead of box if you want it for other things…Also, you can change the rest of other properties like margin, padding, text-alignment depending on your requirement.

Here is a screenshot of the box working on a html page:

StarkEnterprises

    I also have a website that I made using this and a few other features that you might want to look at. To download it click here.(You need to replace the images and video paths (file-urls) in the html to the paths in your directory).

Download Server project

How to add your WordPress website to Dreamweaver CS6?

Standard

English: Application icon for Adobe Dreamweave...

      Adobe Dreamweaver CS6 is a HTML editor, web development, and designing software by Adobe system released in 21st April 2012. It is the best web editing software in the market and is easy to use. In this tutorial, I will help you to connect your WordPress (Content Management System) website to Dreamweaver CS6 so that you can edit your website’s wordpress themes as per your needs. The screenshots will make your work easier, below are the things you will need.

Requirements:-

·       A domain name with hosting.

·       WordPress 3.0 or above installed on it.(WordPress 3.5.1)

·       Adobe Dreamweaver CS6 or CS5.

If you have all the above things on your system then you are good to go. Let us get started with our tutorial. This tutorial will be divided in two sections for the convenience of understanding.

·       Adding your website to Dreamweaver CS6:-

 

1.     Open Dreamweaver CS6 and go to Site tab and select New site and there you will see New site setup.

2.     Now enter the Site Name as you wish and Locate a folder where you want to store all the data.

3.     Select Servers tab and click the + button at the bottom and the Server setup window opens.

4.     Type a server name as you wish, it can be anything. Then Connect using > FTP and for FTP address you should enter the server address that your hosting provider has given you (Check your email inbox) and type it there without any errors.

5.     Now as you have Hosting service at your website, you must have a unique Username and Password that you have to enter it in those fields. Then click the Test button to verify your details.

6.     Leave the Root Directory option blank and proceed to Web URL. Here enter your Web URL (Your domain name).

7.     Go at the top again, switch from Basic mode to Advance, and select the Server Model as PHP MySQL. Rest options are not to be changed.

8.     Save your details. There is no need to change other options click Save and the Setup will close. Dreamweaver will import the necessary data and server details, and in minutes, you will see those files at the right side bottom of the window. Great, you have successfully added your website to Dreamweaver CS6.

 clip_image002[4]

Note: If you cannot verify your login details expand the More Options check Use Proxy, Use Passive FTP, Use IPV6 or try disabling you firewall as it may be interrupting the connections. If the problem persists let me know at the comments box I will be happy to help you.

·       How to connect the website to your wordpress account:-

 

1.     Select the Site tab again, scroll down, and select Site-Specific Code Hints. The setup will open, select Structure as WordPress and click Ok.(Make sure the File is selected as Sub-Root)

              clip_image004[4]

2.     At the Remote Server (Right hand side bottom of the window), select index.php file. Then the code will appear but you will see a notification at the top which reads as ‘This page may have dynamically-related files that can only be discovered by the serve.’ Select Discover and still you may see another notification but it is because we do not have our website in the directory, we have it on the hosting server, so select the Live button, which is above the notification. Thus you see your website live.

3.     Now a window pops up ‘Update on Testing Server’ click Yes again another window pops up ‘Dependent files’ click Yes.

4.     Select the split view so that you can see your website and its code at the same time. If you see error page then try inserting your homepage address in the address bar. Congratulations, you have added your wordpress website to your Dreamweaver CS6. You can edit your HTML or CSS codes to customize your wordpress theme.

clip_image006[4]

      If you have any problems regarding the setup, comment below and I will try my best to help you to solve them. The website used in this tutorial is Basics Science.

    From the comments below I think some of our friends are having problem with setting up the website. You must be receiving this error message “Dynamically-related files could not be resolved because the site definition is not correct for this server.”

    There is some issue with websites that are set up with wordpress. The Dreamweaver shows the above error if your Premalink settings are customized to avoid it change it to Default. Please follow the screen shot.

Permalinks Settings

Related articles