The Web Design & Development Megathread

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

«‹›361 »

Opulent Ceremony: Feb 22, 2012

Thermopyle posted:

You guys are going to be ecstatic when you try React.

(or maybe not, but it's pretty fuckin' sweet)

I thought React wasn't about two-way data binding, am I wrong?

# ? Oct 1, 2014 00:15

Adbot: ADBOT LOVES YOU

# ? May 9, 2024 11:00

prom candy: Dec 16, 2005; Only I may dance

Thermopyle posted:

Being fast. The way it makes you think about your apps. It's conceptually small, so easy to understand. Documentation.

People keep saying it's really only about the view layer though, how does that translate into building a more traditional web application? Does it concern itself with pulling data from an API at all? Saving changes to a database?

# ? Oct 1, 2014 00:51

Kobayashi: Aug 13, 2004; by Nyc_Tattoo

I love Ember, and while I'm by no means an engineer, I enjoyed these two presentations from Ember core team member Alex Matchneer AngularJS from an Ember.js perspective and React from an Ember.js perspective.

# ? Oct 1, 2014 00:51

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

React is so simple you should just go do the tutorial and read the docs.

It certainly won't do everything a heavier framework does out of the box.

Remember that you build and think about apps differently with React and if you need to, you can use it with other libraries.

# ? Oct 1, 2014 01:15

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

calusari posted:

Sorry, I'm an idiot

code:

 
var page_html = JSON.stringify('{{ webpage.html_content }}');

$.ajax({
                url: '/my_url',
                dataType: "json",
                type: 'POST',
                data: {
                       page_html: page_html,
                       csrfmiddlewaretoken: '{{ csrf_token }}'
                },
                success: function( json ) {
                       // blah blah
                }
});

yields

code:


var page_html=JSON.stringify('<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
');

which is an unterminated string literal

Right. You need to stringify just before you poo poo it out. Your template library might have a built-in or easily-available filter you can use, like var page_html = {{ javascript_escape(webpage.html_content) }}.

# ? Oct 1, 2014 02:26

My Rhythmic Crotch: Jan 13, 2011

I ran screaming from Ember when I saw it was like 500kB minified. Using knockout now, seems to be okay and it's definitely much smaller.

Edit: two problems: traditional table sorting doesn't work because it cannot access the cell contents like it normally would (so you get to implement your own table sorting or I guess find one that works); and I wanted to do a save-to-pdf thing using the rendered html. Again, getting the rendered html is so far eluding me. I can kinda get some of it, but not everything. Neither are showstoppers though.

My Rhythmic Crotch fucked around with this message at 04:14 on Oct 1, 2014

# ? Oct 1, 2014 04:09

fuf: Sep 12, 2004; haha

caiman posted:

I make relatively simple websites with little user interaction beyond link clicking, searching, and filling out contact forms. Can someone explain to me how a framework like Angular/Ember/React would benefit me, if at all?

They wouldn't. I made the mistake of insisting on an elaborate framework to make a few basic sites because I thought it would help me learn, but it was counterproductive. Wait until you have something more app-like.
I do use a JS router though (https://github.com/flatiron/director, credit to whichever goon recommended this to me a while ago) for that nice, no-page-refresh feeling.

Also no one has linked to this thread yet:
http://forums.somethingawful.com/showthread.php?threadid=3571035

# ? Oct 1, 2014 09:54

Pollyanna: Mar 5, 2005; Milk's on them.

Thermopyle posted:

React is so simple you should just go do the tutorial and read the docs.

It certainly won't do everything a heavier framework does out of the box.

Remember that you build and think about apps differently with React and if you need to, you can use it with other libraries.

As far as I can tell, React does not specialize in proving an MVC framework. It seems like it focuses on alleviating the complexity of creating a View for your data, whatever that data happens to be. React is actually so divorced from the traditional MVC setup that I wouldn't call it MVC at all; it displays data, but does not work with data. I feel like you may need something to accompany it, like Backbone or somesuch to fulfill the M-C part.

# ? Oct 1, 2014 18:52

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Pollyanna posted:

As far as I can tell, React does not specialize in proving an MVC framework. It seems like it focuses on alleviating the complexity of creating a View for your data, whatever that data happens to be. React is actually so divorced from the traditional MVC setup that I wouldn't call it MVC at all; it displays data, but does not work with data. I feel like you may need something to accompany it, like Backbone or somesuch to fulfill the M-C part.

That's pretty much what the React homepage says, so I think many would agree with your assessment.

The React Homepage posted:

JUST THE UI

Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.

# ? Oct 1, 2014 18:59

Pollyanna: Mar 5, 2005; Milk's on them.

Lumpy posted:

That's pretty much what the React homepage says, so I think many would agree with your assessment.

Yup. I keep looking for something like Ember that does two-way binding, but also is simple enough to understand at a beginner level AND is relatively light. Maybe I should think up a blind, light M-C framework myself...

# ? Oct 1, 2014 19:03

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

Pollyanna posted:

As far as I can tell, React does not specialize in proving an MVC framework. It seems like it focuses on alleviating the complexity of creating a View for your data, whatever that data happens to be. React is actually so divorced from the traditional MVC setup that I wouldn't call it MVC at all; it displays data, but does not work with data. I feel like you may need something to accompany it, like Backbone or somesuch to fulfill the M-C part.

That's what React is, so yes.

However, for many MVC-library-using projects, the common MVC frameworks are overkill.

# ? Oct 1, 2014 19:10

calusari: Apr 18, 2013; It's mechanical. Seems to come at regular intervals.

ahh i understand now, thanks pokeyman.

# ? Oct 1, 2014 20:21

My Rhythmic Crotch: Jan 13, 2011

caiman posted:

I make relatively simple websites with little user interaction beyond link clicking, searching, and filling out contact forms. Can someone explain to me how a framework like Angular/Ember/React would benefit me, if at all?

Just thought I would expand on the answer already given:

If you need to build a page with a lot of click-to-edit type stuff, or find yourself with a tangled mess of "get div contents, do logic, save to server, render div contents again" then you are probably going to want to check these frameworks out. They provide helpful shortcuts for the developer by essentially binding your data to an HTML object. But there's no such thing as a free lunch. Possible downsides include: reasoning about the logic of the data binding can get pretty mind boggling; performance hits due to the underlying magic of the data binding; and of course, now you have one more dependency which has to be downloaded.

# ? Oct 1, 2014 22:27

Spatulater bro!: Aug 19, 2003; Punch! Punch! Punch!

Thanks for all the replies (re: JS frameworks for static sites). Now let me ask the same question again, only replacing Ember/Angular/React/etc. with Mustache/Underscore/etc. Will my simple site benefit from using a templating engine? Or are those also just for dynamic sites?

# ? Oct 2, 2014 03:06

My Rhythmic Crotch: Jan 13, 2011

Things like Mustache/ICanHaz/etc are on the slippery slope in my opinion. They are great when you need to render a table, list, or other content based on some json that you get from an ajax call. And if that's all you are doing (read only) you will probably be just fine. It is when you start developing complex "read, modify, save to server, render template again" type logic that you are going to want to move up to something a little more powerful. Some people are just fine with spaghetti code and can live without Angular/Knockout/etc though.

# ? Oct 2, 2014 04:40

fuf: Sep 12, 2004; haha

How does buying web fonts work? I've only used google fonts before where you just link directly to the font on google. If I buy this:
http://www.fonts.com/font/monotype/rockwell?QueryFontType=Web#product_top
How do I include it on my site? Presumably I need to auth with their server somehow? I want to use it on a client site with an as-yet-undetermined url and I dunno if I should buy it or get the client to buy it or what.

bonus question: any free fonts that look kinda like Rockwell?

fuf fucked around with this message at 16:59 on Oct 2, 2014

# ? Oct 2, 2014 16:50

kiwid: Sep 30, 2013

Anyone here familiar with Adobe Illustrator CS6?

I've been given a logo in vector format. I need to export this logo as a 180px height png file. Normally I would just save for web and pick the size, uncheck "Clip to Artboard" and I'm done. However, I need to have a few pixel padding to the exported image. What I'm now doing is save for web and choosing 176px high, then opening the exported image into Photoshop and expanding the canvas. Is there a way to skip the Photoshop step and just export the logo from Illustrator with the 2px padding?

# ? Oct 2, 2014 18:35

Alligator: Jun 10, 2009; LOCK AND LOAF

fuf posted:

How does buying web fonts work? I've only used google fonts before where you just link directly to the font on google. If I buy this:
http://www.fonts.com/font/monotype/rockwell?QueryFontType=Web#product_top
How do I include it on my site? Presumably I need to auth with their server somehow? I want to use it on a client site with an as-yet-undetermined url and I dunno if I should buy it or get the client to buy it or what.

bonus question: any free fonts that look kinda like Rockwell?

Arvo? https://www.google.com/fonts/specimen/Arvo

There's lotsa slab serifs that look kinda like Rockwell.

# ? Oct 2, 2014 18:37

The Dave: Sep 9, 2003

kiwid posted:

Anyone here familiar with Adobe Illustrator CS6?

I've been given a logo in vector format. I need to export this logo as a 180px height png file. Normally I would just save for web and pick the size, uncheck "Clip to Artboard" and I'm done. However, I need to have a few pixel padding to the exported image. What I'm now doing is save for web and choosing 176px high, then opening the exported image into Photoshop and expanding the canvas. Is there a way to skip the Photoshop step and just export the logo from Illustrator with the 2px padding?

So you can make an artboard that is 180px tall, resize the logo to be 176px high, center it, and save for web without unchecking 'clip to artboard'.

# ? Oct 2, 2014 19:50

kedo: Nov 27, 2007

fuf posted:

How does buying web fonts work? I've only used google fonts before where you just link directly to the font on google. If I buy this:
http://www.fonts.com/font/monotype/rockwell?QueryFontType=Web#product_top
How do I include it on my site? Presumably I need to auth with their server somehow? I want to use it on a client site with an as-yet-undetermined url and I dunno if I should buy it or get the client to buy it or what.

I use Fonts.com for Avenir on my site. It works like this:

� Register an account and buy a subscription for a certain # of views. Anything below the "Standard" plan is sorta worthless imo.
��Choose the fonts you want to use and add them to a project on the fonts.com site
��Set which URLs are allowed on the project (I usually do localhost and *.example.com)
� Put either the CSS or JS snippet they give you for that project in your code which will load the fonts from their CDN. Or self host if you paid for it and would prefer to do that.

Definitely get the client to set up an account or else you'll be paying for it forever. Just have them give you the login credentials so you can set everything up once they've paid.

kedo fucked around with this message at 20:01 on Oct 2, 2014

# ? Oct 2, 2014 19:57

fuf: Sep 12, 2004; haha

Awesome, that makes sense, thanks buddy.

# ? Oct 2, 2014 20:16

Boosh!: Apr 12, 2002; Oven Wrangler

I have a client that plans an annual conference with room for 150 visitors (very low volume).

Is there a service or an easy out of the box solution that can manage the purchasing of tickets? I looked into http://www.tickettailor.com/ but they charge a monthly fee which wouldn't be preferable because the sale window is only about 2-3 months. At worst, I'll go the PayPal route.

Boosh! fucked around with this message at 22:34 on Oct 2, 2014

# ? Oct 2, 2014 22:29

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

Boosh! posted:

I have a client that plans an annual conference with room for 150 visitors (very low volume).

Is there a service or an easy out of the box solution that can manage the purchasing of tickets? I looked into http://www.tickettailor.com/ but they charge a monthly fee which wouldn't be preferable because the sale window is only about 2-3 months. At worst, I'll go the PayPal route.

I've bought tickets for small events through this service: http://www.brownpapertickets.com/

I can't speak to actually hosting an event through them, but the purchasing experience was pleasant enough

# ? Oct 3, 2014 02:44

putin is a cunt: Apr 5, 2007; BOY DO I SURE ENJOY TRASH. THERE'S NOTHING MORE I LOVE THAN TO SIT DOWN IN FRONT OF THE BIG SCREEN AND EAT A BIIIIG STEAMY BOWL OF SHIT. WARNER BROS CAN COME OVER TO MY HOUSE AND ASSFUCK MY MOM WHILE I WATCH AND I WOULD CERTIFY IT FRESH, NO QUESTION

It seems like there's a whole lot to know about fonts these days, now that web fonts are commonplace. Every now and again I see a nice font and inspect the element to see what it is, and I find a bunch of obscure CSS classes that help the font to display nicely. As an example, I recently stumbled across the text-rendering property. I also just today found font-feature-settings in use on the Typekit blog.

I just wonder are there any good sites out there covering these kinds of developments and features? I'd love to keep up with this sort of thing if I can as I've really started to get a real appreciation for beautiful typography and I'd love to know some of the tricks and tips that can be used to help with this sort of thing. Obviously if I already discover the feature somewhere I can Google it, but I'm hoping for somewhere that might remove that step where I have to stumble upon the feature.

# ? Oct 3, 2014 07:20

Griffith86: Jun 19, 2008

kedo posted:

I use Fonts.com for Avenir on my site. It works like this:

� Register an account and buy a subscription for a certain # of views. Anything below the "Standard" plan is sorta worthless imo.
��Choose the fonts you want to use and add them to a project on the fonts.com site
��Set which URLs are allowed on the project (I usually do localhost and *.example.com)
� Put either the CSS or JS snippet they give you for that project in your code which will load the fonts from their CDN. Or self host if you paid for it and would prefer to do that.

Definitely get the client to set up an account or else you'll be paying for it forever. Just have them give you the login credentials so you can set everything up once they've paid.

Also keep in mind with fonts from Fonts.com (I believe Typekit is the same as well), if you have to support IE8 - the JS injection method won't work.

# ? Oct 3, 2014 12:58

pipes!: Jul 10, 2001; Nap Ghost

Griffith86 posted:

Also keep in mind with fonts from Fonts.com (I believe Typekit is the same as well), if you have to support IE8 - the JS injection method won't work.

Eh, just have bulletproof fallbacks in your font stack declarations and don't sweat it.

# ? Oct 3, 2014 16:36

Withnail: Feb 11, 2004

Anyone know what IIS setting (I assume it's IIS) would send a 401 for an httpwebrequest (works fine in IE). The same request works fine to our dev server which also uses ssl and only allows windows authentication.

Code looks like this:

code:

            var url = new Uri("https://productionserver);
            var req = (System.Net.HttpWebRequest)System.Net.WebRequest.Create(url);
            req.AuthenticationLevel = System.Net.Security.AuthenticationLevel.MutualAuthRequested;
            req.AllowAutoRedirect = true;
            req.CookieContainer = cookieContainer;
            req.Credentials = CredentialCache.DefaultCredentials;
            ServicePointManager.ServerCertificateValidationCallback += new System.Net.Security.RemoteCertificateValidationCallback
(ValidateServerCertificate);

# ? Oct 3, 2014 19:48

My Rhythmic Crotch: Jan 13, 2011

I hate the way tables behave in Bootstrap. As you are resizing the window horizontally, the table width jumps in increments and does not make good use of the available space.

# ? Oct 4, 2014 18:35

The Dave: Sep 9, 2003

My Rhythmic Crotch posted:

I hate the way tables behave in Bootstrap. As you are resizing the window horizontally, the table width jumps in increments and does not make good use of the available space.

What kind of container / column is the table in? Can you show us the page?

# ? Oct 4, 2014 18:46

My Rhythmic Crotch: Jan 13, 2011

http://jsfiddle.net/z3cv5caL/4/

It's in a col-sm-9. I have messed around with containing it in just about everything, doesn't seem to matter.

My Rhythmic Crotch fucked around with this message at 19:35 on Oct 4, 2014

# ? Oct 4, 2014 19:32

The Dave: Sep 9, 2003

The jumping is from the breakpoints. If you don't want the jumping you can put it in a .container-fluid. You also have mismatched columns in your row, when exactly do you want them to stack? Or do you never want them to stack?

Check this out, never stacks, doesn't jump, and I threw in some responsive numbers for good measure:
http://jsfiddle.net/umy3b64h/

# ? Oct 5, 2014 02:15

My Rhythmic Crotch: Jan 13, 2011

The mismatched columns were a typo. But yes, the issue is the breakpoints (not the tables at all, duh!). Thanks for taking a look at it!

# ? Oct 5, 2014 02:19

Ahz: Jun 17, 2001; PUT MY CART BACK? I'M BETTER THAN THAT AND YOU! WHERE IS MY BUTLER?!

I'm just learning the Bootstrap grid now and was wondering if there is a really comprehensive page / demo of all the variations? I haven't delved too deep in, but it's mostly the combinations of xs/xm/md/lg I worry about at various breakpoints.

Ahz fucked around with this message at 05:44 on Oct 5, 2014

# ? Oct 5, 2014 05:42

Analytic Engine: May 18, 2009; not the analytical engine

I'm having trouble supporting the SVG foreignObject element across multiple browsers and I'd appreciate the hell out of some advice.

My captions are divs containing h2 and p tags while the nodes they're attached to are SVG g elements.

As you can see this works great on Chrome, but there's awful tearing in Safari and missing stuff in Firefox.

# ? Oct 5, 2014 22:53

Scaramouche: Mar 26, 2001; SPACE FACE! SPACE FACE!

Withnail posted:

code:

            var url = new Uri("https://productionserver);
            var req = (System.Net.HttpWebRequest)System.Net.WebRequest.Create(url);
            req.AuthenticationLevel = System.Net.Security.AuthenticationLevel.MutualAuthRequested;
            req.AllowAutoRedirect = true;
            req.CookieContainer = cookieContainer;
            req.Credentials = CredentialCache.DefaultCredentials;
            ServicePointManager.ServerCertificateValidationCallback += new System.Net.Security.RemoteCertificateValidationCallback
(ValidateServerCertificate);

I don't know, but you might be better off asking in the .NET thread.

# ? Oct 6, 2014 00:52

Wungus: Mar 5, 2004

Is it bad practice to use angular and jquery in the same page? I'm putting together a portfolio for someone, and the jquery-based navigation is solid, but I think angular would make loading, filling, and handling content nicer. Is it a bad idea to combine the two? I know that what I want to do would be really basic Angular, and I could probably just rewrite the content fill for loops that I want out of Angular in jquery, but... why should I when what I want already exists? If it's lovely practice, or if I'm setting myself up for a headache, I'd rather not spend a couple hours reworking my HTML and navigation scripts to hack Angular in... but if it's fine, I'm getting started on that straight away.

# ? Oct 6, 2014 16:55

My Rhythmic Crotch: Jan 13, 2011

People do it, even though it's sort of frowned-upon in the Angular docs. I have not tried it myself, but there is a lot of discussion on stackoverflow about this very thing.

# ? Oct 6, 2014 19:38

Opulent Ceremony: Feb 22, 2012

I thought using jQuery in an Angular controller was the really frowned-upon thing. jQuery is good for manipulating the DOM, and the Angular way was to put any of that into a directive so as not to clutter controllers with stuff that isn't about manipulating the view-model. Isn't the whole point of angular.element to be an angular-native API potentially backed by the full jQuery library?

# ? Oct 7, 2014 00:35

Skiant: Mar 10, 2013

Opulent Ceremony posted:

I thought using jQuery in an Angular controller was the really frowned-upon thing. jQuery is good for manipulating the DOM, and the Angular way was to put any of that into a directive so as not to clutter controllers with stuff that isn't about manipulating the view-model. Isn't the whole point of angular.element to be an angular-native API potentially backed by the full jQuery library?

Yep, angular.element is using jqlite when jQuery isn't available and fallback to the full jQuery API if it's available in your page.
Not to mention the vast amount of directives you can find over the Internet relying on jQuery.

# ? Oct 7, 2014 07:23

Adbot: ADBOT LOVES YOU

# ? May 9, 2024 11:00

v1nce: Sep 19, 2004; Plant your brassicas in may and cover them in mulch.

What Skiant said, jQuery and Angular working together in perfect harmony is a common practice. jQuery is largely for DOM manipulation, while Angular provides an application framework. Two tools, two distinct jobs.

Where it gets fuzzy and people get angry is how you use them. As Opulent Ceremony said, you're supposed to not have DOM-manipulation stuff in your controllers, but rather do anything DOM-related in a Directive, which can then be tied to an element/attribute/whatever and keep your application-side code clean.

Directives will throw you for a loop on first approach, but once you've got the hang of "getting poo poo done" it becomes so much more reliable and reusable to build a directive and run your jQuery out of it's link/controller than it is to script-dump and tie everything together with class names.

Notice I did not say it would be quicker. It will never be quicker. But you might hate yourself that little bit less when you need to refactor or maintain your code.

# ? Oct 7, 2014 11:09

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

«‹›361 »