full-stack with Django

tech blog of a beginner

[chuckcwh]

Good talk for React starters

An instruction for whomever want to learn React (Link is here). The conference was in Chinese, but the slides are in English and clear enough for self-explained.

[chuckcwh]

File upload validations in front-end & Django back-end

Three ways I found for file upload validation for size (ex. 2Mb maximum) or type (ex. jpg, jpeg, png).

1. by jQuery (front-end):

    This is the way I prefer, since it is checked right after file chosen, but not after the whole form submitted. And it is also easier to give diverse error messages (more flexible).

Here is an simple example:

Of course you can add an if statement for “size && type”. Here just keep it simple. You can get the detailed file attributes, by console.log(”#id_photo”) inside the on(”change”) function. It gives more flexibilities on file checks.

2. by model field (Django back-end):

    Define a RestrictedFileField and apply to all the file fields (Check the code here).

    This is the best way if you have lots of different file uploads. The code is succinct, clear, and reusable. Perfect choice for simple forms.

3. by form field (Django back-end):

    Another way to handle file (Check the code here).

    Can also do some post-modifications for files you get. Also a good way.

[chuckcwh]

Configure vagrant server in my browser

After set-up the virtual server in local machine, you find the server is running successfully by supervisor. But why we cannot access it in browser? Two files should be configured: 1. (virtual server) /etc/nginx/sites-enabled/<proj>.conf     Aheck this file to see if you set “server_name”, ex:      server {        listion  80;        server_name  local-[my domain name];        client_max_body_size  0;        location / {          include proxy_params;          proxy_pass  http://127.0.0.1:8000;        }      }     remember to restart supervisor by “supervisorctl reload”, then “supervisorctl” to check if server runs okay 2. (private machine) /private/etc/hosts     hosts file is like DNS, should be configured to let domain reach server, ex:      172.16.28.251         http://local-[my domain name]       check vagrantfile to see the ip address and name we assigned.

[chuckcwh]

Profiler debug toolbar penal fuck up and solution

This week I got a weird bug in one of my Django project:

This came out while trying to access the admin in local server, even before the login screen. Situation was: 1. This project is the only project of mine running on Django 1.8 (others are on 1.7). 2. It also appeared in my vagrant server, but not happened in remote staging server or other engineers’ machine. 3. My code is fully updated To be short, this was solved by my CTO by disable the profiler debug settings in django-debug-toolbar.

This fired out a bug and after removing now it works totally fine (but set DEBUG=False didn’t help). Why is this bug solely on my machine? I think it might conflict with other lib in my computer, but who knows? I’ll become a CTO if I know why!

[chuckcwh]

prettyPhoto

prettyPhoto is a powerful, simple-to-use JS library for creating fancy popup window. The window can includes

 Loading indicator

Cool window with custom settings (width, height, arrows for prev/next, etc.)

Text and/or photos

Social links to FB, Twitter, Instagram, and so on.

Setup prettyPhoto you simple need:

 jQuery as prerequisite

prettyPhoto CSS

prettyPhoto JS

It provides pretty slide shows and popups for display. However in some cases, the 3D transform effect slow down the page. Some people mention the lagging situation happens in the chrome. To accelerate the loading, you can try the solution HERE - add -webkit-transform: translate3d(0,0,0);. This would speed up module loading by removing 3d transition. If it doesn’t work for you, try using 2D libraries. I used owl-carousel in combination with bootstrap popup window. Not beautifier, but faster.

Please refer to the prettyPhoto WEBSITE

[chuckcwh]

SnapWidget - Instagram Photo Plugin

http://snapwidget.com/ This is a really convenient app for plugin “someone”s album. No login required. No social auth needed. No need to be your album. And even no code to be written! Just copy and paste the code, and you’re done!

Simply tweak the info you need in their website and request the code. The plugin photos are sync to Instagram, so it will be auto-update if the owner uploaded new photos!

A simple example here:  http://snapwidget.com/bd/?u=bWluY2hlbjMzM3xpbnwyMDB8M3wzfHx5ZXN8MjB8bm9uZXxvblN0YXJ0fHllc3xubw%3D%3D&ve=020615

[chuckcwh]

Brief Intro

Hi, this is Chuck. I’m a beginner in web developing, while just start working as a full-stack engineer for less than a year. Sometimes create silly problems, and English is not good though, but will do my best to share what I’ve learned from my daily learning & work.

My focus are mainly on:

[Front-end] — HTML5, CSS3, JS libraries, Ajax, AngularJS (1.3), API calls

[Back-end] — Python/Django

[System Admin] — (everything I face in the work or learned from books)

The topics will be started within these fields and will expand in the future. Please don’t hesitate to share your feeling with me!