/wdg/ - Web Development General

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

>Further resources
developer.mozilla.org/en-US/docs/Web - General documentation for HTML, CSS & JavaScript
github.com/kamranahmedse/developer-roadmap - Roadmap
stackoverflow.com/ - Developers asking questions and helping each other

>Tools
jsfiddle.net/ - Use this and post a link, if you need help with your code
caniuse.com/ - Check browser support for front-end web technologies

Other urls found in this thread:

getbem.com/introduction/).
store.steampowered.com/
getbem.com/
cssguidelin.es/
google.github.io/styleguide/htmlcssguide.html
tympanus.net/Tutorials/CaptionHoverEffects/index4.html
tympanus.net/codrops/2013/06/18/caption-hover-effects/
gladitek.com
discord.gg/wdg
twitter.com/SFWRedditImages

whats the best text editor for all the web related things? vscode is awesome for node but it feels heavy af because of electron

building a fairly simple single page application, but has some complex scripting

the script.js came out to 2000 lines, when minified the filesize is acceptable and fast enough.

The code is well organized and commented but is 2000 lines still too long, if someone was to read the repository?

depends, I would say if it is well structured and has to be this long then it is fine. if you could reduce it in half by refactoring it and using functions properly then it is to long in its current state. I dont think you necessarily need to put that shit into different files but if you can make it a bit shorter in itself then I would try to do that.

a single file with 2000 lines?
yes, split it up.

2000 lines in one file is pretty much the opposite of well organized.

I'm fine with splitting it up, just not sure what is the best method. maybe reading up on import?

The application is basically split between 6 columns, and editing any value in one column will affect every other column. Because of this, each column shares a lot of common functions and accesses the same variables.

either require or import. But ES6 import is probably the way forward.

I take this back, there are some small bugs, I'm going to have to import functions

steal reddit's database of all reports, votes and mod actions and train it on all of that

no,
moderating content via an AI is an absolute disaster, if you try to apply it beyond anything than simple "fuck you niggerfaggot" posts.

web """"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""developers""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""

what would be the best approach regarding user comments if they can create account on my website but also they can log in via their facebook?
do i need to implement facebook's comment section?
Can the comments from two types of accounts (the one created on my website and other one being facebook) mix in the comment section?

I've made a few (pretty bad) sites using php and want to try something new. Would ruby on rails or node.js be the better backend language to mess around with next? Im interested in learning more about mvc, i tried with laravel but didnt like how bloated the framework was.

if they are logged in, they are logged in.
Does the server really care if it's via the site or facebook?

Anyone else ditched everything for C# / .Net Core?

yeah they are logged in, but how would i make the comments section regarding the two types of accounts?
should i just make my own custom one where there will be no difference? is that even possible or the facebook accounts require me to implement their comment plugin?
Basically i would like for comment section to look uniform and not split between the types of accounts who left the comment.

The way I would think about it is, that if they are logged in, they are 'authenticated' with the server so to speak and therefore have the servers permission to interact with anything on the site.
When it comes to a comment section, the user would write their text, click submit and the server then just checks if they are properly authenticated via any of the available methods.
What reason does the server have to reject someone logged in with facebook or some other provider, as long as their login is valid.

Do those ready to use comment plugins only work with accounts created on the site itself?

You may want to look into MobX, Vue.js or something and separate the data model from your view logic completely.

I really should. I keep finding microsofts tools to be the very best. Visual studio code is my go to IDE and azure was 100x easier than aws for webhosting.

Why did W3C want to replace HTML with XHTML? I never saw a good explanation of that. What can you do with the latter that you can't do with the former?

I was refering to the actual official comment plugin from facebook. You know with all the facebook-y looks and feel.
And I dont think that their plugin would allow non-facebook accounts to intermingle with facebook ones.
I seem to understand now that I should just make my own comment section that will treat all logged in accounts the same way, regardless wether they're facebook accounts or website specific.

Have parsers that can tell if the document structure is well-formed and parse it without needing to understand what the elements are?

Some books advocated for XHTML, but without a clear explanation as to why it was better than HTML. It seemed to come down to, "XHTML is newer and recommended by W3C, therefore it's better." I'm reminded of Bjarne's comment about how "object-oriented" became a buzzword that was applied mindlessly to things it didn't apply to:

"Object-oriented" has in many circles become a hightech synonym for ‘‘good’’, and when you examine discussions in the trade press, you can find arguments that appear to boil down to syllogisms like:
Ada is good
Object oriented is good
=================
Ada is object oriented

the windows ecosystem is pure shit but i have to admit they have been doing a good job in c# and .net core in the past couple of years. it's still not enough though, we'll see.

So, i'm learning vue with it webpack template. I had someting like
const vue = new Vue({
router
}).$mount('#app-container');

with router being shortcut for router:router and it was working fine. I've moved files to different project, i've changed nothing, only removed unused parts and suddenly this part began to fail during building and only worked with router:router. What the fuck?

How does it fail? Does it fail to build completely or it just crash with a syntax in the browser?

Did you bring the project's babel configuration with the code?

>or it
or does it

Speaking of syntax errors...

I JUST GOT MY FIRST JOB!

well first job as a web dev.

Will be working in React and React Native.

A small startup in NYC

the bootcamp actually worked. who woulda thought

in uglifyjs with Unexpected token: name (data) [build.js:10985,16]

I think UglifyJS only accepts ES5.
Make sure the new project has a module rule that runs any .js files through babel-loader.

It uses same the very same webpack config with same versions of webpack with very same loaders.

Do you have a .babelrc in the same directory?

oh, i had one in old project with
{
"presets": [
["env", { "modules": false }]
]
}

i forgot that dolphin hides dotfiles. I'll try again with that file.

Yes, it works. Ffs, i've spent 3 hours trying to figure it out.

That looks about right.

You can pass that object as a babel-loader arg in webpack.config.js too, but I think it's neater to keep it separate because more than one JS-related tool (like certain test frameworks) may want to use that without running everything through webpack.

And its presence kind of documents that this project may contain fancy JS syntax. When it's not hidden, anyways.

Grats.

Nah, I still love Python dearly and will continue to use it. But C# is pretty # all things considered.

I'll ask again:
Does anyone here use typescript? Do you like it?

my buddy praises it like it's the second coming of christ or something, he is also a stoner.

you tried writing in it?

maybe just try flow js

I need some guidance

I want to make a php script that access a list of urls like

this.com/thatCode=1
this.com/thatCode=2
this.com/thatCode=3

And so on, this part is simple.
If the page opened gives this error:

Server Error in '/' Application.

Object reference not set to an instance of an object.

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.NullReferenceException: Object reference not set to an instance of an object.

Source Error:

An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

It'll close it or don't open it at all in the browser.
And if the reponse is different it will keep the page open/open the page on a new tab.

It's neat for libraries because using it properly also documents the library's API to some degree (= far better than most JS shit).

Not sure if it actually helps with frontend work as template languages, dependency injection and so on tend to cause loss of type information in the parts that matter and locally it's mostly just boilerplate.

>Information regarding the origin and location of the exception can be identified using the exception stack trace below
>exception stack trace below
>doesn't post the stack trace

Also you might be missing a "?" in that URL.

The code I write is the ultimate shitpost

Anyone have any advice for how I should create documentation for what I make?

Do companies care about coding style?

Here are my weaknesses:
1. I usually don't feel confident with what to name Classes or IDs.
2. I usually just get shit to work (css, html javascript) without caring about how messy the code looks. I tell myself I'll clean it up at the end but I never do.

Any suggestions on how to work on that? My goal is to work at a webdev firm as a monkey who turns PSD files into code.

Also, what does an employable webdev portfolio look like?

ask that into your favorite search engine and you'll get a million and 3 guides

they have no time for retards who want things to be in their autistic ways, follow their style guide and keep it moving
> I tell myself I'll clean it up at the end but I never do.
idiot

It's an accurate title. They development the stuff that's on the web.

You can jerk yourself off over how you rebuilt the wheel in ASM. But at the end of the day there aren't as many companies who need low level programmers anymore. There's a lot of money in webdev and you're cucking yourself because of your "MUH TRVE PROGRAMMING".

Your co-workers care, don't be a pajeet.
Pick a style and install a linter if you must. For HTML/CSS you might want to look into things like BEM (getbem.com/introduction/).

>replying to spam
i dont think so

>idiot
Are there any standardised style guides for HTML and/or CSS which you can direct me to?

[spoiler]I have enough self awareness to realize my approach is flawed. That's why I'm asking for direction here.

You should be under the assumption that in a professional environment, your code will always be read and need to be understood by someone else. Don't think of your code merely as just instructions for a machine, but as a written document MEANT to be shared with other humans, kind of like an essay or short story in the broadest sense.

Reading and maintaining poorly written code is a nightmare of an experience. Be the person that gets pissed off by this kind of thing, not the asshole that causes it.

Writing cleaner code is a habit and it's best to start building this habit now. I'm not sure if it needs to be perfect when you're just practicing, but there is at least a certain standard you should try to adhere to.

THANK YOU

This so much.
When I review code I just reject anything that doesn't look right because someone will trip over it eventually.
I also taught everyone nearby to configure their editors to autoformat code according to our rules, and had them add eslint/etc. plugins to their editors, then had the test/CI guy set up eslint/etc. in the CI pipeline to fail if the code fails too hard.
I haven't had to reject much code lately, at least for style and readability issues.

I really appreciate you taking the time to write that. It makes complete sense; thank you.

Do coding styles vary a lot from company to company? Do you look for employees who already adhere to your specific coding style or do just hope that new employees will pick it up quickly?

How do I login in two different pages using curl?

>I log in into page 1
>Redirects to page 2
>I click a button on page 2 that open page 3 on a new tab
>Click a button on page 3 that open page 4 where I login again

Basic things like how to indent code and so on tend to get inherited from frameworks and existing conventions, and they're not hard anyways.

Standards on documenting projects, both inside and outside the code, tend to vary a lot. My current project manager basically doesn't give a shit but I document at least the non-trivial parts anyways because someone else may have to maintain it later --- or I may have to touch it after confusing myself doing 5 different things a day for a year or two.

Anyone got experience with using Caddy as their webserver?
Seems to be easy to configure and sets up https with letsencrypt by default from what I read

how is "automatic ssl" a selling point?
it's literally two commands with letsencrypt bot on apache/nginx

There are senior backend developers in my team who don't know how to configure Apache to use SSL certs because nobody has told them how to do so.

"""""""senior""""""""

For the record, I despise giving that title to people who can't teach themselves, no matter how many years they've spent connecting Java beans.

tbf, it's not that easy to add ssl to well established products, as I understand

like why store.steampowered.com/ doesn't have it

Been meaning to try it actually.

getbem.com/
cssguidelin.es/
google.github.io/styleguide/htmlcssguide.html
or find a styleguide from whatever company you want to work at and adopt it

I have two database tables. One is posts, other is post replies. I want to combine rows from both tables where the posted_by column is the same in both.

It's SQL in case you guys think I'm a Mongo man or something. Any guidance would be much appreciated.

someone can explain how I get this effect.
Please.
tympanus.net/Tutorials/CaptionHoverEffects/index4.html

What does him being a stoner have to do anything with it? lol
I haven't tried it yet, but I think it would be good to write my projects in it. I wish we used it at work, but it feels wrong to start using it in a project that already consists of 16k lines of js...?

I googled a comparison between the two and flow did not have some of the features (IDE wise) that I wanted. They also claimed it to get slower the more files your project consisted of.

rails usage is doing down and js is going up. So decide if you want a hireable skill, or a hobby.

but it's right there senpai
tympanus.net/codrops/2013/06/18/caption-hover-effects/

hahaha, stupid.
Sorry, thanks a million.

here, found a hacky way. mysqli_num_rows from one + mysqli_num_rows from the other. Ezpz.

Write a union query? You'll have to select the same (or similar) columns from both.

I would probably have made both the posts and replies "posts" and created a threads table to group them.

SELECT * FROM posts_table LEFT JOIN replies_table ON posts_table.posted_by = replies_table.posted_by

>it feels heavy af because of electron

If you think VSC feels heavy better stay away from Atom.

i don't have an ssd and it has a slow startup for sure (at least slower than sublime text), but after that i'd say its performance is alright even on shitty PCs. atom is slower and performs worse during execution.

Do you think Sup Forums's code will ever not suck?

Lags like a motherfucker on mine, although my laptop is a special kind of shit (I'm not the guy you replied to though)

I'm making a review blog site on WordPress and I want to know how can I make a post template?
For example I have divided it in 2 rows with the 1st Row divided in 3 columns using Page Build plugin.
1st column is for a picture, second for various info (genre, release year) and 3rd for track list.
Now when I create a new post, I want to have that same layout saved and how can I do that?
I could write a html code, but all WP source files are in PHP.

Nothing happens when I hover. What effect are you talking about??

Study theme development. You don't need to understand advanced PHP to make it work. Just a little. I run a successful affiliate website; But I would have never gotten close to making what I am monthly without that little PHP.

>Gives blue shitsite 6 less points
Tumblr literally loads everything as an HTML tower of babel, so I don't think this site's a good way to measure how optimized a site is.

The tool is all about speed.

Tumblr's first meaningful paint is at 3.5 seconds. First interactivity is 7 seconds.

That's pretty bad.

Sup Forums's first paint is 1.5 seconds and first interactivity is 5.7 seconds, for comparison.

It makes sense Tumblr would get a lower score.

And.. I'm back.

gladitek.com

I fixed plenty of things, try it etc.

Nigga what?
Don't create two different accounts! Make it possible for users to link their Facebook accounts if they registered using the web.
And if they register using FB login automatically link it to the newly created account.
Use email as the unique field and grab it from FB

Hammer the textboard let's see what breaks next. I may unlock the downloads for a while too.

what the hell is this

an experiment

Heyo, join if you need some web-dev learning resources.

discord.gg/wdg

>pagespeed is a bad way to measure how optimized a site is
THE ABSOLUTE STATE OF NU/wdg/

check if you have vue-loader and .babelrc file

>doing more webdev stuff
>come to /wdg/
>see a large number of terms/acronyms/etc. I've never heard of
How fucked am I
I've been doing a site in PHP with some Angular JS thrown in and am starting to feel more confident

> communicating with others on any platform that isn't Sup Forums

Fucking degenerates

>communicating

Fucking animals

page nein bump

Congratulations, bud. My first job is at a startup too, and it is the best.

Is denormalization in this case OK? I'm using a document database

{
model2_name: String,
lots of other stuff...
}

{
model1_name: String,
children: [{
model2_name: String // Taken from model2,
result: Number
}]
}

// I don't want the entire document from model2 in my model1 child, just the name, is denormalization OK and save the name like this?

>Uses IDs in javascript

You’re fucking retarded

Currently learning backend stuff. Is this really most of what CRUD operations need? Seems to easy to be true

REST is designed to be easy. That said, you'll probably want to think about your PUT and PATCH verbs and how they should be different. Beyond that, you can utilize GET to retrieve a subset of a collection, not just a single value or the whole collection--what about all users where age > 21, for example.

But yeah, thats about the gist of it.

Anyone has some experience with Vue and Vuex apps ? Do i make a root container component where i map all my actions and getters and pass them as props to other components ?
Or do I map the actions and getters in the components I need ?

Map them inside the components.

If you only have them mapped at the root and pass them with props, then not much would have changed and you would still have to deal with sending events up to the parent, whenever a component wants to modify the state.