/wdg/ - Web Development General

>he still uses jQuery Edition

>Free beginner resources to get started
Get a good understanding of HTML, CSS and JavaScript.
developer.mozilla.org/en-US/docs/Learn - a good introduction (independent of your browser choice)
freecodecamp.com
codecademy.com
hackr.io

>Further resources
developer.mozilla.org/en-US/docs/Web - excellent documentation for HTML, CSS & JS
github.com/kamranahmedse/developer-roadmap - Frontend+Backend learner-path suggestions
youtu.be/Zftx68K-1D4 - Web Development in 2018

jsfiddle.net - Use this and post a link, if you need help with your HTML/CSS/JS

Bonus link:
kieranmv95.github.io/Front-End-Wizard/

Attached: wedge.png (1280x720, 652K)

Other urls found in this thread:

domain.com
domain.com:port
script.aculo.us/
discord.gg/wdg
stackoverflow.com/questions/20535025/updating-record-rails-4-no-route-matches-patch-admin-usersupdate
developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
github.com/desktop/desktop
diana-adrianne.com/purecss-zigario/
npmjs.com/package/mysql-light
twitter.com/NSFWRedditGif

Asking here again, hoping that someone smarter than me knows something that helps:
I'm using SSL websockets in a project, they work for me in Firefox but not in Chrome. Chrome complains about "handshakes canceled", I suspect some kind of certificate problem.
Websockets without SSL work for me both in Chrome and Firefox.

What's Chrome's problem and how do I solve it?

Reminder that you can't be taken seriously as a web dev unless you have a Macbook Pro.

what like some kind of self signed certificate?
Local or remote server. On an actual domain?
whatever
you keep buying that stuff if you like it.

web debeloper with macbook, the best combo out there

Yeah, right. Now fuck off back to your LISP/C/C++ thread.

It's a certificate by Comodo, IIRC. Not self signed, bought.
"Remote" server as in sitting on my shelf, and not my local dev system. On an actual domain for which I bought the certificate. The certificate itself works when served via Apache, it's only the socket that causes problems.
I suspect it's a problem with PHP's stream context options, but I can't really debug it and I'm apparently the only idiot on the internet serving SSL websockets via PHP as there's almost no information to this problem to find anywhere.

should I even bother with commonJS or should I use the built in ES6 modules?

Okay guys, nevermind, I apparently solved it. As it turns out, Chrome just didn't figure out that my served certificates are the certificates it's supposed to use. domain.com was working, while wss://domain.com:port wasn't. I navigated Chrome to domain.com:port and apparently it clicked and wss://domain.com:port suddenly worked. I still don't quite know what kind of bullshit this is, but it works now, so I'll take it.

What are you doing anons? i'm making my portfolio

Attached: photo_2018-04-30_08-14-42.jpg (1280x720, 102K)

How do you plan your projects /wdg/? I'm making a habit tracker to learn JS and keep as an item in my portfolio. But it has so many facets to it, which I have typed down in Notepad to keep track of but they all interlock. When you have a complex solo project, how do you plan every element and their relationship to one another as they mold together?

Trello, Notion, Workflowy
Take your pick

At work watching twitch streams and reading elasticsearch documentation.

Are there any other beginner resources besides what's in the OP? Any good old ones too?

I do the db first, then the backend.

Then I do the frontend, and then design.

I'm starting to like React to be honest.

Throw something together as quickly as possible without taking any regard for actual planning or good practice, spend no more than a day or two on it, maybe up to a week max, then throw it away and start again. Take quick notes throughout.
There'll always be a bunch of things you didn't think of that crop up.

the moz one is all you need quite frankly
after that point you are more than ready to find your own resources that fit to exactly what you're trying to do

is it possible to check elements on a webpage different from the one you're currently on. Uh lets say you're on google and you want to do document.getElementById("name") on lets say Jow Forums

const aaaa = fetch(Jow Forums.org/bla/bla); // get the whole HTML tree

search aaaa for your element


?

Anybody here used to use script.aculo.us or am I am the only oldfag itt?

script.aculo.us/

fuck im retarded thanks famalam

What is the most fun JavaScript library you have used recently?

Riot.js

what did you do with it?

Fun stuff.

>unless you have a Macbook Pro.

But I am not a homosexual.

This is what work best (for me):


> 1) Making wireframes with PEN AND PAPER.

Yes, the customer is also allowed to draw. It's much better to crumple up a piece of paper and start over new than having to code anything. Also this is pretty good evidence for what is in scope (and what not) later on without long documentation. AND DON'T FORGET MOBILE HERE, I DARE YOU !!1!!


> 2) Writing tests/specs.

I'm a big fan of test driven development. You HAVE to test your program later on, so why not doing it right now? It will save your time in the long run. And more important: it forces you to think more carefully about what actually happens. It's not unusual that this raises a lot of questions that you can discuss with your customer. Sometimes you'll hear: "Oh I never thought about this one!" It's crucial to find out about special cases or questions at this early stage. Take your time here, it's always worth it.


> 3) Modelling the data.

At this point you're even closer to understand what's really going on. With all constraints, edge cases and so on. Then you can create the database. Depending on the complexity it's a good idea to not create every table but focus on a reasonable subset first and add the rest later on. This also means creating "fake data" for testing and as showcase. You should invite your customer to help you here, if possible.


> 4) Iterative process: Frontend/Backend, Frontend/Backend, ..

I think this is the point where you should start with frontend. I'd always do "mobile first" as today everybody expects that his site does not look shitty on mobile phones and it's way easier to add content to a mobile site than the other way around.

Set milestones and a fter you finished one milestone (Say: the landing page with a carousel) you add the backend (which might retrieve the fake data and pass them to the carousel).

This makes your customer happy, because you can always present him a working peice of software and maybe make adjustments.

Just one thing to add:
Of course this also works without customers!

It's even better because when you write tests you can think freely and adjust the functionality to your liking.

cringe

Rude.

This are my best practices and I learned most of thatI rules the hard way. Your mileage may vary, but don't be such an edgelord..

Hahaha, I remeber it from.. uhm, 2008 or something?

kill yourself.

bla bla bla..

Join the /wdg/ server (if you want!)

discord.gg/wdg

It's basically webdev talk and shitposting.

Attached: 1519539507524.jpg (814x808, 263K)

I wonder where this girl is now

fuck off, kevin.

I want to learn Phaser, but I can't justify it when I have finals I should be studying for.

What said is correct, but depending on what you're doing and where you're doing it, you might run into cross-origin policy issues.

why do you always do this just to shill your paid for discord server

probably will, basically im just trying to get an element from page A and store the inner text as a variable to be used in a chrome extension.

Rails routing is giving me trouble.

How can this be?
>No route matches [PATCH] "/blog_posts/id/1/hide"

When I have
patch '/blog_posts/:id/hide(.:format)', to: 'blog_posts#hide'

Hey, it's the Vue user from yesterday. I managed to host my front end on Digitalocean pretty nicely. API calls work, my website looks fine for the most part.

BUT: There's some different styling on the site. router links now look like regular links (light blue color) font size increased, background color changed, navbar links are stacked vertically and cropped out, instead of horizontally. Anyone know what the cause might be? I'm using bootstrap Vue if that changes anything.

stackoverflow.com/questions/20535025/updating-record-rails-4-no-route-matches-patch-admin-usersupdate

>stackoverflow.com/questions/20535025/updating-record-rails-4-no-route-matches-patch-admin-usersupdate
that doesn't seem to be my problem, since my method is already patch:

This is how I'm getting rich. Why you jelly

I'm following the react 16 course from udemy and I'm at the part he's making dynamic input components. There's a lot I really don't get and he's going too fast but these are the most confusing

const formElementsArray = []

for(let key in this.state.form) {
formElementsArray.push({
id: key,
config: this.state.form[key]
})
}
handleInputChange(event, inputId) {
const updatedForm = {
...this.state.form
}
const updatedFormElement = {
...updatedForm[inputId]
}
updatedFormElement.value = event.target.value
updatedForm[inputId] = updatedFormElement
this.setState({
form: updatedForm
})
}


why the [key] and [inputId] and not .key .inputId?

I knew this was going to be embarrassing. I somehow assumed rails :id meant the routse also literally includes "/id/".

That's what happens when it's getting late...

how could anyone know.
Best to use the debug tools in your browser and check which CSS rules actually apply to the element.

If I'm understanding this right, he's accessing part of the array, rather than part of an object.

If you've got something like updatedForm.inputID, you're trying to access part of the updatedForm object. If you've got something like updatedForm[inputID], you're accessing the updatedForm array at the index defined at inputID.

Essentially, updatedForm is an array of values. You're trying to access a certain index in an array - not a key in an object.

fixed it. it was a bootstrap issue

In react, what's the diference between making a function inside a class like this nameOfFunction(event) {} or this nameOfFunction = (event) => {}

I CAN NEVER COME UP WITH ANY GOOD WEBSITE IDEAS. FUCK SOMEONE HELP ME PLEASE

youll never have one
you just arent creative
go be a code monkey

look

you have an object person = { name: 'jeff', age: 30 }

for...in iterates over each property in the object. so if you do

for(let key in person)

it will iterate twice, first iteration key == name and person[key] == 'jeff'

second iteration key == age and person[key] == 30

in this case key is a variable that holds the name of the property at any given iteration and using [] accesses that properties value

if you do person.key it will be undefined....because the property key on person does not exist, only name and age

also he should be using foreach

Can I work with external files in JS?
What should I do if I want to get access to a file?
t. recently desktop programmer

Attached: 1519279101846.jpg (640x625, 83K)

developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file

setting up electron is a pain. tried electron-compile, but it hasn't been updated for 7 months, doesn't work anymore.
want to use electron-webpack but it requires yarn instead of npm...

why aren't you using yarn

yarn is a dead end but we still have use it for a year or two more

i guess i could, just started with npm didn't want to switch.
might as well i just started

It doesn't matter if your code isn't going to be used in the future. Otherwise Google's style guide says use neither because there's no standardization.

it's best to create your own setup with webpack. you should be able to find a bunch of project that use electron and webpack on github
github.com/desktop/desktop
maybe some less complex ones

>yarn is a dead end
?

Hey, Angular/Vue guys I got a question:

What do you do when you have something like the following:



Column 1
Column 2

Column 3

.grid {
display: grid;
grid-template-columns: 1fr 1fr;
}

Preferably, the child nodes of the would only be rendered otherwise there'd just be two columns.

Is there some Vue/angular syntax to only render the child and not the parent (kind of like React.Fragment)?

i think its called ng-content or ng-template. put that instead of the div

Cheers, thanks.

>falling for a bootscam
That's what you get for joining bootscam sites instead of reading the official docs

bootwhat? i downloaded the series.

Attached: 3E.png (638x429, 139K)

It's a bit of a code smell that you'd need to iterate over every form key.
You should already know what keys are in your form but here's a more simplified example with the "value" prop omitted from the state form because there doesn't seem to be much reason to keep that.

Attached: file.png (1048x955, 149K)

The input element component in that tutorial is more dynamic. You basically just make objects and the component takes care of making the inputs

state = {
form: {
name: {
elementType: 'input',
elementConfig: {
type: 'text',
placeholder: 'Name'
},
value: ''
},
last_name: {
elementType: 'input',
elementConfig: {
type: 'text',
placeholder: 'Last Name'
},
value: ''
},
gender: {
elementType: 'select',
elementConfig: {
options: [
{
value: 'male',
displayValue: 'Male'
},
{
value: 'female',
displayValue: 'Female'
}
]
}
}
}
}


Have no idea why it won't let me post the rest of the code in one post, 1/2

Wont let me post the code snippet so here's a screenshot

Attached: sdf.png (960x592, 96K)

I'd recommend putting brackets around JSX that spans multiple lines like your element.

Also instead of case('text'), you can omit the brackets.

Look in to using something like Prettier and ESLint, and TypeScript later on when you're more confident with React.

Not following the brackets thing. Aren't brackets this []?

I mean "(" ")"

For example

Attached: file.png (835x138, 27K)

British people call parentheses brackets.

user that == ligature is gross.

Would you guys work on an idea you liked for 10% equity and 10k paid for an mvp? I would.

Some guy was saying he wouldn't do it for anything less than 75k. I'm like 10% of a unicorn is better than 75k.

I want to create a personal project, some CRM website from scratch (just the frontend).
Coming from backend enterprise Java, there are many ideas about architecture and best practices.
I already found a google style guide for JS. If I'm writing the site without any frameworks, what are the best practices for organizing my project structure?
Also there are many build tools, which one is the easiest to get into?
All I want is something that will run tests, hot-reload my changes and minify/lint (at least that's what I read). Something like Maven perphaps?

It's triple equals. Double equals looks normal.

>Coming from backend enterprise Java
gross

Hey mean It gets a lot of shit but it really isn't that bad. The ecosystem is actually amazing.
>inb4 poo in loo
I'm a slav.

Can i return an if statement as True and simultaneously print a string to go along with it?

hero="My hand is too full!"

cards_in_hand=10+1

def burn_a_card():
if cards_in_hand==10+1:
return True
else: return False

I want to be able to print the string "My hand is too full!" only when the statement returns True

there are no python commands that return a value and print a statement at the same time

I see. Thank you

if you're just starting out web dev learn JS, then jQuery then whatever you like. to write something complicated without any frameworks is a pain in the ass and writing even a simple application like a calendar would show you how "optimistic" (read: naive) such an endeavor is. usually jquery is first but you may want to write something simple without it just to see why it is necessary for anything even remotely complicated.

AJAX is also a must, which allows you to make calls to the server and add information from the server to the loaded page without refreshing the page

you should probably also know about how databases operate, and how to link up your databases with your backend of choice, log in to them, write/read from them from the backend, manage the flow between the front end and the database through the backend, etc.

CSS is also important. grids and other features of CSS3 are fucking painful. i suggest the no starch press book "the book of CSS3"

you also need a backend. php or node.js to start

and all this is just the beginning. if you're an experienced programmer it should take anywhere from 1 to 2 months.

webdev may seem like easy stuff to people who write java/c++, and in terms of writing a lot of the lower level application logic, it is. but the truth is that it is a pain in the ass to manage all the interactions between the different technologies, and the methodology for learning has to begin with something simple.

I suggest writing a calendar without jquery that allows people to write in events and can be infinitely scrolled (scrolling down loads a new month, or clicking on a right arrow loads the next month), because it seems to capture every element of the process. then your questions will answer themselves about the process for structuring, and web frameworks will be "neat ideas" rather than "wtf is this used for?".

How the fuck do you keep a GraphQL API tidy?

I have this simple endpoint with three queriable types and keep a tidy folder structure like such:
/api
|--/entry
|--/types.js
|--/queries.js
|--/mutations.js
|--/category
|--/types.js
|--/queries.js
|--/mutations.js
|--/service
|--/types.js
|--/queries.js
|--/mutations.js
|--index.js

The index.js is where I define my root mutation and query, which requires me to reference explicitly my types and queries, so obviously this file is gonna grow as I add new types, which kinda defeats the point of splitting them in different folders in the first place.
How can I avoid that?
(reposting because I fucked up the folder names)

diana-adrianne.com/purecss-zigario/
>when you css skills are above average

What's your favorite tutorial or book?

Personally I'm looking forward to the updated JS book coming out next month, Professional JavaScript for Web Developers.

Goddam, that's pretty cool. I've done some hardcore CSS animation, but even then I used SVGs for actual graphics. Doing CSS gradient images by hand is crazy.

Also, I opened it in Safari, and as expected, they totally mangled it. Why does Apple hate CSS?

>Safari
>totally mangled
You know nothing, user.

Attached: I keep an IE8 VM for this.png (615x868, 6K)

Safari truly is the new IE

What should I use to make my portfolio page?

Posted this in dpt but might get some helpful replies here (got none there).

I want to get a job, webdev probably because it's the booming biz right now.
Right now most of my projects are half-finished hobby projects (I've deleted the rest or they've succumbed to time and no longer build because packages are no longer available, etc.).
What's a good project I can build that would demonstrate my capabilities as a programmer to land a webdev job?

I'm thinking of building a personal blog/portfolio with koa backend and react frontend, but I'm afraid that might be too simple.
Any other ideas?

Meanwhile, Safari has a score of 98 on the acid3 test where Chrome and Firefox has a score of 97.
It was just designed with Firefox/Chrome in mind and not tested on Safari. Has nothing to do with any deficiencies in Safari.

enterprise java is an oasis of stability (and sanity) compared to frontend. I'd take spring+maven which have been relevant 10 years ago and will be relevant in 10 years over the frontend mess any day.
just a couple days ago it took me 15 hours to bring a react project to date after 6 months and make everything work again
I'm going to do the same with a spring project that's been inactive for 1.5 years soon and guess fucking what, it'll take and hour tops

I made a MySQL client for Nodejs because the other MySQL client had a ton of dependencies and didn't support prepared statements
npmjs.com/package/mysql-light
pls r8

npm loves you

A computer.

website with some REST api

It's not what I want.
I have a file available here and now in local FS, can I get access to the file without explicitly uploading it?

>It was just designed with Firefox/Chrome in mind and not tested on Safari. Has nothing to do with any deficiencies in Safari.
Just tested; it works in Edge just fine as well. I don't know enough about CSS gradients to figure out where exactly the problem lies. But I'd be willing to bet this isn't using some secret not-in-the-spec feature that all but one browser implements.