Probably a duplicate of this post: https://stackoverflow.com/questions/10528000/a-customized-input-text-box-in-html-html5

    

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    input {
      border: 0;
      outline: 0;
      background: transparent;
      border-bottom: 1px solid black;
    }

&lt;!-- language: lang-html --&gt;

    &lt;input&gt;&lt;/input&gt;

&lt;!-- end snippet --&gt;

See this [JSFiddle](http://jsfiddle.net/zb83W/)

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    input[type=&quot;text&quot;] {
      border: 0;
      border-bottom: 1px solid red;
      outline: 0;
    }

&lt;!-- language: lang-html --&gt;

    &lt;form&gt;
      &lt;input type=&quot;text&quot; value=&quot;See! ONLY BOTTOM BORDER!&quot; /&gt;
    &lt;/form&gt;

&lt;!-- end snippet --&gt;



I am getting this error in my `nginx-error.log` file:

    2014/02/17 03:42:20 [crit] 5455#0: *1 connect() to unix:/tmp/uwsgi.sock failed (13: Permission denied) while connecting to upstream, client: xx.xx.x.xxx, server: localhost, request: &quot;GET /users HTTP/1.1&quot;, upstream: &quot;uwsgi://unix:/tmp/uwsgi.sock:&quot;, host: &quot;EC2.amazonaws.com&quot;

The browser also shows a 502 Bad Gateway Error. The output of a `curl` is the same, Bad Gateway html

I&#39;ve tried to fix it by changing permissions for `/tmp/uwsgi.sock` to 777. That didn&#39;t work. I also added myself to the `www-data` group (a couple questions that looked similar suggested that). Also, no dice. 

Here is my `nginx.conf` file:

**nginx.conf**

    worker_processes 1;
    worker_rlimit_nofile 8192;

    events {
      worker_connections  3000; 
    }

    error_log  /var/log/nginx/error.log warn;
    pid        /var/run/nginx.pid;

    http {
        include       /etc/nginx/mime.types;
        default_type  application/octet-stream;

        log_format  main  &#39;$remote_addr - $remote_user [$time_local] &quot;$request&quot; &#39;
                      &#39;$status $body_bytes_sent &quot;$http_referer&quot; &#39;
                      &#39;&quot;$http_user_agent&quot; &quot;$http_x_forwarded_for&quot;&#39;;

        access_log  /var/log/nginx/access.log  main;

        sendfile        on; 
        #tcp_nopush     on; 

        keepalive_timeout  65; 

        #gzip  on; 

        include /etc/nginx/conf.d/*.conf;
        include /etc/nginx/sites-enabled/*;
    }


I am running a Flask application with Nginsx and Uwsgi, just to be thorough in my explanation. If anyone has any ideas, I would really appreciate them.

------------
**EDIT**

I have been asked to provide my uwsgi config file. So, I never personally wrote my nginx or my uwsgi file. I followed the guide [here][1] which sets everything up using ansible-playbook. The `nginx.conf` file was generated automatically, but there was nothing in `/etc/uwsgi` except a `README` file in both `apps-enabled` and `apps-available` folders. Do I need to create my own config file for uwsgi? I was under the impression that ansible took care of all of those things. 

I believe that `ansible-playbook` figured out my uwsgi configuration since when I run this command

    uwsgi -s /tmp/uwsgi.sock -w my_app:app

it starts up and outputs this:

    *** Starting uWSGI 2.0.1 (64bit) on [Mon Feb 17 20:03:08 2014] ***
    compiled with version: 4.7.3 on 10 February 2014 18:26:16
    os: Linux-3.11.0-15-generic #25-Ubuntu SMP Thu Jan 30 17:22:01 UTC 2014
    nodename: ip-10-9-xxx-xxx
    machine: x86_64
    clock source: unix
    detected number of CPU cores: 1
    current working directory: /home/username/Project
    detected binary path: /usr/local/bin/uwsgi
    !!! no internal routing support, rebuild with pcre support !!!
    *** WARNING: you are running uWSGI without its master process manager ***
    your processes number limit is 4548
    your memory page size is 4096 bytes
    detected max file descriptor number: 1024
    lock engine: pthread robust mutexes
    thunder lock: disabled (you can enable it with --thunder-lock)
    uwsgi socket 0 bound to UNIX address /tmp/uwsgi.sock fd 3
    Python version: 2.7.5+ (default, Sep 19 2013, 13:52:09)  [GCC 4.8.1]
    *** Python threads support is disabled. You can enable it with --enable-threads ***
    Python main interpreter initialized at 0x1f60260
    your server socket listen backlog is limited to 100 connections
    your mercy for graceful operations on workers is 60 seconds
    mapped 72760 bytes (71 KB) for 1 cores
    *** Operational MODE: single process ***
    WSGI app 0 (mountpoint=&#39;&#39;) ready in 3 seconds on interpreter 0x1f60260 pid: 26790 (default app)
    *** uWSGI is running in multiple interpreter mode ***
    spawned uWSGI worker 1 (and the only) (pid: 26790, cores: 1)


  [1]: http://mattupstate.com/python/devops/2012/08/07/flask-wsgi-application-deployment-with-ubuntu-ansible-nginx-supervisor-and-uwsgi.html

Nginx error: (13: Permission denied) while connecting to upstream

`bower install` behind a proxy fails in timeout with the following settings (some set are useless...) :

    git config --global http.proxy fr-proxy.example.com:3128
    git config --global https.proxy fr-proxy.example.com:3128
    
    export http_proxy=http://fr-proxy.example.com:3128
    export https_proxy=http://fr-proxy.example.com:3128
    
    npm config set proxy http://fr-proxy.example.com:3128
    npm config set https-proxy http://fr-proxy.example.com:3128
    
    npm config set registry http://registry.npmjs.org/

I have also tried an install/uninstall of bower and a `bower clean cache`.

bower behind a proxy

How can I create a Text field that has a transparent or no background, no top,left and right border? 

I am only using CSS and HTML.

Textfield with only bottom border

<p>How can I create a Text field that has a transparent or no background, no top,left and right border?</p>
<p>I am only using CSS and HTML.</p>


I&#39;m trying to style a file upload button to my personal preferences, but I couldn&#39;t find any really solid ways to do this without JS. I did find [two](https://stackoverflow.com/q/3226167/1256925) [other](https://stackoverflow.com/q/3606876/1256925) questions about this subject, but the answers there either involved JavaScript, or suggested [Quirksmode&#39;s approach](http://www.quirksmode.org/dom/inputfile.html).

My major issue with this Quirksmode&#39;s approach is that the file button will still have the browser-defined dimensions, so it won&#39;t automatically adjust to whatever&#39;s used as button that&#39;s placed below it. I&#39;ve made some code, based on it, but it will just take up the space the file button would normally take up, so it won&#39;t at all fill the parent div like I want it to.

**HTML:**

    &lt;div class=&quot;myLabel&quot;&gt;
        &lt;input type=&quot;file&quot;/&gt;
        &lt;span&gt;My Label&lt;/span&gt;
    &lt;/div&gt;

**CSS:**

    .myLabel {
        position: relative;
    }
    .myLabel input {
        position: absolute;
        z-index: 2;
        opacity: 0;
        width: 100%;
        height: 100%;
    }

[**This fiddle**](http://jsfiddle.net/KY42f/1/) demonstrates how this approach is quite flawed. In Chrome, clicking the `!!` below the second demo button will open the file dialog anyway, but also in all other browsers, the file button doesn&#39;t take up the correct areas of the button.

Is there any more solid way to style the file upload button, without any JavaScript, and preferably using as little &#39;hacky&#39; coding as possible (since hacking usually brings other problems along with it, such as the ones in the fiddle)?

Cross-browser custom styling for file upload button

I want my nginx make display all url&#39;s clean. 

  - http://www.mydomain.com/indexhtml.html as http://www.mydomain.com/indexhtml 
  - http://www.mydomain.com/indexphp.php as http://www.mydomain.com/indexphp

With some research I&#39;ve made the first case to work. It`s done by following configuration:

    location / {
        root   html;
        index  index.html index.htm index.php;
        try_files $uri.html $uri/ =404;	
    }

It works for indexhtml.html displaying as indexhtml, but nothing happens with .php. If I change $uri.html to $uri.php, it works neither for .html, neither .php. I`ve tried to put something similar in php location but without any success.

Any advices?

How to remove both .php and .html extensions from url using NGINX?

I&#39;m really stuck trying to understand the best way to stream real time output of ffmpeg to a HTML5 client using node.js, as there are a number of variables at play and I don&#39;t have a lot of experience in this space, having spent many hours trying different combinations.

My use case is:

1) IP video camera RTSP H.264 stream is picked up by FFMPEG and remuxed into a mp4 container using the following FFMPEG settings in node, output to STDOUT. This is only run on the initial client connection, so that partial content requests don&#39;t try to spawn FFMPEG again.

    liveFFMPEG = child_process.spawn(&quot;ffmpeg&quot;, [
                    &quot;-i&quot;, &quot;rtsp://admin:12345@192.168.1.234:554&quot; , &quot;-vcodec&quot;, &quot;copy&quot;, &quot;-f&quot;,
                    &quot;mp4&quot;, &quot;-reset_timestamps&quot;, &quot;1&quot;, &quot;-movflags&quot;, &quot;frag_keyframe+empty_moov&quot;, 
                    &quot;-&quot;   // output to stdout
                    ],  {detached: false});

2) I use the node http server to capture the STDOUT and stream that back to the client upon a client request. When the client first connects I spawn the above FFMPEG command line then pipe the STDOUT stream to the HTTP response.

    liveFFMPEG.stdout.pipe(resp);

I have also used the stream event to write the FFMPEG data to the HTTP response but makes no difference

    xliveFFMPEG.stdout.on(&quot;data&quot;,function(data) {
            resp.write(data);
    }

I use the following HTTP header (which is also used and working when streaming pre-recorded files)

    var total = 999999999         // fake a large file
    var partialstart = 0
    var partialend = total - 1

    if (range !== undefined) {
        var parts = range.replace(/bytes=/, &quot;&quot;).split(&quot;-&quot;); 
        var partialstart = parts[0]; 
        var partialend = parts[1];
    } 

    var start = parseInt(partialstart, 10); 
    var end = partialend ? parseInt(partialend, 10) : total;   // fake a large file if no range reques 

    var chunksize = (end-start)+1; 

    resp.writeHead(206, {
                      &#39;Transfer-Encoding&#39;: &#39;chunked&#39;
                     , &#39;Content-Type&#39;: &#39;video/mp4&#39;
                     , &#39;Content-Length&#39;: chunksize // large size to fake a file
                     , &#39;Accept-Ranges&#39;: &#39;bytes &#39; + start + &quot;-&quot; + end + &quot;/&quot; + total
    });


3) The client has to use HTML5 video tags.

I have no problems with streaming playback (using fs.createReadStream with 206 HTTP partial content) to the HTML5 client a video file previously recorded with the above FFMPEG command line (but saved to a file instead of STDOUT), so I know the FFMPEG stream is correct, and I can even correctly see the video live streaming in VLC when connecting to the HTTP node server.

However trying to stream live from FFMPEG via node HTTP seems to be a lot harder as the client will display one frame then stop. I suspect the problem is that I am not setting up the HTTP connection to be compatible with the HTML5 video client. I have tried a variety of things like using HTTP 206 (partial content) and 200 responses, putting the data into a buffer then streaming with no luck, so I need to go back to first principles to ensure I&#39;m setting this up the right way.

Here is my understanding of how this should work, please correct me if I&#39;m wrong:

1) FFMPEG should be setup to fragment the output and use an empty moov (FFMPEG frag_keyframe and empty_moov mov flags). This means the client does not use the moov atom which is typically at the end of the file which isn&#39;t relevant when streaming (no end of file), but means no seeking possible which is fine for my use case.

2) Even though I use MP4 fragments and empty MOOV, I still have to use HTTP partial content, as the HTML5 player will wait until the entire stream is downloaded before playing, which with a live stream never ends so is unworkable.

3) I don&#39;t understand why piping the STDOUT stream to the HTTP response doesn&#39;t work when streaming live yet if I save to a file I can stream this file easily to HTML5 clients using similar code. Maybe it&#39;s a timing issue as it takes a second for the FFMPEG spawn to start, connect to the IP camera and send chunks to node, and the node data events are irregular as well. However the bytestream should be exactly the same as saving to a file, and HTTP should be able to cater for delays.

4) When checking the network log from the HTTP client when streaming a MP4 file created by FFMPEG from the camera, I see there are 3 client requests: A general GET request for the video, which the HTTP server returns about 40Kb, then a partial content request with a byte range for the last 10K of the file, then a final request for the bits in the middle not loaded. Maybe the HTML5 client once it receives the first response is asking for the last part of the file to load the MP4 MOOV atom? If this is the case it won&#39;t work for streaming as there is no MOOV file and no end of the file.

5) When checking the network log when trying to stream live, I get an aborted initial request with only about 200 bytes received, then a re-request again aborted with 200 bytes and a third request which is only 2K long. I don&#39;t understand why the HTML5 client would abort the request as the bytestream is exactly the same as I can successfully use when streaming from a recorded file. It also seems node isn&#39;t sending the rest of the FFMPEG stream to the client, yet I can see the FFMPEG data in the .on event routine so it is getting to the FFMPEG node HTTP server.

6) Although I think piping the STDOUT stream to the HTTP response buffer should work, do I have to build an intermediate buffer and stream that will allow the HTTP partial content client requests to properly work like it does when it (successfully) reads a file? I think this is the main reason for my problems however I&#39;m not exactly sure in Node how to best set that up. And I don&#39;t know how to handle a client request for the data at the end of the file as there is no end of file.

7) Am I on the wrong track with trying to handle 206 partial content requests, and should this work with normal 200 HTTP responses? HTTP 200 responses works fine for VLC so I suspect the HTML5 video client will only work with partial content requests?

As I&#39;m still learning this stuff its difficult to work through the various layers of this problem (FFMPEG, node, streaming, HTTP, HTML5 video) so any pointers will be greatly appreciated. I have spent hours researching on this site and the net, and I have not come across anyone who has been able to do real time streaming in node but I can&#39;t be the first, and I think this should be able to work (somehow!).

Best approach to real time http streaming to HTML5 video client

I have read that the `role` attribute was added to [Bootstrap][1] for accessibility, and I would like to know how `&lt;form role=&quot;form&quot;&gt;` helps accessibility. See http://getbootstrap.com/css/#forms-example for an example of this specific usage.

*I [searched Bootstrap&#39;s repo for &quot;role&quot;][2] to no avail.*

My issue is that the information seems redundant. The notion that the element is a *form* is already expressed by the HTML tag itself (`&lt;form&gt;`), so what does it help if we also add that the element is playing the `role` of `form`? It would make sense to add `role=&quot;...&quot;` if `role` was going to be different than `form` (I don&#39;t know what - but let&#39;s pretend); as it stands (especially without concrete reasoning / use case examples), it is puzzling at best.

  [1]: http://getbootstrap.com/
  [2]: https://github.com/twbs/bootstrap/search?q=role

How does role=form help accessibility?

I have the following layout on a page:

    &lt;div class=&quot;col-lg-3&quot;&gt;1&lt;/div&gt;
    &lt;div class=&quot;col-lg-2&quot;&gt;2&lt;/div&gt;
    &lt;div class=&quot;col-lg-2&quot;&gt;3&lt;/div&gt;
    &lt;div class=&quot;col-lg-2&quot;&gt;4&lt;/div&gt;
    &lt;div class=&quot;col-lg-3&quot;&gt;5&lt;/div&gt;

     --------- ----- ----- ----- ---------
    |    1    |  2  |  3  |  4  |    5    |
     --------- ----- ----- ----- ---------

But on smaller screen sizes I would like the following layout:

    &lt;div class=&quot;col-xs-6&quot;&gt;1&lt;/div&gt;
    &lt;div class=&quot;col-xs-6&quot;&gt;5&lt;/div&gt;
    &lt;div class=&quot;col-xs-4&quot;&gt;2&lt;/div&gt;
    &lt;div class=&quot;col-xs-4&quot;&gt;3&lt;/div&gt;
    &lt;div class=&quot;col-xs-4&quot;&gt;4&lt;/div&gt;

     ----------------- -----------------
    |        1        |        5        |
     ----------------- -----------------
    |     2     |     3     |     4     |
     ----------- ----------- -----------

(Note the re-arranging of the column order.) Is it possible to push/pull columns only on smaller screen sizes? I&#39;ve tried the following, but I get the oddest layout, and seem to lose `&lt;div&gt;5&lt;/div&gt;` completely...:

    &lt;div class=&quot;col-lg-3 col-xs-6&quot;&gt;1&lt;/div&gt;
    &lt;div class=&quot;col-lg-2 col-xs-4 col-xs-push-4&quot;&gt;2&lt;/div&gt;
    &lt;div class=&quot;col-lg-2 col-xs-4&gt;3&lt;/div&gt;
    &lt;div class=&quot;col-lg-2 col-xs-4&gt;4&lt;/div&gt;
    &lt;div class=&quot;col-lg-3 col-xs-6 col-xs-pull-12&quot;&gt;5&lt;/div&gt;

Bootstrap 3: Push/pull columns only on smaller screen sizes

Is is possible to use `:not()` with  `nth-child` ? 

I tried something like this without any luck :


    td:not(:nth-child(4n)){
      text-align:center;
    }

However this seems to work :

    td:not(:first-child){
      text-align:center;
    }


What I am trying is to center align all table columns except 2nd and 4th column. The columns are dynamically generated to add a custom class to these column .

CSS how to use pseudo-class :not with :nth-child

I have a div set with a background image:

    &lt;div&gt;Play Video&lt;/div&gt;

with the following CSS:

    div {
	background-image: url(&#39;icon.png&#39;);
	background-image: url(&#39;icon.svg&#39;), none;
	background-size: 40px 40px;
	background-repeat: no-repeat;
	background-position: 90% 50%;
	padding: 20px;
	width: 150px;
    }


The background size is respected in Firefox, Safari and Chrome. In IE8, the SVG is replaced by the PNG file. However, in IE9 and IE10, the SVG file is drastically sized down. The problem seems to be linked to the width and height of the div. If I add a height of 150px, the SVG is rendered properly. If I make it smaller (i.e. 100px) the graphic starts to shrink.

Has anyone found a way to fix this issue in Explorer? Is there a way to tell IE to use the background-size value independently of the width and height of the div?

Background-size with SVG squished in IE9-10

Using Bootstrap, I have a grid column class=&quot;col-lg-3&quot; that I want to place it in position:fixed while the other .col-lg-9 is normal position (scroll-able through the page).

    &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;col-lg-3&quot;&gt;
            Fixed content
        &lt;/div&gt;
        &lt;div class=&quot;col-lg-9&quot;&gt;
            Normal scrollable content
        &lt;/div&gt;
    
    &lt;/div&gt;

Just the same way like the left column in [LifeHacker.com](http://lifehacker.com)
You will see that the left part is fixed however I scroll though the page.

I use bootstrap v3.1.1

Make column fixed position in bootstrap

I&#39;m trying to reset the opacity to 1.0 for &#39;Demo text 4&#39; where its container has opacity set to 0.3. 
I read that I could set the text directly using: color: 
rgba(255, 255, 0, 1);
but this will not work for me. Is there a way to achieve my goal?

    &lt;!DOCTYPE html&gt;
    &lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
    &lt;style&gt;
    #text_holder {
	background: blue;
	width: 500px;
	height: 200px;
    }
    #text_holder2 {
	background: blue;
	width: 500px;
	height: 200px;
	color: rgba(255, 255, 0, 1);
    }

    #alpha_30 {
	opacity: 0.3;
	color: #ff0000;
    }
    #alpha_100 {
	color: #ff0000;
    }
	&lt;/style&gt;
    &lt;/head&gt;

    &lt;body&gt;


    &lt;div id=&quot;alpha_100&quot;&gt;
    &lt;div id=&quot;text_holder&quot;&gt;
    	&lt;p&gt;Demo text 1&lt;/p&gt;
    &lt;/div&gt;
    &lt;/div&gt;

    &lt;div id=&quot;alpha_30&quot;&gt;
    &lt;div id=&quot;text_holder&quot;&gt;
        &lt;p&gt;Demo text 2&lt;/p&gt;
    &lt;/div&gt;
    &lt;/div&gt;

    &lt;div id=&quot;alpha_30&quot;&gt;
    &lt;div id=&quot;text_holder&quot;&gt;
        &lt;p&gt;Demo text 3&lt;/p&gt;
    &lt;/div&gt;
    

    &lt;div id=&quot;text_holder2&quot;&gt;
    	&lt;p&gt;Demo text 4&lt;/p&gt;

    
    &lt;/div&gt;
    
    &lt;/div&gt;

    &lt;/body&gt;
    &lt;/html&gt;


Content Type	Original Author	Original Content on Stackoverflow
Question	Rusty	View Question on Stackoverflow
Solution 1 - Html	JunM	View Answer on Stackoverflow
Solution 2 - Html	Douglas Denhartog	View Answer on Stackoverflow

Textfield with only bottom border

Html Problem Overview

Html Solutions

Solution 1 - Html

Solution 2 - Html

bower behind a proxy

Nginx error: (13: Permission denied) while connecting to upstream

Attributions