Author: nitinnain

  • Why, When, and How to use Celery with Python

    “Celery is an asynchronous task queue based on distributed message passing.”

    Let’s break that down:

    (more…)
  • Setting up a Python Virtual Environment for Web Development

    Virtual Environments are helpful in keeping all the dependencies (packages), required for a Python project, in one place. So you can avoid issues with conflicting dependencies when working on different projects simultaneously. For instance, one major use case is when you want to run different Python versions like 2.7, 3.5, and 3.6 on the same system.

    You can use the following steps when setting up any Python project (including web development project using frameworks like Django, Flask etc.)

    1. Make a top-level Directory

    Create a directory named “virtualenvs” (a parent directory to keep all your virtual environments). All your Python projects will live inside this directory.
    mkdir virtualenvs

    2. Create the Python Virtual Environment

    cd virtualenvs
    python3 -m venv env

    You may use any name for the directory, other than “env”. If you’re curious about what goes inside the auto-generated “env” directory, you can check here:
    cd env
    cat pyvenv.cfg
    python —version
    pip —version

    3. Activate the virtual env

    On Mac: source bin/activate
    On Linux: ./bin/activate
    On Windows: .\Scripts\activate

    Important: You need to activate the virtual environment every time you want to build or run the code. You may edit the code files without activating the venv.
    Use deactivate to leave the virtual environment, or simply close the session/Terminal.

    4. Create the project directory

    mkdir your_proj_name

    Optionally, Initialise git inside your_proj_name directory (you don’t need to commit the other files of env directory into git.):

    git init
    OR if you have the project code already, git clone the code inside env:
    git clone [url]

    5 a. Install packages/dependencies using pip

    If you’ve a requirements.txt file:
    pip install -r requirements.txt

    or install the packages individually, for example for Django:
    pip install django or
    pip install django==2.1 # For a particular version

    5 b. You can also install packages from Source Code

    For example download Django pre-release code from their git repo, and unzip it into a directory named django, then:

    pip install -e django
    OR
    pip install --editable django

    Note that you may run pip from any of env‘s subdirectories: the installed code will always go into the env/lib and env/bin directories.

    6. Finish and Run

    You’re set to start working on the project now.
    If you’re satisfied with the setup, you most probably want to keep a list of dependencies you just installed.

    pip freeze > requirements.txt

    (Keep the requirements file in git if you’ve initialised the git repo.)

    7. Optimizing your daily workflow

    I made this small shell script to automate the task of entering and activating the venv every-time I start:

    #!/bin/bash
    cd virtualenvs/env/
    source bin/activate
    # Configure any other environment variables here -
    # for example, private API keys that you don't want to check in to git.
    cd your_proj_name/
    

    Paste the above code in a file name  start_your_project_name.sh. From now on, to get started, you just have to do this:

    source start_your_project_name.sh
    or ./start_your_project_name.sh
  • MongoDb Quick Reference Sheet (Printable)

    I created a MongoDB pdf reference sheet. Here’s the link to the PDF (my only Medium post as of now, it’s got some ‘likes’) — https://medium.com/@nitinnain/mongodb-quick-reference-sheet-printable-a30435e191ac

  • Django’s Request-Response Cycle

    Understanding the Request-Response Cycle is a crucial step in setting up for any WebServer.

    An example of the request-response cycle is when you “request” a web page by entering a URL in your browser and a web server sends a web page as ‘response’ to your browser. Of course, there’re usually several HTTP requests that happen when visiting a website; each is a separate Request-Response in itself.

    The request-response architecture of a web application is an important idea to grasp whether you’re working on Django, Symphony, Laravel, Flask, WordPress or any of the thousands of other web frameworks.

    When you call a Django server the flow typically is

    Request: Browser → Web Server → WSGI → WSGI callable function in Django

    Response: Django → WSGI → Web Server → Browser

    Here’s a diagram that explains the request-response flow very well.

    Django's Request-Response Call Cycle

  • Quick Monitor Buying Guide

    Deciding the screen size

    You ought to consider the right physical size in inches with the screen resolution — deviating too much from the following chart would either make the screen too pixelated or you might find the default font size to be too small. (more…)

  • Essential Tips for WordPress Admins and Editors

    (This post supposes that you have a working WordPress site already and now want to improve the content and design for the site.)

    You’ll first need a login for your WordPress site. The login is most probably at example.com/wp-login.

    Most articles on “Getting started with WordPress” begin with setting up WordPress on a server, or talk about core WordPress concepts like creating themes, and get into the minute technical details. That’s alright, but there are plenty of such tutorials all over, what a new WordPress user often requires is how to handle the WordPress Admin Dashboard. So here’re some essential things that a non-technical WordPress Admin, who want to manage, beautify, or add new content to the website need (most of these articles are quick 2-3min reads, except the the Block Editor link):

    1. Managing images, videos, pdfs and other files:
    https://wordpress.org/support/article/media-library-screen/

    2. Understand what are Posts vs. Pages:
    WordPress started as a blogging platform, so “Posts” get a prominent tab for themselves which you use for blogging/newsletter etc:
    https://wordpress.org/support/article/posts-screen/
    Static content like “About Us”, “Contact”, “Privacy Policy”, “Product Features”, “Specific Product” go into:
    https://wordpress.org/support/article/pages/

    3. Learn how the WordPress Block Editor works:
    https://wordpress.org/support/article/wordpress-editor/#how-does-the-block-editor-work

    4. Learn how to modify the Menu (Top links bar on the website):
    https://wordpress.org/support/article/appearance-menus-screen/

    5. See what are WordPress Widgets:
    https://wordpress.org/support/article/wordpress-widgets/

  • Git — Getting Started

    Using Git is simple and so I’m keeping this very short.

    1. Github.com is not git

    2. You only need to learn these six commands to get started:

    • add
    • commit
    • push
    • pull
    • clone
    • status

    3. push is akin to uploading your files to the server (for safe-keeping). Before pushing you’ve to write a comment about what you want to push using the commit command. pull is akin to getting your files from the server.

    4. Learn these two commands after you’re conversant with the first six commands:

    • branch
    • checkout

    5. Graphical tools can help you visualise how and when changes happened. I like git-fork.com on Macs. Visual Studio Code and various code editors have git integration.

  • Designing the Apple Watch UI – a quick guide

    Designing the Apple Watch UI – a quick guide

    The Apple Watch is releasing in a month! Here’s a list of important things you need to know, if you’re interested in designing or developing an Apple Watch App:

    1. Layout and Screen Sizes

    38mm: 340 pixels x 272 pixels
    42mm: 390 pixels x 312 pixels
    That’s an aspect ratio of 4:5.

     

    2. Icon and Image Sizes

    Unlike the Rounded Square icons on iPhones, the icons on the Apple Watch are round.

    Icon Sizes Required:
    38mm Watch: 48px, 80px, 172px
    42mm Watch: 55px, 88px, 196px

    Tips on designing the Icons (designers take note!):
    – Create all of your image resources as @2x images.
    – Create your icons as full-bleed square images using the given dimensions. The system applies the circular mask automatically.
    PNG format is recommended (for images and icons). Avoid using interlaced PNGs.
    – The standard bit depth for icons and images is 24 bits—that is, 8 bits each for red, green, and blue. You can include an 8-bit alpha channel but doing so is not required. You can also use PNGs with indexed colors to save space in your image files.
    – While designing these, also note that you’ll need the accompanying icons for the iPhone app. (i.e. Watch App can’t work without the iPhone App)
    More information on Icons and Image Sizes.

    3. Color

    “A black background blends seamlessly with the device bezel and maintains the illusion of there being no screen edges. Avoid bright background colors in your interface.”

    “Every app defines a key color. The system uses this key color for the title string in the upper-left corner of the screen and in notification interfaces to highlight your app name or other key information. You should similarly use the key color as part of the branding of your app.” More on colors.

    4. Typography

    There’s a system font “designed specifically for legibility on Apple Watch”. (the San Francisco Font). “Use San Francisco Text font for text that is 19 points or smaller; San Francisco Display font for text that is 20 points or larger.”
    You can chose another font, but be careful to go for a dynamic font (that adjusts well to size — since the watch interface is so small). With Dynamic type, you get automatic adjustments to letter spacing and line height, text that responds appropriately to changes the user makes to text-size settings and more. More on Typography.

    5. Two ways of navigating an App – Hierarchical Vs Page based navigation

    From the start, you have to decide which type of navigation you want. A single App can’t behave as Hierarchical at one point and Page-Based at another point.

    The two types are quite different in look, feel and the way they function. For instance, Horizontal swipes are only available for Page-Based Apps. More information on navigation types.

    6. The three ways of presenting information

    I. via the Main App

    You can reach the App by launching the App from Homescreen. The ways of interacting with your Main App are rather limited right now.
    Here’s what you can do:
    a) Taps (selection)
    b) Vertical Swipes (scroll through the screen)
    c) Horizontal Swipes (go between pages – only available in page based apps.)
    d) Force Touch:
    Pressing the screen with a small amount of force activates the context menu (if any) associated with the current interface controller; this is the only thing a Watch app can do with force touch feature. More information on context menus.


    Design of the Force Touch Context Menu can display up to four actions. The image for the context menu must be a template image — where the alpha channel defines the shape to draw on top of the background. Opaque portions of the image show up as black and fully or partially transparent portions let the background color show through.
    e) Digital Crown: Only ‘scrolling’ support available to third party apps.

    II. via Notifications

    The wearer feels a gentle tap on the wrist when the Notification arrives.
    Notifications are displayed up in two formats.
    a) The “Short Look” is only seen briefly when you raise your wrist — it’s an app icon, an app name, and some brief information.
    That is, the Short Look provides a discreet, minimal amount of information — preserving a degree of privacy. If the wearer lowers his or her wrist, the Short Look interface disappears.

     

    b) The “Long Look” interface appears when the wearer’s wrist remains raised or when the user taps the Short Look interface. It provides more detailed information and more functionality — and it must be actively dismissed by the wearer.
    For Long Looks, the app icon and name move to the top of the screen, and wearers can scroll down through the interface to use custom actions (such as “comment” or “favorite”) or dismiss the notification.

    Read More about notifications.

    III. via Glances

    Glances from all the apps are viewed together at a common swipe-able place. User can tap on a glance to enter the App. All the information on a ‘glance’ must fit on a single screen and is read-only. As the name suggest glances are there to provide the user useful information; don’t use them to spam the user. The area at the bottom of the glance is reserved for the page indicator dots. Read more about glances.

    7. Image Cache

    You can store upto 20MB of image resources in cache on the Apple watch. As with webpages and Apps managing caches efficiently is a hallmark of good front end; so plan your cacheing strategy well. Needless to say use very optimized images. More information on how to use images in the App.

    8. Animation

    To create animation you can loop through “sequentially named images”, infinitely or till a specific count. There’s no mention of support for videos or UIKit like animation.
    These links have good info on how to show animations on Apple Watch:
    http://natashatherobot.com/watchkit-animate/
    http://www.raywenderlich.com/94672/watchkit-faq

    9. Handoff

    Handoff feature can transfer the user action from the watch to the iPhone. Handoff can also be used to dynamically send some information to the main Watch App interface using Notifications or Glances.

    10. Fullscreen Support (Not available)

    There’s no mention of fullscreen support for an app. (The only few seconds that your app will have the fullscreen of the watch to itself is during the short look notification.)

    11. Settings Bundle

    Works the same way as the iOS settings bundle. “Preferences are pieces of information that you store persistently and use to configure your app. Apps often expose preferences to users so that they can customize the appearance and behavior of the app.” More information on the settings bundle on the Watch which complements the existing settings bundle on iOS.

    12. Date and Time

    Use Date and timer objects whenever you want to display a current day or time or implement a precise timer. Date and time labels come in variety of formats suited for the watch. Generally, it’s a bad idea to invent your own date time format. More info on date, time formatting here.

    13. Dependence on iOS App

    Apple Watch requires the presence of an iPhone to run third-party apps.
    “A WatchKit app complements your iOS app; it does not replace it.”
    “During installation of your iOS app, the system prompts the user to install the WatchKit app when a paired Apple Watch is present.”

    Further Reading

    • Apple’s Human Interface Guidelines (HIG) for the Watch (Approximately 2hrs read)
    WatchKit Programming Guide
    • WatchKit Framework Reference (for programmers)
    • Apple’s tips and best practices for developing Watchkit Apps.

  • Php’s performance improvements — HHVM, JIT, and ‘Hack’

    Facebook deprecated HipHop for PHP, a PHP to C++ translator (trans-compiler) which they had been using since Feb 2010 in favour of HipHop Virtual Machine (HHVM), in 2013.

    HHVM is a PHP interpreter that uses just-in-time(JIT) compilation techniques. Or to put it another way, HHVM is a virtual machine that compiles PHP bytecode to native instructions at runtime. HHVM now runs the Facebook backend instead of the default PHP interpreter.

    On March 20 2014, Facebook introduced the Hack programming language for HHVM, which integrates seamlessly with PHP. Hack seems quite interesting; it’s like the good parts of PHP with some nice extras, more attuned to Facebook’s requirements. Along came a few new releases of HHVM in 2014 to improve compatibility.

    In Nov-Dec 2014, Wikipedia moved its Application servers to use HHVM giving them a 2x faster load time for (uncached) page requests while drastically reducing the Load on their CPUs from 50% to 10%. Here are few more details on how Wikipedia’s move from zend to HHVM was carried out.

    Image: Wikipedia’s page save time with HHVM is just 45% of what it used to be previously (http://hhvm.com/blog/7205/wikipedia-on-hhvm)

    All and all, HHVM is a cool update for the PHP community. It points to a maturing platform that now powers two of world’s most visited websites. For all the flak that PHP gets, Facebook’s continued commitment has really helped the language infrastructure grow impressively.

    All this triggered action in the PHP’s Zend Engine team and they have been busy updating the default interpreter. Here’s a great gist of features and improvements coming in PHP7 (also read why there’s no PHP6 on this link.) The PHP7 team are working to make the performance match up with HHVM, using JIT and Asynchronous programming support. PHP7 will probably be ready for production use by this year end.

    I still love to work in Python or Go more than PHP — Python is more expressive and easier to read and navigate. But the Python 2.x Vs Python 3.x debate has done some serious damage to the language. When the Python PEP Community should have taken the path to fix some of the nagging performance and concurrency concerns, they ended up breaking the backward compatibility with a new language spec. On the other hand, Facebook/Php took the pragmatic approach of keeping things compatible with every update. This must be great news for thousands of PHP developers out there who were feeling the heat from Python, Go, and JS(Node.js).