Recently I upgrade my project from webpack1 to webpack3, one of the main highlight feature for me is Tree Shaking. Depnding on the static structure of ES6 module system, webpack is now able to get rid of unused modules from your build.
That sounds very cool, but after I finished my upgrade and rebuilt my project, the decrease of the file sizes did not reflect my expectation.
Why? Did I not use it right, or is it actually not working?
I was born in a small town in the middle east of China in 1990. It was a very backward town and parts of it even remains the same for the last past 20 years.
It was not big but you could find everything you need.
If you are like me, a python newbie just moved from web front-end world, you must have used Mocha before, the most commonly used test framework made by the genius TJ.
skip() and only() are the two most useful features for me among all the tools that Mocha provides. So when I started to write test cases in Python using Unittest, I felt so frustrated, because there’s nothing that can do the same as the skip() and only() did for me.
So I am going to teach you how to add these two features to unittest-testing in this article, but before we get there, I want to talk more about why these two features are important to your development.
This week I was using Flask-Migrate to do a database data migration. I created an empty reversion file and put my migrate script in it so that the migrate can be recorded just like the other reversion files.
The only thing special about writing a migration script is you need to use raw SQL to do the database manipulation instead of using ORM model object from Flask-SQLAlchemy. The reason is that maybe at the time your script is written, your model definition in your application reflects your actual database structure, but it may change over time, and once that happens, your script may not work correctly anymore.
This is one thing that I think is quite important when you are doing data migration with Flask-Migrate.
I am using React with React-Router to make a SPA(Single Page Application) recently. In my setting page, I adopted the typical Master-Detail layout.
It’s quite easy if you only need to make it work on desktop devices, but for small devices, you need to put extra effort into it.
This article describes how I implement the Master-Detail Layout which works well on both desktop and mobile. If you just want to see the end result, check out the demo project.
Instead of integrating your app with deployment platforms like deployHQ, you can use Travis-CI to create your custom deployment process.
In my case, I just need to deploy my front-end static assets up to an FTP server.
You should always write test for your code.
All the examples below will be using Mocha, Chai, you should be able to change to whatever library you like.
When sending CROS Ajax request, sometimes you may found that before every request you make, there will be a OPTION request sent.
It’s quite annoying and slows down your data request since the actually request has to wait the OPTION request to finish.
According to the CORS strategy (highly recommend you read about it) You can’t just force the browser to stop sending OPTION request if it is necessary.
There’s two way you can work around it
Access-Control-Max-Age for the OPTION requestSemantic UI is a great UI framework which can make your UI development much easier, but it’s still not a joyful job to make it work with webpack especially for theming.
This tutorial works for both webpack 1/2/3, though you need to make small change just to follow webpack2/3’s syntax. For the main differences for webpack2/3, scroll to the bottom!
You may encounter this issue when you run npm with root permission.
In my case, I created a postinstall command to fix a particular node module’s problem:
|
1 2 3 4 5 6 |
{ "scripts": { "postinstall": "node ./semantic-fix.js" } } |