The growth slowdown has been dramatic, while politics takes an aggressively illiberal turn

Growth forecasts cut as outbreak hits pharmaceutical, electronics and car supply chains

Suspension of visas for short-term visitors extends to country’s overseas citizens

Coronavirus adds to concerns over slowing growth and stressed financial system

Restrictions applied to most of the country after one-day voluntary curfew

Slow response could turn coronavirus outbreak into humanitarian crisis

Work to reduce bad corporate loans at risk of setback as fears grow for consumers

Central bank governor calls for ‘war effort’ as coronavirus shuts down country

Migrant workers head home in battle to survive after losing jobs 

Narendra Modi failed to say how millions of employees — mainly rural migrants — were to get by

Outbreak prompts overseas investors to sell $16bn of stocks and bonds in March

Abrupt national lockdown puts 50m jobs at risk in textiles, shoemaking, jewellery and other consumer goods sectors 

Network to provide 80,000 mobile beds after national lockdown shuts passenger services   

Demonstrations at a Mumbai railway station as people demand to return to their homes

Limited manufacturing and agricultural work to resume after April 20

Industry groups warn strict conditions have discouraged many companies from resuming operations

Digital lenders have helped small businesses access funding, but a liquidity crunch looms

Lockdown and restrictions on migrant workforce leave crops unpicked as demand collapses

US investment group halts withdrawals in move that could rock asset management industry

Authorities aiming to head off turmoil after Franklin Templeton fund freeze

More than 140m migrant workers have lost jobs since the lockdown began and now face destitution

What I meant was scanning the DOM of a page for text equivalents and showing the actual parts of the page, as well as hiding the irrelevant ones. I came up with the technique when I was designing Readerrr’s FAQ page. Take a look at the example:

I have also implemented the solution here on my blog.

How it works

All simple. Let’s take the FAQ page as an example. Here’s a typical markup:

<h1>FAQ</h1>
<div class="faq">
	<input type="search" value="" placeholder="Type some keywords (e.g. giza, babylon, colossus)" />
	<ul>
		<li id="faq-1">
			<h2><a href="#faq-1">Great Pyramid of Giza</a></h2>
			<div>
				<p>The Great Pyramid of Giza <!-- ... --></p>
				<!-- ... -->
			</div>
		</li>
		<li id="faq-2">
			<h2><a href="#faq-2">Hanging Gardens of Babylon</a></h2>
			<div>
				<p>The Hanging Gardens of Babylon <!-- ... --></p>
				<!-- ... -->
			</div>
		</li>
		<!-- ... -->
	</ul>
	<div class="faq__notfound"><p>No matches were found.</p></div>
</div>

I wrote a tiny piece of JavaScript code to handle the interaction and this is how it works:

1. When the page loads, the script indexes the content of all li’s into browser’s memory.
2. When a user types text into the search field, the script searches for equivalents among the indexed data and hides the corresponding li’s where no equivalents were found. If nothing found, a message is shown.
3. The script highlights the text equivalents by replacing phases, for example, babylon becomes <span class="highlight">babylon</span>.

Now, try it yourself:

Demo

Taking it further

Since I chose FAQ page as an example, there are some issues to deal with.

Toggling the answers

It is a good practice to hide the answers by default and show them only when user needs them, that is to say when they press the question:

.faq > ul > li:not( .is-active ) > div
{
	display: none;
}

$( document ).on( 'click', '.faq h2 a', function( e )
{
	e.preventDefault();
	$( this ).parents( 'li' ).toggleClass( 'is-active' );
});

In the CSS part I use child combinator selector > because I don’t want to select and, therefore, to hide the elements of an answer, which may contain lists and div’s.

What if JavaScript is disabled

The user won’t be able to see the answers. Unless you show them by default or develop a JavaScript-less solution. To do this, take a closer look at these fragments of the markup:

• <li id="faq-1">
• <a href="#faq-1">

The usage of fragment identifiers enables us to take the advantage of CSS’s pseudo selector :target:

.faq > ul > li:not( :target ) > div
{
	display: none;
}

Furthermore, the real-time search is not possible as well. But you can either provide a sever-side search possibility or hide the search field and so as not to confuse the user:

<html class="no-js">
	<head>
		<!-- remove this if you use Modernizr -->
		<script>(function(e,t,n){var r=e.querySelectorAll("html")[0];r.className=r.className.replace(/(^|s)no-js(s|$)/,"$1$2")})(document,window,0);</script>
	</head>
</html>

I added a class name no-js to <html> element. The <script> part removes that class name. If JavaScript support is disabled in a browser, the class name won’t be removed; therefore:

.no-js .faq input
{
	display: none;
}

The no-js is a very handy technique, you can use it site-wide.

Improving UX

If there is only one list item that matches user’s query, it is a good practice to automatically show the content of that item, without requiring to press the title. To see what I mean, head over the GIF at the beginning of the post.

Hidden keywords

Here on my blog I have a filterable list of blog post titles only. Each post has some related keywords assigned. So, during the search, how do I make an item discoverable even if the title does not consist of a particular keyword? For example, how can I make the entry “Real-Time Search in JavaScript” visible if a user entered “jquery”? Yes, exactly, that is adding keywords and hiding them with CSS:

<li>
	<h2><a href="/real-time-search-in-javascript">Real-Time Search in JavaScript</a></h2>
	<p class="hidden-keywords" aria-hidden="true">jquery filter input html css</p>
</li>

.hidden-keywords
{
	display: none;
}

A simple trick but not always that obvious.

You will find two versions of the code in the source of the demo: without dependencies and jQuery-dependent. These versions are also divided into three groups of code so you can adapt only what your project needs.

Demo

And so it happened that I published the latest post of mine on Codrops, not here this time. It’s about styling <input type="file" /> by taking the advantage of <label>. The technique is not perfect – nothing is perfect that imitates native HTML elements – but having in mind its pros & cons, I found it to be the most appropriate solution for styling file inputs.

Read the article

See the Demo

When working on Readerrr, I wanted to enrich the experience of uploading an OPML file for importing feeds from other readers. There is nothing wrong with the traditional way for uploading a file, but it is a good thing to provide the alternative way – drag & drop file uploading. I've combined my experience into an article which you are very welcome to read on CSS-Tricks.

Read the article

Try the Demo

It’s common to present dates on the Web in a format such as "Published on September 12th, 2015", or "09/12/2015 09:41:23".

Each of these examples tells the full date and/or time of some kind of activity – be it a published article, or a reader comment, or perhaps an uploaded video.

Date formats like this might seem perfectly reasonable. After all, they’re informative and human-readable. Well yes, but “human-readable” doesn’t necessary mean users will readily be able to understand how recently the activity has occurred. The Web is a fast-moving place, and giving your content a sense of freshness could be the key to engaging with your audience.

I combined my ideas and practical solutions into an article which you are very welcome to read on SitePoint.

Read the article

See the Demo

You've been hard at work optimizing your site. You've already done things like lazy-loading Google Maps and been wondering if there was anything else you could do. For example, is there anything we can do to improve the loading of ads? Good news, there is some things you can do. You can respect user's mobile data plan by loading ads only when they are likely to appear in the viewport zone. You can also serve ads in the right size in accordance to the screen of the device. That would be nice of you. That would not only be responsive but also responsible.

I've written an article on that and got it published on CSS-Tricks.

Read the article

Try the Demo

You can also examine the demo on CodePen and contribute, follow the project on GitHub.

My session driver of choice for CodeIgniter is database. A while ago, I noticed millions of rows in the corresponding database table. That means that garbage collector was not working. I checked config.php for sess_regenerate_destroy, but it was already set to false. It was really weird because the problem seemed to have come out of nowhere – not much ago things were working just fine.

After a short investigation, I found out this was and still is a common problem for those who had upgraded their CodeIgniter version from 2.x to 3.x. Turns out, the later possesses heavy changes for Sessions library. And most importantly – fundamental changes in dealing with garbage: CodeIgniter 3.x relies on PHP's native grabage collector. So, in order to get things working again, we need to configure PHP properly.

The Solution

Today there are three PHP-native settings for dealing with session garbage collector. CodeIgniter's Session library has already taken care of one of them – gc_maxlifetime – so there's no need for an extra touch here. The problem lies within the rest: session.gc_probability and/or session.gc_divisor. These two determine when the garbage collector is running. Here's what php.net says:

session.gc_divisor coupled with session.gc_probability defines the probability that the gc (garbage collection) process is started on every session initialization. The probability is calculated by using gc_probability/gc_divisor, e.g. 1/100 means there is a 1% chance that the GC process starts on each request.

In my case, using ini_get() revealed the following values: 0 and 1000. The equation 0/1000=0 meant there was no chance the garbage collector would even run.

Finally, I solved the problem by using the values officially stated as default and by putting the following lines of PHP code into config/config.php file:

ini_set( 'session.gc_probability',	1 );
ini_set( 'session.gc_divisor',		100 );

Theoretically, this means that the garbage collector usually runs once every 100th request. It's more than enough, but it is up to you whether that causes too many unnecessary hits to database. An alternative solution for heavy-traffic websites could be having a 0% probability on the production site and a Cronjob-based script which removes database rows of the expired sessions.

Lately, I've been obsessed with optimizing performance through lazy-loading. Recently, I've written on how to lazy-load Google Maps and on how to lazy-load responsive Google Adsense. Now it's time for Disqus, a service for embedding comments on your website. It's a great service. It eliminates the headache of developing your own local commenting system, dealing with spam, etc. Recently, I've been working on implementing the widget in one of my projects.

I've written an article on that and got it published on CSS-Tricks.

Read the article

Try the Demo

You can also contribute, follow the project on GitHub.

Service Worker has already been here for a while: since 2015-09 it has been fully supported in Chrome/Opera and if compared to what we have today it has gone a promising way of improvements, bug fixes, became more easily debuggable and is supported much widely (hello Firefox). That led us into using the technology in production and implementing it in our kollegorna.se website, as well as some client projects. We’ve learned there quite a few gotchas to grasp in order to get Service Worker working correctly…

Here is the list of what I overviewed in the article:

• Service Worker is a part of Progressive Web Apps
• What Service Worker is for
• Registering a Service Worker
• HTTPS and localhost
• Service Worker working scope
• ES6: to be or not to be?
• “Offline” page
• Service Worker lifecycle and events hierarchy
• Critical and non-critical resources
• Service Worker strategies
• Serving “offline” image
• Garbage in cache is your problem
• Service Worker and DOM
• Service Worker for multilingual website
• Service Worker is backend-dependent
• Debugging Service Worker

Read the article

Middleman is a Ruby based static site generator which we use heavily at Kollegorna both for prototyping (checkout our Middleman boilerplate) and production sites. In my previous article on Service Worker, I overviewed the most common challenges you may face when implementing the technology. This time I’d like to dive into a single specific topic of enabling a worker on Middleman based website as there are a few things to deal with…

Read the article

Or the priority navigation pattern, or progressively collapsing navigation menu. We can name it in at least three ways..

There are multiple UX solutions for tabs and menus and each of them have their own advantages over another, you just need to pick the best for the case you are trying to solve. At design and development agency Kollegorna we were debating on the most appropriate UX technique for tabs for our client’s website…

I wrote an article, coded a demo and got it all published on CSS-Tricks — you're very welcome to read, try and use it!

Read the article

Try the demo

Hayden Library - TA418.9.N35 N396 2012

Barker Library - TA418.9.N35 N68 2012

Hayden Library - TA418.9.N35 P65 2011

Barker Library - TK7874.85.B49 2013

Hayden Library - TA418.9.N35 I5737 2013

Hayden Library - TA418.9.N35 S54 2011

Hayden Library - TP248.25.N35 M46 2013

Hayden Library - T174.7.R42 2012

Barker Library - T174.7.M63 2011

Barker Library - TK7874.85.N365 2012

Dewey Library - T174.7.D745 2013

Hayden Library - T174.7.P46 2012

Hayden Library - T174.7.N3575338 2013

Hayden Library - T174.7.C459 2011

Hayden Library - TP248.25.N35 Y68 2013

Hayden Library - QC176.8.N35 A387 2013

Hayden Library - T174.7.N79 2013