How do browsers “stream” compressed responses?

I have a large HTML file, which I serve compressed using gzip. I’ve noticed the browser starts to display content from the file before the HTTP response is complete. You can mimic this on the command line:

curl -v -H 'Accept-Encoding: gzip' --limit-rate 2K 'http://www.theguardian.com/uk' | gzip --decompress

I’m trying to understand how the browser can do this. My understanding of compression is the whole file is compressed, and you would need a complete response to decompress it, but that is obviously not correct.

read more

How do browsers “stream” compressed responses?

I have a large HTML file, which I serve compressed using gzip. I’ve noticed the browser starts to display content from the file before the HTTP response is complete. You can mimic this on the command line:

curl -v -H 'Accept-Encoding: gzip' --limit-rate 2K 'http://www.theguardian.com/uk' | gzip --decompress

I’m trying to understand how the browser can do this. My understanding of compression is the whole file is compressed, and you would need a complete response to decompress it, but that is obviously not correct.

read more

Two zf Modals are not working together from the same html file #6906

I have two modals sign in & sign up and they’re supposed to run by clicking corresponding links in the nav, each one of them can work fine individually, the second I uncomment the second modal markup only one of them works, usually the first in precedence inside html file. the code is as follows:

what happens when I click on sign in, it opens the first modal without issues, then I close it, and click on sign up button, nothing happens at all. Clicking on sign in once again displays the new element loaded with the sign up modal content. which is quite strange

<div class="menu-group-right condense">
<ul class="icon-left primary menu-bar condense">
    <li><a href="#" zf-open="loginModal"><img zf-iconic="" 

icon="Account" size="small" class="iconic-color-primary">Sign In</a></li>
        <li><a href="#" zf-open="signupModal"><img zf-iconic="" icon="Circle-check" size="small" class="iconic-color-primary">Sign up</a></li>
    </ul>
</div>
</div>
</nav>



<div zf-modal="" id="loginModal" class="collapse">
  <div class="grid-block vertical">
    <div class="primary title-bar">
      <div class="center title">Sign In</div>
        <span zf-close="" class="right"><a><img zf-iconic="" icon="Circle-x" size="small" class="iconic-color-primary">Close</a></span>
        </div>
        <div class="grid-content padding" style="padding-top: 1rem;">
              <form>
              <div class="grid-block">
                <div class="small-12 medium-6 grid-content">

                  <label>Username</label>
                  <input type="text" name="username" />                  
                  <label>Password</label>
                  <input type="password" name="password" />
            </form>
        <input class"button" type="submit" value="Sign In" />
        </div>
  </div>
</div>

<div zf-modal="" id="signupModal" class="collapse">
  <div class="grid-block vertical">
    <div class="primary title-bar">
      <div class="center title">Sign Up</div>
        <span zf-close="" class="right"><a><img zf-iconic=""  icon="Circle-x" size="small" class="iconic-color-primary">Close</a></span>
        </div>
        <div class="grid-content padding" style="padding-top: 1rem;">
            <form>
              <div class="grid-block">
                <div class="small-12 medium-6 grid-content">
                  <label>First Name</label>
                    <input type="text" name="firstName" />

                  <label>Last Name</label>
                    <input type="text" name="lastName" />
                  <label>Email</label>
                    <input type="text" name="email" />
                    <label>Username</label>
                    <input type="text" name="username" />
                  <label>Password:</label>
                  <input type="password" name="password" />
            </form>
        <input class"button" type="submit" value="Sign up" />
        </div>
  </div>
</div>

read more