The Web Design & Development Megathread

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

«‹›361 »

Monday_: Feb 18, 2006; Worked-up silent dork without sex ability seeks oblivion and demise.; The Great Twist

So I think there might be something wrong with my RSS feed. I've posted 5 updates since Jan. 30th, but none of them are showing up (in Feedspot on my PC or Feedly on my phone). I've double checked the newer entries and I can't tell what's wrong.

The url is http://www.scribbleswithwords.com/rssfeed.xml.

Any help?

# ? Feb 13, 2014 04:32

Adbot: ADBOT LOVES YOU

# ? May 9, 2024 18:52

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

Maluco Marinero posted:

Buckle up for a wild ride through a lovely ecosystem. I started there long ago and sometimes the only decent docs you could get were a poorly narrated screen cast. Plugins are terribly maintained aside from the mainstays as well.

I don't do Drupal anymore.

This is my experience, except with Wordpress.

# ? Feb 13, 2014 04:49

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

Blinkz0rz posted:

This is my experience, except with Wordpress.

Yeah. I do a little WordPress dev for some of my contract work (I try to avoid that though), and you can basically take the lovely parts of WordPress dev and then amplify them to get the pain for Drupal dev.

You have to take on too many dependencies to get good results for even slightly complicated requirements, and you can't rely on those dependencies to be maintained so if you have to come back to the project it feels like a house of cards.

# ? Feb 13, 2014 07:04

ufarn: May 30, 2009

Yeah, it's not of my own volition - it's a requirement I have no control over.

I used ExpressionEngine to good effect myself, when I had to wrangle a PHP CMS way back when.

It's a shame static-deployment CMSes with user-friendly editors still have a ways to go.

# ? Feb 13, 2014 10:02

spacebard: Jan 1, 2007; Football~

ufarn posted:

Have to use Drupal for a project, but don't have the time to read a book on it. What is non-awful resource for picking up the basics - for a simple blog-like site - in a short while?

Google doesn't show anything, and the hits are from a time where the United States hadn't had a black president.

If it's a simple blog-like site, then it should not be painful. For site building, Drupal 7 Explained. The Drupal Planet RSS feed also has blog posts. Simplytest.me is great for trying out modules. For theming, find a resource dedicated to a base theme you want to build off - Omega, Adaptive, or Zen.

Also, download & install drush.

# ? Feb 13, 2014 15:19

ManoliIsFat: Oct 4, 2002

MondayHotDog posted:

So I think there might be something wrong with my RSS feed. I've posted 5 updates since Jan. 30th, but none of them are showing up (in Feedspot on my PC or Feedly on my phone). I've double checked the newer entries and I can't tell what's wrong.

The url is http://www.scribbleswithwords.com/rssfeed.xml.

Any help?

I see 5 feeds in there with titles past Jan 30th (Feb 3, 4,9,10 712), but their pubDates don't match up. They're all in January (maybe your host's clock is messed up?)

# ? Feb 13, 2014 18:31

jackpot: Aug 31, 2004; First cousin to the Black Rabbit himself. Such was Woundwort's monument...and perhaps it would not have displeased him.<

So here's my sass:

pre:

.pay-options {
  border-top: 1px solid #ddd;
  &:before {
    content: url(star.svg);
    position: relative;
    top: -12px;
    left: 50%;
  }
}

What I want is a top border with an image dead center in the middle of it as a divider. Trouble is, left 50% means the left-most part of the image is at the 50% line, so the whole thing's too far to the right. What's the right way to do this?

# ? Feb 13, 2014 22:19

obstipator: Nov 8, 2009; by FactsAreUseless

jackpot posted:

So here's my sass:
pre:
.pay-options {
  border-top: 1px solid #ddd;
  &:before {
    content: url(star.svg);
    position: relative;
    top: -12px;
    left: 50%;
  }
}
What I want is a top border with an image dead center in the middle of it as a divider. Trouble is, left 50% means the left-most part of the image is at the 50% line, so the whole thing's too far to the right. What's the right way to do this?

Give it a margin-left of -starWidth/2.

If the star's width is 20px, go with:

code:

margin-left: -10px;

I think that would get it. You might need to add display:inline-block; to get the margin to work.

Alternatively, use transform to get it in the right spot

code:

@include transform(translateX(-10px));

# ? Feb 13, 2014 22:38

Suspicious Dish: Sep 24, 2011; 2020 is the year of linux on the desktop, bro; Fun Shoe

You can also just do transform: translate(-50%, 0);

# ? Feb 13, 2014 22:48

Monday_: Feb 18, 2006; Worked-up silent dork without sex ability seeks oblivion and demise.; The Great Twist

ManoliIsFat posted:

I see 5 feeds in there with titles past Jan 30th (Feb 3, 4,9,10 712), but their pubDates don't match up. They're all in January (maybe your host's clock is messed up?)

Thanks, that was it. It's funny how easy it is to miss something so obvious.

# ? Feb 14, 2014 02:44

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

Are there any good image gallery type libraries that work well on mobile? I found PhotoSwipe which seems nice, but it's no longer developed.

# ? Feb 21, 2014 02:58

kedo: Nov 27, 2007

fletcher posted:

Are there any good image gallery type libraries that work well on mobile? I found PhotoSwipe which seems nice, but it's no longer developed.

This is also of interest to me. I've been using jquery cycle out of habit but its swipe plugin is real crappy.

# ? Feb 21, 2014 16:37

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

iosSlider has really nice touch support: https://iosscripts.com/iosslider/

Not sure how suited it is for more than a few images, though.

# ? Feb 21, 2014 17:51

glompix: Jan 19, 2004; propane grill-pilled

cbirdsong posted:

iosSlider has really nice touch support: https://iosscripts.com/iosslider/

Not sure how suited it is for more than a few images, though.

I've never seen a single component with such a detailed licensing structure. Looks solid though.

# ? Feb 21, 2014 18:19

Sereri: Sep 30, 2008; awwwrigami

cbirdsong posted:

iosSlider has really nice touch support: https://iosscripts.com/iosslider/

Not sure how suited it is for more than a few images, though.

I love how the site itself is a horribly unoptimized mess when viewed on my phone.

# ? Feb 21, 2014 19:03

lunar detritus: May 6, 2009

cbirdsong posted:

iosSlider has really nice touch support: https://iosscripts.com/iosslider/

Not sure how suited it is for more than a few images, though.

I like Swiper, it's free and responsive.

# ? Feb 21, 2014 21:03

Chris!: Dec 2, 2004; E

My aim this morning was to try and get to grips with using Sass for the first time, and I've spent hours and haven't even begun to write a line of code - I've found the process of setting it up ridiculously complicated.

I've had to install Ruby through a command prompt (which I've never used before, I'm a designer who can write HTML and CSS but I've never done commands like that), then a program called Koala which someone recommended but apparently has no beginners documentation anywhere online, so I have no idea how to use it, then Sublime Text doesn't support Sass by default so I've had to download like a bunch of plugins (a sass-syntax plugin, then Sass-Build, then Sassbuilder-master, then use a console to install them all but I don't think the last 2 worked), hours later and I still don't know what I'm doing.

HTML and CSS is no problem at all, but I thought Sass would just be changing my syntax a little and hitting "compile", but right now I feel like I've made it so difficult for myself that I must have gone wrong somewhere in this process!

(For the record, I'm aware that the problem here is me, and that I've probably gone about everything the wrong way!)

# ? Feb 22, 2014 12:43

ufarn: May 30, 2009

SASS is pretty easy, but Ruby can be a pain to install. What's your OS and project?

Ideally, use the .scss file as your main stylesheet, open the working CSS directory in the commandline, and type

sass --watch style.scss:style.css

Then it automatically compiles your SASS to a CSS file.

# ? Feb 22, 2014 13:06

Chris!: Dec 2, 2004; E

Thanks for the reply, I'm using Windows 7.

My project is something that's already in development, already has a stylesheet set up, and I thought it would be easy to just start adding sass to it.

I've installed Ruby, but have never done any command line stuff before - but sure how to even open a particular directory in command line, or how to start using commands! I was planning on using a GUI for Sass stuff, but I'm not having much luck. I've just watched a tutorial which uses a program called Scout, which looked pretty simple, I might give that a try... even stuff like getting Sublime Text to support Sass was a pain, and I'm not sure it's working still (I opened my existing .css file, saved it as a .scss file, and it gave a bunch of errors - because some lines have got 4 spaces and other lines are indented with a tab?)

When it's working, if I've already got a functioning CSS file, would I just copy and paste that and save it as .scss, alongside the original css file, and that's my Sass file - so the sass file would start as the exact same developed css file as before, but I can now use Sass variables and they will be compiled into the original css file?

# ? Feb 22, 2014 13:16

onionradish: Jul 6, 2006; That's spicy.

Chris! posted:

Thanks for the reply, I'm using Windows 7.

My project is something that's already in development, already has a stylesheet set up, and I thought it would be easy to just start adding sass to it.

If you want the ability to use variables, mixins and other capabilities in CSS and you don't have a requirement to use SASS specifically, an alternative is LESS. It's what's used in the popular Bootstrap framework. There is a native Windows app that can watch and compile to CSS without Ruby and all the other dependencies.

# ? Feb 22, 2014 14:27

Chris!: Dec 2, 2004; E

Thanks for the recommendation, my main motivator is because Sass is used with Foundation, and the top-bar is a nightmare to customise without it, but thanks anyway!

# ? Feb 22, 2014 14:34

ufarn: May 30, 2009

To use the CLI:

Click on the address in the folder and type "cmd"; this opens the command prompt at the path of your working directory.

Did you use this to install Ruby? It's fairly easy to set up, as I recall.

Your SASS file, .scss, can just have the CSS pasted into it and work - it's merely an extension of CSS instead of a replacement - but you'll have to compile it to .css, since that's what you defined as your stylesheet in your HTML.

# ? Feb 22, 2014 16:03

EAT THE EGGS RICOLA: May 29, 2008

I had major issues doing ruby/rails stuff in Windows, to the point where I eventually gave up and set up a Linux Mint development environment in a VM.

# ? Feb 22, 2014 16:11

Chris!: Dec 2, 2004; E

ufarn posted:

To use the CLI:

Click on the address in the folder and type "cmd"; this opens the command prompt at the path of your working directory.

Did you use this to install Ruby? It's fairly easy to set up, as I recall.

Your SASS file, .scss, can just have the CSS pasted into it and work - it's merely an extension of CSS instead of a replacement - but you'll have to compile it to .css, since that's what you defined as your stylesheet in your HTML.

Hey, thanks for your reply. No, I installed Ruby 1.9.3 from here - http://rubyinstaller.org/downloads/

I've now managed to get Koala to work (after downloading Scout and LiveReload and having no success). But Koala is taking my variables and CSS and sucessfully compiling it, which is very exciting! However it turns out that the main reason I wanted to use Sass - to customise and have greater control over Zurb Foundation - is much more complicated than I expected. I hoped I could just define a bunch of variables in a Sass file and it would be as easy as that, but it's not.

Here's their page on how to use Sass with Foundation - I've now also had to install Git and NodeJS, I've done this command "npm install -g bower grunt-cli" - not sure what that does though - and installed Foundation as a Ruby Gem. But apparently I might need to get Grunt and Libsass as well...? And have no idea at the moment how to get access to the Foundation Sass files.

I'm sure I've made things way harder than I needed to, but it seems that the process is pretty convoluted, pretty bummed out at the moment, but I think Sass will make my life easier in the long run

edit: From reading this it seems I also need to install Libsass and SassC as well. It seems like I've had to install about 10 different things so far! I'm sure it'll be worth it.

Chris! fucked around with this message at 17:01 on Feb 22, 2014

# ? Feb 22, 2014 16:55

Bastard: Jul 13, 2001; We are each responsible for our own destiny.

Try this manual on how to use Gulp, a build tool which can automate a lot of build things, including watching and compiling .scss files

http://travismaynard.com/writing/getting-started-with-gulp

Also, this command

quote:

npm install -g bower grunt-cli

Tells NPM (NodeJS Package Manager) to globally install -g (i.e. system-wide instead of just in the current directory) the packages Bower (frontend package manager) and grunt-cli, a javascript task runner/automation system.

As for Libsass/SassC/Compass, sass compilers come in 2 flavors: ruby and C. Compass uses the Ruby version, LibSass uses the C version (sassC). It can be a bit overwhelming at first, especially if you aren't used to these workflow, but in the end it's really worth it. I have to admit that it's a lot easer to do all this on OSX though.

# ? Feb 22, 2014 17:42

glompix: Jan 19, 2004; propane grill-pilled

I do really wish there was a Javascript interpreter for Sass like LESS has. That'd make diving in quicker. If you in Windows, check out WebMatrix. Getting Sass set up in visual studio is pretty easy so this may be too.

http://www.hanselman.com/blog/WebMatrix2FrontEndWebDevelopersTakeNoteASPNETPHPNodejsAndMore.aspx

# ? Feb 22, 2014 17:49

Chris!: Dec 2, 2004; E

Bastard posted:

Try this manual on how to use Gulp, a build tool which can automate a lot of build things, including watching and compiling .scss files

http://travismaynard.com/writing/getting-started-with-gulp

Also, this command

Tells NPM (NodeJS Package Manager) to globally install -g (i.e. system-wide instead of just in the current directory) the packages Bower (frontend package manager) and grunt-cli, a javascript task runner/automation system.

As for Libsass/SassC/Compass, sass compilers come in 2 flavors: ruby and C. Compass uses the Ruby version, LibSass uses the C version (sassC). It can be a bit overwhelming at first, especially if you aren't used to these workflow, but in the end it's really worth it. I have to admit that it's a lot easer to do all this on OSX though.

Thanks very much, that looks very useful. I've read through and the description of how the processes work make things clearer - I've managed to avoid dealing with any command line stuff entirely up until now.

I'll give it another shot tomorrow and hopefully get somewhere with Sass in Foundation.

# ? Feb 22, 2014 23:40

Chris!: Dec 2, 2004; E

Finally, FINALLY managed to get somewhere with Foundation and Sass - I managed to create a new project using the command line, then copied my existing project files into that folder, then linked to app.css from the index file, then edited the _settings.scss file, and recompiled app.scss, and it seems to have work!

Not sure if that's actually the right way to do things (I thought the idea was that the changes would change the existing foundation.css file), but finally I can change the height of the top-bar without everything breaking. Woo!

Now to get to grips with using Sass properly.

Thanks again to those who replied with suggestions and help!

# ? Feb 23, 2014 18:18

pipes!: Jul 10, 2001; Nap Ghost

Chris! posted:

Not sure if that's actually the right way to do things (I thought the idea was that the changes would change the existing foundation.css file), but finally I can change the height of the top-bar without everything breaking. Woo!

Yep, that's definitely the right way to start approaching SASS. Think of your CSS file as just the final stage output, which should never be edited by hand. SASS is great for modularizing this sort of stuff, and with a little setup beforehand, you can reduce a very complicated site into a small number of bite-sized pieces. Also, good call with Foundation, I think it's better than Bootstrap in a lot of ways.

# ? Feb 23, 2014 19:18

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

Are CSS3 animations ok to use now if I'm targeting modern browsers?

# ? Feb 24, 2014 21:52

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

fletcher posted:

Are CSS3 animations ok to use now if I'm targeting modern browsers?

Depends on which browsers/animations, but you should be ok. Also maybe look at GSAP I asked earlier in this thread if anyone had used it.

# ? Feb 24, 2014 21:59

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

gmq posted:

I like Swiper, it's free and responsive.

The problem with this one (and most of the ones I've seen) is that you can kinda get lost in the UI after pinch-zooming in on a picture. Mobile Safari also crashed 4 times while I was trying this one out.

# ? Feb 25, 2014 01:07

Crunk Magnet: Feb 19, 2004; Poop Soup

I used http://border-radius.com/ in order to generate rounded corners for the website I am developing, but they don't render properly in IE (of course). Is there some simple fix that I can implement? I appreciate the help.

Here is what I am talking about : http://www.crunkmagnet.net/kelly/

Edit: I guess the rounded corner CSS doesn't work in IE8 and below. Never mind.

Crunk Magnet fucked around with this message at 16:17 on Feb 25, 2014

# ? Feb 25, 2014 16:06

excidium: Oct 24, 2004; Tambahawk Soars

Crunk Magnet posted:

I used http://border-radius.com/ in order to generate rounded corners for the website I am developing, but they don't render properly in IE (of course). Is there some simple fix that I can implement? I appreciate the help.

Here is what I am talking about : http://www.crunkmagnet.net/kelly/

Edit: I guess the rounded corner CSS doesn't work in IE8 and below. Never mind.

Luckily the design degrades gracefully without rounded corners. The only thing you might consider adding is a border-right to the tabs to break them up a bit when they end up as a solid grey line. It's not a big deal either way because it's still clear from a navigational standpoint, but might improve the look a bit.

# ? Feb 25, 2014 16:28

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Crunk Magnet posted:

I used http://border-radius.com/ in order to generate rounded corners for the website I am developing, but they don't render properly in IE (of course). Is there some simple fix that I can implement? I appreciate the help.

Here is what I am talking about : http://www.crunkmagnet.net/kelly/

Edit: I guess the rounded corner CSS doesn't work in IE8 and below. Never mind.

If your client really needs rounded corners for IE8 (they don't), there's CSS3PIE

# ? Feb 25, 2014 18:27

RobertKerans: Aug 25, 2006; There is a heppy lend
Fur, fur aw-a-a-ay.

fletcher posted:

Are CSS3 animations ok to use now if I'm targeting modern browsers?

Just to add to what The Merkinman said, be very careful about what and how you animate as well. Grossly simplifying things, if you stick with opacity, transform:scale, transform:translate and transform:scale, things will generally be very nice and smooth, do other things and they won't, regardless of browser.

+ GSAP is amazing if you want anything a bit more complex than what CSS can provide.

# ? Feb 25, 2014 21:09

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

RobertKerans posted:

Just to add to what The Merkinman said, be very careful about what and how you animate as well. Grossly simplifying things, if you stick with opacity, transform:scale, transform:translate and transform:scale, things will generally be very nice and smooth, do other things and they won't, regardless of browser.

+ GSAP is amazing if you want anything a bit more complex than what CSS can provide.

Thanks for the tips guys. GSAP looks really cool, might be overkill for what I need. This is all I wanted to do:

code:

.some-icon {
    animation: glow 0.7s infinite alternate;
}

@keyframes glow {
    to {
        color: #00FF00;
        text-shadow: 0 0 5px #00FF00;
    }
}

Seems to work well enough on Chrome, Firefox, and Mobile Safari which is like 99% of my users

# ? Feb 25, 2014 22:11

Webbeh: Dec 13, 2003; IF THIS IS A 'LOST' THREAD I'M PROBABLY WHINING ABOUT
STABBEY THE MEANY

Chris! posted:

Hey, thanks for your reply. No, I installed Ruby 1.9.3 from here - http://rubyinstaller.org/downloads/

I've now managed to get Koala to work (after downloading Scout and LiveReload and having no success). But Koala is taking my variables and CSS and sucessfully compiling it, which is very exciting! However it turns out that the main reason I wanted to use Sass - to customise and have greater control over Zurb Foundation - is much more complicated than I expected. I hoped I could just define a bunch of variables in a Sass file and it would be as easy as that, but it's not.

Here's their page on how to use Sass with Foundation - I've now also had to install Git and NodeJS, I've done this command "npm install -g bower grunt-cli" - not sure what that does though - and installed Foundation as a Ruby Gem. But apparently I might need to get Grunt and Libsass as well...? And have no idea at the moment how to get access to the Foundation Sass files.

I'm sure I've made things way harder than I needed to, but it seems that the process is pretty convoluted, pretty bummed out at the moment, but I think Sass will make my life easier in the long run

edit: From reading this it seems I also need to install Libsass and SassC as well. It seems like I've had to install about 10 different things so far! I'm sure it'll be worth it.

GUIs for Sass have come a long way. I'm partial to Compass.app, myself.

# ? Feb 25, 2014 23:20

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

Anyone dealt with getting hover-activated menus to work on a touch screen? Our main navigation uses hover to bring up a sub menu. I listen for mouseenter, mouseleave to show/hide the menu, and click will also open/close the menu.

On touch screens you get a combo of those events when someone taps on the screen. On FF/Chrome it will send mouseenter then click when you tap an element. Tap that place again to get another click, tap somewhere else and it sends mouseleave to the original element. IE always sends mouseenter, mouseleave, click everywhere you tap.

Everything I've googled up tells me that our best bet is to ditch the hover concept and go all click-based for opening menus, but I doubt the boss will like that.

# ? Feb 27, 2014 02:43

Adbot: ADBOT LOVES YOU

# ? May 9, 2024 18:52

Nebulon Gate: Feb 23, 2013

PlesantDilemma posted:

Anyone dealt with getting hover-activated menus to work on a touch screen? Our main navigation uses hover to bring up a sub menu. I listen for mouseenter, mouseleave to show/hide the menu, and click will also open/close the menu.

On touch screens you get a combo of those events when someone taps on the screen. On FF/Chrome it will send mouseenter then click when you tap an element. Tap that place again to get another click, tap somewhere else and it sends mouseleave to the original element. IE always sends mouseenter, mouseleave, click everywhere you tap.

Everything I've googled up tells me that our best bet is to ditch the hover concept and go all click-based for opening menus, but I doubt the boss will like that.

Ran into this a while ago. Install modernizr, and look into jQuery Mobile.

# ? Feb 27, 2014 02:53

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

«‹›361 »