Register a SA Forums Account here!
JOINING THE SA FORUMS WILL REMOVE THIS BIG AD, THE ANNOYING UNDERLINED ADS, AND STUPID INTERSTITIAL ADS!!!

You can: log in, read the tech support FAQ, or request your lost password. This dumb message (and those ads) will appear on every screen until you register! Get rid of this crap by registering your own SA Forums Account and joining roughly 150,000 Goons, for the one-time price of $9.95! We charge money because it costs us money per month for bills, and since we don't believe in showing ads to our users, we try to make the money back through forum registrations.
 
  • Post
  • Reply
The Dave
Sep 9, 2003

Pexels.com pulls together all of the free sites, including unsplash.

Adbot
ADBOT LOVES YOU

fuf
Sep 12, 2004

haha
Nice, thanks both. I was prepared to fork out some cash for some good ones but I don't think I'll have to now.

Also gently caress cityscapes, it's now all about close ups of grass. :q:

Data Graham
Dec 28, 2009

📈📊🍪😋



Dumb question, but why not take a color one and make it black-and-white?

The Merkinman
Apr 22, 2007

I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!
Any idea why Foundation and Flex-box don't get along or what exactly is going on here?
In Chrome and IE, the padding to the right of 'add' gets ignored so the copy isn't centered. Not including foundation fixes the issue, but I don't see why. All I see is the calculated width is different, but I don't see WHY it's different. Firefox doesn't have the issue.

fuf
Sep 12, 2004

haha

Data Graham posted:

Dumb question, but why not take a color one and make it black-and-white?

I would if I found a colour one that I really wanted to use but right now I'm just looking through and hoping something grabs me. Also I have zero aesthetic sensibility so I'm trying to keep this as simple as possible.

Leshy
Jun 21, 2004

The Merkinman posted:

Any idea why Foundation and Flex-box don't get along or what exactly is going on here?
In Chrome and IE, the padding to the right of 'add' gets ignored so the copy isn't centered. Not including foundation fixes the issue, but I don't see why. All I see is the calculated width is different, but I don't see WHY it's different. Firefox doesn't have the issue.
That took way too much time figuring out, but it was a nice puzzle!

Both the textbox and submit button are flex items, due to the display: flex; statement on the parent div. That means they want to sit next to each other on the same line. The imported Foundation 6000-line monstrosity stylesheet, however, contains the statement input[type="text"] {width: 100%;}, which makes the browser attempt to give the textbox as much width as possible. As the submit button is a flex item, it can be shrunk down to give the textbox more horizontal space.

Apparently Gecko and Trident/Webkit have a different opinion on how far it is allowed to be shrunk down. Gecko (Firefox) will not shrink the flex item down beyond the width of its content, whereas Trident (IE) and Webkit (Chrome, Vivaldi, Opera) will do so. This causes the content to overflow over the right padding, giving the illusion that the right padding is ignored, which it isn't. The statement flex-shrink: 0; on the submit button will tell the browser that it should not be shrunk, which fixes the issue.

See this jsfiddle for a more minimal example.

The Merkinman
Apr 22, 2007

I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Leshy posted:

That took way too much time figuring out, but it was a nice puzzle!

Both the textbox and submit button are flex items, due to the display: flex; statement on the parent div. That means they want to sit next to each other on the same line. The imported Foundation 6000-line monstrosity stylesheet, however, contains the statement input[type="text"] {width: 100%;}, which makes the browser attempt to give the textbox as much width as possible. As the submit button is a flex item, it can be shrunk down to give the textbox more horizontal space.

Apparently Gecko and Trident/Webkit have a different opinion on how far it is allowed to be shrunk down. Gecko (Firefox) will not shrink the flex item down beyond the width of its content, whereas Trident (IE) and Webkit (Chrome, Vivaldi, Opera) will do so. This causes the content to overflow over the right padding, giving the illusion that the right padding is ignored, which it isn't. The statement flex-shrink: 0; on the submit button will tell the browser that it should not be shrunk, which fixes the issue.

See this jsfiddle for a more minimal example.
Thank you so much! :worship:

kedo
Nov 27, 2007

A client of mine is preparing to create an API for querying content on their site. Can any one recommend a good tool for mapping something like this out, or how a backend dev might prefer to receive input from me? My first instinct was to use Balsamiq or some similar tool to make a wireframe of the types of JSON output I'd like to see, but I'm not really sure where to start. Would it be better to just manually write out a couple of example objects?

lunar detritus
May 6, 2009


kedo posted:

A client of mine is preparing to create an API for querying content on their site. Can any one recommend a good tool for mapping something like this out, or how a backend dev might prefer to receive input from me? My first instinct was to use Balsamiq or some similar tool to make a wireframe of the types of JSON output I'd like to see, but I'm not really sure where to start. Would it be better to just manually write out a couple of example objects?

Apiary does this pretty well.

kedo
Nov 27, 2007

Awesome, that's exactly what I'm looking for. Thanks!

waggles
Jul 21, 2011

Here to spread frog love.
Fallen Rib
I could use some help. I'm a beginner web developer studying in community college and my class project is to make a responsive website for a science teacher at the school. What I want to do is to make a button navbar that when clicks shows the links horizontally to the right. I'm not very good at googling so if someone could give me good key words that would be great or give me a quick tutorial.

I copied code from the "Magister" template that I got online and the teacher liked the navbar. I want to change it completely because I don't want to plagiarize. Here is the link to the site: https://science.soadtoad.com/ Any input would be great. I don't want any hand holding because I won't learn.

putin is a cunt
Apr 5, 2007

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

waggles posted:

I could use some help. I'm a beginner web developer studying in community college and my class project is to make a responsive website for a science teacher at the school. What I want to do is to make a button navbar that when clicks shows the links horizontally to the right. I'm not very good at googling so if someone could give me good key words that would be great or give me a quick tutorial.

I copied code from the "Magister" template that I got online and the teacher liked the navbar. I want to change it completely because I don't want to plagiarize. Here is the link to the site: https://science.soadtoad.com/ Any input would be great. I don't want any hand holding because I won't learn.

My recommendation would be to look at this: http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/

It will give you a pretty good understanding of how the technology works, and then you can use that understanding to build what you're after. If you're after something more explanatory, rather than just code, try Googling for "Slide in" or "Push in" menus. They're not quite the same as what you want to do, but they share the same concept (click on a button, show menu).

my bony fealty
Oct 1, 2008

waggles posted:

I could use some help. I'm a beginner web developer studying in community college and my class project is to make a responsive website for a science teacher at the school. What I want to do is to make a button navbar that when clicks shows the links horizontally to the right. I'm not very good at googling so if someone could give me good key words that would be great or give me a quick tutorial.

I copied code from the "Magister" template that I got online and the teacher liked the navbar. I want to change it completely because I don't want to plagiarize. Here is the link to the site: https://science.soadtoad.com/ Any input would be great. I don't want any hand holding because I won't learn.

You'll want to use CSS media queries for responsive design - these allow you to change display options based on screen size, basically. Here's a good intro from the Mozilla Developer Network (which is a great resource to familiarize yourself with):

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

It also sounds like you will want to do some research into the CSS display property, particularly inline vs block styling. A very basic example of the difference: https://jsfiddle.net/5jyb9vjq/

The Magister template you found also uses the Bootstrap framework, which has that kind of nav menu built in (which means you aren't really plagiarizing anything - Bootstrap is free!) While Bootstrap is great, it's generally smarter to try to code something like this without using a framework when you are beginning to learn, so you have a better grasp of how the CSS and HTML elements interact. The nav element relies on a jQuery click event to trigger the display change that shows the menu items, so I'd recommend checking out jQuery (and JavaScript in general, by extension). The jQuery API - http://api.jquery.com/

More info on Bootstrap - http://getbootstrap.com/

And here's a very simple example of something kind of like what you describe - click on the button, and it hides or shows a horizontally displayed menu:

https://jsfiddle.net/5jyb9vjq/2/

my bony fealty fucked around with this message at 07:29 on Apr 2, 2015

putin is a cunt
Apr 5, 2007

BOY DO I SURE ENJOY TRASH. THERE'S NOTHING MORE I LOVE THAN TO SIT DOWN IN FRONT OF THE BIG SCREEN AND EAT A BIIIIG STEAMY BOWL OF SHIT. WARNER BROS CAN COME OVER TO MY HOUSE AND ASSFUCK MY MOM WHILE I WATCH AND I WOULD CERTIFY IT FRESH, NO QUESTION
On a sidenote, Codrops has become my new favourite website: http://tympanus.net/codrops/

For example: http://tympanus.net/Tutorials/AnimatedTextFills/

waggles
Jul 21, 2011

Here to spread frog love.
Fallen Rib
Thank you so much for the info. I'll give them a try. My class hasn't gone over what is considered plagiarism but I did research. I just want to be extra careful.

Thermopyle
Jul 1, 2003

...the stupid are cocksure while the intelligent are full of doubt. —Bertrand Russell

The Wizard of Poz posted:

On a sidenote, Codrops has become my new favourite website: http://tympanus.net/codrops/

For example: http://tympanus.net/Tutorials/AnimatedTextFills/

Yeah, codrops always makes me mad I don't have any sites it makes sense to use their effects on.

Newf
Feb 14, 2006
I appreciate hacky sack on a much deeper level than you.
More of a tooling question than directly web dev. Does Emmet/zenCoding/VS WebEssentials let you declare more than one class on an element with their auto-expanding shorthand? I want, for example, to make a bootstrap button with something like div.(btn btn-primary)[tab] but I can't find the right syntax and I've not had immediate success googling.

chami
Mar 28, 2011

Keep it classy, boys~
Fun Shoe

Newf posted:

More of a tooling question than directly web dev. Does Emmet/zenCoding/VS WebEssentials let you declare more than one class on an element with their auto-expanding shorthand? I want, for example, to make a bootstrap button with something like div.(btn btn-primary)[tab] but I can't find the right syntax and I've not had immediate success googling.

Use div.btn.btn-primary.otherclass.

Newf
Feb 14, 2006
I appreciate hacky sack on a much deeper level than you.

chami posted:

Use div.btn.btn-primary.otherclass.

Ahhh, great. Thank you.

Hed
Mar 31, 2004

Fun Shoe

Thermopyle posted:

Yeah, codrops always makes me mad I don't have any sites it makes sense to use their effects on.

I saw the flame demos and felt like it was 1997 all over again!

huhu
Feb 24, 2006
I've been playing around with HTML, Bootstrap, CSS, and JavaScript for a few weeks now. I've realized that maintaining my website with a header and footer that has to be updated per page is pretty annoying so it looks like I'm going to invest my time in learning PHP next. What else would you guys recommend investing my time in next to learn?

my bony fealty
Oct 1, 2008

huhu posted:

I've been playing around with HTML, Bootstrap, CSS, and JavaScript for a few weeks now. I've realized that maintaining my website with a header and footer that has to be updated per page is pretty annoying so it looks like I'm going to invest my time in learning PHP next. What else would you guys recommend investing my time in next to learn?

I would recommend you look up some popular CMS platforms and pick one you like

Wordpress, Drupal, Joomla, etc.

Gmaz
Apr 3, 2011

New DLC for Aoe2 is out: Dynasties of India

huhu posted:

I've been playing around with HTML, Bootstrap, CSS, and JavaScript for a few weeks now. I've realized that maintaining my website with a header and footer that has to be updated per page
If that's all you need, you can use a static site generator like Jekyll. If you need to store data, do operations on it etc. you can learn PHP but you can also use JavaScript on the server side and there are certainly many other options.

huhu
Feb 24, 2006

Gmaz posted:

If that's all you need, you can use a static site generator like Jekyll. If you need to store data, do operations on it etc. you can learn PHP but you can also use JavaScript on the server side and there are certainly many other options.

It's more of me wanting to learn as much as I can since I've got about 4 more months of almost unlimited downtime and I'm learning as much as I can. However that is a pretty cool resource there.

Thermopyle
Jul 1, 2003

...the stupid are cocksure while the intelligent are full of doubt. —Bertrand Russell

huhu posted:

I've been playing around with HTML, Bootstrap, CSS, and JavaScript for a few weeks now. I've realized that maintaining my website with a header and footer that has to be updated per page is pretty annoying so it looks like I'm going to invest my time in learning PHP next. What else would you guys recommend investing my time in next to learn?

If you don't have other factors forcing you in to using PHP (like an existing code base) don't waste your time on PHP.

I mean, lots of places use it because of historical reasons, but it's a poo poo language and there's no reason to learn it if you're just wanting to learn something for self-improvement.

Any of these would be a superior choice for server-side web stuff: Python, Java, C#, JS.

I very hesitantly included js there.

Thermopyle fucked around with this message at 19:12 on Apr 6, 2015

The Dave
Sep 9, 2003

If you have a pretty simple static site though is there really any problems with learning php includes to make it a little more templated?

Thermopyle
Jul 1, 2003

...the stupid are cocksure while the intelligent are full of doubt. —Bertrand Russell

The Dave posted:

If you have a pretty simple static site though is there really any problems with learning php includes to make it a little more templated?

It depends on your goal. If you want to learn something good/useful/educational/makes-you-better-at-programming/isn't-stupid-and-full-of-horrors, then there's much better choices. If you just want to shovel out a site as fast as possible and don't care about bad programming habits instilled by PHP itself and all the horrible PHP tutorials, then no, there's nothing wrong with it.

Thermopyle
Jul 1, 2003

...the stupid are cocksure while the intelligent are full of doubt. —Bertrand Russell

Really, the band of user goals/abilities/preferences that should just use PHP is extremely narrow.

There's lots of static site generators for other not-bad languages. I was just looking at Pelican for python last week.

Spatulater bro!
Aug 19, 2003

Punch! Punch! Punch!

huhu posted:

I've been playing around with HTML, Bootstrap, CSS, and JavaScript for a few weeks now. I've realized that maintaining my website with a header and footer that has to be updated per page is pretty annoying so it looks like I'm going to invest my time in learning PHP next. What else would you guys recommend investing my time in next to learn?

My advice is to just keep building websites. Your foundation of HTML/CSS/JS is all you need for now. Come up with an idea for a project and start chipping away at it, with your goal being to see it through to completion. When you hit difficulties along the way (notice I said "when", not "if"), search for answers to your specific problems, learn how to implement the solution, and work from there. This'll be your best way to learn.

Kobayashi
Aug 13, 2004

by Nyc_Tattoo
Does border-box sizing only apply to an element's width? I was just using absolute position and noticed that I needed to take the top and bottom borders into account.

Ghostlight
Sep 25, 2009

maybe for one second you can pause; try to step into another person's perspective, and understand that a watermelon is cursing me



No, it applies to the box.

fuf
Sep 12, 2004

haha

huhu posted:

I've been playing around with HTML, Bootstrap, CSS, and JavaScript for a few weeks now. I've realized that maintaining my website with a header and footer that has to be updated per page is pretty annoying so it looks like I'm going to invest my time in learning PHP next. What else would you guys recommend investing my time in next to learn?

You might as well jump straight to Wordpress since that's by far the easiest way to make money out of some basic PHP knowledge in my (limited) experience.

Maybe play around with this awesome starter theme:
http://themble.com/bones/
There are a lot of really detailed comments in the code that basically guide you through how everything works. Can't recommend it enough.

The Merkinman
Apr 22, 2007

I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!
Anyone here try out Spartan in the latest Windows 10 build? The Cortana integration seems neat, but it feels like that's the only site it works on. I've looked at the code and not seen anything special, and in fact it looks pretty sub par as far as code (two #footers, no microdata, etc). Any idea how it works?

White Light
Dec 19, 2012

Check this out fellas, it's a pretty ingenious piece of web design software I found online:

http://macaw.co/

I've been spending time learning it this morning and liking it so far. Maybe one of the seasoned vets around here wanna give it a try? I'd love to hear some thoughts on how practical it is

Thermopyle
Jul 1, 2003

...the stupid are cocksure while the intelligent are full of doubt. —Bertrand Russell

Parrotine posted:

Check this out fellas, it's a pretty ingenious piece of web design software I found online:

http://macaw.co/

I've been spending time learning it this morning and liking it so far. Maybe one of the seasoned vets around here wanna give it a try? I'd love to hear some thoughts on how practical it is

It's been discussed in this thread on and off over the past couple of years. Use the forums search with this threadid to find some conversation.

revmoo
May 25, 2006

#basta
I need a CSS+HTML PDF generator. I've used DomPDF in the past with great results and enjoyed using it. My primary concern is performance (scaling, really) this time around and I'm wondering if DomPDF is still the way to go or if I should look at alternatives? Also it's not outside of the realm of possibility of using something like HVVM and worker nodes to do the generation if necessary. I'd prefer to use a PHP solution but if I can get better performance with something else then that's ok too.

Thermopyle
Jul 1, 2003

...the stupid are cocksure while the intelligent are full of doubt. —Bertrand Russell

revmoo posted:

I need a CSS+HTML PDF generator. I've used DomPDF in the past with great results and enjoyed using it. My primary concern is performance (scaling, really) this time around and I'm wondering if DomPDF is still the way to go or if I should look at alternatives? Also it's not outside of the realm of possibility of using something like HVVM and worker nodes to do the generation if necessary. I'd prefer to use a PHP solution but if I can get better performance with something else then that's ok too.

I've been calling out to this: https://github.com/wkhtmltopdf/wkhtmltopdf

I don't know how its performance will compare to DomPDF, but I wouldn't be surprised if wkhtmltopdf was faster.

revmoo
May 25, 2006

#basta
It almost has to be faster, seeing as it's a binary implementation. That looks pretty sweet.

kedo
Nov 27, 2007

Amusing fact, I was in the office where the Macaw team works today!

Anyone familiar with MathJax? I'm trying to figure out if there's a way to inject some breathing room into complex equations. Simple equations are nice and easy to read:



but when there's a lot of nesting going on, stuff gets really small and compressed:



I've reviewed the documentation and can only find ways to scale the entire equation, but not to adjust padding or anything like that. The markup MathJax generates seems so complex that I have no clue how to adjust it intelligently. Any ideas?

Adbot
ADBOT LOVES YOU

Hed
Mar 31, 2004

Fun Shoe
What are you feeding into MathJax? If it were LaTeX input you could just move the sigma notation limits above and below the symbol and that would clean up really nice imo.

  • 1
  • 2
  • 3
  • 4
  • 5
  • Post
  • Reply