The Web Design & Development Megathread

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread

«‹›2 »

Depressing Box: Jun 27, 2010; Half-price sideshow.

Laravel has a login system, they just list it under "Security" in the docs.

# ¿ Jun 15, 2013 19:47

Adbot: ADBOT LOVES YOU

# ¿ Apr 27, 2024 07:05

Depressing Box: Jun 27, 2010; Half-price sideshow.

KARMA! posted:

Laravel's documentation is really... curt. I don't know about 4, but 3's source code was readable enough.

That's really been the saving grace for me. Laravel's implementation of its different systems is usually well-commented and straightforward (until you run into the Symfony bits, which get more convoluted/verbose). I've been able to figure out most things by using the comments and tests as supplements to the documentation.

I guess I can understand the docs being light, given that there's only one primary developer, but I hope they get more fleshed out now that 4.0 is out.

# ¿ Jun 17, 2013 00:09

Depressing Box: Jun 27, 2010; Half-price sideshow.

Maybe something like this:

Apache code:

Redirect 301  ^/foo/?$   http://newsite.com/foo
Redirect 301  ^/foo/bar  http://newsite.com/bar

The ^ and $ represent the start and end of the url, and force the first rule to only match "oldsite.com/foo" or "oldsite.com/foo/", nothing else.

How many pretty URLs need redirecting? If there are a lot, you'll probably want something more flexible.

EDIT: RedirectMatch may take care of the subpages if the names are the same:

code:

RedirectMatch 301  ^/foo/(.*)$  http://newsite.com/$1

Depressing Box fucked around with this message at 21:34 on Jun 27, 2013

# ¿ Jun 27, 2013 21:26

Depressing Box: Jun 27, 2010; Half-price sideshow.

Try this:

Apache code:


RedirectMatch 301  ^/foo/?$   [url]http://newsite.com/foo[/url]

# ¿ Jun 27, 2013 23:36

Depressing Box: Jun 27, 2010; Half-price sideshow.

I don't know if it's a standard, but I've seen (and personally use) names ending in .dev, so api.mysite.com becomes api.mysite.dev. Especially useful when you're testing multiple sites at once, or if the site responds to more than one domain.

EDIT:

kedo posted:

I'm working on a website for a business with multiple locations. Mobile users are huge for them, so I'm thinking about making a "find the nearest location" button, but am unsure where exactly to begin. Getting the user's location seems to be pretty simple, but I'm wondering how to go about accomplishing the find function.

Google Maps seems like an obvious choice? Does anyone have a good tutorial or something they could share?

Geocoding is probably the other half of what you're trying to do. These might help if you're using PHP:

Geocoder - To convert addresses/IPs/etc. to coordinates and vice versa.
phpgeo - For comparing distances between coordinates.

I'd say geocode the business' locations and store them somewhere, then get the user's coordinates from the geolocation API or a geocoded address and compare them. Also, here's a handy way to compare a user's coordinates to a database directly in MySQL.

Depressing Box fucked around with this message at 02:02 on Jul 7, 2013

# ¿ Jul 7, 2013 01:45

Depressing Box: Jun 27, 2010; Half-price sideshow.

kedo posted:

Speaking of developing on a mobile device... is there such a thing as developer tools in Safari on iOS (or any app, for that matter)? I think the answer is no, but man it makes testing a pain in the rear end when you can't see the code running a bugged element. I once found a little javascript bookmarklet that would let you view source, but it was pretty unreliable.

It looks like Safari has remote Web Inspector support as of iOS 6.

# ¿ Jul 8, 2013 17:35

Depressing Box: Jun 27, 2010; Half-price sideshow.

Maluco Marinero posted:

Yep, shits me cause I work on Ubuntu, but basically the only way to get good info out of the iPhone beyond alerts now, is USB + Safari. Can't even get at debug messages with just the phone now.

Haven't tried it myself yet, but weinre might help. It looks like it'll work on any system that can run node.js and a Webkit-based browser.

# ¿ Jul 9, 2013 14:17

Depressing Box: Jun 27, 2010; Half-price sideshow.

What you're looking for is transition-delay applied to the .next item, so the background color will show through. Here's a quick modification of the example Bootstrap carousel to fade to white:

CSS code:

.carousel-inner > .item {
  -webkit-transition: 0.6s ease-in-out opacity;
     -moz-transition: 0.6s ease-in-out opacity;
       -o-transition: 0.6s ease-in-out opacity;
          transition: 0.6s ease-in-out opacity;
}

.carousel-inner > .active {
  opacity: 1;
}

.carousel-inner > .next {
  transition-delay: 1s;
}

.carousel-inner > .next,
.carousel-inner > .prev,
.carousel-inner > .next.left,
.carousel-inner > .prev.right,
.carousel-inner > .active.left,
.carousel-inner > .active.right {
  opacity: 0;
}

# ¿ Jul 12, 2013 00:26

Depressing Box: Jun 27, 2010; Half-price sideshow.

Modernizr doesn't automatically add a class to the body, but it looks like you can check Modernizr.inputtypes (assuming your build has the HTML5 Input Types tests). So something like this:

JavaScript code:

if ( ! Modernizr.inputtypes.tel) {
  // No tel support
}

Depressing Box fucked around with this message at 23:14 on Aug 19, 2013

# ¿ Aug 19, 2013 23:11

Depressing Box: Jun 27, 2010; Half-price sideshow.

Ghostlight posted:

I'm completely brainfarting on whether there's a way that isn't like 25 ifs and an else to conglomerate the alphabetical categories and whether it would be better to handle it during the PHP substr or in the jQuery. The categories are kind of arbitrary because the designer was trying to split the actual content evenly across the alphabet so it's A-B, C, D-H, J-L, M, N-R, S and T-Y.

Hmm. Maybe a regular expression? Then you could check for a range of letters (e.g. [a-h]):

XML code:

<a href="#" id="a-h">Filter A-H</a>

JavaScript code:

$('a').on('click', function(e) {
	e.preventDefault();

	var letterRange = this.id;

	$('div').filter(function() {
		return this.className.match(new RegExp('\\b[' + letterRange + ']\\b'));
	}).toggle(200);

	$(this).toggleClass('filterinactive');
});

You also use something like that to separate them into A-B, D-H etc. groups on the PHP side, then assign them classes based on their group. In that case, the selector would be something really simple like:

JavaScript code:

	$('.a-h').toggle(200);

Less processing on the client side but more changes on the backend.

# ¿ Aug 22, 2013 06:54

Depressing Box: Jun 27, 2010; Half-price sideshow.

Authentic You posted:

Can someone please explain the appeal and goodness of Bootstrap? Namely the base CSS. Because I don't get it. Maybe we're just doing it wrong, but I dunno.

Bootstrap's main benefits are quick prototypes and easy UI styles for non-designers, though I've heard Bootstrap 3 is better about letting you override its styles.

If you have/are a designer comfortable with CSS (i.e. you're already planning to make a custom UI) you'd probably be happier with something less opinionated (Zurb Foundation) or more lightweight (Bourbon).

Thermopyle posted:

However, I also think you are probably judging it based upon a poorly done implementation of a Bootstrap site, coupled with a lack of familiarity with the way Bootstrap works.

Also this. Bootstrap's not innately bad, but it does lend itself to some bad coding practices.

# ¿ Aug 28, 2013 17:20

Depressing Box: Jun 27, 2010; Half-price sideshow.

caiman posted:

Is changing the browser mode in IE Developer Tools a completely accurate way to test your sites in old versions of IE?

No, unfortunately. The various IE compatibility modes aren't complete emulations, and they even add some quirks of their own.

Nothing can really replace the real thing, so running a VM or something like BrowserStack is probably your best bet.

# ¿ Sep 11, 2013 23:09

Depressing Box: Jun 27, 2010; Half-price sideshow.

This article has some good examples, and also links to a list of observed differences.

# ¿ Sep 12, 2013 00:33

Depressing Box: Jun 27, 2010; Half-price sideshow.

Scaramouche posted:

And the CSS generally looks like:

code:

.col1 { stuff; }
.col2 { more stuff; }
#maincontent > a, a:link, a:visited { link stuff; j}

You're applying the :link and :visited styles globally. It should look more like this:

CSS code:

#maincontent > a,
#maincontent > a:link,
#maincontent > a:visited {
	/* link stuff */
}

# ¿ Sep 26, 2013 20:08

Depressing Box: Jun 27, 2010; Half-price sideshow.

Munkeymon posted:

I'm trying to find a way, using just CSS, to do a layout like this with a video element.

Would something like this work?

# ¿ Oct 12, 2013 05:58

Depressing Box: Jun 27, 2010; Half-price sideshow.

fletcher posted:

Any way to get the ellipsis on the first li here?

http://jsfiddle.net/fnb9g/

The rules need to be on the element that contains the overflowing text. Try this:

CSS code:

li, li h1 {
    overflow: hidden;
    text-overflow: ellipsis;
}

Since the h1 is the container, though, the ellipses will use the h1's styling.

# ¿ Nov 1, 2013 22:52

Depressing Box: Jun 27, 2010; Half-price sideshow.

Munkeymon posted:

Is my plugin broken or do extend chains not work by design?

Looks like the plugin might be broken. If I run this through the command-line tool:

code:

$borderWidth: 12px;

%ui {
  position: absolute;
  bottom: $borderWidth;
}

%arrow {
  @extend %ui;
  color: blue;
}

.leftArrow {
  @extend %arrow;
  left: $borderWidth;
  background-image: url("images/leftArrow.png");
}

.rightArrow {
  @extend %arrow;
  right: $borderWidth;
  background-image: url("images/rightArrow.png");
}

I get this:

CSS code:

.leftArrow, .rightArrow {
  position: absolute;
  bottom: 12px; }

.leftArrow, .rightArrow {
  color: blue; }

.leftArrow {
  left: 12px;
  background-image: url("images/leftArrow.png"); }

.rightArrow {
  right: 12px;
  background-image: url("images/rightArrow.png"); }

EDIT:

A MIRACLE posted:

Wait, what does the % selector do in SASS? Is that like a wildcard? I've never seen it before.

Placeholders are pretty handy when you're trying to cut down on duplicate rules or with OOCSS.

Depressing Box fucked around with this message at 21:58 on Nov 20, 2013

# ¿ Nov 20, 2013 21:50

Depressing Box: Jun 27, 2010; Half-price sideshow.

The official docs have a pretty good rundown.

# ¿ Nov 21, 2013 16:14

Depressing Box: Jun 27, 2010; Half-price sideshow.

FamDav posted:

Another disgusting html question:

I have a row of sprites which I want to evenly space within a fixed width container. What is a nice way to do this?

How about this (adapted from this)? Kind of an uncomfortably hacky way to do it, but it's the closest CSS-only solution I've found.

Actually, if the sprites are all the same width you could probably use "display: table-cell" inside a "display: table-row" container, or do the math and put a left-margin on .sprite + .sprite.

# ¿ Dec 3, 2013 21:18

Depressing Box: Jun 27, 2010; Half-price sideshow.

Codecademy has a pretty good course on basic HTML & CSS.

# ¿ Mar 19, 2014 20:40

Depressing Box: Jun 27, 2010; Half-price sideshow.

fuf posted:

Is there a name for the "make a container fill the whole height of a screen" thing? Like when a site header fills the whole screen and then the next section comes into view as soon as you start scrolling. eg: https://ghost.org/

Mister Chief posted:

I dunno if there's a name for it but they're just using min-height: 100% and background-size: cover to achieve it.

Yeah, as long as <html> and <body> have height: 100% it'll work (example).

# ¿ Apr 23, 2014 16:36

Depressing Box: Jun 27, 2010; Half-price sideshow.

Chris! posted:

I don't know about Less, but I found compiling Sass went a lot faster when I started using Grunt, it typically takes about half a second as opposed to about 3 before.

Libsass�a C implementation of the Sass compiler�is even faster (with a few caveats), and you can use it in Grunt/Gulp via gunt-sass/gulp-sass.

For me it was the difference between a large project compiling in 6 seconds or 0.2 seconds.

EDIT: Actually, if you're getting half-second compiles you might be using Libsass already. Ruby usually takes at least a second.

# ¿ Jun 4, 2014 21:02

Depressing Box: Jun 27, 2010; Half-price sideshow.

The only way I know to make a table respect a maximum width is with "table-layout: fixed". This prevents the table from resizing to fit its contents, though, so check that it doesn't break something else.

The ideal long-term solution is not using tables for layout.

EDIT: With a fixed layout you can remove the "max-width: 1150px" from .PD24T and let it fill the whole container, like so:

Depressing Box fucked around with this message at 04:49 on Dec 17, 2014

# ¿ Dec 17, 2014 04:31

Depressing Box: Jun 27, 2010; Half-price sideshow.

kedo posted:

Alright, sanity check. I'm dealing with a weird CMS that outputs class names in the <body> tag that look like this:
code:
<!-- For the main product page --!>
  <body class="productName">

<!-- For subpages --!>
  <body class="productName-subPageName">
There's not some way I can use magical pseudo selectors to target all pages with "productName" in their class, is there? There are a whole bunch of products I'm dealing with but one needs a lot of custom design, so I'm trying to figure out an intelligent way to target styles to all of its pages. I know how I could accomplish this with JS, but I don't want to have to worry about a flash of incorrect styles on page load.

You should be able to use attribute selectors, like so:

CSS code:

body[class^='productName-'] p,
body[class*=' productName-'] p {
	/* styling all <p> elements on that product's pages */
}

EDIT: Beaten, but note that just using ^= can break if it isn't the first class on the element.

# ¿ Jun 8, 2015 20:31

Depressing Box: Jun 27, 2010; Half-price sideshow.

Lumpy posted:

Someone didn't like some of the warts JS has, so they wrote something that has different warts and requires an additional build step.

Yeah, its attempts to fix JS quirks like scope/hoisting mostly made it more convoluted. If you're already adding another build step, just use Babel to write ES2015 and use stuff like arrows, classes, and template strings natively (well, eventually).

# ¿ Jul 1, 2015 19:12

Depressing Box: Jun 27, 2010; Half-price sideshow.

fuf posted:

What are some good things for web developers that you guys use? CodeKit looks cool?

I usually just throw something together with Gulp, but I know people who swear by CodeKit. I've also found CodeRunner handy for brainstorming or testing code snippets.

Also, get Homebrew to manage your packages. It's good.

fuf posted:

I am going to switch from vim to sublime text.

Also consider looking into Jetbrains if you need an IDE.

fuf posted:

Is Transmit the best sftp client?

It's the best I've found so far.

fuf posted:

Is Tower good for managing git repos? Their promo video is lame as hell haha:
https://www.youtube.com/watch?v=cyyuqf1m-2E

Tower has a nice UI, but I found it so "streamlined" that it made Git harder to work with. I prefer SourceTree, and it's free.

fuf posted:

What about local web server? Is MAMP just the standard thing that everyone uses?

These days most people seem to use Vagrant, but (depending on the project) you can get away with using a simple web server (e.g. the built-in server in PHP 5.4+).

# ¿ Jul 15, 2015 14:48

Depressing Box: Jun 27, 2010; Half-price sideshow.

Postman is great for anything REST related, especially combined with the Interceptor plugin that routes all its request through Chrome.

revmoo posted:

Sequel Pro is the poo poo. I would pay literally hundreds of dollars for postgres support though.

This, I weep every time I have to use Navicat.

# ¿ Jul 15, 2015 18:58

Depressing Box: Jun 27, 2010; Half-price sideshow.

Karthe posted:

Does anyone know why this ng-repeat seems to be applying some kind of minute gap between elements generated by the ng-repeat and elements declared before or after it?

It's picking up the whitespace in the generated HTML, since inline-block makes elements flow like an inline element, which includes being affected by font rules.

You should be able to fix it by putting:

CSS code:

font-size: 0;

on your .shift-buttons container class, then explicitly setting the font size on the child elements (which I think you already do).

# ¿ Aug 13, 2015 01:48

Depressing Box: Jun 27, 2010; Half-price sideshow.

Xarthor posted:

For some reason this no longer works. I just updated my theme (Moesia) and when I went back to set my scripts.js to subtract the pixels nothing happens! I've tried subtracting more pixels, less pixels, etc. Nothing seems to change. The bar doesn't appear on the screen no matter how many pixels I remove. It worked fine in the past, even when I updated Moesia and then went back and updated the scripts.js.

Is there something new in WP that's preventing this from working? I'm totally confused. HALP

Here's your problem:

That height variable is calculated on page load and doesn't have anything subtracted from it. If you rewrite it as something like:

JavaScript code:

	var height = $(window).height() - 71;

It should work as expected.

# ¿ Sep 29, 2015 21:22

Depressing Box: Jun 27, 2010; Half-price sideshow.

React DnD has worked pretty well for me.

# ¿ Nov 16, 2015 14:27

Depressing Box: Jun 27, 2010; Half-price sideshow.

ModeSix posted:

Right, my usemin task is completing, but the browserSynch.reload is being called before it finishes.

When manually triggering a reload, the Browsersync docs recommend putting the browserSync.reload call in its own task (e.g. js-watch) that depends on the build task(s), then having gulp.watch() call js-watch. Gulp's task dependencies will make sure they run in sequence.

# ¿ Apr 9, 2016 21:32

Depressing Box: Jun 27, 2010; Half-price sideshow.

In addition to the resources already mentioned, I've gotten good use out of Color Hunt.

# ¿ Apr 11, 2016 15:22

Depressing Box: Jun 27, 2010; Half-price sideshow.

Skandranon posted:

That's an even fancier image... where did you get that?

That looks like Wappalyzer.

# ¿ Apr 20, 2016 20:36

Depressing Box: Jun 27, 2010; Half-price sideshow.

Julie And Candy posted:

Is Backbone still cool or what's the latest hipster js library to poo poo out a CRUD app and make me look cool to my bosses? Tia

I see a lot of AngularJS or React + Redux.

# ¿ May 1, 2016 04:44

Depressing Box: Jun 27, 2010; Half-price sideshow.

Ok, I just started using Swagger, and it seems like the best? I can use annotations to document the API directly in the code:

which are turned into interactive API docs:

and parsed by a JavaScript client, standardizing all my API calls:

Is anyone else using Swagger? Any advice? At this point I'm tempted to make it a requirement in all my future API-bearing projects.

# ¿ May 19, 2016 00:28

Depressing Box: Jun 27, 2010; Half-price sideshow.

Generally, I see things like searching/filtering handled in the query string. So something like filtering posts by tag would be GET /posts?tags=foo|bar, searching would be GET /posts?search="Lorem ipsum.", etc.

Depressing Box fucked around with this message at 20:24 on May 31, 2016

# ¿ May 31, 2016 20:20

Depressing Box: Jun 27, 2010; Half-price sideshow.

Pollyanna posted:

So should I just be handling tag search with nothing but a /tags endpoint, and the front-end doing the search/filter poo poo?

I'm probably overthinking this.

If you want assets filtered by multiple tags I think querying the /assets endpoint would make more sense. A lot of it boils down to:

Skandranon posted:

REST is like the Pirate Code. They are more guidelines than rules.

There's not a fixed solution like "tags always/never get an endpoint", it's more about building internally consistent APIs with a logical hierarchy. On that note, Apigee's Web API Design is a pretty good introduction to thinking about APIs. Again, these aren't unbreakable rules, just useful questions to ask along the way.

# ¿ May 31, 2016 22:46

Depressing Box: Jun 27, 2010; Half-price sideshow.

Pollyanna posted:

What's the most commonly accepted way to handle CSS/styling for a React app? The new project I'm on is going to use React for its front-end, so I want an easy and manageable way to style it - I'm no CSS wizard.

I've mostly used regular CSS (via SCSS) with BEM naming conventions and just put classNames on the components, with the occasional inline style for highly dynamic stuff.

If you need something more closely integrated, you could split your styles up into per-component files and use something like Webpack's style loader or extract text plugin to get them onto the page.

I've also heard positive things about Aphrodite, but I haven't had a chance to try it out yet.

EDIT: If you mean a front-end framework, The Fool's link looks pretty thorough, and I can personally vouch for React Bootstrap's usefulness when quickly slapping together a UI.

Depressing Box fucked around with this message at 19:03 on Jun 5, 2016

# ¿ Jun 5, 2016 18:58

Depressing Box: Jun 27, 2010; Half-price sideshow.

You could also lean more on CSS and write a style that hides all conditional elements, then show the elements that match the parent class:

CSS code:

.conditional {
  display: none;
}

.show-conditional--a .conditional--a,
.show-conditional--b .conditional--b,
.show-conditional--c .conditional--c {
  display: block;
}

Then just use JS to make the radio buttons toggle the class on a parent element:

code:

<div class="show-conditional--a">
    <p class="conditional conditional--a">Text A.</p>
    <p class="conditional conditional--b">Text B.</p>
    <p class="conditional conditional--c">Text C.</p>
    <p>Universal Text.</p>
    <p class="conditional conditional--a">Text A.</p>   
    <p class="conditional conditional--b">Text B.</p>
    <p class="conditional conditional--c">Text C.</p>
    <p>Universal Text.</p>
</div>

# ¿ Jul 12, 2016 00:24

Adbot: ADBOT LOVES YOU

# ¿ Apr 27, 2024 07:05

Depressing Box: Jun 27, 2010; Half-price sideshow.

FuriousAngle posted:

So close! I hate to ask for help again so soon but this is driving me nuts. My JS skills aren't quite up to snuff, apparently, and I'm having a hell of a time figuring out the IF statement's syntax (if I should even be using IF statements for what I'm doing).

Here's what I have so far. To simplify I just lumped the CSS in the main code. Can anyone spot what I'm doing wrong?
code:
[...]
<script>
            if (document.edition.txtA.checked == true) {
                .textA {
                    display:block;
                }
                .textB {
                    display: none;
                }
            }
            else if (document.edition.txtB.checked == true) {
                    .textB {
                        display:block;
                    }
                    
                    .textA {
                        display:none;
                    }
                }
        </script>
[...]

Mixing CSS and JS like that won't actually do anything. I'd recommend reading some introductory JavaScript tutorials to get familiar with how the language is structured (I've found Eloquent Javascript to be pretty straightforward, and it's free).

To your specific question, here's a JSFiddle demonstrating a possible solution, using jQuery since I don't know which browsers you're targeting. Notice how the major sections (controls, text) are grouped under divs with descriptive classes, making them easier to target with your styles and scripts.

Depressing Box fucked around with this message at 05:28 on Jul 12, 2016

# ¿ Jul 12, 2016 04:22

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread

«‹›2 »