[ QueryJane project ] Interface improvements in design and optimization for load time

in #utopian-io6 years ago

qjane-icon.png

This is my fourth collaboration in Query Jane project. In this time I'm going to show improvements about design interface and optimization from the browser side. The next were the tasks that were developed:

  • Replace gulp for webpack as a module bundle, perfect to migrate to bootstrap 4.
  • Migration from bootstrap 3 to bootstrap 4 for a better responsive for last devices and an easy maintenance of ui implementation.
  • Using import with webpack for a better compilation in javascript.
  • Optimization with webpack that let us to load only one file for css and only one file for js.

Replace gulp for webpack as a module bundle, perfect to migrate to bootstrap 4

In order to migrate from bootstrap 3 to bootstrap 4 and improve the ui design, I added webpack because it is a module bundle that allow me to use imports for css and js, following the bootstrap 4 documentation and your specifications about [how to compile with webpack](https://getbootstrap.com/docs/4.1/getting-started/webpack/). Following those instructions that was a clear integration and allow me to apply styles using sass and create a theme that apply styles for modular elements like buttons, forms, cards etc., and use them to create quickly each interface with the right design.

Webpack let me to use only the methods that we need for our view and avoid to get all the js of a library, then it was a great improvement for performance because in the future we will reduce the size of all static files in our application. It let me reduce the request for static files too, because using import I called all files css and js that we need for each view.


Migration from bootstrap 3 to bootstrap 4 for a better responsive for last devices and an easy maintenance of ui implementation

The migration to bootstrap 4 allowed us to use one of the last updates of css, these are flex boxes. We can use new helpers that allowed to us get quickly modifications in the interface too.



Using import with webpack for a better compilation in javascript and optimization with webpack that let us to load only one file for css and only one file for js

With the use of imports for css and js, now we can get dependencies directly from node package modules and in the same way we can compile all files in only one file. With these configurations we can get great improvements in performance because we reduce the load time for a view.


publish-03.png

publish-17.png


Github account: cunigarro

Pull Requests:

Sort:  

Congrats, bootstrap changes looks like a big change (100 files changed) and I am personally often too lazy to upgrade frameworks I have use.

On a side note, I see you repeated this addition on almost 20+ template files.

{% block css %}
<link href="{% static 'dist/css/account/login.min.css' %}" rel="stylesheet">
{% endblock %}

Isn't it possible to add this into the base template and make it work for every other template out there?

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.


Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]

Thank you for your review, @emrebeyler!

So far this week you've reviewed 9 contributions. Keep up the good work!

Hi @cunigarro!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server

Hey, @cunigarro!

Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!

Congratulations @cunigarro! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

You received more than 500 upvotes. Your next target is to reach 1000 upvotes.

Click here to view your Board
If you no longer want to receive notifications, reply to this comment with the word STOP

Support SteemitBoard's project! Vote for its witness and get one more award!

Congratulations @cunigarro! You received a personal award!

Happy Birthday! - You are on the Steem blockchain for 1 year!

Click here to view your Board

Support SteemitBoard's project! Vote for its witness and get one more award!

Coin Marketplace

STEEM 0.26
TRX 0.11
JST 0.032
BTC 64615.49
ETH 3112.63
USDT 1.00
SBD 3.84