/wdg/ - Web Development General

>Code Connoisseur Edition

>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:

w3.org/TR/html/
learnbchs.org/
caniuse.com/
pastebin.com/fTg4yY3h
github.com/P1xt/p1xt-guides#job-ready-guide---javascript-edition-20
eslint.org/docs/rules/brace-style
ted.com/talks/derek_sivers_keep_your_goals_to_yourself
medium.com/friendship-dot-js/i-peeked-into-my-node-modules-directory-and-you-wont-believe-what-happened-next-b89f63d21558
jsfiddle.net/xfckmcrq/
jsfiddle.net/twgL4d97/
docs.fineuploader.com/branch/master/quickstart/01-getting-started.html
docs.fineuploader.com/features/modules.html
twitter.com/NSFWRedditVideo

is SEO considered voodoo pseudoscience? are there established best practices of how to make your website search engine friendly?

I have a multiplayer node.js pong game and I plan on building a matchmaking service for it. I am shit at computer science so I have no idea how to make the server handle multiple instances of games running at the same time. I am guessing I will have to write a C program or a Python script to run a new instance of the game? Will the server need a lot of cores/threads? I know this game will never take off but still.

Adding other languages will not change anything.

Your backend can handle the matchmaking and then call some function to create a new match, between those players.
Add the new match to an array of active matches and run them independently in some async way or loop through them to trigger some update function each 'tick'.

Won't that become laggy/delayed as javascript is single threaded? This is a pong game and I would want it to be as slick as possible. I think I will need multiple instances of the pong game while having one instance of a matchmaker running.

Much of the fine tuning is largely a process of constantly divining what Google will reward/penalise for and adjusting accordingly, but there are certain fixed Good Things you can do:

- Have well formed markup (i.e. no unclosed/unmatching tags)
- Ensure your site is responsive (i.e. works cleanly across all devices)
- Avoid duplicate content across your site (use canonical URL metatag if this is unavoidable)
- Ensure that you use friendly, human-readable URLs
- Use schema markup to help search engines properly categorise and display your site in results

SEO-wise, be linked from as many other places as possible. This is largely down to exposure, good content and strong SEO campaigns if you can afford it.

also interested

you can spawn child processes, but how much processing power do you need for a bunch of pong matches really.

Currently trying to force myself to begin learning full stack again. I really don't have the passion for coding at all but I have literally zero prospects in life and the "learn to code" meme stuck in my head just won't die.

I know its probably futile. But I guess I'll give it a try once more. Even if I somehow got to an employable Junior front-end level, my communication skills are so poor I'd probably never get a job anyway

On that note, how would you rate your own communication/networking skills out of 10 and how often do you have to apply them in your every day working life? Job descriptions always seem to hammer home the point you need to be STRONK COMMUNICATOR although I can't imagine too many introverted coding types are like that

Hey guys! What would be the suckless webdev stack?
I'm thinking of something like:
>HTML5 (where I can find a definitive standard?)
>CSS (which version and where is the standard?)
>JS (probably unnecessary for small sites, but still would be fun to learn)

Can you link me some awesome back-end portfolio websites?

The references can be found from w3.org, here's html5 for example:
w3.org/TR/html/

>html5.2
Thanks. I also found the ecmascript standards. What about CSS?

That's not a stack. That's just the foundation of the frontend.
Regarding version and standard. You normally just use the latest that's available.
Not saying that it's a useless activity, but what reason do you have to read through the latest version of the standards? If you want to learn to create websites and apps, then there are much better ways to go about it.

the suckless stack would be some stupid shit like erlang and caddy

I just want to do some webdev as a hobby.
I want to make my own tiny home webserver in C11 and host some very basic, but modern website, maybe a CV or something.

but that's back-end. I'm talking about front-end.

the suckless stack that's not stupid shit would be Elixir/Phoenix.

learnbchs.org/

by default suckless IS stupid shit :^)

does it matter what language I code in? How much do companies care?

as long as it compiles to html or javascript should it matter

can someone confirm if caniuse.com/ is redirecting to scam ad sites?
Just so, that it's not only me.

basically delete the sites cookie and refresh.
The first time it should redirect to the ad, the times after caniuse.com appears to load normally.

there are 2 types of companies
>companies that care about the specific language they themselves code in
>companies that care about your general programming skills
type 1 companies are small companies or startups that require you to be skilled in specific technologies such as ruby on rails, wordpress, laravel and so on, because their deal is to make money using those specific tools with not much space for innovation
type 2 companies just hire good programmers regardless of their skills in specific tools. think companies like facebook or google (of course they may require you to know a specific language but you can have the edge for being a better programmer in general)

pastebin.com/fTg4yY3h
line 28

how do websites get hacked like dat

Does anyone use an IDE for web development?

I make apps in JS+HTML+CSS on Sublime text and after change what i want i just click "open on browser".

Do i need to use an IDE?

vscode with webpack dev-server to reload the site automatically when any of its files is modified.

I want to host some shit in my intranet that takes data from things in my house, does some magic and displays them in a website in my intranet.

Thing is, I want to host it on a raspberry pi.

Any small web framworks I could use for that?
Checked out flask, it's pretty neat and about as basic as it gets, a bit more probably won't hurt though.

Any recommendations?

>running the server every time a simple change is made

lmao really?

that's not how it works or what I wrote.
You start the dev-server once. It watches the files and rebundles the parts that have changed, then the browser automatically refreshes the page and loads the new build.
Explicitly so you don't have to press F5 to see every little CSS adjustment.

>made a 3000 line JS app
>small functions for small tasks

how to refactor this shite?

one file with 3000 lines?

yes.

it's the main file where everything happens (canvas SVG)

i have other files to handle some other cases

I am planning on doing this
github.com/P1xt/p1xt-guides#job-ready-guide---javascript-edition-20

Announcing your plans makes you less motivated to accomplish them

Is there a way in VS Code to edit the code formatting preferences? As in this
function asd() {
//Stuff
}

becomes this

function asd()
{
//Stuff
}
Havent found anything of the sort, and having "Code" in the name of the software definitely doesn't help with search results.

well, whats stopping you from splitting off some of those functions into other files?
If it's too much and convoluted it might even be easier to rewrite the app and using the functions of the existing code as its building blocks, copy and pasting it into the new structure, as you see fit.
eslint.org/docs/rules/brace-style

"javascript.format.placeOpenBraceOnNewLineForFunctions": true in user/workspace settings?

How do I enforce autoformatting though? I've used Beautify until now, but as far as I know it uses its own set of rules.

Teach me more.

Just use standard, bro. No one uses open braces on new line in js anyway.

eslint --fix, standard --fix

ted.com/talks/derek_sivers_keep_your_goals_to_yourself

>Just use standard, bro. No one uses open braces on new line in js anyway.
Yeah, no. that's not helping.
All I want is a button combination to enforce "javascript.format.placeOpenBraceOnNewLineForFunctions": true[/block]

>button combination
vscode lets you specify a keyboard shortcut for "format document"

Just press Shift+Alt+F (Windows) or Ctrl+Shift+I (Linux) to autoformat the file. By default this uses VS Code's javascript/typescript formatter for JS, although language extensions can provide their own.

Based on the above comments you can also make eslint "fix" files to match its rules, which may not be a bad idea. You should probably be using eslint anyway. If you do this, the stock JS checker can be disabled via settings.

just found it myself. Thanks m8

Definitely going to use a linter, but not anytime soon. Not interested in sifting through docus when three projects are waiting to be done.

I wouldn't have the time to not use a linter with autofix on save.

Well I'm formatting on save now as well, just not superhardcorelintermode. It's at the top of my to do list though, so I'll definitely look into it when I don't feel like throwing my screen out of the window.

Is lynda.com a good place to start? I need to build a portfolio.

does anyone still have the links for getting work for a NEET?

>is SEO considered voodoo pseudoscience?
Largely a scam market.

>being retarded

What's you guy's preferred JavaScript framework? What do you use at work?

I use Ionic (Angular) at my current job. I've used React in the past and preferred it.

it's resolved

If we're talking frontend frameworks, I prefer React/preact (with some data model framework) or maybe Vue.js when React feels like it comes with too much baggage for the job.
Have to write Angular 1.x shit at work for various reasons.

I pretty much feel the same about react vs angular.

We are using angular 2 though which is a lot more like react.

Vue
But there aren't really any jobs for it around here.
Maybe in a year or so, if it continues growing.

I'm using react and loving it. It seems like some of the things that people complain about are just the obtuse nature of the paradigm. They don't seem to realize that those things are usually features which are forcing them to write better code.

>is SEO considered voodoo pseudoscience? are there established best practices of how to make your website search engine friendly?
SEO is literally shilling. I took a digital marketing course and they teach you how to log into social media sites (like this one) and make articles that support your product

tl:dr shilling is a real job

anyone?

that list is pretty outdated with broken links and doesn't really have anything to do with web development.
You can probably find on rbt.asia

I've recently started learning a bit of HTML and CSS, should I keep learning more of those 2 before I learn Javascript or can I also learn some JavaScript alongside those 2?

May you elaborate?

you know of any methods that that list describes? i'm a neet and i really like that idea.

I'm having a problem with implementing something on my mobile code and I think it's due to the constructors.

export class HomePage {

constructor(public navCtrl: NavController,
private afAuth: AngularFireAuth, private fb: Facebook, private platform: Platform) { }

constructor(public navCtrl: NavController, public navParams: NavParams, private database: AngularFireDatabase) { }

Does this piece of code looks correct to you guys?
Basically the first one deals with a login/logout function from facebook. While the second is another related piece of app that adds your shopping items to a list (unrelated to facebook).

Oops, forgot a last "}" there for the class but just assume it's there.

assuming i have already published several web pages, have ability in HTML, CSS and JavaScript, bootstrap

what should i learn next??

i was thinking on java, android, react, or MySQL or SQL, but i would like some advice on this

have you tried reading the error message

It's not even displaying anything, the app works. Just not as intended.

The second piece was basically to display a firebase database list on the main page. For some reason it just does not.

Does TypeScript even support overloading constructors like that? I thought it only supported declaring multiple overload signatures and one implementation compatible with all of them.

did you compile it?

just search for old threads on there and you will find it.
There is no easy simple method though.

If you are trying to be a web developer, learn react and node.js.

These are technologies used in modern front end web dev.

React or react-like frameworks. One-way data model, focusing on the view, highly testable UIs, a large OSS community, I could go on.

It's what I write at work. Although if I were to write something new, I'd possibly choose Vue.

Who the fuck chose this picture? I want the old one back now pls

why?

who cares

>that cutoff error at the bottom

also why does /dpt/ not like /wdg/

medium.com/friendship-dot-js/i-peeked-into-my-node-modules-directory-and-you-wont-believe-what-happened-next-b89f63d21558

Lol

lel, wonder how many take that serious.
Though it's not entirely untrue as well. Always pleasantly surprised when a lib is standalone without any dependencies.
But in many cases it's also ok. Not like I am keen on re-implementing a YAML parser from scratch or anything like that.

Welp, I'll have to ask here again since I tried a few of the solutions but got nowhere.

If someone could please concatenate those two pieces of code together in the same class for me to see how it's done properly:

>jsfiddle.net/xfckmcrq/
>jsfiddle.net/twgL4d97/
(Had to put on JSfiddle because of some Sup Forums error. But it's TS.)

I've tried a few solutions but none worked, and since I'm new I really don't know if it's my messy code or something else. I'd appreciate an example. Thanks.

There is nothing to elaborate really, its as simple as paying people to shill. Digital marketing companies will often hire teenage girls to do nothing but shill client companies on social networking sites.

Digital marketing is not just about paid advertising, its about putting out links on other sites that will bring in customer clicks (which count as customer traffic which the digital marketing company is being paid to raise) to the clients site. Sometimes they will ask permission from legitimate websites that cover the kind of products/services the client sells to write articles about the client company with links to the company website.

Okay, that makes sense.

>tfw you're not the only one using Guy Fieri in your projects
best placeholder

I'm learning to program for the first time!

I'm using Elm!

Can anyone recommend fun webdev exercises?

I'm moving to Hong Kong next October, does anyone know what it's like there? Or what work is like there? Will I even be able to find work?

Anyone who knows Laravel/CommonJS help me out?

I'm trying to include the Fine-Uploader module in my application, and while it works perfect if I include the files straight with the tag, it only half works when I require() it.
It seems to attach to the div and style perfectly, but when it's supposed to trigger the actual upload, it just does nothing. No errors in console, it's like the event isn't being bound.

This is in my app.js
var qq = require('fine-uploader');

var uploader = new qq.FineUploader({
debug: true,
element: document.getElementById('uploader')
});


Console looks like this
[Fine Uploader 5.15.0] Parsing template app.js:70787:21
[Fine Uploader 5.15.0] Template parsing complete app.js:70787:21
[Fine Uploader 5.15.0] Rendering template in DOM. app.js:70787:21
[Fine Uploader 5.15.0] Template rendering complete app.js:70787:21

Remote devs - how did you get to work remotely (are you freelance/ full-time/ part-time)? I'm getting pretty sick of working in an office and could do without the commute too.

Best ES6 Lint standard/style guide?

followed the docs to a tee?
looks like there might be more files to require.
docs.fineuploader.com/branch/master/quickstart/01-getting-started.html

I'm importing the css file with sass, because I don't know how to do that through require.
docs.fineuploader.com/features/modules.html

But their doc says
// use Fine Uploader UI for traditional endpoints
var qq = require('fine-uploader'_

// You may replace "rows" w/ "legacy" or "gallery" depending on your needs
// This assumes you have a loader to handle importing css files, such as Webpack css-loader
require('fine-uploader/lib/rows.css')

var uploader = new qq.FineUploader({...})

For commonJS, so I dunno what else I'm missing

web dev usually involves much simpler coding than other software dev

also the overpaid bay area hipster slacker web designer fag stereotype

>rouge

also javascript is a terrible programming language

People at work change things with link policy etc to try and get google to rank it better.
This is a pretty large website.

I'm doing the python version of this. I'd imagine it'd be difficult for beginners though as the You Don't Know series seems beyond beginner level to me

>node.js
>front end

>i cant spare these 9 MB on my development computer while doing front end work, Babel is shit
wow you found the worst article on the worst website on the internet bravo

>also the overpaid bay area hipster slacker web designer fag stereotype
fair point, though not like there is overlap with that crowd and people posting on here
>also javascript is a terrible programming language
it's actually quite nice

Why is it such a bitch to require globally installed libraries? Do I really have to use VBScript/PowerShell instead if I want to do some little autmation around on my filessystem without having to npm install Guy Fieri everywhere? Of course, if I require with an absolute path then it works, but that's a huge nuisance

Please respond

I'm having a shit day at work being belittled by my boss.