The Web Design & Development Megathread

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

«‹›361 »

Gmaz: Apr 3, 2011; New DLC for Aoe2 is out: Dynasties of India

gmq posted:

Is there anything new in admin frameworks?

For Rails the administrate gem hits the sweet spot for me, you can still get the CRUD stuff quickly but it's also easier to extend and customize than ActiveAdmin.

Also I don't think that Rails is dying or anything, there's just less hype about it for sure.

# ? Apr 4, 2016 09:23

Adbot: ADBOT LOVES YOU

# ? May 10, 2024 10:40

ModeSix: Mar 14, 2009

Alright, I'm ready for my next Angular question.

I'm querying a list of items from MongoDB and getting their document id and displaying them as a list so I can select one and drop it into a wysywyg editor (think blog editor for end user).

I'm having a problem getting the ui-sref's to work properly.

Here is my state provider:

code:

    .state('app.adminstory', {
        url: 'admin/adminStory/:id',
        views: {
            'content@': {
                templateUrl: 'views/admin/adminStory.html',
                controller: 'AdminStoryController'
            }
        }
    })

And here is my html file:

code:

<div ng-repeat="story in stories">
            <a href="#/admin/adminStory/{{story.id}}">{{story.id}}</a> <<----- This works
            <br> Using ui-sref: <a ui-sref="app.adminstory/({ id: story.id })">{{story.id}}</a> 
 </div>

The error output to console is: Error: Could not resolve 'app.adminstory/' from state 'app.adminpanel'

When I manually create the link using a standard href it works perfectly. But I can't seem to find the proper way to construct the ui-sref.

Any tips about how to do this would be greatly appreciated.

edit:

Well I figured it out about a minute after I posted this. The '/'after app.adminstory was loving it up! Special note to self, don't put in a slash, angular will take care of it.

ModeSix fucked around with this message at 17:44 on Apr 5, 2016

# ? Apr 5, 2016 17:35

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

ModeSix posted:

Alright, I'm ready for my next Angular question.

<non TypeScript code>

Arrgh, why won't you convert, it burns my eyes!

# ? Apr 5, 2016 17:55

ModeSix: Mar 14, 2009

Skandranon posted:

Arrgh, why won't you convert, it burns my eyes!

I'm working on learning Typescript actually, so my eye burning will end soon. :v:

# ? Apr 5, 2016 18:22

fuf: Sep 12, 2004; haha

Is anyone else moving away from Mandrill because of the merge with Mailchimp? Any recommended alternatives?

I only use it to send emails from the dumb wordpress sites I host ("new user registered", "contact form submitted", etc.), so there's only a few hundred a month usually.

Right now I set up each site separately with a Mandrill WP plugin and have PHP mail disabled at the server level because I'm paranoid about the server getting hacked and sending out spam. But ideally I'd like to change this and set something up at the server level so I don't have to maintain all those separate plugins.

# ? Apr 6, 2016 10:45

Gmaz: Apr 3, 2011; New DLC for Aoe2 is out: Dynasties of India

Mailgun is a decent alternative.

# ? Apr 6, 2016 11:41

The Dave: Sep 9, 2003

I thought the Mandrill merge with Mail Chimp was just linking accounts, and everything under the hood remains the same?

# ? Apr 6, 2016 12:04

fuf: Sep 12, 2004; haha

The Dave posted:

I thought the Mandrill merge with Mail Chimp was just linking accounts, and everything under the hood remains the same?

Maybe but you need a paid Mailchimp account to keep using Mandrill. I only checked briefly but it looked like the cheapest you could do it was $30 per month ($20 for Mailchimp, $10 for Mandrill).

# ? Apr 6, 2016 13:12

The Dave: Sep 9, 2003

Oh we have both at work so I didn't realize this now raises costs for Mandrill-only users. Scummy.

# ? Apr 6, 2016 13:20

ModeSix: Mar 14, 2009

Here I am with more questions.

Firstly, what is a good resource for learning Typescript for someone who is fairly new at working with Angular? I do have an OK background in C#, so I assume this will help?

Next question, when building a REST API is it more common to use something like Loopback or to develop it fully from scratch?

# ? Apr 6, 2016 16:00

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

ModeSix posted:

Here I am with more questions.

Firstly, what is a good resource for learning Typescript for someone who is fairly new at working with Angular? I do have an OK background in C#, so I assume this will help?

Next question, when building a REST API is it more common to use something like Loopback or to develop it fully from scratch?

I would start with TodoMVC, you can compare/contrast the AngularJS with the AngularJS/TypeScript applications to get an idea on how they work together. Beyond that, there are not a lot of good resources. Your best bet is probably look at some Angular2/TypeScript documentation, and then find resources of "How to make your current AngularJS application easy to upgrade to Angular2", which would basically be "Use TypeScript and follow these idioms that match up with Angular2", which is also good advice if you are just looking for a good way to stay on Angular1.

You can also PM me, half of my day job now is coaching interns on how to do this exact thing.

# ? Apr 6, 2016 18:02

LargeHadron: May 19, 2009; They say, "you mean it's just sounds?" thinking that for something to just be a sound is to be useless, whereas I love sounds just as they are, and I have no need for them to be anything more than what they are.

I've done a decent amount of front- and back-end development with PHP, React, Node, etc., and now I have a contract to make a WordPress site for the first time. I don't "get" WordPress though.

I bought a theme and went through a convoluted process to install it, part of which involved importing an XML of "sample content". Now I have a page that generally looks neat but now I need to put my own content on it. The problem is, the template isn't very customizable via the WordPress interface. I can change the navbar links, edit blog posts, etc., but it looks like the vast majority of content, including HTML and CSS, came from the sample content XML I imported. Am I supposed to make my own XML file and import that, or am I missing something really obvious?

Sorry about the dumb question. WordPress blows.

# ? Apr 6, 2016 21:55

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

LargeHadron posted:

I've done a decent amount of front- and back-end development with PHP, React, Node, etc., and now I have a contract to make a WordPress site for the first time. I don't "get" WordPress though.

I bought a theme and went through a convoluted process to install it, part of which involved importing an XML of "sample content". Now I have a page that generally looks neat but now I need to put my own content on it. The problem is, the template isn't very customizable via the WordPress interface. I can change the navbar links, edit blog posts, etc., but it looks like the vast majority of content, including HTML and CSS, came from the sample content XML I imported. Am I supposed to make my own XML file and import that, or am I missing something really obvious?

Sorry about the dumb question. WordPress blows.

You need to create your own theme, then make custom pages / templates. There is a WordPress thread for those poor souls who have to work with it: http://forums.somethingawful.com/showthread.php?threadid=3161913

# ? Apr 6, 2016 21:58

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

To add to my reply earlier, this series is probably helpful, if you have a PluralSight account or want to try their free trial. I've not watched it myself, but John Papa is a good authority on Angular, TypeScript, and Angular2 patterns.

http://app.pluralsight.com/courses/play-by-play-angular-typescript-john-papa-christopher-martin

# ? Apr 6, 2016 21:59

LargeHadron: May 19, 2009; They say, "you mean it's just sounds?" thinking that for something to just be a sound is to be useless, whereas I love sounds just as they are, and I have no need for them to be anything more than what they are.

Lumpy posted:

You need to create your own theme, then make custom pages / templates. There is a WordPress thread for those poor souls who have to work with it: http://forums.somethingawful.com/showthread.php?threadid=3161913

Ah, thanks.

# ? Apr 6, 2016 22:03

lunar detritus: May 6, 2009

LargeHadron posted:

I've done a decent amount of front- and back-end development with PHP, React, Node, etc., and now I have a contract to make a WordPress site for the first time. I don't "get" WordPress though.

I bought a theme and went through a convoluted process to install it, part of which involved importing an XML of "sample content". Now I have a page that generally looks neat but now I need to put my own content on it. The problem is, the template isn't very customizable via the WordPress interface. I can change the navbar links, edit blog posts, etc., but it looks like the vast majority of content, including HTML and CSS, came from the sample content XML I imported. Am I supposed to make my own XML file and import that, or am I missing something really obvious?

Sorry about the dumb question. WordPress blows.

Installing a "premium" theme is about the worst thing you can do if you want a custom site. They tend to be convoluted and bloated pieces of poo poo (because that's what sells).

If you imported a custom XML of sample content and it affected the layout it means that a lot of crap is part of each page/post and the theme is using something like Divi or Visual Composer so you need to go to each page or post and edit it using the plugin's interface.

# ? Apr 6, 2016 22:06

GigaFuzz: Aug 10, 2009

LargeHadron posted:

I've done a decent amount of front- and back-end development with PHP, React, Node, etc., and now I have a contract to make a WordPress site for the first time. I don't "get" WordPress though.

I bought a theme and went through a convoluted process to install it, part of which involved importing an XML of "sample content". Now I have a page that generally looks neat but now I need to put my own content on it. The problem is, the template isn't very customizable via the WordPress interface. I can change the navbar links, edit blog posts, etc., but it looks like the vast majority of content, including HTML and CSS, came from the sample content XML I imported. Am I supposed to make my own XML file and import that, or am I missing something really obvious?

Sorry about the dumb question. WordPress blows.

The sample content was probably just some placeholder posts and pages, and likely wasn't actually necessary as part of the install.

Wordpress themes are usually customised using the Appearance > Customise menu option, or sometimes they'll add their own settings menu. How much control you get and what you can change depends on the theme.

If you want to make changes beyond that, you'll want to create a child-theme and create new files to override the ones you want to change. See https://codex.wordpress.org/Child_Themes for details on that.

# ? Apr 6, 2016 22:07

YO MAMA HEAD: Sep 11, 2007

My wife decided to leave her marketing job last week (for a number of reasons�our 5-month-old, bad commute, limited advancement opportunities). She's looking at sharpening some of her creative skills (Adobe) and learning some new ones to re-enter the workforce in 2017. What's the best way for absolute beginners to learn web design in 2016? I work full-stack (although without a heavy design component w/r/t aesthetics) but am self-taught and don't even know what order to introduce things. I imagine, though, that a video course on fundamental HTML/CSS/JS to start, then a scratch guide to git(hub), then moving quickly to preprocessors/front-end frameworks? Really torn between basics and state-of-the-art/best practices stuff�making my boy scout troop's site on an FTP connection in Notepad was a good introduction for me in middle school but seems completely counterproductive now.

# ? Apr 8, 2016 02:55

kedo: Nov 27, 2007

You've just defined front end web development, not web design. Sure she should have some of those skills if design is what she wants to do, but if she's serious about design she needs to study design theory, typography and UX.

# ? Apr 8, 2016 04:01

YO MAMA HEAD: Sep 11, 2007

Good point! I definitely suffer from having a very narrow point of view into the industry�which is why I know I'm such a poor match for figuring out what she should do. I should apologize to her for casting her as a less knowledgable version of me instead of someone who doesn't have background in development.

So the fields you mentioned are already areas she's studied and worked on in print/digital design (with the exception of UX). In terms of web basics, is a site like Codecademy something worth going through while she's catching back up on more general design topics?

# ? Apr 8, 2016 04:50

Kekekela: Oct 28, 2004

YO MAMA HEAD posted:

In terms of web basics, is a site like Codecademy something worth going through while she's catching back up on more general design topics?

I'd recommend freecodecamp.com

# ? Apr 8, 2016 11:40

fuf: Sep 12, 2004; haha

Gmaz posted:

Mailgun is a decent alternative.

This is great by the way, thanks.

# ? Apr 8, 2016 11:48

fuf: Sep 12, 2004; haha

nginx question: I'm trying to limit brute force attacks on wordpress by adding a "limit_req_zone" as per here: https://easyengine.io/tutorials/nginx/block-wp-login-php-bruteforce-attack/

I added this to to the top of the http block in nginx.conf:

code:

limit_req_zone $binary_remote_addr zone=fuf-request-limit:50m rate=2r/m;

and this to my wordpress.conf file (which gets included by each virtual host):

code:

location /wp-login.php {
    limit_req zone=fuf-request-limit burst=5;
    # below is normal php behaviour
    try_files $uri =404;
    fastcgi_split_path_info ^(.+\.php)(/.+)$;
    fastcgi_pass unix:/var/run/php5-fpm.sock;
    fastcgi_index index.php;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    fastcgi_intercept_errors on;
    include fastcgi_params;
  }

I tested it with ApacheBench (100 requests in about 10 seconds) but just got a normal 200 response to each request.

Any ideas why it isn't working?

Should I post nginx questions here or in the hosting thread or the linux thread?

# ? Apr 8, 2016 12:00

Impotence: Nov 8, 2010; Lipstick Apathy

did you `service nginx restart`? it looks like it should work

# ? Apr 8, 2016 12:21

The Dave: Sep 9, 2003

YO MAMA HEAD posted:

So the fields you mentioned are already areas she's studied and worked on in print/digital design (with the exception of UX).

I don't want to necessarily say your bias is showing again, but drat did you just brush away design.

I think the important question is does she want to code, or does she want to work on visuals? Yes you can do both but she should probably go into the direction of her passion. Also, does she have interest in interface design? That's more heavy on the UX side and involves how to research, conduct user studies, interviewing, information architecture, and a whole other bag of tricks past just Adobe. In 2016 designs are expected to know how to efficiently design multi-screen layouts and output them to prototypes rapidly. For me personally, that means organizing my dashboard's interface in one sketch file, exporting assets in to Invision to make clickable prototypes, and export to Zepelin to help with the design > dev handoff.

# ? Apr 8, 2016 12:35

YO MAMA HEAD: Sep 11, 2007

definitely biased but I wasn't trying to brush away design necessarily. I meant there are a couple of stages that seem useful for her�general design topics like brushing off her Robert Bringhurst and other books from school; getting back up to speed with Adobe, which could lead in directions that could completely exclude web stuff; gaining some basic familiarity with how web design works (not necessarily a ton of coding but just what HTML/JS/CSS do); "actual web design", which it seems I have a poor misunderstanding of. I've been reading whatever looked interesting on sidebar.io for a year or two now but never really gained an appreciation for different roles, workflows, and so on�my (3-person, mostly prototypic/academic) shop is still stuck with Adobe and fully realized HTML/CSS/JS as our only two points on the road of design. Thanks for detailing some of what you do!

# ? Apr 8, 2016 13:40

ModeSix: Mar 14, 2009

Kekekela posted:

I'd recommend freecodecamp.com

This is actually pretty good, it starts of fairly basic and then builds from there. Recommended.

# ? Apr 8, 2016 17:50

kedo: Nov 27, 2007

redacted

kedo fucked around with this message at 03:19 on Apr 21, 2016

# ? Apr 8, 2016 21:47

Odette: Mar 19, 2011

Kekekela posted:

I'd recommend freecodecamp.com

ModeSix posted:

This is actually pretty good, it starts of fairly basic and then builds from there. Recommended.

After having a quick glance, they seem to place a lot of emphasis on MongoDB. I would recommend learning SQL as well.

# ? Apr 8, 2016 23:58

ModeSix: Mar 14, 2009

Odette posted:

After having a quick glance, they seem to place a lot of emphasis on MongoDB. I would recommend learning SQL as well.

It's good to know many thing yes, but this place literally walks you in from step 1, displaying an image, right up through bootstrap, node, angular, etc., and it's really extensive.

On another note, setting up a gruntfile is a pain in the rear end. At least I should only have to do it once and just use my overall project configuration as a basic scaffold for future projects.

edit: Speaking about grunt tasks, can someone give me a headsup on how I can get the grunt tasks concat to automatically just read the file list out of the html rather than having to specify things in my src in the gruntfile?

Or am I stupid and this is something that automagically happens when I set it up as so:

code:

    <!-- build:js js/vendor.js -->
    <script src="lib/jquery/dist/jquery.js"></script>
    <script src="lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="lib/angular/angular.js"></script>
    <script src="lib/angular-resource/angular-resource.js"></script>
    <script src="lib/lodash/dist/lodash.min.js"></script>
    <script src="lib/restangular/dist/restangular.js"></script>
    <script src="js/lb-services.js"></script>
    <!-- endbuild -->

Tips, information and advice would be appreciated. :downs:

Edit2: Apparently concat and filerev takes care of that for me. It appears I have my gruntfile working for builds!

Now to incorporate Typescript/watching into it.

I'm so glad I'm such a loving nerd I have nothing better to do than configure Grunt on a Friday night.

ModeSix fucked around with this message at 02:33 on Apr 9, 2016

# ? Apr 9, 2016 01:15

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

ModeSix posted:

It's good to know many thing yes, but this place literally walks you in from step 1, displaying an image, right up through bootstrap, node, angular, etc., and it's really extensive.

On another note, setting up a gruntfile is a pain in the rear end. At least I should only have to do it once and just use my overall project configuration as a basic scaffold for future projects.

edit: Speaking about grunt tasks, can someone give me a headsup on how I can get the grunt tasks concat to automatically just read the file list out of the html rather than having to specify things in my src in the gruntfile?

Or am I stupid and this is something that automagically happens when I set it up as so:
code:
    
    <script src="lib/jquery/dist/jquery.js"></script>
    <script src="lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="lib/angular/angular.js"></script>
    <script src="lib/angular-resource/angular-resource.js"></script>
    <script src="lib/lodash/dist/lodash.min.js"></script>
    <script src="lib/restangular/dist/restangular.js"></script>
    <script src="js/lb-services.js"></script>
    
Tips, information and advice would be appreciated.

Edit2: Apparently concat and filerev takes care of that for me. It appears I have my gruntfile working for builds!

Now to incorporate Typescript/watching into it.

I'm so glad I'm such a loving nerd I have nothing better to do than configure Grunt on a Friday night.

The reason you find setting up a gruntfile so annoying is because grunt is crap. Use Gulp instead.

Also, reading the load order in grunt from your HTML is backwards. You should have grunt place the script tags INTO your HTML. Or better, concatenate all the files into one big JS bundle, and then you just need one script tag.

# ? Apr 9, 2016 02:51

ModeSix: Mar 14, 2009

Skandranon posted:

The reason you find setting up a gruntfile so annoying is because grunt is crap. Use Gulp instead.

Also, reading the load order in grunt from your HTML is backwards. You should have grunt place the script tags INTO your HTML. Or better, concatenate all the files into one big JS bundle, and then you just need one script tag.

Yeah when it generates the dist version it drops all the js and css files into bundles and minify/uglify's it, this is just for the development. My final dist output is like this:

code:

<script src="js/vendor.7ee9f7ed1382056cadb3.js"></script>
<script src="js/scripts.9fddb93a79a5b5c44c24.js"></script>

Those are bundles which contain all the javascript, but I want to keep vendor and my own written stuff separate.

I considered gulp, but I think I like grunt more, something about it just clicked for me. I can't get my head around piping in Gulp.

Also, is anyone else getting a loving capcha whenever you post/edit a post?

ModeSix fucked around with this message at 03:16 on Apr 9, 2016

# ? Apr 9, 2016 03:13

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

ModeSix posted:

Yeah when it generates the dist version it drops all the js and css files into bundles and minify/uglify's it, this is just for the development. My final dist output is like this:
code:
<script src="js/vendor.7ee9f7ed1382056cadb3.js"></script>
<script src="js/scripts.9fddb93a79a5b5c44c24.js"></script>
Those are bundles which contain all the javascript, but I want to keep vendor and my own written stuff separate.

I considered gulp, but I think I like grunt more, something about it just clicked for me. I can't get my head around piping in Gulp.

Also, is anyone else getting a loving capcha whenever you post/edit a post?

You should really give Gulp another chance, once you get piping it is so much better. No more dumb temp files for each step, way faster build times, etc.

Also, if you already have a bundling step, why not use that for debug? What are you hoping to gain by having those individual script tags in dev?

# ? Apr 9, 2016 03:49

ModeSix: Mar 14, 2009

Skandranon posted:

You should really give Gulp another chance, once you get piping it is so much better. No more dumb temp files for each step, way faster build times, etc.

Also, if you already have a bundling step, why not use that for debug? What are you hoping to gain by having those individual script tags in dev?

Having the individual tags in dev helps me keep track of exactly what I am using in the project at a quick glance at my index.html file. It helps me stay organized, or at least remember to include my controllers, etc.

Ok so Typescript stuff.

Can someone explain to me what the difference between Typings, TSC and nTypings is?

Which should I be using in my build workflow to transpile .ts files?

Which do I need in the build flow?

edit: I found a thing called nTypings which apparently has superseded TSC.
https://www.npmjs.com/package/ntypescript

ModeSix fucked around with this message at 04:49 on Apr 9, 2016

# ? Apr 9, 2016 04:44

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

ModeSix posted:

edit: I found a thing called nTypings which apparently has superseded TSC.
https://www.npmjs.com/package/ntypescript

oh for the love of god

edit: I mean it's good that people are putting the effort in, but it miffs me how quickly the Javascript ecosystem moves on to new poo poo

# ? Apr 9, 2016 05:30

ModeSix: Mar 14, 2009

Maluco Marinero posted:

oh for the love of god

edit: I mean it's good that people are putting the effort in, but it miffs me how quickly the Javascript ecosystem moves on to new poo poo

It's by the same guy that made TSC, he's just depreciated TSC in favour of this new thing.

# ? Apr 9, 2016 05:34

Jabor: Jul 16, 2010; #1 Loser at SpaceChem

ModeSix posted:

It's by the same guy that made TSC, he's just depreciated TSC in favour of this new thing.

Say how long is he going to support this one before deprecating it in favour of something else?

# ? Apr 9, 2016 06:20

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

Jabor posted:

Say how long is he going to support this one before deprecating it in favour of something else?

As long as it took you to get comfortable with it and integrate it into your workflow.

# ? Apr 9, 2016 13:25

Blinkz0rz: May 27, 2001; MY CONTEMPT FOR MY OWN EMPLOYEES IS ONLY MATCHED BY MY LOVE FOR TOM BRADY'S SWEATY MAGA BALLS

ModeSix posted:

edit: I found a thing called nTypings which apparently has superseded TSC.
https://www.npmjs.com/package/ntypescript

Jesus gently caress those version strings

# ? Apr 9, 2016 15:37

Adbot: ADBOT LOVES YOU

# ? May 10, 2024 10:40

ModeSix: Mar 14, 2009

ModeSix posted:

Ok so Typescript stuff.

Can someone explain to me what the difference between Typings, TSC and nTypings is?

Which should I be using in my build workflow to transpile .ts files?

Which do I need in the build flow?

edit: I found a thing called nTypings which apparently has superseded TSC.
https://www.npmjs.com/package/ntypescript

So back to my original question.

Do they all do the same thing and it's a matter of choice which to use?

# ? Apr 9, 2016 17:33

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

«‹›361 »