TeckStack https://teckstack.com Web Design and WordPress Wed, 06 Dec 2017 11:51:32 +0000 en-US hourly 1 https://wordpress.org/?v=4.9.2 Top 5 WordPress Plugins to Improve Search Functionality https://teckstack.com/wordpress-plugins-search-functionality https://teckstack.com/wordpress-plugins-search-functionality#respond Sat, 23 Sep 2017 20:55:58 +0000 http://teckstack.com/?p=5165 The Internet is a source of endless information. Most of the tech-savvy people want to find the relevant content on WWW quickly without navigating through the entire website structure due to their busy life and other distractions. No-one wants to waste his/her precious time to visit the different sections of a site to find their desired content, products, services, etc.

As a matter of fact, simple search box seems like a very small component of the website design, but it allows visitors to find the exact stuff they need. It also enhances the usability of websites up to a great extent and reduces their bounce rate.

As default WordPress search options are limited, there are various WordPress plugins that can help you to enhance the search functionality. Just have a look at top 5 options in this regard. Let's get started.

1. Search Everything

WordPress Search Plugin - Search Everything
WordPress Search Plugin - Search Everything

As indicated by its name, this plugin allows visitors to search almost everything on your site. It empowers the default WordPress search option on your site and helps visitors to access the required content. Based on your specific needs, you can configure it to search pages, tags and custom fields, comments, drafts, attachments, and excerpts. You can exclude some of your content from search results if you want.

2. Better Search

WordPress Search Plugin - Better Search
WordPress Search Plugin - Better Search

Better Search a robust and Powerful WordPress plugin which is used by numerous WordPress blog/website owners to make substantial improvements in their site's search functionality. It replaces the default WordPress search engine with a more powerful search engine, allowing visitors to get relevant search results against the entered keywords.

This plugin can search through numerous posts and pages to display the appropriate results to visitors. It is armed with several options which allow you to customize the search results. You can exert a greater weight to title or content and fine tune the results easily. The default mode of this plugin easily integrated with the theme you use on your WordPress site.

The best thing about this plugin is that it displays a “search heatmap” of the most popular searches on your site. It allows you to guess the content consumption trend of visitors and provide them the exact stuff in an easy way.

3. Custom Search by BestWebSoft

WordPress Search Plugin - Custom Search
WordPress Search Plugin - Custom Search

Custom Search is a boon to all those WordPress website owners who look for a good plugin to improve their site's search features without getting involved in technical issues. This plugin allows visitors to search everything within custom post types and taxonomies and get the desired results.

The plugin is fully compatible with the latest WordPress versions and has extremely simple settings. So, you can easily use it on your WordPress sites without editing any code and improve your website user experience up to a great extent within a few days. It supports multiple languages including RTL languages too. The plugin is available in free and premium version. The Free version of the plugin comes with limited features. Use its premium versions if you need to access more features to improve your site's search functionality.

4. SearchWP

WordPress Search Plugin - SearchWP
WordPress Search Plugin - SearchWP

If you are really serious about improving the search feature of your site, then search WP is a worthwhile option you should think about. It's a premium Plugin which includes some useful settings (such as choosing which content is indexed, setting post weighting, etc, ) which allow you to control the search functionality of your site fully and help visitors find what they are looking for.

It has a live search feature, using which visitors can get the most relevant results against their search keywords. This can also index & display PDF files if available on your site.

5. WP Google Search

WordPress Search Plugin - WP Google Search
WordPress Search Plugin - WP Google Search

There are many website owners who want to provide the Google custom search facility to visitors on their sites to help visitors get what they want. Adding Google custom search option to their site seems like a challenging job for non-technical WordPress site owners and newbie users. Are you also among them? If yes, then don't get worried and use WP Google Search plugin.

It allows you to add Google search to your website or multiple sites easily and quickly and enhance the search function of your site up to a great extent. The plugin can find the content and display the content which is indexed by Google. It allows you to offer the most relevant results to users on your site and generate more business opportunities.

Final Words:

Your WordPress website must have an easy search bar to help visitors find the needed stuff. By using the above- mentioned WordPress plugins, you can easily add the search feature to your site and improve its usability up to a great extent.

]]>
https://teckstack.com/wordpress-plugins-search-functionality/feed 0
Top 5 Mobile Friendly WordPress Themes 2017 https://teckstack.com/top-5-mobile-friendly-wordpress-themes https://teckstack.com/top-5-mobile-friendly-wordpress-themes#respond Thu, 16 Mar 2017 11:25:23 +0000 http://teckstack.com/?p=5109 It has been more than a decade now since the mobile phones made their entrance into the communication world. Mobile phones are really powerful and have literally overtaken last decade’s computers. They have become a staple of the daily lives for millennial.

The ability to act as a versatile device by acting as a music player, video player, computer, gaming device etc. has been the reason for its immense popularity. Mobile phones are not only restricted to the above-mentioned features. They can perform a wide range of tasks for you.

WordPress is constantly developing new and innovative mobile-responsive themes. Below is a list of the top 5 mobile friendly WordPress themes of 2017.

Interesting Reading:
- Top 5 WordPress Mobile Design Trends
- Top 10 WordPress Themes for Technology Blogs

X Theme

X WordPress Theme
X WordPress Theme

X Theme has been designed for both site owners and customers. This theme is perfect for hand held devices. There are hardly any compatibility errors and your pages will adapt seamlessly to any screen size. It has 2 sets of beautiful icon fonts which automatically adapt to all screens. The theme has integrated social buttons as mobiles and tablets are mostly used for browsing social media sites. X Theme has the premium WooCommerce plugin built in which enables the creation of professional online shops.

Download Demo

Uncode

Uncode WordPress Theme
Uncode WordPress Theme

Uncode is a modern social media friendly theme which is technologically very advance and continuously updated. Unicode has been built with sophisticated HTML5 and CSS3 along with Bootstrap based shortcodes. There’s a built-in Visual Composer along with Uncode’s exclusive add-ons. WooCommerce and other amazing premium sliders come integrated. Uncode is one of the most responsive themes and is best suited for mobile friendly websites. It has some amazing features like off-canvas mobile menus. Unicode has made website building a very easy process.

Download Demo

Hestia Pro

Hestia Pro WordPress Theme
Hestia Pro WordPress Theme

Hestia Pro is a responsive WordPress creative multipurpose theme which is lightweight and efficient. It is a very easy to use and engaging theme. It is the best solution for creating reliable and sophisticated websites. Hestia Pro is perfectly suited for your personal, professional, business and corporate needs. This theme is completely compatible with every mobile device as it is built on an adaptive modular Bootstrap platform. Hestia Pro has wide range of templates which will help you save a lot of time.

Download Demo

Divi

Divi WordPress Theme
Divi WordPress Theme

Divi is a modern WordPress theme which has some brilliant features. If you are looking to build an amazing website then Divi is your best choice. There are individual blocks which organize every element present on your screen. Divi is so feature rich which allows it to adapt to every site of any genre. Devices of each and every size are able to display your content. There is no need to have coding knowledge which enables anyone to create a successful page.

Download Demo

Redwood

Redwood WordPress Theme
Redwood WordPress Theme

Redwood has many useful features which enable you to expand your web site's capabilities. This theme can serve various purposes, however initially it was made for specialized blogging websites. It is of utmost importance to retain your user’s interest in case of online businesses. Redwood provides a clean and aesthetic design that will impress your customers. With the addition of MailChimp newsletter widget, now you are able to send weekly updates to your followers. Redwood has a built in personalized Facebook and Instagram widget in order to take care of the huge potential of social media.

Download Demo

In the End

Above is a brief description about the top 5 mobile friendly themes of 2017. Do let me know if I have neglected any of the theme(s) which are in your top 5 list in the comments section below.

]]>
https://teckstack.com/top-5-mobile-friendly-wordpress-themes/feed 0
Pros and Cons of Native and Hybrid Apps https://teckstack.com/native-vs-hybrid-app https://teckstack.com/native-vs-hybrid-app#respond Thu, 09 Mar 2017 13:13:39 +0000 http://teckstack.com/?p=5102 When you commence the process of app development you are faced with a plethora of questions. Should you build an app for Android or iOS or both? The one thing which should be clear in your mind is that the app which you build should offer a superb user experience lest the users will not use it. It has been seen that users tend to use a mobile app just once and if they do not like it, they will not use it again.

Just 16% of users give an app a second chance. So, what is important is that users get a superb experience when they use a particular app.

There are basically two kinds of apps:

  • Native Apps
  • Hybrid Apps

Native Apps

These are a standard in mobile world. Native apps are basically written for a specific mobile operating systems, be it iOS or Android and they work best for the chosen platform. As native apps are made for a particular operating system, they can be only be accessed via a dedicated app store. This means Android application can be accessed just by Android users and is made using Windows, Java, C++ etc. Native app which is made for iOS application makes use of XCode/Objective-C. Native apps are native to operation system of the user and therefore built as per those guidelines.

Pros of Native Apps

  1. Complete Device Integration
    With the native apps, it is possible to take full advantage of functionalities which are presented by the mobile devices such as: calendar, camera, GPS, microphone so many more. This offers experiences which hold more relevance contextually. The users get to enjoy more features which he would otherwise have no access in case he/she was using a hybrid app.
  2. Easy to find in App Store
    It is easy to access a native app via app stores. In case your app is visible in Google Play Store or the Apple App Store this means your app will ultimately catch the fancy of the users and enable you earn big bucks.

  3. Superior UX
    Android as well as iOS apps present a very good experience to the users by adhering to precise UI standards which are followed by apps created for such platforms. Because of this navigation becomes easy and users are able to follow systems in a hassle free way. Native apps thus facilitate smooth as well as descriptive transitions offering user with a seamless experience.

  4. Do not necessitate internet connectivity
    Depending on what functionality they offer, native apps do not always call for internet connectivity. This is a good feature as users will be able to use the app even at places where there is no WiFi. A hybrid app cannot be accessed where there is no Internet connectivity.

  5. Superior performance
    As native apps are developed keeping in mind only single operating system, they offer better performance than the hybrid apps. In case you wish to create a high-performance app, go in for native app.

Cons of Native apps

  1. Need of more developers
    Building a native app calls for more effort as well as time. Also, you need services of more developers for this task. It is vital to make sure that they have necessary skills as well as for developing the apps.

  2. High Development Costs
    Native apps are any day more expensive than hybrid apps. They are quite complicated and necessitate multiple code bases which have to be developed by the developers. This leads to higher expenses as compared to hybrid apps which need a single code base.

Hybrid Apps

Hybrid applications on the other hand are websites which are packaged into native wrapper. These are as a matter of fact latest HTML5 applications. The biggest benefit of designing hybrid app is dependable, cross platform UI which is in sync with maximum number of devices. This mobile app development system is less expensive but this cannot be put to use for every kind of app.

Pros of Hybrid apps

  1. Fast development process
    Hybrid apps do not necessitate the presence of too many developers to build the app. This is a good thing in case speed is a vital factor in your app development program.
  2. Apt for apps with small release cycles
    In case you wish to regularly incorporate changes in your app, Hybrid app development is a very good alternative. Only if the change is huge will the users require updating the app. Updates can be put on the page which the user loads from the server. This way the users will find it easy to navigate through the app.
  3. Optimum for BYOD Programs
    Hybrid apps are ideal for BYOD programs. They work across various platforms as well as devices, this way you are freed from the tension that your employees will not be able to access the app just because it is not compatible with their operating systems or devices.
  4. Reduced development cost
    It falls cheaper to build a hybrid app than a native app. You do not have to undergo the problem of getting separate apps developed for separate platforms i.e. iOS and Android. Rather you will have an app which is ready for both platforms.
  5. Minimum requirements
    The developers do not have to learn separate languages in order to build a hybrid app. Hybrid apps look as well as feel quite like a native app and can be created with just one language that is C# which is bolstered with frameworks such as PhoneGap wrapper or Cordova.

Cons of Hybrid apps

  1. Not impressive UX
    One of the biggest flaws of hybrid apps is that they fail to present a complete native-like feel. And if users do not get an impeccable first experience, their likelihood of trying the app again falls down drastically.
  2. Reduced efficiency
    As compared to native apps, Hybrid apps are generally slower. Because of this you are not able to have meaningful as well as smooth transitions.
  3. Presence of lags as well as UX issues
    As hybrid apps do not present a seamless experience that is characteristic of native apps it can create serious performance issues in high-performing apps as well as games. Users will face lags and because of this, they might even leave your app.

Conclusion

So, these are few of the pros and cons of native and hybrid apps. Plan your need, weigh the pros and cons of each category and go in for app development accordingly.

]]>
https://teckstack.com/native-vs-hybrid-app/feed 0
Bower-Installer - Deploy Bower Dependencies for Github Pages https://teckstack.com/bower-installer-deploy-bower-dependencies-github-pages https://teckstack.com/bower-installer-deploy-bower-dependencies-github-pages#respond Tue, 31 Jan 2017 21:24:17 +0000 http://teckstack.com/?p=5076 Bower is one of the popular Node package, which has changed the traditional way of managing frontend dependencies. If you haven't explored it yet, you are lagging behind the trend!

Why Bower (in shorts)

Few years ago, when we have to start a new project, we used to create directory structure manually and download all required assets like JavaScript and CSS files from the web. Below is a standard folder structure considered by majority of the developers.

/ css
    - style.css
    - bootstrap.css
/ js
    - bootstrap.js
    - jquery.js
/ img
    - logo.png
index.html

Bower can be initiated by running bower init command at the current project destination. Then it would create bower.json file with basic configurations.

Bower Init
Bower Init
Bower Install Dependency Configuration
Bower Install Dependency Configuration
Now you are ready to install frontend dependencies using bower install {package-name} (i.e.: jquery). Any dependency installed with --save will be added to bower.json file under dependencies section (as seen in the screenshot).

Bower Install Package
Bower Install Package

Github Pages (a little)

Github.com is the most popular site allows developers to host their code for free. Github has popular feature called Github Pages, where project related content can be published for demonstration purpose with browser accessible URL and that is without any cost. Even more, Github Pages can be configured with custom URL to look more professional.

Example of Github Pages:

The Problem

Now we gained enough knowledge to understand the benefit of using Bower that to avoid dependencies and make it easier to distribute the project source-code with minimal size.

So considering above statements and per the best practice, we usually don't push bower_components folder to the Git remote repository (as it can be download all at once by running bower install). So the problem is - HOW TO MAKE THOSE DEPENDENCIES AVAILABLE FOR GITHUB PAGES?

The Solution

  1. As a solution we can either create a new folder manually and copy paste required JavaScript and CSS files and push them to Github repository. But I guess then there is no meaning of using Bower.
  2. I did little research and found bower-installer

What is Bower-Installer

Bower Installer is another node package which does magical thing. It allows developers to define a new section inside bower.json file.

Installation

npm install -g bower-installer
Bower Installer Configuration
Bower Installer Configuration

As seen in the above image, we have install section. Under install, we are passing "path": "assets", where "assets" is a folder name that we have to create to be considered for all frontend assets required to be pushed from bower_components folder.

sources is required when you want specific files. Like in case of Bootstrap for some reason I want to copy only .css file then I need to define the path for that file under sources as stated in the screenshot (by default bower-installer would copy .less file from Bootstrap).

After the changes we made inside bower.json file, we are good to run the below command, which will automatically takes .js and .css file (and NOT the entire folder from bower_components)

bower-installer
Bower Installer After Run
Bower Installer After Running

Comparison - bower_components Vs bower-installer

Bower Vs Bower-Installer
Bower Vs Bower-Installer

As we can see the difference in above image that bower_componet has entire structure with its own bower.json and other files, which are infect not required for project.

On the other side, under assets folder we can see only one jquery.js file which has come after running bower-installer command.

So to sum up, which UI was breaking due to non-availability of files inside bower_components folder, can be fixed as needed files are available in assets folder and even the same can be pushed to the remote Git repository.

I hope this article would help you. If you have any question or suggestion, do not hesitate to share in below comment section.

]]>
https://teckstack.com/bower-installer-deploy-bower-dependencies-github-pages/feed 0
How You Should Start with NodeJs https://teckstack.com/start-with-nodejs https://teckstack.com/start-with-nodejs#respond Sun, 20 Nov 2016 06:20:58 +0000 http://teckstack.com/?p=5069 NodeJs is powerful JavaScript runtime which enables ability to run your friendly JavaScript on server side. If you are advanced JavaScript expert then understanding NodeJs is easy but the same will be difficult for others who are at the beginner level of learning.

This article will focus on step-by-step guide to start with NodeJs.

I assumed that you've already gone through what the hell NodeJs is and what are the different ways to install it on your machine.

Okay let's get started now!

Step 1: Consoling and Confirming Code

As a JavaScript developer, it's a good practice to test your code in a browser console before server deployment.

  1. We need a file to run code in NodeJs. So first we will create a file index.js (can be any infect, but it's good to keep meaningful name).
  2. Put below code inside index.js file.
    Snippet
    var aboutMe = {
        fullName: "Kushal Jayswal",
        expertise: "UI/UX and Frontend Technologies",
        currentExperience: "4+ years",
        myBlog: "https://teckstack.com",
        personalSite: "https://kjayz.com",
        githubTwitter: "@kutec"
    }
    
    console.log(aboutMe);
    
  3. Use node index.js code in command prompt to check whether code is correct or not.
  4. If everything goes well, it must print the file content in command prompt.
    Start With NodeJs Output
    Start With NodeJs Output

Step 2: Creating Local Server

NodeJs is an environment and not a framework. So there is nothing ready to use except API. But to use APIs we first understand each API in depth. Like all NodeJs application needs a server and we can create a local server using http module using its createServer() method.

In NodeJs, require is the most used keyword because when any internal or external modules needed, you have to include them in your file using require.

var http = require('http');

Why we required a local server?

I understand your feeling. As a frontend developer you never dealt with server. In the past you might have worked with developers who write code for servers in Java, Dotnet, PHP, etc. But with NodeJs, though you are using JavaScript, you required a server to send and receive requests from client to server and vice-versa. I know the explanation is not so technical but enough to get the idea!

Now let's move to create a local server using http module in NodeJs.

Snippet
var http = require('http');

var requesrHandler = function(req, res){
     res.writeHead(200, {
         'content-Type': 'text/plain'
     });
     res.end('Welcome');
};

var server = http.createServer(requesrHandler);

server.listen(3000, 'localhost');

Code explanation

First we have included the module http using require keyword. Then we have defined a callback function which accepts 2 arguments req (request) and res (response). writeHead(), end(), createServer() and listen() are various methods of http module.

listen() method used to define a port number for the localhost.

Run the server

As per the Step 1, you need to put the code of this section into index.js (or server.js) file and then run node index.js code in command prompt. If there isn't any error, it will give blinking cursor in the command prompt and then you have to open a browser and hit the url http://localhost:3000.

As an output, you will see whatever mentioned in res.end('Welcome');.

I hope this article will help you to get started from scratch with NodeJs. If you have any doubts or suggestions, please put your comments below and make it loud.

]]>
https://teckstack.com/start-with-nodejs/feed 0
Different Ways to Install NodeJs https://teckstack.com/different-ways-install-nodejs https://teckstack.com/different-ways-install-nodejs#respond Sat, 17 Sep 2016 14:48:41 +0000 http://teckstack.com/?p=5050 NodeJs is another JavaScript written for servers. But to learn it flawlessly, you should have advanced JavaScript concepts. Also having basics of HTML and CSS would help you to understand templating part.

This article would cover up the NodeJs installation stuffs. But before you start, I would recommend to read previous article - what the hell NodeJS is.

Okay let's get started now!

There are 3 different ways you can install NodeJs on your machine but it really depends which is more suitable as per your project need. So, let's see all one by one.

3 Different Ways to Install Nodejs on Your Machine

  1. The .MSI (Installer Wizard)
  2. Node Version Manager (NVM)
  3. Compiled Source (Official NodeJs on Github)

The .MSI (Installer Wizard)

Nodejs Installation Wizard
Nodejs Installation Wizard

You can download .MSI installer from the official site as per your machine configuration. The installer is designed to set up all things automatically including environment variable and this is the most recommended way to install NodeJs on your PC.

Bad Things

  • You cannot change through the versions easily. If you want to switch then you have to rerun the installer.

Node Version Manager (NVM)

Nodejs NVM Installation
Nodejs NVM Installation

Node Version Manager (NVM) is another way you can setup node locally. NVM is beneficial if you have to switch Node versions frequently. Also it is recommended for deployment team.

If you use Windows PC then you can head over to nvm-windows, which allows you to install NVM using wizard.

Bad Things

  • Before actual installation of Node you need to set up NVM first.
  • Also, whenever you switch the version, you have to re-install previously installed global modules.
  • Moreover, you need to be familiar with CLI related commands.

Compiled Source (Official NodeJs on Github)

Nodejs Github Source
Nodejs Github Source

If you are a geek and want to get all the latest from the core team of NodeJs then you can download compiled sourced directly from Github.

Bad Things

  • You would download the latest code from the core NodeJs team, but you have to compile it manually in your machine.
  • Also, it would take longer than .MSI and NVM as you have to build and deploy the code manually.
  • It is not suitable if your project requires frequent version change, because each time you change the version, it needs to be reprocessed in terms of compilation, build and deployment.

Conclusion

Well! Finally, everything is upto you. As a frontend developer, I would prefer the most easiest way and that's .MSI wizard installation. You may have different choice suitable the best to your working environment.

If you could share more ways to install NodeJs, it would be great help to the community. Kindly add your comments below in comment section.

]]>
https://teckstack.com/different-ways-install-nodejs/feed 0
What the Hell NodeJS Is https://teckstack.com/nodejs-is https://teckstack.com/nodejs-is#respond Sat, 13 Aug 2016 19:31:59 +0000 http://teckstack.com/?p=4946 Before we start on the conceptual part of the NodeJs, I would like to share a short story that many frontend developers might have come across.

Short Story

Ritesh is a Lead Frontend Developer who got fantastic idea to set up his own startup business. He has the business plan ready with him and now he wants to meet different fund-raisers to get investment in his project so that he could actually start-up.

Before meeting with investors, Ritesh should have working prototype (demo application) to showcase project features and overall look and feel to investors. (Do not forget that Ritesh is a frontend. So, he can do certain things and but not all. Let’s differentiate…)

Ritesh Can

  • Work on branding and design related stuffs like logo, Photoshop (PSD) layouts, etc.
  • Convert Photoshop designs to HTML, CSS and JavaScript markups
  • Even create a data driven prototype using JSON
  • Marketing his product/project/service
  • Manage teams of developer

Ritesh Cannot

  • Design a database structure
  • Write code to connect a database with his application
  • Write code for the server using PHP, Java, Dotnet, Python like server-side languages

Here, “Ritesh Cannot” is one of the reason when NodeJs comes in a picture.

So, What Exactly the NodeJs Is?

NodeJs is not a magic. It is just an a JavaScript environment with different purpose. Node is very much dependent on internal or external packages. Also, the NodeJs API is pretty much tiny. So once you start learning, it's tough to get rid of it :).

To develop a project with NodeJs, having additional framework that can use Node.js methodologies and build over it, is advisable. Express.js and Koa.js are the most popular NodeJs frameworks in this category. I recommend Express.js because it provides easy routing mechanism without much hassle.


#NodeJs makes it possible to handle server-side processes through your own #JavaScript
Click To Tweet


NodeJs Definitions

NodeJs® is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js’ package ecosystem, NPM, is the largest ecosystem of open source libraries in the world.

In software development, NodeJs is an open-source, cross-platform runtime environment for developing server-side Web applications. Although NodeJs is not a JavaScript framework, many of its basic modules are written in JavaScript, and developers can write new modules in JavaScript.

My Personal Definition of NodeJs


#NodeJs is an environment to run #JavaScript on the #server and off the #browser - @kutec
Click To Tweet


NodeJs Is

  • A server-side JavaScript environment
  • Somewhat similar to Google Chrome console
  • Another CLI Tool
  • Asynchronous, Non-Blocking
  • Single Threaded (Event Loop)
  • Non Buffering
  • Super Fast

A Server-side JavaScript Environment

JavaScript is primarily a client-side scripting language. But NodeJs has special power to make the same JavaScript available on servers too. That means we can now code entire application using JavaScript itself, doesn't matter it's server or client. However, NodeJs is not a framework, it's just an environment. Because we have to do all things manually.

Let's say, if we want to write some code for server then first we need to create server and then only we can do the further manipulation. Framework has many things pre-exist which we can use instantly to save extra human efforts in development but that's not the case here with Node. Of course Node APIs are there and the NPM community is vast enough to expand your thoughts.

Somewhat Similar to Google Chrome Console

If you are familiar with Google Chrome browser then you must come across the developer toolbar. There are many similarity between Chrome console and NodeJs console because both are using V8 JavaScript engine. So there are many things available in both but not the all. Let's compare few of them.

Chrome Node.js
MARKDOWN_HASH05b8c74cbd96fbf2de4c1a352702fbf4MARKDOWN_HASH
MARKDOWN_HASHd5189de027922f81005951e6efe0efd5MARKDOWN_HASH
MARKDOWN_HASHfdc3bdefb79cec8eb8211d2499e04704MARKDOWN_HASH
MARKDOWN_HASH9c70933aff6b2a6d08c687a6cbb6b765MARKDOWN_HASH
MARKDOWN_HASHf0ffd3b7c2574ac324603ed00488c850MARKDOWN_HASH
MARKDOWN_HASH22884db148f0ffb0d830ba431102b0b5MARKDOWN_HASH
MARKDOWN_HASH5075140835d0bc504791c76b04c33d2bMARKDOWN_HASH
MARKDOWN_HASHf9357bdd0069fbcd014d15ef427ff4f7MARKDOWN_HASH

Here we have a quick comparison with known JavaScript keywords. As you could see that global, require, module and process are available window, location and document are available in browser console but not in Node console. The same way global, require, module and process are available in Node console but not in browser console.

However, the console.log is the most common keyword working in both the consoles.

Another CLI Tool

Using Node is required to be more familiar with Command Line Interface (CLI). It might be inconvenient for developers who are not used to with command line. But once you get familiar with commands, I am sure it will be more fun and faster than your usual development flow.

However, there are many addons/plugins available which you can install into your IDE. I have used Bracket's Node.js plugin and it was great experience.

Asynchronous, Non-Blocking, Single Threaded and Event Loop

These all are technical terms and mostly concern with the performance.

Asynchronous is an execution approach which doesn't wait to be finished and move to the other execution. So if we see traditional synchronous execution, it waits for any request to be completed and then only move to the next execution in the queue. So asynchronous is more faster.

Asynchronous uses similar approach that we have in HTML5 Web Workers for scripts.

Asynchronous Email Process
Asynchronous Email Process

Non-blocking means as and when executions happen, it will return immediately with whatever result it has without putting your thread to sleep (with high probability).

Event Loop is another approach which always waits for something to happen. Here "something" is an event. If event occurred, then we can define the next step with a callback function. Callback function is important because it give instruction for the next execution. If we don't have callback function then it will continue iterating the same event loop infinitely. However, we can minimize the iterations using setTimeout() method.

Node Js Event Loop
Node Js Event Loop

Non Buffering

A Buffer is a chunk of memory, just like you would have it in C/C++. You can interpret this memory as an array of integer or floating point numbers of various lengths, or as a binary string. Unlike higher-level data structures like arrays, a buffer is not resizable.

Source

Super Fast

This post is more towards the theoretical concepts of the NodeJs. I am sorry if you feel bored about it. But yes, this would surely help to start with NodeJs. Working on Node projects is going to be fun.

My next post will be on - Getting Started with NodeJs.

Some Negative Factors of NodeJs

If you are going to consider NodeJs for your next project then you should be clear on the negative side of the NodeJs. Below is an interesting thread on Quora, you must read, before making any decision on the Node.




What are the disadvantages of using NodeJs?



If you have more to speak up then don't hesitate to use comment section below.
Happy Learning :).

Resources

  1. How To Node
  2. NodeJs - Dotnet Tricks
  3. Node School
  4. Understand Callback Function
  5. Problems with NodeJs Event Loop

 

]]>
https://teckstack.com/nodejs-is/feed 0
A Quick Comparison - WordPress, Ghost and Medium https://teckstack.com/comparison-wordpress-ghost-medium https://teckstack.com/comparison-wordpress-ghost-medium#respond Thu, 04 Aug 2016 18:22:17 +0000 http://teckstack.com/?p=4949 If you are involved in the field of blogging, there are many platform option for you, viz., WordPress, Ghost, Bloggers, Tumblr, Medium, Squarespace, Wix, etc. But to become a successful blogger, you must be looking for a reliable and easy to use a blogging platform to launch your new blog. I hope I'm correct?

So, today, taking a look at all the incredible platforms we have found, three options for you. WordPress, Ghost or Medium? All the three platforms are not perfect, but each can serve a definite purpose. So depending on the nature of goals and your purpose, you may choose the ideal platform for you.

Here is the discussion of the WordPress vs. Ghost vs. Medium. Which one is best?

WordPress

WordPress
WordPress

I don't think so WordPress requires any introduction if you're a regular user of the internet. It is one of the most popular building platform and excellent content management system. It nearly hosts 32% of all the websites and blogs on the internet. It has powered websites more than blogs like eCommerce websites, business websites, news sites, etc.

WordPress websites are available in two flavors:

  1. WordPress.org
  2. WordPress.com

Now you must be under the state of confusion between the two. WordPress org. is self-hosted, and provides the privilege to download and install anything on your server. WordPress.com, however, runs from .com servers directly. It provides limited options, such as it does not allow to download any custom plugins but possess theme options.

WordPress is popular for its simple user interface and its flexibility. Due to its extreme customization possibilities, it is a perfect choice for professional bloggers. The best out of it is that it offers a great, ready-made community support for its users. However, the great elements such as SEO metadata and custom content types can only be found at WordPress.org. It is important to note that, WordPress is not only free to install but is also supported by great free as well as paid Themes and Plugins.

Ghost

Ghost Blogging Platform
Ghost Blogging Platform

Ghost is a simple and a clean platform which relies on the crisp and least user interface. We can say that Ghost is a simple version of WordPress. Unlike WordPress, Ghost does not have power a wide array of websites. It is a simple blogging platform for bloggers.

The platform can be downloaded free of cost. The hosted – Pro – version stands at $8-$200 depending on the number of blogs you want to run and the traffic volume one is expecting. The platform uses markdown rather than WYSIWYG visual editing.

Similar to WordPress, it also comes in flavors:

  1. Self-hosted version, which is free to download and use
  2. Hosted version

However, Ghost does not offer a free hosted plan or limited in the hosted version in any way. It helps to upload content or themes with the use of FTP. It is considered best for bloggers, who are crazy for the use of newer and freshest technical solutions. Its USP is minimalism, which can be seen in designing and functioning where the user can create and edit posts.

Medium

Medium Blogging Platform
Medium Blogging Platform

The medium has grown in popularity a lot over the last few years. It defines itself as "a community of readers and writers offering unique perspectives on ideas large and small.” It is true because it is admired for publishing blogs, stories and articles. It is well suited for serious writers, focusing on highly high quality niche-centric topics.

Medium is a hosted platform and does not give permission to download anything to its users or run it on your servers. It is best for hobby bloggers as it gives instant readership to the users stories.

The major advantages of using it give free custom domains, sub-domains, SSL, etc.

The Verdict

The answer here is not simple and direct. If one is looking for a basic setup of social sharing as well as SEO, and platform for publishing post simply, Ghost is the best answer for you.  It has the cheapest plan at $19 per month and topped at maximum 25,000 page views in a month.

Whereas, WordPress is considered as king in CMS. One can run it on $250/ month cloud server and on $2.5/ month shared web hosting. It gives the perfect choice to build professional blogs. While Medium is a viable option for people to explore and read your work, and leave feedback. However, it has a very stiff budget and better for company blogs hosted outside of the company’s website.

I hope, you're clear with all the three platforms' usage. Leave the comment below for the platform you like and share your experience with the community.

]]>
https://teckstack.com/comparison-wordpress-ghost-medium/feed 0
Create Status Indicators Using Sass Mixin https://teckstack.com/sass-mixin-status-indicators https://teckstack.com/sass-mixin-status-indicators#respond Sat, 02 Jul 2016 09:53:46 +0000 http://teckstack.com/?p=4937 Traffic Signal
Traffic Signal

Many times, we may need to show the status of the process in an application. Some colors speak clear enough to show the current status without saying a word. We have the great example of the traffic signal as a global indication system. The same thing applies to the web also. If we talk about any social or chat application, they must indicate the status of the users in certain way. They might use icon, colors or text. In this article, we are going to develop a status indicator for a tabular data using Sass mixin and jQuery.

Interesting Stories on Sass:
- 5 Most Popular Sass Mixins
6 Signs You Should Invest In Sass

The Plan

Let's assume a table having number of rows with - task title and relevant status.

HTML code

<table>
    <tr>
        <th>Task Title</th>
        <th>Status</th>
    </tr>
    <tr>
        <td>Task 1</td>
        <td><i data-status=""></i> Done</td>
    </tr>
    <tr>
        <td>Task 2</td>
        <td><i data-status=""></i> In Progress</td>
    </tr>
    ...
</table>

You must notice the <i> tag having attribute data-status. We are going to write Sass mixin targeting to all data-status attribute in the last <td> of each row.

jQuery Plot

Before moving to Sass code, we need to add something dynamic over HTML tags to make that Sass be considered:

$('tr').each(function() {
    var $TR = $(this),
        $TD = $TR.find('td:last-child'),
        TDText = $TD.text(),
        TDTrimmed = TDText.trim().replace(/ /g, '_').toLowerCase(),
        $status = $TD.find('i');
 
    $status.attr('data-status', TDTrimmed);
});

In above code snippet, we are grabbing the text from the last cell of each row. Also we are using pre-defined jQuery functions like trim(), toLowerCase() and replace() to achieve our goal. We ended up by setting the replaced text to data-status attribute.

$status.attr('data-status', TDTrimmed);

Pretty much simple, right?

Sass Mixin

// placeholder containing common properties 
%indicator{
    text-indent: -9999px;
    display: inline-block;
    width: 10px;
    height: 10px;
    vertical-align: middle;
    margin-right: 10px;

    @include borders-radius(10em);

    content: attr(data-status);
}

// defining mixins
@mixin borders-radius ($radius...) {
    -webkit-border-radius: $radius;    
       -moz-border-radius: $radius;
            border-radius: $radius;
}
@mixin status-indicator($bg: #f00 //default color) {
    @extend %indicator; // using placeholder
    background: $bg;
}

// ---- calling @mixin
i[data-status="done"]:before {
    @include status-indicator(lightgreen);
}

i[data-status="in_progress"]:before {
    @include status-indicator(orange);
}
...

In above Sass code, we first defined placeholder named %indicator having common properties required and we are going to use the same inside @mixin status-indicator. So the question is why extra placeholder? Because we can separate the code meaningfully and that makes logical separation.

Similarly, we have another @mixin borders-radius ($radius...). As the name says, it would generate border-radius and we have various browsers prefixes too. So when we use @include borders-radius(10em 5em 10em) that will compiled as below:

div {
    -webkit-border-radius: 10em 5em 10em;
       -moz-border-radius: 10em 5em 10em;
            border-radius: 10em 5em 10em;
}

Demo

]]>
https://teckstack.com/sass-mixin-status-indicators/feed 0