Recently, I had to change the value of max_input_vars in php settings due to a requirement from a WordPress plugin. My site is running on EC2 server, installed by bitnami. Followed by the instructions, I went to /opt/bitnami/php/etc and edit the file php.ini.
I successfully located the line max_input_vars. Sure enough, that line was commented so the settings take its default value, 1000. I uncommented that line and set the limit to 3000.
Finally, I saved the file and restart apache.
However, still no luck. I tried to find other places where this settings could be set. After a while, I couldn’t find any other places.
What is the solution?
The solution is to run this script:
sudo /opt/bitnami/ctlscript.sh restart php-fpm
And you can guess, the limit was increased.
Conclusion
It seems that when you make changes in php.ini, you need to restart php-fpm, not apache. The system I’m working on, as mentioned at the beginning of the post, is EC2 and managed by bitnami.
Images is one of the biggest reasons why sites take a very long time to load. I should say big image to be exact. Some website owners are not aware of this fact and they still upload big images to their website and set the size smaller by using width and height attribute. A classic example is you use your images from a digital camera (or your phone) and upload directly to your website without scaling it down first. The images could be a few MB to over ten MB in size. This is a big problem if you know that in order for a web page to load fast, its total size should not exceed a few MB (except you own a gallery site).
How to find big images in your web pages
Fortunately, finding big images in your web pages is very simple with browser’s tools. You can use any browser to find big images. However, I would recommend you use Google Chrome for the ease of use.
Step 1: Navigate to the URL you want to inspect
In this example, I go to a post in my local site which writes about tiger:
Step 2: Right click any where on the post and select inspect
You will see the console panel appears. Click on Network tab:
Step 3: Reload your page
You will see a new panel appears listing all request your make to the web server.
Step 4: Click on the size tab to sort the request in size order
As you can see, the image is the biggest resource listed at the top.
How do you avoid using big images in your posts
Images is an indispensable part of your content. Without images, your site will look boring and your visitors may not return the second time. However, uploading big images can cause a strain on users’ precious data limit (especially when they use 3G connection). The obvious solution is to resize the image before uploading. Doing so not only help you serve smaller images but also save your server storage. However, this task is tedious, especially when you have to upload many pages for your posts.
A better solution for WordPress users
If you use WordPress, the solution is very simple. WordPress allow you to set the size of the images after you upload.
When uploading images, you notice this section after the image is uploaded:
You can see that we can select sizes for the image. In this case, my picture has the original resolution is 2560 x 858 pixel, which is very large (both in dimensions and in size ). However, I see that if the image is 640 x 214, my visitors can view the details just fine and it saves me a huge amount of bandwidth. So, I choose this option.
Conclusion
Many of us have the luxury of unlimited connection, fast wi-fi… However, there are many people access the internet with limited data plan. Reducing your images size can reduce the time your visitors have to wait on your site and also their cost on mobile data. Your site will also load faster and your visitors will be more happy.
Configuring grunt to compile sass, scss file is quite simple and straightforward. However, as I use the recent version 1.01, the task just hangs without doing any compiling. I’ve tried using grunt-contrib-sass and grunt-sass without any luck.
What’s the solution
I’ve spent hours searching for solution on Google but couldn’t find one. So, I came up with an idea: why do I have to rely on grunt? Using sass directly in the command line is very simple and the task completes quite quickly.
How do I set up?
The setup is very simple, you can write the following code in the command line to compile a sass/scss file to css file.
I want to watch a folder with many files, what should I do?
Honestly, if you watch changes from a folder contains many files, sass may take a long time to compile to .css file. This is why I only watch changes on a few .scss files which import other partials. When I want to compile to .css file, I simply go to that file and add a space.
This strategy will save your computer from compiling sass all the time. On old computer, you may hear the fans’ noise constantly.
The CSSalign-content property defines how the browser distributes space between and around content items along the cross-axis of their container, which is serving as a flexbox container.
So, in short, this property governs the available space around the items of a flex container in the cross-axis. That means if your flex-flow is row, then the direction of the distribution is vertical. Otherwise, the direction of the distribution is horizontal.
Available values for align-content
You can find all the possible values in the documentation. However, these are the most important ones (I think):
start
end
center
space-between
space-around
space-evenly
What are the space-
Let’s look at the alignment of the items in each case. In our examples, we have a list of boxes. Each box has 5px border(green color) and 10px margin (orange color)
space-between
This is the case where the available space is distributed between the items only. There is no space between the container’s border and the first row of the items. The same effect is applied to the last line.
space-around
The difference between space-between and space-around is there are space between the container’s border and the first and last lines of items. As you can see in the image below, the height of the space marked number 1 and 4 is a half of 2 and 3.
space-evenly
Similar to space-around, space-evenly assign space between the first and last lines of the items and the container’s border. However, the difference is the spaces marked 1 and 4 are equal 2 and 3.
So, those are the space- values of align-content. I think this property is very useful when align items in a flex container. One last caution is that if the items are arranged in just one line, then you will see no effects applied. The items must be on more than one line.
Are you a dev? Checkout programming tutorials here: datmt.com
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
Cookie
Duration
Description
cookielawinfo-checbox-analytics
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checbox-functional
11 months
The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checbox-others
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-necessary
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-performance
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy
11 months
The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.