Into Docker: Layer caching for development

When you create your docker file, you don’t want to just copy your whole directory in a folder. As everytime you run your docker image because you changed your source code, it will keep on installing fresh dependency packages all the time. And this will become slow.

Remember every RUN you make on docker, creates a layer on top of the image. This layer get cache. So everytime you build your container if nothing has change from your package requirements , it will use the one from the cache making it faster to rebuild.

This technique works for any projects. Like python(flask) or nodejs(package.json). Footnote though and what to watch out for. If your package requirements always points to the latest, you might want to have a fixed version number otherwise if you like to get the latest version of the packages. You might need to clear your cache to get a fresh updated copy in your container.

CSS Cheatsheet for responsive-ness

Old school! We have lots of libraries now to make frond-end development easier especially making our layout responsive.

Sometimes we need to step back and really see how CSS queries  are structured for this feat. Found a really nice CSS cheat sheet to ponder upon or maybe used for our projects or just reference.

https://gist.github.com/bartholomej/8415655

And whats the go with “ONLY” query. Apparently old browsers ignores this.

https://stackoverflow.com/questions/8549529/what-is-the-difference-between-screen-and-only-screen-in-media-queries

Project/CMS Development Workflow

Lately I been pondering about CMS development since I work alone on projects. It didnt matter but then what if I dont work alone? What if we use WP or Drupal on our website. I read a lot of articles how it can be done.

I keep getting swept away about this article and how they are doing it. Then I realised , well I am already learning Docker/Vagrant. But its just fixing one issue anyways. Here I most of the issue encounters when developing a project be it a CMS or a stand alone one.

  • Setting up development-server ENV. This includes the server, this is where Docker comes in.
  • Setting up development set-up , the stacks you use for your project SPA, a plugin for CMS, theme , etc. (try to include unit testing)
  • Database migration set up. You cant just develop a database driven project without thinking how you can easily migrate your database schema, required data , etc. It is as important as your main application itself.
  • Using version control. You also have to think what files needs to be included to your repository. If its a public repo and your project is a public facing site, you might want to have .gitignore and exclude config files and other folders like node_modules etc.
  • Above has although bullet-ed does not mean straight forward. There is a lot of separation that needs to be done to make your workflow manageable and understandable for you(or your team).
  • Deployment. And high overview how its going to work after we set up the development side. We DEVELOP -> PUSH TO GIT -> AUTOMATION SERVER (eg. Jenkins) -> FEEDBACK TO DEVELOPER(testing etc) -> CREATE IMAGE FROM DOCKER -> DEPLOY TO PRODUCTION (CLOUD)
  • There is a lot in deployment , I mean a LOT of moving parts. But in the end, you do it often and hopefully like driving it becomes second nature until another NEW KID in town comes along. Such life for us Technologizt.

Learning Python: Gunicorn

Just putting this on here little quick.

What is Gunicorn? Apparently its sort of like a middle man between your user and application. Python is good and all handling request but its not made to be a web server handling 1000s or more of requests. For eg. Flask application can handle several request at ones locally. Web servers are good with that.

So the workflow pretty much like this:

[USER] -> [LOAD BALANCER (eg. nginx) ] -> [WEB SERVER LIKE (GUNICORN) ] -> [FLASK APP]

Very intuitive indeed!

Blue and Green deployment technique

I just read this somewhere and thought what the heck is it. This will be a short one as I just need to put this on here for references and hopefully I dont forget it 🙂

Basically 2 live instances of production server which maybe different from each other. Similar to staging server -> production server. Instead both server are live,1  is serving production content and 1 is idle and not doing anything.

You push your latest update to the idle server and test. Once everything is a-ok. You point your live application to the idle one. And the previous one becomes idle this time.

It reduces risk and down time. What happens if something is to go wrong with your latest update? Then you point it back to your previous one. Until you can fix whats going on with your other server. Very handy to know indeed

All about React and boilerplate

Here I am going to delve right deeper in the React world but in a very basic term. As a full-stack developer (please dont take this as being know everything do everything this is just what I see myself do nowadays) I keep going in and out of front-end and back-end side of things, I tend to forget this nitty gritty details. Anyways.

React on its own resemble this

// without Babel JSX
var hello = React.createElement("div",{property: value},"Inner html with ${this.props.name}" }
ReactDom.Render(hello,document.getElementById("container"));
// with Babel JSX
let Hello = (props) => <div>Hello</div>;

Most of the time we want to develop with JSX and Babel is pretty much the defacto transpiler for it. So if you plan to use React in JSX on your page you make sure you include react , react-dom and babel-jsx in your script.

Boilerplate React Development

Now with boilerplate, React is very good with SPA(Single Page App) and Hybrid (React with your HTML page). We will focus on SPA of what we are going to need to start developing using NPM as our package manager.

  • React – this is the core react library
    • npm install --save react react-dom
    • [optional] - if you are looking for more react exclusive functionality for example the routing capability etc. Install these to your package.
      
      npm install --save react-router-dom 
      
      react-router-dom: is the v4 of react router. No need to use "react-router" as this is v3
  • Babel – the core transpiler for JSX
    • npm install --save-dev babel-core babel-loader
  • Babel-presets – babel use to have all features in one package <version 6. In babel 6 they have separated all these features and plugins hence. We now need to install each feature separately. babel-preset-2015 supports ES6 and React
    • npm install --save-dev babel-preset-env babel-preset-react
      
      babel-preset-env: new support for ecmascript+ down to ES5.
      babel-preset-react: to allow react syntax to be transpiled.
      
  • Webpack – now our module bundler that will tie everything together. Webpack-dev-server is for hot reloading while developing. Very handy indeed
    • npm install --save-dev webpack-cli webpack
      npm install -g webpack-dev-server 
      
      web-dev-server: must be global
  • Loaders – loaders are a way to bundle your static assets into few different things used in webpack
    • npm install --save-dev url-loader style-loader file-loader css-loader resolve-url-loader
      
      url-loader: makes your assets like images embedded inside your JS using base64 encoding. Useful for smaller files. Set the limit and let file-loader do the rest for bigger files
      file-loader: it handles assets and emits(create a separate file) to another location. Good for bigger files.
      css-loader: the css loader takes the CSS and convert it to a string. eg. var css = require('css-loader!./css/mycss.css'); it just loads the string of css as javascript/node dont know how to parse .css file.
      style-loader: usually used conjunction with css-loader and inserts it into the page by add a <style>...</style> tag to the javascript.
      resolve-url-loader: resolves url() relative path in your css, specially for scss. When you are importing another .SCSS file to your base scss, css-loader context path is the base importer. This will screw up any url in the importee path. Use this to make any imported scss file folder context as if the imported scss is the parent.
    • [optional] npm install --save-dev sass-loader  node-sass postcss-loader autoprefixer
      
      postcss-loader: by itself it doesnt do anything, but it pretty much a foundation for all its plugin. So if you want to use autoprefixer, you will need to install postcss-loader first. 
      sass-loader: sass loader adds support for sass files and then to css then to your normal css-loaders. 
      node-sass: is required for peer-dependency (plugin-that-needs-another-plugin)
    • Production Package
      • npm install --save-dev mini-css-extract-plugin
        
        mini-css-extract-plugin: works with webpack 4, allows to separate CSS to its own file. [Important Note] This plugin dont work with webpack-dev-server. Use webpack itself to build for production.
    • Plugins [optional]
      • npm install --save-dev html-webpack-plugin 
        
        html-webpack-plugin: This lets you process the main index.html and injects assets into it automatically. It is required if you like to hash your assets for busting caching browsers.

Learning Python: Arguments, *args and **kwargs and Decorators

While reading through python. I came across some python only terms. And a very odd syntax using * and **.  And then there is this @ symbol called decorator.

Positional and Keyword Arguments 

Lets start with positional argument. This is pertaining to how a normal function with arguments is define.

# POSITIONAL ARGUMENT (conventional)
def myfunc(a,b,c):
   print a + b + c
myfunc(1,2,3)
# Output: 123
""" 
In this example a normal function is called , with their argument in order of a ,b ,c. This is positional and very common in any programming languages.
""" 
# KEYWORD ARGUMENT
def myfunc(a,b,c)
  print a + b + c
myfunc(c=3,b=2,c=1)
# Output: 123
"""
In this example same function definition, but the arguments are reflecting the argument names in the function thus the same output regardless of order.
"""

*args and **kwargs (unpacking)

Now lets look at *args, in other programming languages we can have optional arguments like in C# eg. main(string[] arg) or C++ main(int argc, char [] *argv) or main(int argc ,char ** argv).

So its basically similar with python see below:

def myfunc(*argv)
  argc = len(argv)
  for x in argv:
    print (x)
myfunc(1,2,3)
# output: 
1
2
3

** args is a bit similar above. It lets the caller specify the name of the argument. Confused? See below

def myfunc(**kwargs)
  print (a + b + c)
myfunc(a=1,b=2,c=3)
# Output: 123
# See what happens there? another way to access is
def myfunc(**kwargs)
  for key in kwargs:
    print (kwargs[key])
myfunc(a=1,b=2,c=3)
# Output: 
1
2
3
# You can also use to unpack collections and provide to the function
# using *args for a list or tuple
def myfunc(arg1, arg2, arg3):
  print (arg1 + arg2 + arg3)
mytup = (1,2,3)
myfunc(*mytup)
# Output: 123
# using **args for dictionary
def myfunc(**args):
  print (arg1 + arg2 + arg3)
mydict = {"arg1":1, "arg2":2, "arg3":3 }
myfunc(**mydict)
# Output: 123

@ Decorators

We will start with an example first below as this is the best way to explain it.

def mydecor(another_func):
    print ("Im in first")
    another_func()
    print ("Im in last")
@mydecor
def thisfunc():
    print ("I am in the middle")
thisfunc # Note: Do not call it like this thisfunc() check this for information:
https://www.thecodeship.com/patterns/guide-to-python-function-decorators/
# Output:
Im in first
Im am in the middle
Im in last

Learning Python: List, Tuple, Dictionary and Set

Taken from w3schools.com. These are collections in Python

  • List is a collection which is ordered and changeable. Allows duplicate members.
  • Tuple is a collection which is ordered and unchangeable. Allows duplicate members.
  • Set is a collection which is unordered and unindexed. No duplicate members.
  • Dictionary is a collection which is unordered, changeable and indexed. No duplicate members.
a_list = ["I","am","list"] # a_list[0]
for x in a_list:
   print x
-----------
a_tuple= ("I","am","tuple") # a_tuple[0]
// Loop save as above
-----------
a_set  = {"I" , "am" , "set"} # to access you need to iterate through it eg. get_i = next(iter(a_set))
for x in a_set:
   print x
-----------
a_dict = {"say":"I am", "respond": "dict"}  # a_dict["say"]
for name, value in a_dict.items():
   print(name + ' says ' + str(value))

This is a quick overview how to use these array like objects. I know this is very basic but since in the real world development we will most likely use one of these collections.

2018 © Ideas, designs and algorithms