The Web Design & Development Megathread

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

«‹›3 »

huhu: Feb 24, 2006

Edit: Wordpress is so much better than Blogger.

Question answered.

huhu fucked around with this message at 19:23 on Dec 3, 2014

# ¿ Dec 3, 2014 18:26

Adbot: ADBOT LOVES YOU

# ¿ May 21, 2024 05:15

huhu: Feb 24, 2006

If I wanted to make a webpage that loaded X amount of the most recent images put into a folder, sorted by their EXIF data, what would be the best/a method for doing this? Could it be done with jQuery or would I need to look into something else? I've been messing around with HTML/CSS for some time now without any real goals and this is something I would actually like to implement as part of a website I have in mind. Just a point in the right direction would suffice.

# ¿ Mar 24, 2015 07:48

huhu: Feb 24, 2006

Data Graham posted:

There's basically two ways to approach this: lightweight (client-side) and heavyweight (full-stack).

The way I (and most "full-stack" people) would approach this is to store the image filenames and EXIF data in a database, and then use some kind of dynamic page creation platform (e.g. Django, Ruby, JSP) to serve up the list of files complete with all their attributes as the result of a sorted query to the database. This requires you to do a bunch of back-end work, though, and to get your hands dirty at all levels from the database to the page generation to the front-end, plus creating UI workflows for functions like uploading images, changing metadata, and so on.

A more lightweight way (which has elements of old-school and elements of new) is to keep the server-side folder just as a bare storage area for your files, which you can just throw pictures into without any special software handling to extract their EXIF data or store any data about them, and the web front-end should "just work". I say this is "old-school" in the sense that web services used to be fairly thin shells over a very bare-bones UNIX filesystem, i.e. just a way of navigating folders and downloading files remotely. This required no back-end work, but you were very limited in your browsing options�basically you had filename, last-modified date, size, and that's about it. Since then, browsing a server's files directly has become unfashionable, and the idea of a "web app" has evolved to the point where you aren't actually navigating any kind of folder structure on the server, but rather a synthetic schema dictated by the shape of your stored data. This gives you lots of flexibility in how you present that data, but you have to build all that infrastructure yourself. I get the impression you're envisioning something as much like the bare-bones old-school way as possible, just with the added ability to browse by embedded metadata that isn't exposed in the filesystem.

The "new-school" side of this approach is that nowadays there are a lot of tools available for client-side programming. If you don't want to have to deal with databases or custom-building a back-end, you can just build a thin page that displays all the images found in a given folder, and then extracts their EXIF data on the fly through JavaScript and sorts them accordingly in-client. There are a number of JS libraries that claim to be able to do this; I don't have direct experience with any of them, and the ones you find with a quick google for "javascript exif" seem to be both rudimentary and under ongoing development, so you'll be working on the bleeding edge and without a net. But it might be the right answer for your application.

Awesome reply, thank you very much. I'll probably be back in the future with more questions.

# ¿ Mar 24, 2015 23:02

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?

# ¿ Apr 6, 2015 18:25

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.

# ¿ Apr 6, 2015 18:52

huhu: Feb 24, 2006

Using JavaScript, jQuery, AJAX, and/or JSON, is there a way to turn all the files in a directory into an array? I'd like to be able to pull all the images from a folder and have them display on a page and have this update whenever I decide certain images shouldn't be there and I can just remove them from the folder.

# ¿ Jun 5, 2015 03:09

huhu: Feb 24, 2006

How would I get it so that all the "left" elements align left and take up one line, and all the right elements do the same but align right?

http://jsfiddle.net/5n3us6y9/1/

Edit: Additionally, if I wanted to have a collection of images that were sort-able by "year" "genre" and "country" what would be the best way to do this?

My current attempt is to have a bunch of classes added to each image such as:

<img class="2015 Peru landscape">
<img class="2014 China street">

I would then have, for example, a "2015" button that when clicked would hide all img without class "2015" and only show "2015" class.

Is there a better way or is this it?

huhu fucked around with this message at 20:09 on Jun 30, 2015

# ¿ Jun 30, 2015 19:56

huhu: Feb 24, 2006

kedo posted:

http://jsfiddle.net/zmtuu3ev/ Is that what you're looking for?

The 50% width was loving it up.

Err sorry. I meant one left and one right per line.

Kind of like this:

code:

left1                                     right3
left2                                     right6
left4                                     right7
left5                                     right8
left9

# ¿ Jun 30, 2015 20:19

huhu: Feb 24, 2006

Could I please get some help on making this image aligned vertically, and responsive? It also gets squished in the vertical if I reduce the window size. I've been trying for an hour now and I feel like there's some simple fix I'm missing.

http://tiny.cc/19sq2x

# ¿ Sep 1, 2015 21:16

huhu: Feb 24, 2006

How would I go about keeping the image from going off the page?

# ¿ Sep 1, 2015 22:24

huhu: Feb 24, 2006

kedo posted:

Don't do it with one big image. If you want the image to maintain its correct ratio and still fill up 100% of the browser height and width, you are attempting to achieve the impossible.

I want it inside the window, aligned vertically and horizontally. I don't want it filling up 100% in both directions.

# ¿ Sep 1, 2015 23:07

huhu: Feb 24, 2006

v1nce posted:

fwiw; splash screens are a bad idea. Making the user download a large image because it needs to look good at scale is a bad idea.

How else should I link to two separate portfolios and WordPress installations? The image is also only 68kb... that's not considered big, right?

# ¿ Sep 3, 2015 21:15

huhu: Feb 24, 2006

Thanks for the awesome help v1nce. I'm going to leave it as a splash page for now since I'm traveling and don't have a lot of time but when I get a chance I'll put some more work into the home page and getting rid of the splash screen.

# ¿ Sep 7, 2015 16:49

huhu: Feb 24, 2006

I've got a basic situation where I want content to move to a new line depending on screen size. The thing is at some screen widths, the description for an image will wrap around and cause empty spaces where there should be an image. Made a JSFiddle to explain the situation. What should I be changing?

http://jsfiddle.net/fccmwazL/

# ¿ Nov 14, 2015 00:58

huhu: Feb 24, 2006

For my next project I'm going to help an NGO (or fail and tell them they need to pay someone) design a world map of all their projects with a popup showing some basic information like who where and what. I haven't branched into this kind of stuff except for some potentially useful experience with jQuery and JavaScript. Ideally the popup information will be stored in an Excel sheet or easily converted to some other database format. What would I need to learn to get a very basic setup up and running?

# ¿ Nov 30, 2015 03:30

huhu: Feb 24, 2006

loving,

. I figured out that it had to convert every "city, country" pair to lat/long. Ended up just finding some wep app to convert all of them once. Loads in about 1s now.

I've got a Google map here: https://goo.gl/XgteVU which is pretty much just code from https://developers.google.com/chart/interactive/docs/gallery/map#adding-multiple-marker-sets

Except that I've added in the following two bits of code:

code:

var jsonTable;
$.ajax({
     url: "js/projects-table.json",
     dataType: 'json',
     async: false,
     success: function(data) {
          jsonTable = data;
          console.log(jsonTable);
     }
});

To grab all the content from a json file to be displayed on the map.

code:

for (var i=0; i<jsonTable.length; i++){
     data.addRow([
          jsonTable[i].city + ", "+ jsonTable[i].country,
          "<b>Title: </b>" + jsonTable[i].name 
               + "<br><b>Sector: </b>" + jsonTable[i].sector 
               + "<br><b>Description: </b>" + jsonTable[i].description 
               + "<br><b>City: </b>" + jsonTable[i].city 
               + "<br><b>Country: </b>" +jsonTable[i].country,
          jsonTable[i].sector]);
}

And this to format the content to be displayed on the page.

I can't figure out though, why with the addition of this code, the webpage is taking so long to load.

Also, if anyone has a link for a guide on how to read the network activity recorder for Chrome developer link that'd be great. I have no idea how to search that without pulling up a bunch of irrelevant stuff.

huhu fucked around with this message at 22:23 on Dec 12, 2015

# ¿ Dec 12, 2015 21:46

huhu: Feb 24, 2006

I've got two portfolios, engineering and photography, that I'd like to keep separate from each other. Currently they're hosted as Wordpress installations on huhu.com/engineering and huhu.com/photography. huhu.com is a splash page. This setup is messing up with SEO. I'm curious if you guys have suggestions of what I should do with the site so that huhu.com actually shows up in search results while also keeping both portfolios separate.

Edit: I'd like to keep the two websites separate and on the same domain name but the splash page is making it so that huhu.com won't show up on Google.

huhu fucked around with this message at 20:23 on Apr 27, 2016

# ¿ Apr 27, 2016 20:20

huhu: Feb 24, 2006

v1nce posted:

Alternatively if you choose not to plaster your name on the homepage, you can use the root domain to aggregate BOTH of your sites into a single blog-roll on the root domain, but the link would go through to the individual sites.
All three sites can/should share a header bar which provides some layout conformity, and lets you hop between the engineering and photography sites. That improves my browsing experience if I'm looking at things about you rather than something specific to do with photography.

I really like your aggregate both sites into a blog on the main page. Is there an easier way than setting up a wordpress installation on the homepage to do this or is that the easiest route?

# ¿ May 3, 2016 01:00

huhu: Feb 24, 2006

v1nce posted:

Depends. If you have a reliance of Wordpress plugins to generate the article body (short tags) then you've really no choice than to run a WP install which can handle that. It gets pretty fuzzy on how you can accomplish this goal if you rely on short tags heavily.

If I had to do it, I'd probably go with either of these two options:
1. Wordpress instance with its own RSS aggregator plugin, harvesting from the two sites.
2. Standalone RSS aggregator script which periodically updates/queries your individual sites and harvests the post synopsis. Very custom.

The standalone one if obviously more difficult. There may be a script out there, or you could rework code from the WP RSS Aggregator plugin to achieve the same goal without WP attached to the backend.

Another complex alternative is to write a WP plugin which exports posts to PHP files that you aggregate site can import and combine. That'll preserve the HTML and resolve the short tags, but it's also the most custom.

Awesome, thanks for all your help.

# ¿ May 3, 2016 20:27

huhu: Feb 24, 2006

McGlockenshire posted:

Maybe "fixed background"?

Regardless it's literally one line of CSS to switch how the background image is oriented so you can just do it yourself.

http://www.w3schools.com/cssref/pr_background-attachment.asp

You'll also need to look into child themes which basically boils down to taking your Foo_ Theme folder, creating a Foo_Theme_Child folder alongside it, creating a style.css file inside the child, adding @import to link to the other folder and then you can throw in the link above I mentioned.

Oh and this is all done with an FTP program. I'm not sure if you even get FTP access with WordPress.com but I might be wrong.

# ¿ Oct 3, 2016 13:41

huhu: Feb 24, 2006

I've combined a horizontal scroller Sly(http://darsa.in/sly/) and a filter MixItUp (https://mixitup.kunkalabs.com/) together as seen here: http://travbum.pythonanywhere.com/#filter-page. I can click on the projects and drag them to the left to see more projects off screen to the right. However, when I stop holding the mouse down they snap back. I feel like I'm not sure where to begin searching the internet for this issue so I'm just hoping for a push in the right direction.

# ¿ Oct 7, 2016 17:24

huhu: Feb 24, 2006

I just finished a single page django website portfolio with the following stats:

Page size 7.9 MB
Requests 83
Load time 2.40 s

First, are these decent speeds? I tried keeping all images under 200kb. The majority of the requests are for images that I was thinking I could use a jQuery plugin to not load them until details for a specific project and its images are opened. I was also going to move all the requests for jQuery plugins to CDNs. The remaining requests are for Google fonts, style sheets, and some other images that appear always on the page.

Edit: The only thing pingdom.com says I failed on is "Leverage browser caching". I imagine a person is only going to visit my website once so I don't think that'd be useful?

huhu fucked around with this message at 05:49 on Oct 15, 2016

# ¿ Oct 15, 2016 05:45

huhu: Feb 24, 2006

Coffee Mugshot posted:

The fact that they will visit only once probably means 2.4s per page load is actually hella slow.

It's 2.4s for the entire single page website. Home, about, list of projects, and 18 project "pages", in total. Is that still too slow?

chami posted:

CDNs for scripts and lazy loading are all well and good, but a 7.8mb page and 83 requests are still quite a lot. Are you bundling your scripts?

To be exact the requests are 1 document, 2 fonts, 5 scripts, 5 style sheets, and 70 images. If I added one more jQuery plugin I could reduce the on page load image requests to 31. With regards to bundling, if I understand it correctly, it looks like if I added that extra plugin and then bundled, I could have 4 less requests for style sheets and 5 less requests for scripts? This would bring my total requests from 83 down to 36.

# ¿ Oct 15, 2016 16:30

huhu: Feb 24, 2006

gmq posted:

I'm assuming 2.4s is the total time before the browser stops working, but how long does it take from clicking the website's link to seeing content?

About 270ms.

# ¿ Oct 16, 2016 00:41

huhu: Feb 24, 2006

BJPaskoff posted:

When I did some older websites, I didn't realize that only (555) 555-5555 style numbers get auto-translated into click-to-call for mobile browsers, while things like 555-555-5555 or 555.555.5555 wouldn't. Is there some jQuery I can plug in that will translate those numbers into click-to-call links, or do I have to go in to all my old sites and manually code in the href="tel:" thing?

I imagine you could write a script that uses regex to go through and replace all of the phone numbers to clickable versions on page load.

# ¿ Oct 18, 2016 17:06

huhu: Feb 24, 2006

I'm trying to add a Mailchimp embedded signup form to my page. I selected the naked (no css) option and I copied to my website. However, when I go to inspect CSS, it's still linking to the Mailchimp style sheet. I cannot find any reference to the style sheet on the website... how is this happening?

Edit: ugh. There was a signup form in the sidebar as well that was applying the CSS to the entire page.

Edit2: That sure was a mindfuck.

huhu fucked around with this message at 21:55 on Nov 11, 2016

# ¿ Nov 11, 2016 21:50

huhu: Feb 24, 2006

Are there any courses or tutorials that walk you through, with exercises, doing the very basics of requests, post, get, Ajax calls, etc? I already know the topics more or less by observing what happens with developer tools and I've built simple stuff with Django. However, this knowledge is very far removed from the basics of what's going on and I'd like to learn more about that.

# ¿ Dec 12, 2016 15:19

huhu: Feb 24, 2006

I've got several different websites hosted with a single hosting account. I try to keep all the production websites updated to the latest versions such as with WordPress. I also have dev websites hosted. If I don't update a dev WordPress website and someone uses a WordPress security flaw to get in, could they then gain access to my other websites?

# ¿ Jan 23, 2017 18:02

huhu: Feb 24, 2006

The Fool posted:

Short answer, Yes.

If they found a vulnerability with WordPress, however my file/directory permissions were well set, would they need to discover another vulnerability to go to the parent directory where the other websites are stored?

# ¿ Jan 23, 2017 19:34

huhu: Feb 24, 2006

PT6A posted:

A friend of mine has been developing a wordpress site cobbled together out of tables and shortcodes and sadness to get everything the way he wants it, and now the design's responsiveness is just as predictably lovely as you'd imagine and I have been asked to make something that will work on mobile devices without making baby Jesus cry.

Just how hosed am I? Is there anything that can be done? I told him the best thing to do is just remove the media queries from the CSS, so at least the full website shows up without a whole bunch of mis-sized and overlapping poo poo. I said I could make a separate mobile version of the website (which he is wont to call an "app" but I don't believe he actually wants an app, just a mobile website) but that's going to be utterly horrendous because it will require either separate updates, or some kind of godforsaken process to inspect the content on the main website (either via screenscraping or by reading the wordpress database directly).

I keep hoping there's an obvious thing that I'm missing that will make this a simple task that will not result in me wanting to tear my hair out.

Scaramouche posted:

My gut says the "easiest" way to is to restart from scratch with a good desktop/mobile theme where most of the work has already been done for you.

Do this. Trust me.

# ¿ Feb 24, 2017 19:01

huhu: Feb 24, 2006

Anyone care to attempt to sum up restful api in like 2 to 3 sentences? Since I'm self taught I don't know what it is by name but I imagine I've worked with it before. All the definitions I'm finding on the internet are quite extensive.

# ¿ Mar 3, 2017 00:29

huhu: Feb 24, 2006

I'm reading a (the) Flask tutorial and it talks about setting up a login form with OpenID. I have a system that I'd like to let ~5 people login to view some data and lock it from others. Is OpenID the easiest way to go for this? What other common method(s) exist?

# ¿ Mar 4, 2017 01:27

huhu: Feb 24, 2006

Just have to share my minor idiotic epiphany of the night. I'm completely self taught and at this point I've built ~15 Websites (static, WordPress, Django) but could never fully grasp GET/POST. I just started building my first Flask website and while writing code to handle a custom form submission, it all clicked. Now I'm wondering what the hell I thought was so confusing about it.

# ¿ Mar 9, 2017 05:16

huhu: Feb 24, 2006

Does anyone else loath the process of moving a website from local to live? I did it once with Django and now I'm trying with a Flask website and I feel like it shouldn't take me this many hours to setup. I've had issues every single step of the way.

# ¿ Mar 12, 2017 22:39

huhu: Feb 24, 2006

I've noticed that the website I'm building is labeling my website as "Not secure" in Chrome. I get this, however I've noticed that other websites, WordPress sites for example, are also not secure, however they are labeled with just the "!" instead of "Not secure". Anyone know why this is?

# ¿ Mar 19, 2017 03:48

huhu: Feb 24, 2006

McGlockenshire posted:

"Not Secure" now pops up if it detects that there's a login form on the page. For a demo, check out https://badssl.com/ and scroll to HTTP Input. It even flags as Not Secure dynamically if the form is hidden.

Ah OK. I went to a login page on WordPress and it gave the same thing, good to know.

# ¿ Mar 19, 2017 04:47

huhu: Feb 24, 2006

fletcher posted:

Having a hard time coming up with the right terms to google for this one. Lets say you are coloring counties of a particular region on a map. How do you go about picking colors that are easy to distinguish from one another? How do you then ensure that two regions that border each other don't have the same color (within reason)? I'm using leaflet for this, not seeing anything on the plugins page that touches on this stuff though.

I recall from picking colors for a graph project -https://blog.graphiq.com/finding-the-right-color-palettes-for-data-visualizations-fcd4e707a283#.npojrgbh5

# ¿ Mar 24, 2017 02:02

huhu: Feb 24, 2006

Tei posted:

Hello guys!.

I am making some experiments with HTML.

http://texthacking.com/retaila/pagesbruto2.php

Tell me what you guys think. (is not feature complete, is just a experiment)

What are your experiments? It just looks like a wall of text.

# ¿ May 4, 2017 23:44

huhu: Feb 24, 2006

I am working on a page where the entire contents of a table are generated on page load with a list of dictionaries in Flask/Jinja2. What is the most common way people apply CSS in this situation? My thought is to use jQuery to colorize cells based on their contents.

# ¿ May 25, 2017 17:32

Adbot: ADBOT LOVES YOU

# ¿ May 21, 2024 05:15

huhu: Feb 24, 2006

The Fool posted:

Why wouldn't you use CSS classes and/or id's as you generate the HTML.

I see literally no need for JavaScript in the example you're describing.

Specific columns need different background colors and specific cells are colored based on their value. I am already using just CSS to set a base color for all TH and then alternating background colors for odd/even rows.

# ¿ May 25, 2017 17:44

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

«‹›3 »