full-stack with Django

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).

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.

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.

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!

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)