The Web Design & Development Megathread

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

«‹›361 »

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

Pollyanna posted:

Yeah, I've been using PyCharm while working in Django, but I didn't think it had any CSS or Javascript integration. Is that like a mod or something?

And I tried installing SASS, but "gem install sass" errors out for me. Ruby has never worked properly for me That's partly why I learned Python instead.

So, to recap:

-SASS/LESS
-Some Javascript thing
-Unsemantic
-Django
-PyCharm

I installed Scout since I couldn't get SASS to install. Is there a particular GUI for SASS/LESS that's recommended?

Yup PyCharm works great with CSS or JavaScript, it is in fact a plugin that does it. It should be enabled by default. I'm using the paid edition but I don't think that matters for this.

Under File->Settings:

PyCharm then watches my *.less files as I edit them and immediately compiles them to CSS, and lets you know if there are any syntax errors. It will show you the css file collapsed below the less file in the project browser:

As you edit JavaScript it knows what libraries you're using, so the typeahead works great:

Similarly when you're editing a Django template, it knows all your CSS classes, so it can typeahead those for you too:

quote:

edit: Wait...how do you even use LESS? Or Unsemantic? Wow I am not too great at this

Don't worry, it's a little daunting to get all the tools setup and working smoothly so you can focus on what you're actually trying to build. Just ask questions here when you get stuck - what's the error message when you tried gem install sass?

# ? Nov 7, 2013 20:22

Adbot: ADBOT LOVES YOU

# ? May 8, 2024 14:24

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

I don't have anywhere near all those plugins on my PyCharm! I have Github integration, RST support and a Terminal plugin, and that's it.

Is it because I'm running on OSX?

As for SASS...

code:

Rebeccas-MacBook-Pro:~ rebecca$ gem install sass
ERROR:  Could not find a valid gem 'sass' (>= 0), here is why:
          Unable to download data from https://rubygems.org/ -
SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed
(https://s3.amazonaws.com/production.s3.rubygems.org/latest_specs.4.8.gz)

It whines about not having the right certificates or something. I Googled the error and there's a lot of people reporting the same problem, but no fixes as far as I can see.

# ? Nov 7, 2013 20:43

Oh My Science: Dec 29, 2008

FYI using the system ruby on OS X isn't recommended and if you want to go down the ruby road look into rbenv or rvm. Installing one of those two should install openssl which should fix that problem.

Oh My Science fucked around with this message at 20:50 on Nov 7, 2013

# ? Nov 7, 2013 20:46

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

Pollyanna posted:

I don't have anywhere near all those plugins on my PyCharm! I have Github integration, RST support and a Terminal plugin, and that's it. Is it because I'm running on OSX?

Aw dang, it must be because I have the paid edition

I think you can do a 30 day trial of it, after that it's $100 for a personal license. Pretty steep, but I think it's worth it. They have discounts if you're a student though.

# ? Nov 7, 2013 20:56

kedo: Nov 27, 2007

Pollyanna posted:

edit: Wait...how do you even use LESS? Or Unsemantic? Wow I am not too great at this

Well first off read the documentation. :P But Unsemantic is pretty easy to grok. Basically:

XML code:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="unsemantic.css" />
  </head>

  <body class="grid-container"> <!-- .grid-container is required on your main container -->
    
    <div class="grid-50">
      I am a 50% wide div.
    </div>
    
    <div class="grid-50 prefix-15">
      I am a 50% wide div that's bumped over by 15%
    </div>

    <div class="grid-50 tablet-grid-75 mobile-grid-100">
      If you're using one of the responsive stylesheets,
      I'm a div that's 50% wide at your browser breakpoint, 
      75% wide at your tablet breakpoint, and 
      100% wide at your mobile breakpoint.
    </div>

    <div class="grid-50 grid-parent">
      Since I have the grid-parent class, I don't have any padding.
      This means my children won't look like they have double padding.

      <div class="grid-50">
        But I'll have padding!
      </div>
    </div>

  </body>

</html>

That's the basics of Unsemantic (or really any grid system) in a nutshell. The main benefit is that it allows you to set up the foundations of a site's structure without having to reinvent the wheel. There are other more complex tools included (like push and pull), but you can mostly ignore those if you're just starting out.

In other news, writing HTML in posts is really lame. I've become incredibly dependent on auto completion.

e: For double points, use SASS instead of LESS and then use Neat. It does more or less the same thing but it doesn't require you to use all sorts of classes to define your columns. Instead it does it all in the CSS which is nice if you like having clean markup. However it has more of a learning curve than classic grid systems like Unsemantic.

_{Pretend that isn't saying "XML code." I've just done that to get syntax highlighting since HTML still doesn't exist for whatever reason.}

kedo fucked around with this message at 21:16 on Nov 7, 2013

# ? Nov 7, 2013 21:08

pipes!: Jul 10, 2001; Nap Ghost

Oh My Science posted:

Many of the 'learn to code' sites would be a great fit for him. Tell him to spend his book money on one or two months of team tree house and that he will learn more in two months than an entire year in a post secondary school.

Geez, I didn't even think about Treehouse. Thanks!

# ? Nov 7, 2013 22:03

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

PyCharm also work great with CoffeeScript.

Just write CS. It automatically transpiles it to JS. Your pages work.

# ? Nov 7, 2013 23:19

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

Thermopyle posted:

PyCharm also work great with CoffeeScript.

Just write CS. It automatically transpiles it to JS. Your pages work.

I don't know a whole lot about CoffeeScript so this may be a dumb question, but is it hard to debug since you have to step through JavaScript but it was written as CoffeeScript?

# ? Nov 8, 2013 00:04

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

Is there something in some standard that says "when submitting form data encoded as 'iso-8859-1', translate everything outside that character set into an HTML entity before percent-encoding"? Because that's what I'm seeing in practice, but I can't find anything saying it's a good idea.

(I do know where it says to treat 'iso-8859-1' as win1252, hence the scare quotes.)

# ? Nov 8, 2013 00:35

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

fletcher posted:

I don't know a whole lot about CoffeeScript so this may be a dumb question, but is it hard to debug since you have to step through JavaScript but it was written as CoffeeScript?

Its not too bad but if you don't take the time to learn JavaScript properly first it can be hard work. Even using source maps is difficult because you can't breakpoint inline one line functions very well and you end up with multiples steps per line.

To be honest often I prefer to debug in js even if I write in Cs.

# ? Nov 8, 2013 00:40

Oh My Science: Dec 29, 2008

I'm exploring the possibility of using a one page scrolling design on a site and found few resources.

This http://alvarotrigo.com/fullPage/#firstPage works and is the best option I have found. Anything else I should consider?

My only requirement is that it should work on mobile devices, IE8-9 support is not a huge priority.

Oh My Science fucked around with this message at 01:40 on Nov 8, 2013

# ? Nov 8, 2013 01:32

cbirdsong: Sep 8, 2004; Commodore of the Apocalypso; Lipstick Apathy

Is it just me, or does the ::selection pseudo element no longer work in any browser running on OS X Mavericks?

# ? Nov 8, 2013 18:35

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

Is Unsemantic SASS-only, or can I use it in conjunction with LESS somehow? Or does that not make sense? Is there a .css version of it so I can just go "@import unsemantic.css", or is it something I need to preprocess first?

cbirdsong posted:

Is it just me, or does the ::selection pseudo element no longer work in any browser running on OS X Mavericks?

Half of everything no longer works in Mavericks. Even my Chrome extensions bug out when I first click on their buttons

# ? Nov 8, 2013 18:43

Oh My Science: Dec 29, 2008

Pollyanna posted:

Is there a .css version of it so I can just go "@import unsemantic.css", or is it something I need to preprocess first?

http://unsemantic.com/css-documentation

# ? Nov 8, 2013 18:47

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

So the

code:

<head>
  <!--
    Formatted for readability
  -->
  <meta
    name="viewport"
    content="
      width=device-width,
      initial-scale=1,
      minimum-scale=1,
      maximum-scale=1
    "
  />
</head>

stuff has to go in the header of every HTML file?

Also, I downloaded LESS.app and oh my god this is so much nicer. I'm tempted to buy CodeKit now, but...well, maybe later.

edit: There is one problem I have. LESS.app doesn't seem to like it when I put @include "normalize.css" at the beginning of a LESS file, and won't compile until I remove it. That means I have to manually add @include "normalize.css" every time I compile, which is a pain in the rear end. Is there a particular way of including another stylesheet in a LESS file?

edit 2: Apparently this is a LESS.app thing, because LESS 1.4 has support for @import :confused:

Pollyanna fucked around with this message at 19:08 on Nov 8, 2013

# ? Nov 8, 2013 18:58

pipes!: Jul 10, 2001; Nap Ghost

Pollyanna posted:

So the
code:
<head>
  
  <meta
    name="viewport"
    content="
      width=device-width,
      initial-scale=1,
      minimum-scale=1,
      maximum-scale=1
    "
  />
</head>
stuff has to go in the header of every HTML file?

Also, I downloaded LESS.app and oh my god this is so much nicer. I'm tempted to buy CodeKit now, but...well, maybe later.

The meta viewport tag declaration enables the "activation" of Unsemantic/the responsive layout, so yes. When things get a little more advanced, you'll only be writing this once, then controlling where it spits out via a template system. In fact, CodeKit (which owns) has support for .kit files, which are basically basic template files for small, simple static sites, probably perfect for what you're doing right now.

When you get a little more sophisticated, you may actually be writing your HTML using a meta language such as HAML or Slim. With this, the output is compiled, linted, and minified via a build system (CodeKit is basically a build system with a user-friendly GUI), much as how SASS or Less works (with the same end result advantages).

pipes! fucked around with this message at 19:19 on Nov 8, 2013

# ? Nov 8, 2013 19:13

Oh My Science: Dec 29, 2008

Pollyanna posted:

edit: There is one problem I have. LESS.app doesn't seem to like it when I put @include "normalize.css" at the beginning of a LESS file, and won't compile until I remove it. That means I have to manually add @include "normalize.css" every time I compile, which is a pain in the rear end. Is there a particular way of including another stylesheet in a LESS file?

You can now import your css files into the output by doing

@import (inline) "file.css";

This will not make selectors available to your less, it will just blindly copy that file into the output. It will not be compressed unless you use the clean-css option.

--

According to the release notes less.app is stuck in v1.3.3 and v1.5.0 is the current release. It looks like codekit is at least at v1.4.2, so that should work for your imports.

If you're working on OS X just learn how to use the terminal. Installing less is really easy with homebrew, all you need to do is install npm first.

# ? Nov 8, 2013 19:17

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

Thanks, guys. I figured out how to make it work, all I need to do is make a .less file that imports the .css files and then the main style .less file. Then just import that into HTML and tada :dance:

I'm familiar with HTML templating. Django/Flask use some version of Jinja2, which doesn't seem too hard - but I haven't used it for very long.

HAML/Slim looks really cool, and I'm more and more tempted to just buy CodeKit.

Oh My Science posted:

According to the release notes less.app is stuck in v1.3.3 and v1.5.0 is the current release. It looks like codekit is at least at v1.4.2, so that should work for your imports.

Funny, mine says it's version 2.8. :confused:

And I can use the terminal for less, yeah, but less.app has automation and that's really nice.

# ? Nov 8, 2013 19:42

Oh My Science: Dec 29, 2008

Pollyanna posted:

Funny, mine says it's version 2.8. And I can use the terminal for less, yeah, but less.app has automation and that's really nice.

Maybe I wasn't clear, but less.app v2.8 is using less v1.3.x which is why @import wouldn't work

# ? Nov 8, 2013 19:49

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

Oh My Science posted:

Maybe I wasn't clear, but less.app v2.8 is using less v1.3.x which is why @import wouldn't work

Wait whut? That doesn't even make sense

Hmm, maybe I SHOULD get CodeKit...

# ? Nov 8, 2013 20:04

Top Quark: Aug 2, 2010; "Going where no man has gone before."

Sure wish I could use codekit on my windows machine :saddowns:

# ? Nov 8, 2013 20:05

lunar detritus: May 6, 2009

I know the consensus is that Bower sucks (and it does... or actually, it's more that it's kinda useless) but Yeoman is nice. I installed it after seeing this presentation (after avoiding it for ages) and grunt serve (with livereload, compass, etc, all integrated) is nice.

# ? Nov 8, 2013 20:36

pipes!: Jul 10, 2001; Nap Ghost

Suspicious Dish posted:

What's the reason you can't use a simple webserver that serves static files from disk, like Apache or nginx?

Certainly could, but that's not as fun

Nothing wrong with using as much or as little of a framework like Flask as you'd like. Once you start adding dynamic features to your site, you'll utilize a lot more of what Flask has to offer.

# ? Nov 8, 2013 23:33

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

I suppose I'm just a little shaky on how my project is supposed to be structured. But if I can add to it organically, then that's not too bad. I'll focus on learning JavaScript or something next, and tackle the harder stuff if there's something I want to get done.

# ? Nov 8, 2013 23:35

Dominoes: Sep 20, 2007

Does anyone have the format for Openshift's git repositories? I'm trying to push my code onto it, but don't know the git url to add. Googling shows instructions with placeholder text, and the Openshift docs and website describes their rhc command-line tool, linking repositories and SSH, but not how to use them to upload/push code.

For example, to enable pushing to github, you use:
git remote add Origin https://github.com/myname/myprogram.git

To enable pushing to Heroku, you use:
git remote add Origin git@heroku.com:myprogram.git

The instructions on Openshift appear to be straightforward, then says "k you're good now!" while leaving something out.

quote:

From a command line terminal type

rhc setup

This will launch the the setup wizard to configure your OpenShift account. Enter your user name and password.
Type yes when the wizard asks if you want to upload your public key. Your public key will be uploaded and stored on the server.

--Missing instructions--

You can now log into your applications remotely from your computer, or connect and download the application source code via Git. If you have multiple computers, repeat the above procedure so that each computer has access to the application.

Following the command line start guide, I have a new app directory locally with some files in it. Not sure how to proceed, I copy and pasted my Django app into it, committed and pushed, which apparently works automatically without adding a repository here. This didn't seem to do anything when I load the page.

Another way of phrasing:
In Heroku, the steps to setting up a basic Django app that's working locally:

Add an app on the Heroku webpage
Create a 'procfile' file in the local project directory with text "web: python manage.py runserver 0.0.0.0:$PORT --noreload", and a requirements.txt with 'Django==1.6'
cd to the project directory in a terminal, then run: git remote add origin git@heroku.com:myprogram.git
git add .
git commit -am "description"
git push origin master

What's the equivalent in Openshift?

Dominoes fucked around with this message at 01:33 on Nov 9, 2013

# ? Nov 9, 2013 00:28

snakeater: May 17, 2008; A paranoiac in reverse.

Pollyanna posted:

Hmm, maybe I SHOULD get CodeKit...

Nope!

While CodeKit 2 might offer some new killer features, such as live mobile refresh, at the moment it's not worth it. It's nice, but it's nothing that a little Grunt work won't fix you up with. I stopped using it a while back and don't miss it.

If you're a sucker for a GUI it's fine, but I would hold out until v2 launches. By then you might find you don't need it.

# ? Nov 9, 2013 10:33

PleasantDilemma: Dec 5, 2006; The Last Hope for Peace

Dominoes posted:

Openshift?

ssh keys have to be setup. Did you run rhc setup ? That set it up for me. then you can run rhc git-clone <app> and that will setup the repo for you.

Other way, still have to have your SSH keys setup. Log in at Openshift website and click the project you want to clone. On the right there is a little area that says Source Code and it has a bit of text that looks like this: ssh://84a85f33120e46a3a4c7c7051d0a6050@application-username.rhcloud.com/~/git/application.git/ Copy that whoooole thing and you can set it to be the repo when you run git remote add origin ssh://84a85f33120e46a3a4c7c7051d0a6050@application-username.rhcloud.com/~/git/application.git/ . Once that is done you should be able to do git push origin master like on heroku. I've never used heroku.

I played around with OpenShift a few months ago it's pretty awesome but I'm no expert.

# ? Nov 9, 2013 10:47

Dominoes: Sep 20, 2007

PlesantDilemma posted:

ssh keys have to be setup. Did you run rhc setup ? That set it up for me. then you can run rhc git-clone <app> and that will setup the repo for you.

Other way, still have to have your SSH keys setup. Log in at Openshift website and click the project you want to clone. On the right there is a little area that says Source Code and it has a bit of text that looks like this: ssh://84a85f33120e46a3a4c7c7051d0a6050@application-username.rhcloud.com/~/git/application.git/ Copy that whoooole thing and you can set it to be the repo when you run git remote add origin ssh://84a85f33120e46a3a4c7c7051d0a6050@application-username.rhcloud.com/~/git/application.git/ . Once that is done you should be able to do git push origin master like on heroku. I've never used heroku.

I played around with OpenShift a few months ago it's pretty awesome but I'm no expert.

I ran rhc setup.

For the first method, what should <app> be? I tried running it from inside my project's directory, and used my project and app name - neither worked. "Application 'myapp' not found".

For the second, source code shows

quote:

"Source Code

You must add an SSH public key to your account before you can upload code or remotely access your application.
Remote Access

Requires a public key. ",

despite having run rhc setup and selected yes when asked about ssh keys.

# ? Nov 9, 2013 11:04

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

snakeater posted:

Nope!

While CodeKit 2 might offer some new killer features, such as live mobile refresh, at the moment it's not worth it. It's nice, but it's nothing that a little Grunt work won't fix you up with. I stopped using it a while back and don't miss it.

If you're a sucker for a GUI it's fine, but I would hold out until v2 launches. By then you might find you don't need it.

What does Grunt have that CodeKit doesn't? What does it do better? In fact, what about Grunt in general makes it better than CodeKit or other programs? Isn't Grunt specifically for Javascript?

# ? Nov 9, 2013 16:40

snakeater: May 17, 2008; A paranoiac in reverse.

Pollyanna posted:

What does Grunt have that CodeKit doesn't? What does it do better? In fact, what about Grunt in general makes it better than CodeKit or other programs? Isn't Grunt specifically for Javascript?

Grunt is free and more flexible.

It's basically a task runner you can get to do anything (such as compressing and compiling files) to build your project. It can compile SCSS files on save (complete with live reload).

I love(d) CodeKit, but Grunt is definitely worth a look.

# ? Nov 9, 2013 18:13

lunar detritus: May 6, 2009

Pollyanna posted:

What does Grunt have that CodeKit doesn't? What does it do better? In fact, what about Grunt in general makes it better than CodeKit or other programs? Isn't Grunt specifically for Javascript?

My grunt installation optimises images, minifies js/css/html, lints the html/js, compiles sass (compass), gives me livereload, concatenates my js and autoprefixes my css. That's the default behavior of Yeoman's webapp generator but there are plugins for a lot of other things.

# ? Nov 9, 2013 18:16

pipes!: Jul 10, 2001; Nap Ghost

I would argue that CodeKit is a really nice set of training wheels for a modern dev/design workflow. This is totally my opinion here, but I think simultaneously learning SASS/HAML/Coffeescript, etc. and Grunt can be overwhelming, especially if you're not coming from a web development background. Once you get a little more comfortable with the primary languages and what they represent and can accomplish, then you can start to play around with tweaking your build to cater to what's comfortable. GUIs aren't necessarily a bad thing, especially if you don't even have an awareness of the concepts and terminology to be searching for to include.

# ? Nov 9, 2013 18:39

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

Pollyanna posted:

What does Grunt have that CodeKit doesn't? What does it do better? In fact, what about Grunt in general makes it better than CodeKit or other programs? Isn't Grunt specifically for Javascript?

I know you're using PyCharm and it should be noted that it already does a large part of what CodeKit or Grunt does.

Except you're using the free version, so I'm not sure how much that limits it in this regard.

# ? Nov 9, 2013 18:45

Oh My Science: Dec 29, 2008

Almost all command line tools are better than than the GUI alternatives. Updates are out more often, sometimes daily, and you can find one for nearly anything.

# ? Nov 9, 2013 18:49

snakeater: May 17, 2008; A paranoiac in reverse.

pipes! posted:

I would argue that CodeKit is a really nice set of training wheels for a modern dev/design workflow. This is totally my opinion here, but I think simultaneously learning SASS/HAML/Coffeescript, etc. and Grunt can be overwhelming, especially if you're not coming from a web development background.

Very true.

It's worth noting you can largely just copy/paste someone else's basic Gruntfile and be up and running with SCSS compilation/livereload, though.

# ? Nov 9, 2013 18:50

PleasantDilemma: Dec 5, 2006; The Last Hope for Peace

Dominoes posted:

I ran rhc setup.

For the first method, what should <app> be? I tried running it from inside my project's directory, and used my project and app name - neither worked. "Application 'myapp' not found".

For the second, source code shows
despite having run rhc setup and selected yes when asked about ssh keys.

I don't think it matters if you run rhc inside the project directory but I usually do not. Use rhc apps to get a list of apps. It prints a bunch of stuff about the apps, but look at the very first line and it will list <app name> @ <url> (uuid: xxxxxxxx)

Anyway, it looks like your ssh keys didn't get setup properly. Read their docs on keys or run rhc setup again. You might need to run rhc logout before?

# ? Nov 9, 2013 20:22

Adbot: ADBOT LOVES YOU

# ? May 8, 2024 14:24

Dominoes: Sep 20, 2007

PlesantDilemma posted:

I don't think it matters if you run rhc inside the project directory but I usually do not. Use rhc apps to get a list of apps. It prints a bunch of stuff about the apps, but look at the very first line and it will list <app name> @ <url> (uuid: xxxxxxxx)

Anyway, it looks like your ssh keys didn't get setup properly. Read their docs on keys or run rhc setup again. You might need to run rhc logout before?

Thank you. rhc logout, rhc setup worked.

# ? Nov 9, 2013 20:47

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

«‹›361 »

Pollyanna posted:

quote:

code:

Pollyanna posted:

Pollyanna posted:

XML code:

Oh My Science posted:

Thermopyle posted:

fletcher posted:

cbirdsong posted:

Pollyanna posted:

code:

Pollyanna posted:

code:

Pollyanna posted:

Oh My Science posted:

Pollyanna posted:

Oh My Science posted:

Top Quark posted:

Python code:

Suspicious Dish posted:

quote:

Pollyanna posted:

Dominoes posted:

PlesantDilemma posted:

quote:

snakeater posted:

Pollyanna posted:

Pollyanna posted:

Pollyanna posted:

pipes! posted:

Dominoes posted:

PlesantDilemma posted: