/wdg/ - Web Development General

last: >This season's Advent of Code:
adventofcode.com/2016/

>Discord
discord.gg/wdg
OR
discord.gg/0qLTzz5potDFXfdT
(they're the same)

>IRC Channel
#Sup Forumswdg @ irc.rizon.net
Web client: rizon.net/chat

>Learning material
codecademy.com/
bento.io/
programming-motherfucker.com/
github.com/vhf/free-programming-books/blob/master/free-programming-books.md
theodinproject.com/
freecodecamp.com/
w3schools.com/
developer.mozilla.org/
codewars.com/

>Useful Youtube channels
derekbanas
thenewboston
learncodeacademy
funfunfunction
computerphile
codingrainbow

>Frontend development
github.com/dypsilon/frontend-dev-bookmarks

>Backend development
en.m.wikipedia.org/wiki/Comparison_of_web_application_frameworks
[Gist] backendDevelopmentBookmarks.md

>Useful tools
pastebin.com/q5nB1Npt/
libraries.io/ - Discover new open source libraries, modules and frameworks and keep track of ones you depend upon.
developer.mozilla.org/en-US/docs/Web - Guides for HTML, CSS, JS, Web APIs & more.
programmableweb.com/ - List of public APIs

>NEET guide to web dev employment
pastebin.com/4YeJAUbT/

>How to get started
pastebin.com/pDT82mQS
pastebin.com/AL6j7GEE

>cheap vps hosting in most western locations
lowendbox.com
digitalocean.com/
linode.com/
heroku.com/
leaseweb.com

Other urls found in this thread:

nngroup.com/articles/hamburger-menus/
youtube.com/user/williamprey/videos
css-tricks.com/myth-busting-css-animations-vs-javascript/
stackoverflow.com/questions/6802956/how-to-position-a-div-in-a-specific-coordinates
catalog.data.gov/dataset),
twitter.com/NSFWRedditGif

If I have no related work experience, what should I call my work history section on the resume?


It's currently Professional Experience, but I don't think that fits since.

i wouldnt expect a front end dev to know anything about performance anyway, but yeah CSS is fine for simple changes like hover effects to change color, etc etc. Anything heavy with detail or animation, def wanna use JS...

I wouldn't separate it.

Simply have a section called "Experience". Let the HR tards work out whether something is work experience or academic.

I found the guy's linkedin that I'm talking to. He is their senior developer.

I'm trying to not look like a potato.

is php7 Sup Forums approved?

What does JS do? You mean jQuery animations like slide(), hide(), show() or whatever? Aren't they just calling CSS properties anyway, e.g. for hide(), it actually just adds "display: none" to an element etc.?

Hahaha..

No.

Hahaha..
Yes.

I can't think of shit to make to git gud. Nodejs here

Reminder that /dpt/ is more active and you're more likely to get an answer to your webdev related programming questions there.

The animations themselves are not using the CSS animations.

Not really. You post any web-related question, you get responses like "learn a real programming language" or ">webdev".

spotted the LISP basement wizard faggot.

PHP7 is fine as an API.

If you use it for anything else then use it to program a time machine to go back a decade where you belong.

What's wrong with hamburger menus and what should I use instead?

This basically.

They are good, but it's not very smart to use them on a desktop site where you probably have enough space to fit a whole navigation. People use navigation links less when they are hidden, so keep that in mind.

So normal navigation bar on pc/laptop and hamburger menu when resizing on mobile?

Yes. If there are not many links you could try to even display all of them on mobile too, but hamburger is fine. It's what almost everyone uses anyway.

Can I extend a Javascript object to handle conditional or regex matched keys?

Eg: Instead of

var conditionShort = {
"clear-day": "clear",
"clear-night": "clear",
...
};


I could have

var conditionShort = {
"clear-(day|night)": "clear",
...
};


If not, I guess I'll just preprocess the values.

Correction: Obviously the syntax would not be to have the conditional in the full quotes.

Just add a getter method that handles your conditionals

>gets told that he's incompitent
>responds with the words "edgy" and "sjw"

pfft. Go google a css animation technique called FLIP by Paul Lewis. Maybe you'll learn a thing or two... kiddo.

Also while your animations are running open chrome dev tools and enable paint flashing, so yo can see when the page repaints. If your animations are being handled by the GPU you shouldn't see that happen.

I want to have a light and dark color scheme on my website, but when the user switches a theme it should display on every page and not reset itself.

Does anybody know how to save the selected stylesheet during a whole session, in Wordpress?

>in Wordpress
Please put that at the beginning next time so I can stop reading early.

Fucking pajeets.

Fuck off.

>Wordpress
stopped reading there

Hamburger menus perform consistently poorly in user tests... Because three horizontal lines don't really tell the user anything.

Just use the word "menu" on the button instead and your menu is automatically far more usable.

You are late, mate. That's not the case anymore. 3 lines are the standard and everyone uses them. But that was true X years ago.

Well it is literally at the end of the last sentence

Hey, WP can be deeper than just installing a premade template and customizing colors, you know? You probably haven't even tried it properly. I spent a lot of time on this project, even though it uses WP. Custom functionalities, all the frontend stuff and design. It has its uses.

>everyone does it, that means its not shit

They still perform poorly in usability tests.
nngroup.com/articles/hamburger-menus/

>You probably haven't even tried it properly.

Why would I do that when I can actually program?

Wordpress is a remote access shell with a CMS side-feature, used exclusively by pajeets who don't have the skill do do anything else, or by developers who literally don't want to put any effort into something... meaning they're literally just installing a premade template and customizing colors.

Daily reminder: The panama papers were leaked because of an outdated Wordpress slider plugin.

I read that article, I know. I already said to the guy in the previous post that they are still not great for usability, but if there are many links, there's not any other good solution for it. But I was telling you that people can recognize 3 lines at this point, that's really not the main problem.

>literally just installing a premade template and customizing colors
Yeah, well not everyone does this. I don't either. I wrote a custom template which works for my case.

>The panama papers were leaked because of an outdated Wordpress slider plugin.
And again, I wrote every functionality in PHP by myself. I mean, I'm more of a frontend guy and really wouldn't have time to make a custom CMS for the project, it's not because of laziness. I'd gladly write one in Node or something if I had more time. You are generalizing too much, I'm afraid.

To be clear, I'm not really defending WP either, I don't like it that much, but as I said, it can be pretty decent for specific cases.

Honest question here, should I learn PHP Sup Forums?

Needs a bit of story probably:
> Used to make HTML/CSS sites for people when younger
> Learned python in college and free time making webapps
> Found out I could make money for companies
> Got hired as a Laravel+frontend full stack developer, was not great at php but the demands were so easy I didn't even really have to
> Leave and become django dev (paid) for a while
> Leave again and get hired as DevOp since coding every day is boring and server management/maintenance is pretty comfy

I've had to let like 4 nice gigs go in the last months because I didn't know PHP, things that could have been really easy side money like:
- custom Wordpress plugin to call some REST api
- calculate the volume of STL file online for 3D printer webshop
- some various OSCommerce plugin that would have been

better than php5

and since php is either first or second only to java in web dev use, you best be learning php7

Okay, so I'm doing that and it seems like the obvious way for my use case is to just strip stuff out of the string before fetching the value it corresponds to.

Is it meaningfully faster to use separate regex replaces instead of one large one with a bunch of "?" quantifiers? I'm never sure how costly my regex are, though I'm reasonably competent at writing them in terms of doing what I want.

str.replace(/((Light |Heavy )?(((Low Drifting)|((Snow )?Blowing)) (Widespread )?)?(Thunderstorms (and|with) (Small )?)?/,'');

\\ or

str.replace(/(Light|Heavy) /, '');
str.replace(/Low Drifting (Snow )?/, '')
str.replace(/Blowing /, '');
...


I could also just make my object giant and leave out the getter, because the possible cases the conditional has to catch are finite, only like 100. But it seems gross to do that.

php is easy to learn. since you know other languages you could probably become an average level dev in a couple weeks if you spent a few hours every night learning it.

It is so ubiquitous that I would say every web dev should know php in addition to whatever language they may prefer over it. There is always php dev work out there.

What are they using then? CSS is the only way to change positioning of an element afaik

>There is always php dev work out there.
That's what I'm kinda looking for, be sure that there's some side job when I need one

I don't know why I always thought "nah fuck this" but then I saw shit like this:
Any resources that focus on web frameworks but not a particular one?
Like how packages are structured and how this autoloader/namespace thing work
(Most stuff I find is how to write your own mySQL login thing but I remember that stuff pretty well)

>But I was telling you that people can recognize 3 lines at this point,

They can recognize the word "menu" even better than 3 lines. Just do that instead.

Is freelance webdev/coding work possible? i want to work from home.

Yes. Why do you want to work from home though? Freelancing requires a lot of networking so it isn't good for autists that want to avoid interaction with other people.

Why is it so hard to make pretty design?

How the fuck do I make my fill all the way to the end of the page?

I don't mean setting "height: 100%", because it will only set it's height as big as it's parent, so if you scroll down it won't really fill to the end and add a useless extra scroll.

>inb4 35 jquery scripts synced with 3 google APIs and 2 bootstraps for an answer

I just wish I could simply do it with a line of CSS.

Also, it needs to be compatible with this PIECE OF SHIT SOFTWARE CALLED INTERNET EXPLORER 8+

.child {
position: absolute;
top: 0;
bottom: 0;
}

put the content in the div
set overflow-y to auto

Because it is a skill, like anything else.

help friendos

>MVC pattern

Why would you want to do this in the first place?

Any resource you guys would recommend so i can grok wordpress? I'm already experienced, most resources i found so far deal with html/css/js and simple configuration.
I was looking for more of an overview of the wordpress back end and how things work.

I mean, I'm not a nazi about the technical "pattern" I use. But I want a pattern to define DB models, and a pattern to write and call server-only code (i.e. the client makes a request/API call to perform server actions). I'm wanting to know how to be sure about where my code is being run.

Set html body to 100% relative and your dumbass div to absolute 100%

bump

"clear-" + day | night: "clear"

>90% of all the hustle and work arounds with JS, jQuery and bootstraps could be fixed by simply using to align things in your layout

Why are people such faggots about .

>hur dur just make it 10 divs, set them to display:inline-block, set half of them as float, the other half as absolute and fuck your normal flow of elements, also set the image as display:block so it doesn't send the whole parent down, now wrap it all up with scripts. Now you have four divs in the same line with images in them in the same line as some text

meanwhile

>

Is this the ultimate bait meme ever?

Have you ever heard about flexbox? Jesus...

This guy has decent WP tutorials:

youtube.com/user/williamprey/videos

by killing urself pajeet

Structure it however you want? This is a really small app that I've made with Express a few weeks ago, the server logic is in app.js

>let's add something to my page that only works with the literal latest updates of the browsers

What could possibly go wrong?

I bet you are 12.

There's no need to get all anal about MVC pattern unless you're making some huge complicated thing, but since you asked for it:


1. mkdir models routes controllers
Models is going to contain your models, routes is going to contain your routes and, believe it or not, controllers is going to contain your controllers

2. inside models:
- Create a file called Model and inside it, create a generic class called Model with all the database access methods and whatnot you want. getById, destroyById, whatever.
- Extend the base Model class with whatever specific models you want

3. Inside controllers:
- Create a file called Controller and inside it create a generic class called Controller with methods for all the typical controller actions. Index, show, update, destroy, and all that.
- Extend the base Controller class with whatever specific controllers you want

4. Inside routes:
- create a file for each controller that calls the appropriate controller methods for each route. i.e. GET /dogs/235123 calls DogController.show(235123) and sends the data.

As for which code runs on client vs server, everything above runs on the server. As far as express is concerned, everything clientside is static content. In your case, when a client requests index.html they get your SPA. Every other endpoint shits out json or other resources that the frontend uses.

What to do with a Raspberry Pi Model 2?

put it in ur butt and host a website from it.

I'll use a piezo and websockets to give users the option to vibrate it inside my ass

Why is ember.js the best available framework?

because it's not

Why?

I asked this in /dpt/ but no help..

My application has users with their addresses, and a distance preference of how far they're willing to go.

I need to match up their distance with a zip code. I'm planning on using a map api to find the bounding box of the zip code area and determine based on this.

However, if the distance radius from the user's address barely overlaps the zip code I'm matching, that might include addresses outside of their distance preference.

Does anyone have any suggestions on how I can fix this?

Grow up.

>CSS is the only way to change an element

This is why I really stress front end "devs" to actually learn some type of programming/scripting even if it is javascript.

css-tricks.com/myth-busting-css-animations-vs-javascript/

stackoverflow.com/questions/6802956/how-to-position-a-div-in-a-specific-coordinates

It has 95%+ global support, but I don't care, go ahead and use your shitty tables, it's your website.

a good map api should provide actual zip region polygons, as in you send in user position(taken from there address in this case) and it will place them in a zip region, as for error overlaps, the api should return a confidence value for the location, just drop anything that isn't >50%.

if not you will need to maintain your own geolocation database(search those words for db's that do geolocation searches and find a free source of map data for your region).

What does that have to do with this? It doesn't mean I only know html+css if I didn't know how JS handles this particular thing. Frontend dev with only a knowledge of html+css is not even a frontend dev.

Thanks user. Maybe I'm misunderstanding you but I don't need to check if the user is in a specific zip code, just if a specific zip code is within a range of the user's address. Could be a neighboring zip code.

yeah, you either need a service that provides enough data to be useful or run your own source of geospatial data(for US: catalog.data.gov/dataset), it's not as big as you'd think if you just store zip regions, and they don't change that often so maintenance isn't a big deal.

you said CSS is the only way to change an element and i'm telling you youre wrong, thats all

are you supposed to validate cookies every time the client loads a page?

Just so you get a proper reply:

This sounds as easy as storing the selected stylesheet in usermeta and then loading the according file in the template.

You should structure your CSS in a way that you can have all the basic layout in your regular style.css, and then load a light/dark.css on top of it based on the usermeta setting.

>it can be pretty decent for specific cases.
There's hardly anything you cannot do with WordPress, except maybe shit that absolutely requires a persistent realtime server application.

Unless you're drawing to a canvas, all JS does is write to HTMLElement.style and trigger a DOM repaint. So ultimately, it's using CSS, faggot

You're right about WordPress being versatile, it's just that it's not the best option for most purposes. It's a jack of all trades, master of none kinda deal.

what are you using that cookie for?
why doesn't your server side framework do this already?

True. I would never say WooCommerce is the best eCommerce software. God, no. But if your client/project calls for a community with flexible options for user-generated content, along with a medium-sized shops, choosing best shopping eCommerce software does not get you very far.

Get cordinates. Haversine.

ok i see now, so the example I was looking at was using CSS, but it was crappy because it was altering the top, left, right, bottom properties. For better frame rate and performance, the "transform" property should have been used.

best way to make a landing page? templates, from scratch, etc?

How can I convince my boss to let me start porting important parts of the classic asp spaghetti code to Django? Running off microshill sql server...

by telling him how he earns more money from that.
if it doesn't then forget it.

Why is the jQuery in OP image fucking terrible?
>not caching a selector

By boss I mean the guy who wrote the asp code. The actual boss boss doesn't care as long as it werks. Part of the problem is this code is supposedly EOL as we are planning to move to an erp but that seems at least a year away. I'm not even sure if it's worth it, but trying to maintain and fix problems is difficult rn

tell your boss that you are wasting a lot of time maintaining that code and you'd all be more productive if it gets rewritten/modernized

do you like my self hosted startpage

Oh, that's super simple and concise - thanks! Going to test that out and hopefully I can drop this dumb regex then.

>make shitty craigslist post looking for job
>some owner responds "We need some immediately!"
>respond
>"send resume to this guy"
>google this guy
>He's the web developer
>send resume with mcdonald-tier jobs and a description of what I'm capable of
>he sends "Excellent thank you for sending this over. See you soon!"
>See you soon!

What did he mean by this?

This isn't even a junior-level position. It's for a 70k web dev position.

Just from scratch. Drop an image down as the background and center everything.

Maybe he's getting replaced and he doesn't give a shit who replaces him.

Or it's a recruiter, and you're going to a recruiter interview. Don't waste your time with those.

for what reason?