/wdg/ - Web Development General

Previous thread: >Beginner Roadmap and Overview
github.com/kamranahmedse/developer-roadmap
youtube.com/watch?v=UnTQVlqmDQ0

>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 to HTML/CSS/JS and Node.js or Django
freecodecamp.org - curriculum including HTML/CSS/JS, React, Node.js, Express, and MongoDB
javascript.info - curriculum providing a strong basis in JavaScript

>Further learning resources and documentation
developer.mozilla.org/en-US/docs/Web - excellent documentation for HTML, CSS & JS
hackr.io - crowdsourced collection of tutorials from across the web for learning languages and libraries (ignore sponsored stuff, look at upvotes)
learnxinyminutes.com - quick reference sheets for the syntax of many different languages (generally not sufficient on their own for learning something, but very helpful)
pastebin.com/gfBPg24A - Everything PHP

>Asking questions
jsfiddle.net - Use this and post a link, if you need help with your HTML/CSS/JS
3v4l.org/ - Use this and post a link, if you need help with PHP/HackLang

Attached: wdg.jpg (1280x720, 108K)

Other urls found in this thread:

i.pximg.net/img-original/img/2018/04/10/18/14/10/68168605_p3.png
pixiv.net/member_illust.php?mode=medium&illust_id=68168605'
bootcamp.ce.ucf.edu/about/locations-schedule/
stackoverflow.com/questions/45528995/express-js-not-showing-console-log-message-when-routing
techempower.com/benchmarks
jsfiddle.net/305b2zLo/
flexboxfroggy.com
twitter.com/AnonBabble

First for PHP jQuery Master Race

>jquery
Yuck
Second for laravel, react redux master race

Attached: brendan-eich.png (616x404, 453K)

>Redux
Yuck
Node/Rust React with Context Masterrace

repo links are at the bottom.
It can be quite horrible in a few places though, since when I started making it, I didn't nearly know as much as I do now. (if you come across the code for the chart, better ignore everything)
I am also rewriting the gatherer right now, since I hardly have a clue wtf is going on in the code anymore, after not having done anything with it for more than a year probably.

GIVE ME WEBSITE IDEAS

Attached: 1547057871743.jpg (400x400, 29K)

a coming soon page

A todo list with React/Angular/Vue
I hear they're all the rage nowadays

My backlog will take me 20 years to work through and I still won't give you an idea.

fbpb.
But let the zoomers zoom out on their hype memes.

That gave me an idea: a backlog app

angel.co is weird.

I get interview like 90% of the time I apply.

On any other site it's like 5% of the time.

I wonder what it is.

what's a backlog app?

Genius.
What technos will you use ?

Attached: da94670757632a09da351376f9bef2d4.png (294x220, 122K)

An app where you store all your todos's

It should be something new an innovative, perhaps a bit of each and rig it up so the whole tech stack changes every couple of minutes just to fuck with wdg

interdasting, so another name for a to do list

No no no, to do list is list of items you want to do while baclog app iscollection of to do lists, its to do lists of to do's

aha

So it's a todo list app, but with sublists?

has anyone made an api call within a webpack plugin that awaits the response to define some app variables? seems pretty straight forward, dont want to go barking up the wrong tree though

woof woof

can someone explain to me why i need a github?

i have 5 years of work experience as a web dev but i can't find a job for the life of me. i have a list of websites i made for these companies, but we never had to use github


that's literally what i used for years, but i feel like nobody uses these anymore which is why i can't get a job after many months

What are the job offers in your area telling you?

GitHub specifically or just a Git repo in general?
If it's the latter, what did you use for VCS?

wget i.pximg.net/img-original/img/2018/04/10/18/14/10/68168605_p3.png
--2019-04-14 20:37:19-- i.pximg.net/img-original/img/2018/04/10/18/14/10/68168605_p3.png
Loaded CA certificate '/etc/ssl/certs/ca-certificates.crt'
Resolving i.pximg.net (i.pximg.net)... 210.140.92.138, 210.140.92.142, 210.140.92.141, ...
Connecting to i.pximg.net (i.pximg.net)|210.140.92.138|:443... connected.
HTTP request sent, awaiting response... 403 Forbidden
2019-04-14 20:37:21 ERROR 403: Forbidden.

how does this work, why can I open it in browser from pixiv image page by right clicking and clicking view image but entering the same direct image link by itself into url bar or trying to wget it I get the error?

>What are the job offers in your area telling you?
they are saying they found a better match or something

>GitHub specifically or just a Git repo in general?
no idea, i didn't use any of them ever

i just made websites with a text editor, uploaded them to the ftp server, and they went live. no need for github

sometimes i downloaded source code from github to use in designs, but not too often

>If it's the latter, what did you use for VCS?
had to look up VCS "version control system"
i never used that at all. yes, i made over 100 websites and was a web developer for 5 years, we never once used a 'version control system' at all

how easy is it? is it something a person can figure out in a couple days

I don't mean that, silly, I mean what stacks are they asking for, what's in demand?

referer checks, cookie checks, user agent checks, etc.

>i never used that at all. yes, i made over 100 websites and was a web developer for 5 years, we never once used a 'version control system' at all
I-... How--...

Anyways yes, you can pick up git in a couple of days lots of great tutorials out there and resources, even git's docs are great enough. Just know git and github are two separate things, git is the version control system, gitHUB is the biggest 'social platform' (adds in a bunch of features that make it easier for teams to collaborate on top of git's features) for this version control system.

>what stacks are they asking for, what's in demand
i just search "php" and "javascript" because that's what i know

i live in florida, i am sure there is someone wanting everything

just never needed anything like that. literally all it is, i guess, is saving things and every time you save it's a new version and you can just revert back?

seems simple. i wonder if that's the reason why i can't find a job.... because i don't have experience doing something that takes a couple days to learn? hmmm

curl -I i.pximg.net/img-original/img/2018/04/10/18/14/10/68168605_p3.png
HTTP/2 403

curl -I -H 'Referer: pixiv.net/member_illust.php?mode=medium&illust_id=68168605' i.pximg.net/img-original/img/2018/04/10/18/14/10/68168605_p3.png
HTTP/2 200

in case you don't have the luck to get into your old position's stack you can check for the most demanded stacks, and try to reconvert your knowledge to that stack, shouldn't be too hard if you already know what you gotta do in the first place

guys i am thinking of doing this code camp

is the certification they give worth anything?

bootcamp.ce.ucf.edu/about/locations-schedule/

so i am trying clone one of my git repos and after using git install it says that the package.json does not exist yet I can see it literally in the files.

I read somewhere that you can use git init to create a new package.json file? What exactly is going on and how do i fix it? I am trying to better understand git.

>git install
What
Surely you mean npm install

>git init to create a new package.json file
No, npm init does that

why is it not a good idea? if the api call fails, the build fails.

in the current workflow, the site is now dependent on another site at run time to get variables, which that other site depends on a third project to get the variables. only issue would be when the third site is updated, the variables would be out of sync until a redeploy, but if no code changes to the master branch have occurred, then you can set a trigger to rebuild the master branch of the webpack project... what would be a better solution?

why wouldn't you do anything to prove you actually keep up to date with latest front end technology for web development? at the very least, deploy a website with you resume to it.

>why wouldn't you do anything to prove you actually keep up to date with latest front end technology for web development
seems to me as though different places use different technology

what technology does the majority of web dev firms use ?what would guarantee me a job?

Guy wants me to build facebook + amazon + twitch in 1 month. I told him it would take probably a year and I have to charge hourly.

Anything wrong with that? I fully expect to be fired for not being fast enough but he's agreed to paying hourly. I'm billing weekly.

>Guy wants me to build facebook + amazon + twitch in 1 month
i don't even know where to start lol

is this for a job? upwork? freelance?

Freelance.

I tried to get him to do a slow rollout of features and see if the idea works first but he insisted on developing it all at once so...whatever lol

I have a Sinatra app thats pretty much just a wrapper around some raw sql queries, no ORM. It’s really nice but the sql queries are kind of unsightly. How can I better organize them? I was thinking creating a file and shoving them all in there declared as constants?

I mean, lots can go wrong if you aren't on top of your legal game.

why would this not console log anything whenever there is a connection to the root directory?

Attached: tocker [C__cygwin_home_aaron_workspace_tocker] - ..._server.js [tocker] - WebStorm 4_14_2019 2_35_00 (2560x1377, 140K)

i think /* is different than /
app.get('/', function (req, res) {

}

tried both and it doesn't make a difference. The * just means that every GET request will get routed to that function.
Plus the code underneath executes because the website shows up.

check this

stackoverflow.com/questions/45528995/express-js-not-showing-console-log-message-when-routing

thanks man. i kept googling this error only to get posts from people that didn't understand the difference between the server console and browser console.

did you test if the same occurs if you run it without nodemon?
Maybe by default it's set to not output console.log with production settings or something like that

Web development is for trannies

react and proof you can use it. and not blowing interviews helps too

and thats a good thing

What are the best free web apis around the internet that i could use for some fun shit?

Attached: 1541793058250.gif (680x502, 179K)

>tfw so scared about losing the data of my portfolio project that i literally backed it up in 5 different places

Anyone else does this?

Attached: 325352325.jpg (700x400, 93K)

Tried just running `node server.js` no difference.

but normal a console.log outside the route handler does work?

I needed a function to generate a rather large random string. I called it crazy_strings...heh

Yes.
It works anywhere outside the function and in http.listen()

Attached: 1363157731002.jpg (331x331, 61K)

>not using some form of version control

scrub

spoiler, I'm a brainlet, but that's how I'd do it:

make a for from 0 to the total length of the string
for each iteration do a random generated number you choose the range, but this is important, you basically want to take that number and comber it to it's character value, so make sure your range from the generated number matches the characters you want (alternatively have an array with all the characters you want for the string and have the math.random correspond to one of the positions), each iteration add this character you obtained to the crazy string. Voila.

I think very few learn exclusively through books when it comes to webdev, so you might not have much luck getting a quick answer.

>site has problems on safari
aple pls unfuk safari

just a plug here - use pm2, its pretty good and has watcher option

Books are very bad in webdev. Webdev moves way too fast and books simply cannot be republished once a month and sometimes those changes are really fucking big.
Books are amazing for learning CS fundamentals, those just never really change and are still just as useful. But once you get past that or move on to webdev shit like frameworks and JS/PHP/etc, it's all way too ~agile~ for books even digital ones.

I'm torn between using Go or Rust for an API project.
All the API layer will be doing is querying the DB, and spitting out large amounts of data, with very little middleware or logic outside of the SQL queries.
Speed is my main goal here, which is leaning me towards Rust.

Any web dev book you read will be out of date by next week. Come up with something you want to do and Google how to do it.

Sounds like you already know which one you want to go for, so why waste time debating? Have fun start building, if you fuck up you learn something new along the way.

>RUST
>faster than GO
first time I've ever heard this meme, interesting

It's pretty well known. techempower.com/benchmarks

Now, time to build or literally anything of relevance isn't accounted here. And of course, this doesn't mean you should just take the top results and go "me build, it fast". Ultimately Java, Go, Rust, C#... they're all interchangeable here until you get to extremes.

Is there a single good guide for CSS pertaining to making Stylus/Stylish themes for newfaggots?

PHP guy told me to go swoole, seems legit, I don't see rust there btw

sorry my bad npm install and npm init is what I meant. all that happens when i do npm init though it comes up with this:


$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install ` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (vue-sandbox)


im not really sure where to go from there

Rust is in purple and fortunes isn't the only test type, you'll want to click around the tabs.

post a screenshot of the console with your projects folder content and what happens when you type 'npm install' there

Attached: ookokok.png (1262x1013, 59K)

oops meant to scroll up my bad but here was the install

$ npm install
npm WARN saveError ENOENT: no such file or directory, open 'C:\Users\name\vue-sandbox\package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open 'C:\Users\name\vue-sandbox\package.json'
npm WARN vue-sandbox No description
npm WARN vue-sandbox No repository field.
npm WARN vue-sandbox No README data
npm WARN vue-sandbox No license field.

up to date in 0.736s
found 0 vulnerabilities

what's that "Section Code (Start)" in the sidebar?
And are the package.json and package-lock.json not in the same folder?

The package.json file is there when you type 'ls'?

Anyone have any thoughts on stored procedures? They seem based.

oh wait, that's what the folder is called?
package.json is in the "Section Code" folder, but you are in the project root? So of course it's not going to find it.

ah i see. the package.json is in the folder "section code start" along with a bunch of other stuff.

thanks for pointing that out. So I guess all I have to do is change the dir then right?

if the repository was like, when you cloned it, then you should go into the directory with the package.json and 'npm install' there.
Though if the whole thing is still a bit confusing, then it might be better to first try out npm on a completely fresh project (npm init, install some library from npm, import it in some js and check out how things fit together) so you see how it works and then afterwards maybe try out vue-cli.

i moved everything out of that folder into the main project and am doing an install. looks like it worked. I dont know what the hell I was doing with these files probably just me being a noob is all

Thanks for your help though I got it working now. I am spending the weekend setting up a local environment on pc and making sure that I can run all of the projects I uploaded to my Github so I can understand this stuff better.

don't know if this belongs here or in agdg.

I'm trying to make an rpg in javascript. I know it's a bad idea but I'm pretty determined to see it through as I've developed the combat system arleady, now I need to render the graphics.

I do not understand the behavior of canvas for the life of me, specifically the way it handles drawing images





Document






var $ = function(id) { return document.getElementById(id); };
var dc = function(tag) { return document.createElement(tag); };


function drawKnight(){
var mapObjects = $("map-objects");
var ctx = mapObjects.getContext("2d");
var image = new Image()
image.src = "images/knight.png"
ctx.drawImage (
image, 200, 200, 30, 30
)
ctx.rotate(0.25)

}
drawKnight()

Why does drawKnight not render the image on the canvas unless I call it twice from the command line? If I switch the image for a simple rectangle this is not an issue.

Is this an async issue, as in is javascript trying to run drawImage before the Image object has been created and pointed to a path? I've tried putting a document.ready (or whatever the hell it is in vanilla JS) function before running the drawKnight() function to no avail. Shouldn't be an issue since the script tag is at the bottom of the document anyway.

Is bootstrap a meme? I heard it was looked down upon.

Bootstrap is good to speed up the cancer that is front end development.

Funny you say that because I'm still taking ages finishing the frontend of my shitty website using bootstrap since I had no idea how to use it.

Just read the docs, how hard can it be?

yeah, looks like the has no time to be loaded.
Look how this fiddle from MDN does it
jsfiddle.net/305b2zLo/

afaik other 2d libraries like pixi or phaser also load the textures prior to drawing. Should also be more efficient than creating an image object on every frame.

A lot of trial and error with the docs I found.

How do you make sure your bootstrap frontend looks ok on all sizes and browsers? You have to mix columns like this right?
.col-12.col-sm-5.col-lg-3.m-3

probably because angel is all shitty startups with 6 employees

When making a React App, there's so many places where you can hard code strings. Such as a form's input type, or a form label. How do I determine what hardcoded strings and other constants to throw into an external constants file?

It sux

Attached: C45A065B-C82B-4C9F-9FFE-0FF7CAAE4772.jpg (407x407, 15K)

You’ll save so much time by just learning flexbox and grid and writing your own css.

flexboxfroggy.com

I had just finished django introductory tutorial. Any advice on which simple projects I can work on?
ALso, CSS?

Thanks. That was the issue. I got it now. I'll look into those libraries. I kind of want to take this building my own game in nothing but vanilla JS as far as I can though, just so I know what goes into it, and I have a better understanding of how to use libraries and engines.

I wouldn't have learned how to use a css framework if I didn't spend a lot of time writing my own css.

>they are saying they found a better match or something
that means one of the interviewers didn't like you on a personal level. someone about you made them not want to work with you on a daily basis.