The Web Design & Development Megathread

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

«‹›3 »

lunar detritus: May 6, 2009

caiman posted:

What? JS runs in the browser. It's front-end. If front-end actually did just mean HTML and CSS, you might have a point (I still don't think so), but front-end is a complex beast. Think about all the JS frameworks, build tools, libraries, etc. The landscape's only growing in complexity. If anything, the demand for skilled front-enders is increasing.

I think people get confused because 5-8 years ago being a frontend dev meant you knew html/css and JS. There were some new things in the horizon but if someone was looking for a frontend dev those were the requirements. Now it's all segmented, they may need an Angular dev, or a React dev, etc. It's starting to look like the backend landscape where you may know Ruby or PHP or Python but jobs look for people that work in Rails Laravel or Django.

# ¿ Mar 27, 2015 16:28

Adbot: ADBOT LOVES YOU

# ¿ May 15, 2024 12:06

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.

# ¿ Apr 1, 2015 21:04

lunar detritus: May 6, 2009

Is there a way to pack up a web app to make it independent of the server?

A client only has an old desktop computer with Windows/XAMPP and uses it as a server for a custom intranet made in PHP. It works but because it's windows a couple of things like the money_format function don't exist.

Would it be a terrible idea to make a virtual disk with the app and tell them "Install Virtualbox, run the image, you're done"? I looked at Docker but it seems to be annoying to setup in a windows system.

# ¿ May 3, 2015 16:45

lunar detritus: May 6, 2009

Karthe posted:

I have two ng-repeats, one nested inside the other. How can I get the parent ng-repeat's $index from within the child ng-repeat?

I can't test right now but I think $parent.index would give you the index you want.

# ¿ May 14, 2015 20:03

lunar detritus: May 6, 2009

I have been playing around with Meteor, which uses Mongo for its database layer. I'm not sure how to structure my data as I'm not sure where to denormalize, where to embed, etc.

I'm making a deck builder for a TCG with player card lists and a general library. Right now the main collection is 'Cards', with each document being a single and unique card. Then I have the Users collection which has the standard User documents. My problem is with the decks and the userCards collections.

Originally my Deck collection was like this:

JavaScript code:

[
  {
    // 'card-slug': amount of cards
    'card-slug': 1
    'card-slug-1': 3
    'card-slug-2': 1
  },
  {
    'card-slug': 4
    'card-slug-1': 2
    'card-slug-2': 1
  }
]

and then I joined with the card collection in the client layer. However, I have been reading that I should have been embedding the cards in the Decks, ending up like this:

JavaScript code:

[
  {
    'name': 'Name of the Card',
    'type': 'Type'
    'slug:':'card-slug',
    'deck-slug': 'test-deck-2',
    'deck-name': 'Test Name 2',
    'owner': 3
  },
  {
    'name': 'Name of the Card',
    'type': 'Type'
    'slug': 'card-slug',
    'deck-slug': 'test-deck',
    'deck-name': 'Test Name',
    'owner': 1
  },
  {
    'name': 'Name of the Card 2',
    'type': 'Type'
    'slug': 'card-slug-2',
    'deck-slug': 'test-deck',
    'deck-name': 'Test Name',
    'owner': 1
  },
  {
    'name': 'Name of the Card',
    'type': 'Type'
    'slug': 'card-slug',
    'deck-slug': 'test-deck',
    'deck-name': 'Test Name',
    'owner': 1
  }
]

The userCards collection is simillar, a list of cards and an amount, without the deck property.

What would be the best way to structure something like this? (besides "Don't use mongo")

# ¿ Sep 17, 2015 21:20

lunar detritus: May 6, 2009

kedo posted:

Oh I understand the concept behind showing something as quickly as possible. I'm just not sure that the reaction "loading screens are bad, always," (which, granted, I'm reading in between the lines and maybe straw-manning a little here) is true especially in situations where a longer than 2-3 second load time is unavoidable.

For me it's the difference between a webapp and a website. I don't mind if a webapp has a loading screen but a website should get me to the information as fast as possible.

# ¿ Sep 18, 2015 21:54

lunar detritus: May 6, 2009

Anony Mouse posted:

Looking for some advice on how to best structure a project I'm working on. It's fairly simple, a collection of pages with a side nav, no CMS.

For something like this I'd use http://assemble.io/ to precompile everything before uploading.

# ¿ Nov 11, 2015 15:02

lunar detritus: May 6, 2009

Is there anything new in admin frameworks?

I make mobile apps for tracking and saving stuff through an API and clients normally need a way to either create or edit whatever resources the app uses. I have been using ActiveAdmin because it's what my previous job used and it's fairly easy to make it client-usable. Would Django be better? What about something like KeystoneJS? My main requirement is that it doesn't look like rear end and doesn't take forever to setup since they are just CRUD apps. JS would be nice since that's what I use the most but not a deal breaking thing (I'm already using Ruby for ActiveAdmin :shrug:

).

EDIT: I forgot to mention that whatever system I use for the administration is the one that'll be used for actually setting up the API. Right now RoR is the one providing the JSON endpoints.

lunar detritus fucked around with this message at 18:08 on Apr 3, 2016

# ¿ Apr 3, 2016 18:00

lunar detritus: May 6, 2009

LargeHadron posted:

I've done a decent amount of front- and back-end development with PHP, React, Node, etc., and now I have a contract to make a WordPress site for the first time. I don't "get" WordPress though.

I bought a theme and went through a convoluted process to install it, part of which involved importing an XML of "sample content". Now I have a page that generally looks neat but now I need to put my own content on it. The problem is, the template isn't very customizable via the WordPress interface. I can change the navbar links, edit blog posts, etc., but it looks like the vast majority of content, including HTML and CSS, came from the sample content XML I imported. Am I supposed to make my own XML file and import that, or am I missing something really obvious?

Sorry about the dumb question. WordPress blows.

Installing a "premium" theme is about the worst thing you can do if you want a custom site. They tend to be convoluted and bloated pieces of poo poo (because that's what sells).

If you imported a custom XML of sample content and it affected the layout it means that a lot of crap is part of each page/post and the theme is using something like Divi or Visual Composer so you need to go to each page or post and edit it using the plugin's interface.

# ¿ Apr 6, 2016 22:06

lunar detritus: May 6, 2009

nexus6 posted:

Is there a way to use Twitter's API to tweet an image on a user's account? Basically I want to use a Web Intent but also include an image.

[...]

Next I looked at the OAuth API which appears to allow you to upload media and post tweets, but only on the account the app is tied to?

If you implement OAuth you can make your users login with Twitter and then upload/post the picture using their token. It'll use your app as client but the image will be posted to your user's timeline.

# ¿ May 5, 2016 00:53

lunar detritus: May 6, 2009

MisterZimbu posted:

DotNetNuke

drat, I would have thought that died about 10 years ago.

# ¿ Jun 8, 2016 23:41

lunar detritus: May 6, 2009

Thermopyle posted:

Don't let this put you off from using Django. You probably won't need to do these types of queries very often, and when you do Django gives you easy ways to use SQL.

Seconding this. Worrying about the speed of your queries or that "ORMS ARE SLOW :byodood:

" is definitely in "premature optimization" territory, especially when you're starting out.

# ¿ Aug 21, 2016 18:13

lunar detritus: May 6, 2009

kedo posted:

I am not a backend person by any means but have a small server-side(ish) personal project I'd like to use as a learning exercise. I think (?) I'd like to use Python. The lazy part of me wants to use Node because I already know Javascript, but I feel like Python is probably the smarter choice.

My goal is to accomplish a few relatively simple tasks with this little program:

��Monitor a web page for DOM changes
� On DOM change:
- Send an email, probably using Mandrill, to notify myself of the change
- Log the time/date of the change in a database (this is really just to force me to figure out how to connect to and interact with a database)
� List times/dates of previous changes on a page, pulling data from the database

Does anyone have suggestions re: frameworks or tools in general?

I'd separate the tasks. First you want to get and save the info:
With Node you can achieve this using Cheerio + Request. Request for downloading the page, Cheerio for parsing it and getting the data you want to compare. It has been years since the last time I used Python but I remember Scrapy did everything, from downloading to parsing. Once you have the data save it into a database.

Then, using whatever web framework (Express, Django, Flask, etc) you want to learn to use pull the info from the database and display it.

lunar detritus fucked around with this message at 23:02 on Aug 29, 2016

# ¿ Aug 29, 2016 22:58

lunar detritus: May 6, 2009

Scaramouche posted:

too me, agreed I am my friend

blessings of god be with you

Stop hacking into my oDesk inbox.

# ¿ Aug 30, 2016 22:10

lunar detritus: May 6, 2009

HardDisk posted:

I've been tasked with creating a Chrome extension that takes the shape of a side-toolbar injected on certain pages. It is doing what we wanted it to do, but now it is the time to style it and I'm running into some issues regarding some of the pages' agressive styling, namely that it is also affecting the elements of my toolbar.

I've read up on CSS resets and managed to apply it only to my elements, but it was a bit too aggressive in that every element reverted to pretty much text only. This would be fine, but most things CSS that are beyond "slap boostrap on the page; add classes" are beyond me. I also tried namespacing the bootstrap css using an automated prefixer site and besides the resulting css being horrible, even with the namespaced sheet the toolbar differed amongst the sites it should work on.

So, I don't know what else to try. I imagined slapping the bootstrap CSS would have worked, because it has its own reset rules. But apparently badly-made CSS can overcome all selectors.

I'd add an id to the sidebar, apply something like normalize.css (which should leave you with default styles instead of just text) editing it to prefix everything with the id and then apply your styles also namespacing the classes with the id.

# ¿ Sep 5, 2016 18:06

lunar detritus: May 6, 2009

Proper web components with scoped css are coming right? Right? :negative:

# ¿ Sep 5, 2016 23:23

lunar detritus: May 6, 2009

fuf posted:

I think it's a combination of bad previous developers and too many plugins / extensions?

Mostly posting just to show how crazy it is but any tips on how to start optimising this also welcome.

That list includes prototype, scriptaculous and a two-year old jquery version _{(PROTOTYPE AND SCRIPTACULOUS! IN THE YEAR OF OUR LORD 2016!)}. Everything is very old so refactoring means remaking from zero all the widgets that use those dependencies (or replacing them with modern versions that only use jquery or something similar). It's going to be tedious as hell in any case.

# ¿ Sep 26, 2016 17:53

lunar detritus: May 6, 2009

huhu posted:

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?

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.

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?

# ¿ Oct 15, 2016 20:38

lunar detritus: May 6, 2009

Horn posted:

You're probably looking for a yeoman generator

generator-angular does exactly that but doesn't support components yet.

# ¿ Nov 8, 2016 21:06

lunar detritus: May 6, 2009

I thought you were supposed to have one h1 per content "block". If you page only uses divs you get only one hierarchy so you can only use one h1.

<section>, <article>, <aside> and other structural elements should give you one sub-hierarchy each so you get multiple h1, one per each block.

# ¿ Nov 27, 2016 21:41

lunar detritus: May 6, 2009

Knifegrab posted:

So I am wrestling with responsive design, and I have kind of come to a philosophy question. Is it sometimes best to just output the displayed information twice (one that is hidden at certain breakpoints and vice versa)? Once in a way that is organized for desktop and one for mobile (or whatever breakpoints you have set.)? I am realizing that while I can do A LOT with css to change the different responsive sizes, I can't do everything...

I feel that if you have to do that kind of thing something went wrong in the design stage. Things flow in a certain, predictable, way.

So yeah, output whatever you need twice if changing the design is not an option. It's kinda out of your hands.

Edit: Or make a mobile site. It's a different kind of terribleness but a valid option if the design is not really that responsive.

lunar detritus fucked around with this message at 02:58 on Dec 24, 2016

# ¿ Dec 24, 2016 02:53

lunar detritus: May 6, 2009

No Gravitas posted:

please help it hurts so much

With flexbox: http://jsfiddle.net/m1mskfbe/4/

# ¿ Dec 24, 2016 15:30

lunar detritus: May 6, 2009

Knifegrab posted:

Its me back with another inane webdev question.

I am using the transition property on a couple of things. In one case I am using transform: scale(2) when you hover over one of hte many flaoted items inside a container to indicate selection, it works really well but unfortunately there is a weird effeect I don't love, its not the end of the world but I would want to be able to still select the adjacent children elements where their normal boundary is but the scaled float covers it. Not a huge thing because the scaled item only covers a small portion of the adjacent elements but just something that is bugging me. Also the right most element in the float container causes the whole layout to break when transformed.

Also I was wondering if there was a way to keep an image unskewed inside a container that is transform:skewed but have it fill the container up to the edges. I have tried a couple things but cannot get it to work.

Sorry for all the questions as of late, normally my scope for projects is small but I am doing a full blown top to bottom this week.

pointer-events: none can help you with the first one. The second can be done by scaling the image up I guess.

https://jsfiddle.net/py7gojst/

# ¿ Dec 27, 2016 19:24

lunar detritus: May 6, 2009

toiletbrush posted:

I'm developing a website for a Chinese client - they're expecting us to lead on a lot of the technical side of things, which is fine, but one thing I'm not sure about is passwords. Should passwords on a Chinese site (or any site, for that matter) allow the use of Chinese characters? I've found this article, but not much else.

Shouldn't passwords allow anything?

# ¿ Jan 10, 2017 14:59

lunar detritus: May 6, 2009

PT6A posted:

Definitely make the availability of the English pages known. Remember that Spanish-speaking visitors may well be fluent in English but may prefer to read pages in Spanish where available.

And Google Translate is a thing, especially nowadays when you can press a button (always translate) and never see an English language page again.

# ¿ Feb 22, 2017 00:38

lunar detritus: May 6, 2009

Lumpy posted:

It's not bad, and sorry if my post came off that way. jQuery is pretty amazing, but it suffers from "the WordPress problem" in that people try and use it for things way outside the scope of what it was designed for and that turns into a poo poo-show.

Basically, don't make a SPA using only jQuery.

# ¿ Mar 8, 2017 16:22

lunar detritus: May 6, 2009

Maluco Marinero posted:

Same, but I've spent a lot of time (and was willing to) on my provisioning strategy for my Linodes, but many people don't really wanna do that, and Heroku is great for that.

And Dokku works really well if you want something cheaper.

# ¿ Mar 13, 2017 02:16

lunar detritus: May 6, 2009

McGlockenshire posted:

Thanks for going back and making me re-read that. You would think that they'd make a much bigger deal out of actually using the tool immediately instead of skipping to the "oh and here's how to make it all way more complicated than you might actually want at first." Judging from the way they minimize this use case, either this doesn't work at all or there are so many downsides to it that they feel they need to not talk about it. That makes me uneasy.

Of course they don't want you to use it, transpiling in real-time is an awful idea for most use cases.

# ¿ Mar 19, 2017 01:11

lunar detritus: May 6, 2009

Is there a standard for database setup in node environments?

Most of my experience has been with mongo (which allows you to just throw crap at it and it'll work) and Rails which has a nice db:setup/migrate thing going on.

# ¿ Apr 22, 2017 13:17

lunar detritus: May 6, 2009

fuf posted:

Good to know but still need to figure out the front end bit.

Have you seen Sendy? I haven't used it but their entire selling point is that it uses Amazon SES for sending newsletters while being selfhosted.

# ¿ Jun 8, 2017 16:49

lunar detritus: May 6, 2009

Dominoes posted:

This brings me to a question I'd been meaning to ask for a while: create-react-app is universally-recommended, (and there are a number of alternatives) that sets up a modern-JS config and directory structure with JSX transpiling and React included, without a backend. What's the intended use case for this? AFAIK, JS doesn't do much good without a back-end, and the config will change significantly when you incorporate one. Is it intended for use with node?

It's probably intended to be used with an API. Same reason why many of the big "backend frameworks" are offering API-only variations (Rails, Drupal, Wordpress, etc).

# ¿ Jul 2, 2017 22:32

lunar detritus: May 6, 2009

Dominoes posted:

Like, link it to Django Rest with JSON?

Yup, consume everything from an API. In most cases you end up having two apps, the backend that serves the JSON and the front app that consumes it.

# ¿ Jul 2, 2017 22:52

lunar detritus: May 6, 2009

HardDiskD posted:

Is there something similar to create-react-app for Vue?

https://github.com/vuejs/vue-cli with the webpack template

# ¿ Aug 3, 2017 22:58

lunar detritus: May 6, 2009

darthbob88 posted:

Is there a good way to make an element the next focus target? I have a menu which toggles visibility for a set of divs, like this Codepen. The accessibility auditors are complaining because a user can't just tab directly from selecting the Foo menu item to the Foo link, they have to tab through the other menu items first. At present I'm setting tabIndex on the div and adding $(target).focus() in the showDiv method, but that's neither elegant nor at all effective, and I'd really like something that actually works.

The easiest way to do it would be something like this but it has the problem that the first section is focusable due to already being visible. This pen tries to solve it by toggling the tabindex attribute as needed but I'm not sure if that's better or not than what you were already doing.

# ¿ Aug 23, 2017 01:34

lunar detritus: May 6, 2009

ModeSix posted:

Maybe a distinction I should make is that I primarily use React Native rather than ReactJS. They're essentially the same thing, but with mobile specific things built in.

The cognate in Angular is a loving mess. Ionic I think?

I'm not sure they are directly comparable since Ionic still is a webapp in a browser (cordova) shell.
Ionic 2+ is real nice though, the upgrade to Angular 2 (and Typescript) helped a ton.

# ¿ Sep 13, 2017 21:00

lunar detritus: May 6, 2009

TheCog posted:

I work with ionic 3, and it's a mix of nice and wtf every day. Like for example, recently we discovered that http requests sent with the native http method on our Android build would automatically parse javascript objects into JSON if you used them as the body parameter. In the iOS build, it would instead send undefined if you didn't first parse the JavaScript object into JSON yourself.

If by native you mean it's a Cordova plugin, yeah, they are very hit or miss. The camera preview one has the weirdest bugs and I have to use it in two different projects. :negative:

# ¿ Sep 13, 2017 21:20

lunar detritus: May 6, 2009

Main Paineframe posted:

Is there a Javascript test runner that isn't awful? I like Jasmine, but trying to set it up with Karma is agonizing. The config settings are barely documented, and running anything in it means going through a plugin system consisting entirely of barely-documented npm modules.

Jest is nice.

# ¿ Jan 25, 2018 00:18

lunar detritus: May 6, 2009

duz posted:

Is there a good, universal way to indicate to the user their data is being saved with an ajax call without changing the layout to include an inline throbber or am I just going to have to bite the bullet and do that?
The use case is business (government) software, they're not leaving the page just because they're saving the data they've put in so far.

If you don't want to change the layout to add more elements you could always do something like this.

(from https://github.com/hakimel/Ladda)

# ¿ Jun 21, 2018 15:18

lunar detritus: May 6, 2009

It sounds like Google Forms would be perfect for you and it's free.

# ¿ Aug 26, 2018 05:24

Adbot: ADBOT LOVES YOU

# ¿ May 15, 2024 12:06

lunar detritus: May 6, 2009

Thermopyle posted:

Just before the whole serve-everything-as-json-and-build-the-dom thing took off there was a bit of time where people were getting HTML fragments downloaded from the server and swapping them out on the page on link clicking.

I seem to remember there was a library or two aimed at making this better or easier, but I can't for the life of me come up with any good search keywords to find this.

Anyone have any ideas what I'm looking for? I feel like Github had a JS library they open sourced...

Turbolinks?

# ¿ Jan 8, 2019 00:37

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

«‹›3 »