1. Post #4201
    _RJ_'s Avatar
    December 2010
    634 Posts
    "To Wank Off a Puppet: the Memoir of Taika Waititi, with a foreword by Pewdiepie"

    I'd read this.
    Reply With Quote Edit / Delete Reply Windows 7 Chrome Show Events Informative Informative x 1 (list)

  2. Post #4202
    _RJ_'s Avatar
    December 2010
    634 Posts
    Also to add some content, I finished completing (but not added) an off canvas push menu and a pop up menu with site info for my Clockwork Constructors website ( I noticed the website just went down for some reason the KVM crashed, I started it and the website is back up again):





    I also previously did some work on my Blueprint Constructor:



    edit: Oops, no automerge.
    Reply With Quote Edit / Delete Reply Windows 7 Chrome Show Events Winner Winner x 1 (list)

  3. Post #4203
    Gold Member

    May 2010
    6,365 Posts
    Today on "Building a (relatively) high-traffic website for the first time"...

    Rate limiting requests behind a reverse-proxy based on IP.

  4. Post #4204
    vladka24's Avatar
    December 2012
    80 Posts
    Today on "Building a (relatively) high-traffic website for the first time"...

    Rate limiting requests behind a reverse-proxy based on IP.
    I've also been there, testing how much load my web app can handle.
    Reply With Quote Edit / Delete Reply Android Chrome Canada Show Events Winner Winner x 1 (list)

  5. Post #4205
    Nigey Nige's Avatar
    June 2010
    1,567 Posts
    On a scale from 1-10, how stupid is this code I've written?

    Code:
    $(document).ready(function () {
        
        
        var progress = 0;
        var supporters = 0;
        
        var percentageTitle = $('#JS_ProgressTitle');
        var percentageBar = $('#JS_ProgressBar');
        var supporterCount = $('#JS_Supporters');
        
        
        var data = $.getJSON(
            'http://anyorigin.com/go?url=[URL GOES HERE]&callback=?', 
            function(data){
                $('#dataHolder').html($(data.contents).find("strong").text().substr(33));
                var result = $('#dataHolder').text();
                progress = parseInt(result.substr(0,2));
                supporters = parseInt(result.substr(3));
       
                percentageTitle.text(progress + "%");
                percentageBar.width(progress + "%");
                supporterCount.text(supporters + " backers");
            });
        
    });
    It updates a funding progress bar on my site, live, and it does it by loading my publisher's site, finding the text that lists the progress and picking out the bits of the text that represent the values I want (percentage funded and number of supporters). I couldn't figure out how to pick out the right <div> because it didn't have an ID I could refer to, and looking it up by the CSS class didn't seem to work.

    So I instead pulled out all the text that's in <strong> tags, which turned out to be just the title of the book and the values I wanted, and then just took a substring. It's super dumb and it will break if they change certain things, but it works!
    Reply With Quote Edit / Delete Reply Windows 7 Chrome United Kingdom Show Events Funny Funny x 1Artistic Artistic x 1 (list)

  6. Post #4206
    Gold Member
    Tamschi's Avatar
    December 2009
    8,679 Posts
    On a scale from 1-10, how stupid is this code I've written?

    [...]
    Very, if you publisher has a problem with you (ab)using their website like this

    What kind of CSS selector did you try?
    Reply With Quote Edit / Delete Reply Windows 10 Firefox Germany Show Events Funny Funny x 2 (list)

  7. Post #4207
    Nigey Nige's Avatar
    June 2010
    1,567 Posts
    Very, if you publisher has a problem with you (ab)using their website like this

    What kind of CSS selector did you try?
    hopefully they won't notice! I can't imagine that would cause any problems but also I'm worried that having to use anyorigin.com means that what I'm doing is the kind of thing that causes problems? I'm new to this.

    Anyways this might also be stupid but it's my understanding that you can use CSS selectors to select for classes not just IDs, so I tried $('gap--xs padding--vertical-sm text--center text--dark-grey') - because the element I want is the only element with that combination of classes, but it didn't work.

  8. Post #4208
    Gold Member
    Tamschi's Avatar
    December 2009
    8,679 Posts
    hopefully they won't notice! I can't imagine that would cause any problems but also I'm worried that having to use anyorigin.com means that what I'm doing is the kind of thing that causes problems? I'm new to this.

    Anyways this might also be stupid but it's my understanding that you can use CSS selectors to select for classes not just IDs, so I tried $('gap--xs padding--vertical-sm text--center text--dark-grey') - because the element I want is the only element with that combination of classes, but it didn't work.
    That selects a <text--dark-grey> inside a <text--center> inside a <padding--vertical-sm> inside a <gap--xs>. You're looking for $('.gap--xs.padding--vertical-sm.text--center.text--dark-grey').
    Reply With Quote Edit / Delete Reply Windows 10 Firefox Germany Show Events Informative Informative x 2Agree Agree x 1 (list)

  9. Post #4209
    kill yourself
    Protocol7's Avatar
    June 2006
    29,753 Posts
    $('.gap--xs.padding--vertical-sm.text--center.text--dark-grey').
    Gesundheit.
    Reply With Quote Edit / Delete Reply Windows 10 Chrome United States Show Events Funny Funny x 4 (list)

  10. Post #4210
    Gold Member
    djjkxbox's Avatar
    November 2006
    2,318 Posts
    You know there's a feature in both Chrome and Firefox where you can right click an element in the dev tools and get a CSS selector for it. The CSS selectors it generates are usually ugly as fuck but they will get you the right element for sure
    Reply With Quote Edit / Delete Reply Mac Safari United Kingdom Show Events Informative Informative x 2 (list)

  11. Post #4211
    Gold Member
    aurum481's Avatar
    November 2008
    3,202 Posts
    You know there's a feature in both Chrome and Firefox where you can right click an element in the dev tools and get a CSS selector for it. The CSS selectors it generates are usually ugly as fuck but they will get you the right element for sure
    Not CSS selectors, XPath
    https://developer.mozilla.org/en-US/docs/Web/XPath


    Edited:

    I feel deeply ashamed about momentarily forgetting document.querySelector

  12. Post #4212
    Nigey Nige's Avatar
    June 2010
    1,567 Posts
    V useful, thanks guys!

  13. Post #4213
    Gold Member
    Tamschi's Avatar
    December 2009
    8,679 Posts
    Firefox gives you either (as well as a 'CSS Path' option), but I have a hunch that the 'CSS Selector' is the most stable (if it looks like this, at least):
    Code:
    CSS Selector: #post_message_52762817 > blockquote:nth-child(1) > a:nth-child(3)
    CSS Path: html#vbulletin_html body div#content_pad div#content_inner div#postlist.postlist.restrain ol#posts.posts li#post_52762817.postbitlegacy.postbitim.postcontainer.postbitnew div.postdetails div.postbody div.postrow div.content div#post_message_52762817 blockquote.postcontent.restore a
    XPath: /html/body/div[1]/div[2]/div[2]/ol/li[11]/div[2]/div[2]/div[1]/div/div/blockquote/a

  14. Post #4214
    Gold Member
    archival's Avatar
    January 2010
    3,828 Posts
    Hey lads, I wanted to do a bit of a PSA regarding UI Testing frameworks and their differences since I know this is a question that gets asked a fair bit online. I feel like most of the information out there is a bit lacking and from the perspective of someone that has used two of the major ones, often really nonspecific on the comparisons (or even wrong)

    You think I should make a thread about it with a lengthy explanation on the topic or just post a bit of it here for you guys to read should you want to know?
    Reply With Quote Edit / Delete Reply Windows 7 Chrome Japan Show Events Agree Agree x 2 (list)

  15. Post #4215
    tW4r's Avatar
    August 2013
    135 Posts
    Trying to make a very minimalistic login screen (pure HTML and CSS no frameworks)
    Reply With Quote Edit / Delete Reply Linux Firefox Lithuania Show Events Winner Winner x 2Artistic Artistic x 1 (list)

  16. Post #4216
    Gold Member
    Tamschi's Avatar
    December 2009
    8,679 Posts
    Hey lads, I wanted to do a bit of a PSA regarding UI Testing frameworks and their differences since I know this is a question that gets asked a fair bit online. I feel like most of the information out there is a bit lacking and from the perspective of someone that has used two of the major ones, often really nonspecific on the comparisons (or even wrong)

    You think I should make a thread about it with a lengthy explanation on the topic or just post a bit of it here for you guys to read should you want to know?
    I'd appreciate it either way. I know next to nothing about this, but it's possible I'll encounter it soon.
    There's also a (currently on hold) web app project of mine that could really use some unit tests.

    Edited:

    Trying to make a very minimalistic login screen (pure HTML and CSS no frameworks)
    This looks pretty nice, but I'd keep the email and password fields a little more field-like, if that makes sense.
    Reply With Quote Edit / Delete Reply Windows 10 Firefox Germany Show Events Agree Agree x 4Informative Informative x 1 (list)

  17. Post #4217
    Gold Member
    djjkxbox's Avatar
    November 2006
    2,318 Posts
    Trying to make a very minimalistic login screen (pure HTML and CSS no frameworks)
    You just need to be careful that you still have good UX and make sure it's accessibility-friendly. The fields don't look like fields at the moment, you either need to do the Material Design underline thing Google does e.g:


    Or just put a border/background on them.

    And on the subject of accessibility, make sure all your buttons/fields have some sort of focus style, so that you can see what you're focused on when navigating with the keyboard (i.e. pressing TAB to focus on each field)
    Reply With Quote Edit / Delete Reply Mac Safari United Kingdom Show Events Agree Agree x 2Informative Informative x 1 (list)

  18. Post #4218
    Gold Member
    Scratch.'s Avatar
    December 2012
    14,630 Posts
    Hell I didn't even give my forms proper styles
    just positioning+box model



  19. Post #4219
    tW4r's Avatar
    August 2013
    135 Posts
    Thanks for the input guys, I've updated the form a bit with full borders emphasizing the form on hover, and blue color on focused element
    Reply With Quote Edit / Delete Reply Linux Firefox Lithuania Show Events Winner Winner x 11Artistic Artistic x 2Zing Zing x 1 (list)

  20. Post #4220
    Gold Member
    Tamschi's Avatar
    December 2009
    8,679 Posts
    Thanks for the input guys, I've updated the form a bit with full borders emphasizing the form on hover, and blue color on focused element
    This is much better, but consider adding a 'show password' button like in djjkxbox's screenshot, for those of us who have longer passwords but can enter them in privacy.
    It would be nicest if it was a toggle, like some Microsoft products use I think. Most password-mode keyboards on Android don't give you word completion, which is a bit annoying.

    Though, on second thought a lot of Android keyboards 'phone home' when in predictive mode (by default). I wonder if there's a mode that shows the password but prevents that.
    Reply With Quote Edit / Delete Reply Windows 10 Firefox Germany Show Events Friendly Friendly x 1 (list)

  21. Post #4221
    Gold Member
    djjkxbox's Avatar
    November 2006
    2,318 Posts
    It would be nicest if it was a toggle, like some Microsoft products use I think. Most password-mode keyboards on Android don't give you word completion, which is a bit annoying.

    Though, on second thought a lot of Android keyboards 'phone home' when in predictive mode (by default). I wonder if there's a mode that shows the password but prevents that.
    Keyboards usually don't give you auto-completion on password fields because auto-completion relies on saving information you've entered somewhere, and in terms of security your password should be saved in as few places as possible, if not at all, plus auto-completions are usually saved as plain text whereas passwords should be saved encrypted.

    The "show password" feature is a Windows 10/Edge feature by default, you can test by just creating a simple input type password field and opening it with Edge, and it gives you the option to view the password via an automatically appearing "eye" icon. Of course, you can implement this manually with Javascript, it's usually designed for websites that do not wish to use a "repeat password" field. Repeat password fields are usually used because you could misspell the password in the first field and not know because it's censored, whereas if you can view the password then you don't need a repeat password field
    Reply With Quote Edit / Delete Reply Mac Safari United Kingdom Show Events Informative Informative x 1 (list)

  22. Post #4222
    I am the Asian Ed Sheeran Rabbit - My sister
    gokiyono's Avatar
    June 2012
    5,164 Posts
    This is much better, but consider adding a 'show password' button like in djjkxbox's screenshot, for those of us who have longer passwords but can enter them in privacy.
    It would be nicest if it was a toggle, like some Microsoft products use I think. Most password-mode keyboards on Android don't give you word completion, which is a bit annoying.

    Though, on second thought a lot of Android keyboards 'phone home' when in predictive mode (by default). I wonder if there's a mode that shows the password but prevents that.
    Why not get a password manager so that you don't have to type the password, but can copy and paste it?
    Reply With Quote Edit / Delete Reply Windows 10 Firefox Denmark Show Events Agree Agree x 1 (list)

  23. Post #4223
    Gold Member
    Tamschi's Avatar
    December 2009
    8,679 Posts
    Why not get a password manager so that you don't have to type the password, but can copy and paste it?
    I have that (also on my phone where typing them in is normally more inconvenient), but that's still less convenient that typing it if I remember it directly, and keeping it in sync isn't entirely trivial (without uploading it to ~the cloud~, which I'd rather not).

    I don't use anything that's online like LastPass though, so I can only comment on the convenience of offline password managers. I should probably note that the password manager's password keyboard does have word completion on password fields, which is convenient for me since I use passphrases.

  24. Post #4224
    Gold Member
    jaooe's Avatar
    May 2012
    535 Posts
    Working on a new project and thinking about using react/webpack and JWT for auth, but I've got a question;

    If I'm not gonna have my server decide what the user sees (i.e. what i'm used to with express) then how can I protect routes if I'm shipping them with webpack, or is it that I ship the routes but don't load any auth-protected data from my api server (obviously)...

    Maybe I've just answered the question myself...

  25. Post #4225
    kill yourself
    Protocol7's Avatar
    June 2006
    29,753 Posts
    I am a little out of my element here but I think React lets you specify some code to run before a route is loaded, you should be able to verify if the user has access to that route that way.

  26. Post #4226
    Gold Member

    May 2010
    6,365 Posts
    Working on a new project and thinking about using react/webpack and JWT for auth, but I've got a question;

    If I'm not gonna have my server decide what the user sees (i.e. what i'm used to with express) then how can I protect routes if I'm shipping them with webpack, or is it that I ship the routes but don't load any auth-protected data from my api server (obviously)...

    Maybe I've just answered the question myself...
    Your primary level of security should be at the API level.
    If you particularly want to obscure the route to, say, an admin panel you could consider separate app bundles. That's what I've done with my current project, Angular but the same theory applies really.

  27. Post #4227
    Gold Member
    archival's Avatar
    January 2010
    3,828 Posts
    I'd appreciate it either way. I know next to nothing about this, but it's possible I'll encounter it soon.
    There's also a (currently on hold) web app project of mine that could really use some unit tests.
    Decided to write up the testing stuff in its own thread which you can find here;
    https://facepunch.com/showthread.php...4#post52783494

    Its a long read but has some useful info, also included a TL;DR at the bottom

  28. Post #4228
    Do I look like I speak squirrel?
    relinquish's Avatar
    November 2010
    1,252 Posts
    Not my stuff, but I just wanted to show one of the most impressive web design work I've ever seen in years: http://www.abc.net.au/news/2017-10-1...ge-map/8880894
    Reply With Quote Edit / Delete Reply Windows 10 Chrome United States Show Events Winner Winner x 5Agree Agree x 1 (list)

  29. Post #4229
    Gold Member
    Svenskunganka's Avatar
    September 2011
    2,015 Posts
    The new Firefox "Quantum" Dev Edition is pretty sweet. Decided to switch out Chrome for it, since it is noticeably faster and more lightweight.
    Reply With Quote Edit / Delete Reply Windows 10 Firefox Sweden Show Events Agree Agree x 3Informative Informative x 1 (list)

  30. Post #4230
    Gold Member
    djjkxbox's Avatar
    November 2006
    2,318 Posts
    It's pretty neat, I'm actually going to switch to it too when it's released. It's also apparently going to support input type date/time fields on release too
    Reply With Quote Edit / Delete Reply Mac Safari United Kingdom Show Events Winner Winner x 2 (list)

  31. Post #4231
    kill yourself
    Protocol7's Avatar
    June 2006
    29,753 Posts
    I've been fed up with Chrome so as long as LastPass makes an extension I'll definitely switch. Those CSS Grid devtools and the devtools in general seem really good.

  32. Post #4232
    Gold Member
    Svenskunganka's Avatar
    September 2011
    2,015 Posts
    I've been fed up with Chrome so as long as LastPass makes an extension I'll definitely switch. Those CSS Grid devtools and the devtools in general seem really good.
    They released a beta version a couple of days ago, which prompted me to finally switch.

  33. Post #4233
    Gold Member
    Scratch.'s Avatar
    December 2012
    14,630 Posts
    I've been fed up with Chrome so as long as LastPass makes an extension I'll definitely switch. Those CSS Grid devtools and the devtools in general seem really good.
    Webextensions are piss easy to port anyways

  34. Post #4234
    your lack of title is bothering me
    Nookyava's Avatar
    January 2013
    3,459 Posts
    Just swapped myself since I saw the LastPass beta, so I'll have to see how I like it.

    Main issue I was having with Firefox was that it felt bulkier than Chrome, so if this version is better I'm all for it.

  35. Post #4235
    Nigey Nige's Avatar
    June 2010
    1,567 Posts
    I just set up LastPass the other day, surprised by how well it works as an extension rather than an app. Not sure how idiot-proof it is though since I've twice nearly locked myself out of everything I have.

  36. Post #4236
    Gold Member
    Scratch.'s Avatar
    December 2012
    14,630 Posts
    I just set up LastPass the other day, surprised by how well it works as an extension rather than an app. Not sure how idiot-proof it is though since I've twice nearly locked myself out of everything I have.
    It's using native messaging correct?
    This is they process of a webextension communicating to/from an application on the computer

    We have these set up for ShareX. It's how you can steal content rehost images to your own site directly from the browser
    Reply With Quote Edit / Delete Reply Windows 10 Waterfox Australia Show Events Informative Informative x 1 (list)

  37. Post #4237
    Gold Member

    May 2010
    6,365 Posts
    Quick question since this thread is (relatively) active compared to Questions thread -

    Would serving static files (images, specifically) from VPS hosting (through Nginx) and then via Cloudflare be significantly slower / less efficient than from Cloudfront? It's currently costing a fortune.

  38. Post #4238
    Gold Member
    aurum481's Avatar
    November 2008
    3,202 Posts
    Quick question since this thread is (relatively) active compared to Questions thread -

    Would serving static files (images, specifically) from VPS hosting (through Nginx) and then via Cloudflare be significantly slower / less efficient than from Cloudfront? It's currently costing a fortune.
    Don't think it would be significantly slower or anything, but only way to know for sure would be testing with browser dev tools in current and cloudflare setups separately. Could be a hassle since you have to change dns settings to get cloudflare caching.
    Reply With Quote Edit / Delete Reply Windows 10 Vivaldi Lithuania Show Events Useful Useful x 1 (list)

  39. Post #4239
    Gold Member
    Svenskunganka's Avatar
    September 2011
    2,015 Posts
    We should probably just merge the WAYWO & QTDNTOT the next time they reach post limit, since there's not a lot of activity in either of them.
    Reply With Quote Edit / Delete Reply Windows 10 Firefox Sweden Show Events Agree Agree x 1 (list)

  40. Post #4240
    Handsome Matt's Avatar
    August 2008
    7,700 Posts
    Thanks for the input guys, I've updated the form a bit with full borders emphasizing the form on hover, and blue color on focused element
    Small UX nitpick (I am a week late however) - mark the email field as `autofocus`, feels much nicer.

    Edited:

    Quick question since this thread is (relatively) active compared to Questions thread -

    Would serving static files (images, specifically) from VPS hosting (through Nginx) and then via Cloudflare be significantly slower / less efficient than from Cloudfront? It's currently costing a fortune.
    If they're static files, serve them through any old VPS and set them to cache on Cloudflare for as long as possible. No need to be paying for Cloudfront.
    Reply With Quote Edit / Delete Reply Windows 10 Firefox United Kingdom Show Events Informative Informative x 1 (list)