The Web Design & Development Megathread

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

«‹›361 »

ModeSix: Mar 14, 2009

Since everyone here said go with gulp, I have.

Now I have a question about browser-sync reloading. Here is my current gulp tasks for watch and browser-sync:

code:

gulp.task('watch',['browser-sync'], function() {
    gulp.watch(['./client/js/**/*.js', './client/**/*.html','!./client/lib/**','!./client/js/lb-services.js'],['usemin']);
});

gulp.task('browser-sync', ['default'], function() {
    var files = [
        'dist/**/*'
    ];
    browserSync.init(files, {
        server: {
            baseDir: 'dist',
            index: 'index.html'
        }
    });
    
    gulp.watch(['dist/**']).on('change', browserSync.reload)
});

The problem I am having is the browserSync.reload gets called before the usemin task in watch is finished, so I end up having to manually reload my browser to see all the changes.

How can I defer the on change task to not fire until my usemin task is completed?

# ? Apr 9, 2016 19:37

Adbot: ADBOT LOVES YOU

# ? May 8, 2024 06:32

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

ModeSix posted:

Since everyone here said go with gulp, I have.

Now I have a question about browser-sync reloading. Here is my current gulp tasks for watch and browser-sync:
code:
gulp.task('watch',['browser-sync'], function() {
    gulp.watch(['./client/js/**/*.js', './client/**/*.html','!./client/lib/**','!./client/js/lb-services.js'],['usemin']);
});

gulp.task('browser-sync', ['default'], function() {
    var files = [
        'dist/**/*'
    ];
    browserSync.init(files, {
        server: {
            baseDir: 'dist',
            index: 'index.html'
        }
    });
    
    gulp.watch(['dist/**']).on('change', browserSync.reload)
});
The problem I am having is the browserSync.reload gets called before the usemin task in watch is finished, so I end up having to manually reload my browser to see all the changes.

How can I defer the on change task to not fire until my usemin task is completed?

You didn't post your usemin task, but your gulp tasks should actually be returning the streams they create, this is how other parts are able to properly defer action until a task is done.

Here is a compile LESS & minify task. Note it chains the pipes, and returns the end result.

code:

    return gulp.src(folders.src + "css/main.less")
        .pipe(less({ paths: [ path.join(__dirname, "less", "includes") ] })) 
        .pipe(minifyCss({ advanced: false, compatability: "*" })) 
        .pipe(gulp.dest(output.getFolder() + "css/"));

# ? Apr 9, 2016 19:44

ModeSix: Mar 14, 2009

Skandranon posted:

You didn't post your usemin task, but your gulp tasks should actually be returning the streams they create, this is how other parts are able to properly defer action until a task is done.

Here is a compile LESS & minify task. Note it chains the pipes, and returns the end result.
code:
    return gulp.src(folders.src + "css/main.less")
        .pipe(less({ paths: [ path.join(__dirname, "less", "includes") ] })) 
        .pipe(minifyCss({ advanced: false, compatability: "*" })) 
        .pipe(gulp.dest(output.getFolder() + "css/"));   

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

My usemin task is as follows:

code:

gulp.task('usemin',['jshint'], function() {
    return gulp.src(['./client/**/*.html','!./client/lib/**/*.html'])
        .pipe(usemin({
            css:[minifycss(),rev()],
            js: [ngannotate(),uglify(),rev()]
        }))
        .pipe(gulp.dest('dist/'));
});

# ? Apr 9, 2016 21:07

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

ModeSix: Mar 14, 2009

Depressing Box posted:

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.

Thanks for this! I get it now.

# ? Apr 9, 2016 21:42

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.

What do people here recommend for managing CSS with React? I want to modularize my CSS so I'm not just heaping rules into a single styles.css. In general I don't really like inline CSS either, but I do want to be able to conditionally style my React components.

I've started looking into a Webpack loader (I think it compiles separate CSS files into the bundled JS but can be configured to spit it all out into a bundled CSS) that includes some neat stuff like autoprefixing and precss. I'd still have to do conditional styling inline but I can probably live with that. Anyone got a better solution?

# ? Apr 9, 2016 21:49

bartkusa: Sep 25, 2005; Air, Fire, Earth, Hope

LargeHadron posted:

What do people here recommend for managing CSS with React? I want to modularize my CSS so I'm not just heaping rules into a single styles.css. In general I don't really like inline CSS either, but I do want to be able to conditionally style my React components.

I've started looking into a Webpack loader (I think it compiles separate CSS files into the bundled JS but can be configured to spit it all out into a bundled CSS) that includes some neat stuff like autoprefixing and precss. I'd still have to do conditional styling inline but I can probably live with that. Anyone got a better solution?

Webpack lets you declare CSS dependencies from JS files, which is amazing.

Instead of conditional inline styles, you could have conditionally applied classes, defined in CSS files.

You could also store common utility classes in their own CSS files, instead of a miles-of-styles file.

# ? Apr 9, 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.

bartkusa posted:

Webpack lets you declare CSS dependencies from JS files, which is amazing.

Instead of conditional inline styles, you could have conditionally applied classes, defined in CSS files.

You could also store common utility classes in their own CSS files, instead of a miles-of-styles file.

Yeah, the more I'm reading on this the more I'm sold on it. Thanks!

# ? Apr 9, 2016 22:03

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.

bartkusa posted:

Webpack lets you declare CSS dependencies from JS files, which is amazing.

Instead of conditional inline styles, you could have conditionally applied classes, defined in CSS files.

You could also store common utility classes in their own CSS files, instead of a miles-of-styles file.

I'll probably figure this out through trial and error before you get a chance to respond, but does it auto-prefix class names with component names to avoid collisions?

# ? Apr 9, 2016 22:05

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

I don't like letting webpack control my entire tech stack so I've opted to not do that, not saying it's right but the way we do it is:

- fairly strict BEM
- every react component gets a matching .less stylesheet
- components' .less files are responsible for declaring dependencies (this template contains buttons, feature images, etc, so import those style sheets)
- our main.less only refers to top level components (templates), and the order of the inclusion generally works out based on the order of component imports, and less doesn't duplicate imports in the compile.

# ? Apr 9, 2016 23:24

bartkusa: Sep 25, 2005; Air, Fire, Earth, Hope

LargeHadron posted:

does it auto-prefix class names with component names to avoid collisions?

Nope

# ? Apr 9, 2016 23:50

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

Allllso, my business partner did some research on using extends vs using mixins, and mixins gzip smaller than extends, (not his article, just the endpoint of our research/discussion) http://csswizardry.com/2016/02/mixins-better-for-performance/ , so don't use extends because they're confusing and don't actually give you a net gain in render performance or file size unless you're dealing with IE8's CSS file size limits.

# ? Apr 10, 2016 00:00

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

LargeHadron posted:

What do people here recommend for managing CSS with React? I want to modularize my CSS so I'm not just heaping rules into a single styles.css. In general I don't really like inline CSS either, but I do want to be able to conditionally style my React components.

I've started looking into a Webpack loader (I think it compiles separate CSS files into the bundled JS but can be configured to spit it all out into a bundled CSS) that includes some neat stuff like autoprefixing and precss. I'd still have to do conditional styling inline but I can probably live with that. Anyone got a better solution?

Check this thing out. They just released it the other day and it looks pretty sweet: https://github.com/Khan/aphrodite

EDIT: here's an article about it which I discovered it in: http://engineering.khanacademy.org

Lumpy fucked around with this message at 02:29 on Apr 10, 2016

# ? Apr 10, 2016 02:12

Gul Banana: Nov 28, 2003

ModeSix posted:

So back to my original question.

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

none of them are the right thing
the official typescript compiler is package "typescript", https://www.npmjs.com/package/typescript or you can get it without NPM from http://www.typescriptlang.org/#download-links

# ? Apr 10, 2016 09:52

M31: Jun 12, 2012

LargeHadron posted:

I'll probably figure this out through trial and error before you get a chance to respond, but does it auto-prefix class names with component names to avoid collisions?

It does if you enable it: https://github.com/webpack/css-loader#local-scope

Basically, set your Webpack configuration to (you probably want postcss in there as well)

code:

{ test: /\.css$/, loader: "style!css?modules" }

And use

code:

import styles from './MyComponent.css';

export function MyComponent() {
  return <div className={styles.component}>Foo</div>;
}

If you want to keep your CSS in the same file, you can take a look at https://github.com/rtsao/csjs

code:

import csjs from 'csjs';

const styles = csjs`
  .component {
     color: blue;
  }
`;

export function MyComponent() {
  return <div className={styles.component}>Foo</div>;
}

# ? Apr 10, 2016 09:56

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.

Alright - thanks everyone. I ended up going with a Webpack SCSS loader so I can use a separate SCSS file for each component. It seems alright so far, but if it proves impractical I'll check out some of those other suggestions.

# ? Apr 10, 2016 15:51

DarkLotus: Sep 30, 2001; Lithium Hosting
Personal, Reseller & VPS Hosting
30-day no risk Free Trial &
90-days Money Back Guarantee!

I want to redesign some elements on lithiumhosting.com including converting from sass to scss.
The site was originally designed by someone else back in the Bootstrap 2.x days. I did the conversion to BS 3.3.x myself (including making the site responsive) but kept the old .sass files and just made changes as needed.
It's time to change things up but I don't think a complete redesign is in order, just some changes and improvements here and there. I also want to clean things up, remove unused css and also restructure some of the pages because some of the div nesting makes my head hurt.

I'm not a designer, any tips for basically starting over with empty .scss files for an existing site?
I want to change existing features and add new but want to prevent bloat in my scss files.
Is there a good recommendation for scss file structure? Something that wouldn't make a future designer want to kill themselves.

On a side note, is there a good resource for color schemes? I didn't choose the colors, the designer did and at the time I was ok with them.
Each page has a different background and if I want to add a new page, I have no idea which new color would be a good choice since re-using page colors could be confusing.
Since this is a design thread, I'm open to any suggestions that would improve the overall appearance of the site as well.

blah, thanks for reading

# ? Apr 10, 2016 22:24

The Dave: Sep 9, 2003

DarkLotus posted:

On a side note, is there a good resource for color schemes? I didn't choose the colors, the designer did and at the time I was ok with them.
Each page has a different background and if I want to add a new page, I have no idea which new color would be a good choice since re-using page colors could be confusing.
Since this is a design thread, I'm open to any suggestions that would improve the overall appearance of the site as well.

I don't have time to digest your post, but saw this and wanted to recommend a cool add on: http://palettab.com/

# ? Apr 10, 2016 22:28

ModeSix: Mar 14, 2009

DarkLotus posted:

On a side note, is there a good resource for color schemes? I didn't choose the colors, the designer did and at the time I was ok with them.
Each page has a different background and if I want to add a new page, I have no idea which new color would be a good choice since re-using page colors could be confusing.
Since this is a design thread, I'm open to any suggestions that would improve the overall appearance of the site as well.

Here's a few places to get some good colour ideas/help:
http://flatuicolors.com/
http://getuicolors.com/
https://color.adobe.com/create/color-wheel/
http://paletton.com/

If you have a colour and you want to get various shades (lighter/darker) of it:
http://www.0to255.com/

The Dave posted:

I don't have time to digest your post, but saw this and wanted to recommend a cool add on: http://palettab.com/

Yeah that is pretty cool actually.

ModeSix fucked around with this message at 01:06 on Apr 11, 2016

# ? Apr 11, 2016 00:59

DarkLotus: Sep 30, 2001; Lithium Hosting
Personal, Reseller & VPS Hosting
30-day no risk Free Trial &
90-days Money Back Guarantee!

Thanks ModeSix, very helpful.

# ? Apr 11, 2016 14:56

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

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

DarkLotus posted:

I'm not a designer, any tips for basically starting over with empty .scss files for an existing site?
I want to change existing features and add new but want to prevent bloat in my scss files.
Is there a good recommendation for scss file structure? Something that wouldn't make a future designer want to kill themselves.

For transitioning your current CSS into Sass, if I were you I'd just rename your CSS files from .css to .scss. All CSS is valid Sass. Then take your time going through and modifying things. Start nesting (where appropriate), throw some variables in there, add some mixins, etc. As for file structure, I find the SMACSS approach very fitting for pre-processors. Since using @import with Sass doesn't create additional HTTP requests, you can modularize your code into the tiniest of chunks.

# ? Apr 11, 2016 16:00

Heskie: Aug 10, 2002

I used to be big on BEM, SMACSS, Atomic Design etc and other sorts of architectures/conventions, and worry about whether something was an atom or a component or a module or a utility or a 'base' etc etc

Mark Otto (of Bootstrap fame) has some nice guidelines here: http://codeguide.co/. Personally I've started to prefer this much more simplistic approach and stops my decision paralyses on where poo poo should go.

If you're more into BEM and work on much bigger projects, Harry Roberts' CSS Guidelines is very good: http://cssguidelin.es/

# ? Apr 12, 2016 12:33

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

I've got a personal wordpress site with pages and posts that I don't really want to maintain any more, but I don't want the content to just disappear either.

Is there a good way to just convert the whole thing to a static site I can put somewhere so I don't have to worry about maintaining security updates and the like? I don't care about keeping the same theme...

I see squarespace has got a thing to import a wordpress site, but as I've got multiple servers that I already own it'd be nice to not add another thing I've got to pay for every month.

# ? Apr 12, 2016 16:51

DarkLotus: Sep 30, 2001; Lithium Hosting
Personal, Reseller & VPS Hosting
30-day no risk Free Trial &
90-days Money Back Guarantee!

Thermopyle posted:

I've got a personal wordpress site with pages and posts that I don't really want to maintain any more, but I don't want the content to just disappear either.

Is there a good way to just convert the whole thing to a static site I can put somewhere so I don't have to worry about maintaining security updates and the like? I don't care about keeping the same theme...

I see squarespace has got a thing to import a wordpress site, but as I've got multiple servers that I already own it'd be nice to not add another thing I've got to pay for every month.

Have you considered something like https://www.httrack.com ?

Or:
https://wordpress.org/plugins/really-static/

DarkLotus fucked around with this message at 16:56 on Apr 12, 2016

# ? Apr 12, 2016 16:54

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

Thermopyle posted:

I've got a personal wordpress site with pages and posts that I don't really want to maintain any more, but I don't want the content to just disappear either.

Is there a good way to just convert the whole thing to a static site I can put somewhere so I don't have to worry about maintaining security updates and the like? I don't care about keeping the same theme...

I see squarespace has got a thing to import a wordpress site, but as I've got multiple servers that I already own it'd be nice to not add another thing I've got to pay for every month.

Google said use this: https://wordpress.org/plugins/static-html-output-plugin/

Looks like it can make a .zip of your site as static pages.

# ? Apr 12, 2016 16:57

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

Those seem like good options, has anyone here messed with this process before and have anything good or bad to say about any particular option?

# ? Apr 12, 2016 17:00

DarkLotus: Sep 30, 2001; Lithium Hosting
Personal, Reseller & VPS Hosting
30-day no risk Free Trial &
90-days Money Back Guarantee!

Thermopyle posted:

Those seem like good options, has anyone here messed with this process before and have anything good or bad to say about any particular option?

I've used httrack before, can't remember when or for what exactly.
Try both options and see what happens, you may be surprised at how easy it is.

# ? Apr 12, 2016 17:10

mobby_6kl: Aug 9, 2009; by Fluffdaddy

Also, wget. Haven't used it for anything in a while but I think it has a mirroring option which does everything for you, something like "wget -m URL".

# ? Apr 12, 2016 18:26

Giga Gaia: May 2, 2006; 360 kickflip to... Meteo?!

Thermopyle posted:

Those seem like good options, has anyone here messed with this process before and have anything good or bad to say about any particular option?

I use HTTrack once a month for some sort of stupid "lets rescue this site" BS. its perfectly fine if you never want to update your site again. My experience is that relative urls/uris never work so you fall back to absolute and it becomes a complete mess to maintain. If you just want to shut down your wordpress and have your content exist it might work. I've had issues with it saving wordpress as .html, but you can usually gently caress with the settings to get what you need. If there's an export plugin that works, go with it. HTTrack is a last resort kind of thing.

# ? Apr 12, 2016 19:45

ModeSix: Mar 14, 2009

I'm having a problem getting data from a form through angular.

In my html I am using this to submit data to a function:

code:

<form>
          <input type="text" ng-model="itemID" value="1">
          <input type="button" id="edit" value="Edit {{x.id}}" ng-click="editEntry()">
</form>

And the function I am submitting it to is:

code:

   $scope.editEntry = function() {
        
        var thisItem = {
            id: $scope.itemID
        };
        
        console.log('Edit pressed.  Id that was sent is:' + thisItem.id);
        
        $scope.showEdit = true;
       
        //$scope.sentID = $scope.itemID;
        $scope.editText = Restangular.one('todos', thisItem.id).get().$object;
       
    }

I've forced the value of the itemID in the form just to make sure it's not omitting it. When I submit the form it returns:

Id that was sent is:undefined

Why won't it read the value from the form element itemID?

# ? Apr 12, 2016 20:47

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

ModeSix posted:

I'm having a problem getting data from a form through angular.

In my html I am using this to submit data to a function:
code:
<form>
          <input type="text" ng-model="itemID" value="1">
          <input type="button" id="edit" value="Edit {{x.id}}" ng-click="editEntry()">
</form>
And the function I am submitting it to is:
code:
   $scope.editEntry = function() {
        
        var thisItem = {
            id: $scope.itemID
        };
        
        console.log('Edit pressed.  Id that was sent is:' + thisItem.id);
        
        $scope.showEdit = true;
       
        //$scope.sentID = $scope.itemID;
        $scope.editText = Restangular.one('todos', thisItem.id).get().$object;
       
    }
I've forced the value of the itemID in the form just to make sure it's not omitting it. When I submit the form it returns:

Id that was sent is:undefined

Why won't it read the value from the form element itemID?

There is a difference between ng-click() and ng-submit(). If you want to actually be hooked into form submission, you should assign your submit function with ng-submit.

# ? Apr 12, 2016 20:54

ModeSix: Mar 14, 2009

Skandranon posted:

There is a difference between ng-click() and ng-submit(). If you want to actually be hooked into form submission, you should assign your submit function with ng-submit.

I've changed it to:

code:

<form ng-submit="editEntry()">
                            <input type="text" ng-model="itemID" value="0">
                            <input type="submit" id="edit" value="Edit {{x.id}}">
</form>

And I'm still getting undefined.

This is making me insane because I have another form on the same page and it works perfectly fine.

ModeSix fucked around with this message at 21:07 on Apr 12, 2016

# ? Apr 12, 2016 21:05

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

ModeSix posted:

I've changed it to:
code:
<form ng-submit="editEntry()">
                            <input type="text" ng-model="itemID" value="0">
                            <input type="submit" id="edit" value="Edit {{x.id}}">
</form>
And I'm still getting undefined.

This is making me insane because I have another form on the same page and it works perfectly fine.

Sounds like some sort of scope inheritance skulduggery. Try changing the name to something arbitrarily, see if that fixes it. Also, try logging the state of the entire $scope object, might shed some light on what's going on. I think more code will be needed to go further, your example should work, as it's written here.

# ? Apr 12, 2016 21:30

ModeSix: Mar 14, 2009

Skandranon posted:

Sounds like some sort of scope inheritance skulduggery. Try changing the name to something arbitrarily, see if that fixes it. Also, try logging the state of the entire $scope object, might shed some light on what's going on. I think more code will be needed to go further, your example should work, as it's written here.

I ended up solving it in the most ridiculous way ever.

code:

<form ng-submit="editEntry(x.id)">
         <input type="submit" id="submit" value="Edit {{x.id}}">
</form>

And I pass that through the function:

code:

$scope.editEntry = function(fuckingthing) {
        
        var thisItem = {
            id: fuckingthing
        };
        
        console.log('Edit pressed.  Id that was sent is:' + thisItem.id);
        
        $scope.showEdit = true;
       
        //$scope.sentID = $scope.itemID;
        $scope.editText = Restangular.one('todos', thisItem.id).get().$object;
       
    }

# ? Apr 12, 2016 21:49

Forseeable Fuchsia: Dec 28, 2011

I've been commissioned to work on a couple projects for some mates, and I've got a couple Qs for you guys.

Sort of a cross-post from the Wordpress thread, I've been working on an online survey to collect research data for a mate in Sweden that needs to be essentially a multipage form with required fields being checked on each page instead of at the end like my current Ninja Forms plugin does, with ideally data being saved each time the 'next' button is pressed, so if something happens to a user while they're filling out the form, we still capture the data. Would have used Google Forms, but we can't let people go back to previous pages in the survey. My current set up is a Wordpress website using Ninja Forms plugin for the actual forms. It does most of what we need, but it's not the greatest solution. What would be my other options for this? I've got some experience in HTML coding and all that, but haven't done anything of this scale from scratch before.

Separate question: I've also got to make an interactive learning tool that shows a human cell, and the parts that make it up. When a student hovers over, or clicks on one of the components, it will pop up in a modal or something giving the info about it. The brief suggests an image map would be one solution for this - are imagemaps even still things? And wouldn't there be problems making a responsive imagemap? Alternatively, are there any better ways of doing something similar (having a central interactive image that students can 'explore', I guess?) without an imagemap?

# ? Apr 14, 2016 02:26

ModeSix: Mar 14, 2009

So I've finally added some things to my Github account and wanted opinions about what I have up there, whether it's appropriate for trying to find work, and what else I could do to add to it that would make it stand out more.

https://github.com/aaymont

I know I need to write some information into the README files, but other than that.

ModeSix fucked around with this message at 22:57 on Mar 14, 2017

# ? Apr 14, 2016 02:48

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

ModeSix posted:

So I've finally added some things to my Github account and wanted opinions about what I have up there, whether it's appropriate for trying to find work, and what else I could do to add to it that would make it stand out more.

https://github.com/aaymont

I know I need to write some information into the README files, but other than that.

About your Angular stuff, I'd spend a bit of time organizing it better. While your app is really small, it is bad practice to keep all controllers in one file for anything larger, and you should be trying to demonstrate you have a better grasp of best practices. You are already using gulp, I'd setting up some sort of bundling of your scripts (concat, Browserify, Webpack). This will make it a lot easier to break your files up into 1 file per controller, which you can then pair up with it's view, which lends itself to a more component oriented design. You should also avoid using things like ng-controller and ng-include. You should instead define components as directive-controller bundles that can be reused. You don't have any sort of nested controls in your app, looks like you just have a bunch of routes, but one of the real advantages of Angular is to extend HTML by creating reusable components.

Also, definitely don't use ng-controller AND set a controller in your router at the same time. You'll get a lot of strange things happening, and it's redundant.

# ? Apr 14, 2016 03:51

ModeSix: Mar 14, 2009

Skandranon posted:

About your Angular stuff, I'd spend a bit of time organizing it better. While your app is really small, it is bad practice to keep all controllers in one file for anything larger, and you should be trying to demonstrate you have a better grasp of best practices. You are already using gulp, I'd setting up some sort of bundling of your scripts (concat, Browserify, Webpack). This will make it a lot easier to break your files up into 1 file per controller, which you can then pair up with it's view, which lends itself to a more component oriented design. You should also avoid using things like ng-controller and ng-include. You should instead define components as directive-controller bundles that can be reused. You don't have any sort of nested controls in your app, looks like you just have a bunch of routes, but one of the real advantages of Angular is to extend HTML by creating reusable components.

Also, definitely don't use ng-controller AND set a controller in your router at the same time. You'll get a lot of strange things happening, and it's redundant.

Great, thanks for the tips.

Separating the controllers into individual files was something I was going to do but never got around to, I guess I will get it done now.

I've been using wiredep in my scaffolding project along with gulp-inject (I figured out how to use these at your suggestion earlier), I'll incorporate them into the other ones as well.

Hm, regarding ng-controller, yeah I see what you mean, I didn't even realize I'd done that.

ModeSix fucked around with this message at 13:08 on Apr 14, 2016

# ? Apr 14, 2016 13:02

Adbot: ADBOT LOVES YOU

# ? May 8, 2024 06:32

The Dave: Sep 9, 2003

Has anyone had any issues with the iOS Go button submitting forms?

I have a form being validated with Parsely. I have a jQuery event firing on submit which checks for the Parsley validation, and if it passed, fires a window.open with the URL I want in place. On desktop, iOS, Android, clicking the submit works. On android, using their submit keyboard button works, and on desktop using the enter key works. I've seen some errors with the iOS button and people claiming it is the same key as enter, which if that's the case it doesn't make sense to me. I've done some things to avoid conflicting with the Go button, but can't figure out what the right step is.

The Form:

code:

    <form class="form hidden-xs" id="hey" method="post" action="https://myurl.io/" data-parsley-validate>
      <div class="input-group relative">
        <input required="" type="url" data-parsley-type="url" class="form-control input-lg bb-url" placeholder="Enter your URL..." name="scan">
        <span class="input-group-btn">
          <input class="btn btn-lg btn-default" type="submit" value="Scan �" />
        </span>
      </div><!-- /input-group -->
    </form>

The jQuery:

code:

$('form#hey').on('submit', function() {
      if ($(this).parsley().isValid()) {
          ga('send','event','Body','Click','BB Scan');
          window.open('https://myurl.io/' + $('form#hey input').val() + '?utm_source=homepage');
      }
      return false;
  });

# ? Apr 14, 2016 13:14

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

«‹›361 »