/wdg/ - Web Development General

Previous thread: >Beginner Roadmap and Overview
github.com/kamranahmedse/developer-roadmap (don't be overwhelmed, ignore the later parts and go step-by-step)
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 (ignore sponsored stuff, look at upvotes)
learnxinyminutes.com - quick reference sheets for the syntax of many different languages
pastebin.com/gfBPg24A - Collection of PHP links.

>Need help with some HTML, CSS or JS?
jsfiddle.net - create an example here and post the link
codesandbox.io - or here if you're using React/Angular/Vue

Attached: 1563765046717.png (2015x2204, 913K)

Other urls found in this thread:

medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886
dribbble.com/
uplabs.com/
behance.net/
goodweb.design/
onepagelove.com/
awwwards.com/
pastebin.com/HpuZ3Vdi
tjvantoll.com/2015/09/13/fetch-and-errors/
example.com/post',
codepen.io/weebdev/full/LwPBYj
jsfiddle.net/os7dercv/
twitter.com/SFWRedditGifs

how do I host my website?
After creating my website in WordPress, and buying domain, how to make it alive?

The issue repeats on my phone, I guess I'll open an issue on react natives's git-hub, seems kind of scary

did you setup your free domain on wordpress? you just have to change the dns settings in your domain page settings and then link it on wordpress

post code

I think for vertical ones you need align-content
You also can try justify-self for the element class

you need to specify the min-width then or just width for the wrap

thank you so much

(dead)
why?

wtf I love jQuery now!!!

After a sustained period of studying a few different languages I have decided to buckle down and learn HTML/CSS/JS.

I am almost done with internettingishard.com (a very good tutorial, I'm surprised I don't see it more often), and I'm contemplating my next move. Should I commence my studies of Javascript? Should I learn something like Bootstrap? Should I learn how to run a web server? Should I build a website from scratch to solidify my HTML/CSS knowledge?

I'd really rather not to the last option.

I know nobody can really tell me what I should do because it depends on what my goals are. Ultimately I will be putting together a cross-platform quiz app that does some pretty fancy stuff. It will serve as my portfolio to get a job, or maybe I'll even see if I can put it out into the wild.

Anyway, just hit me with ideas. I pretty much just need to get a competency in webshit and I'll certainly need to master JavaScript one way or another.

Attached: 1543886911327.jpg (500x352, 48K)

>Should I build a website from scratch to solidify my HTML/CSS knowledge?
yes, that's number one

then you learn bootstrap and do the same

then you learn js and build little apps, like a calculator, to do list, minigames, etc.

then you build an interactive js webpage

Then you learn react.

You build a website with react.

Then you learn back end, etc.

>Should I commence my studies of Javascript?
yes do that.

If you already have some decent HTML+CSS knowledge, then start learning and using JS.
Just learn how the language works, how to add some interactivity to a site, make a button do something, manipulate the DOM, etc.
Then next you can learn Vue or React, which are really good and marketable skills to have and enable you to build anything you want. (and they should also be quite fun to use desu)
Wouldn't worry about diving into webservers for now. Everything you build will be static for now and you can host it for free on Netlify or GitHub pages.

Once you got the frontend part + framework done, you can look into the backend side of things.
Language is up to you there. Since you know JS already, Node is a good candidate, but you can use whatever you want really, as long as it's a language that often gets used in fullstack web projects.

It's not good enough to go directly to Bootstrap?

Yeah yeah I know. Probably not. God, I hate CSS. I'm not a visual person and not good at styling anything.

Thanks, this is what I like to hear! Are you less inclined to say that I should hone my HTML/CSS knowledge by building a site from scratch? I mean, at this point I can look at a stylesheet and pretty much know what I'm seeing without looking stuff up. Should I learn Bootstrap?

I'm not interested in being a web developer, but I want to be sure I'm not doing myself a dis-service by sort of waltzing over HTML/CSS.

How the fuck do I learn CSS? There's just too much bullshit, width this, height that, color this, alignment this, border that, margin this, opacity that, display this, flex that, model this, tables that... How am I supposed to remember all that cancer?

>I'm not a visual person
that's not so bad in webdev, you usually get handed down the design
>and not good at styling anything
you should be able to build what you've been handed to build at least, this is a must

literally all u need is flex box.

Anyone got any experience maintaining a website and app that should look identical with react ?

The shit still has 3,432,567,224 properties.

Yeah, I'm with you bro. There's a certain elegance to it, but it just seems like there has to be a better way!

>that's not so bad in webdev, you usually get handed down the design

Okay, but in order to build my own site I need a design. I suppose there are probably plenty of designs out there just for this purpose.

there are templates, but it'd be good if you could come with your own, good practice


/*design*/
medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886

/*desing inspiration web*/
dribbble.com/
uplabs.com/
behance.net/
goodweb.design/
onepagelove.com/
awwwards.com/
medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886

How big of a difference (for server load and page load speed) does including files with php make?. Lets say 10 vs 20 included small files like 10kb each. Its cheap shared linux web hosting - godaddy.

Say I'm making a site for a library system. Would a relational database be better here, or a nosql database (if the latter, which kind?) I'm having a hard time understanding if relational data exists or not

What are some good resources for learning the more advanced concepts of JS? Any recommended books/articles/whatever?

Any of you know a good reason for my body background image to be resized and not acting according to my CSS after a form input loses focus?

>110 iq range (legit tested because left handed and in my country people are still prejudiced)
>know how to art (both sense of color/composition and painting+3D)
>know how to code, but never learned mathematics at school, past 10th grade stuff
I'm ready to webdev and to steal jobs from sub 90 pajeets and kids who "webdev" as side gig.

Pajeets will always outbid you.
The goal should be to work on something that no one would give to a Pajeet in the first place.

wow you're so special user

I'm here to ask on how can I see the requests I make?
For example, what request do I send when I click submit on Jow Forums? I want to see the request so that I can make a program that makes those requests

what kind of websites do you usually work on?

god i want to die

>JS
>Advanced concepts
like what, promises? lmao

F12 -> network, retard.

>so that I can make a program that makes those requests

Don't forget to make the program solve the captcha too

Off the top of my head:

Prototype chain, primitives & classes
fn.call, fn.apply, fn.bind
Generators & async generators
event propogation, emitting/bubbling
currying & closures
difference between let & var
memoization
hoisting
module scopes
difference between indexeddb, localstorage, sessionstorage & cookies
browser feature detection & polyfills
callbacks & callback hell
using webpack
web sockets
difference between async functions and regular functions that return a promise object
what use cases would you use a normal function that returns a promise object instead of an async function
page lifecycle events (e.g. domcontentloaded)
purpose of a service worker and utilizing caching strategies to cache specific content
iterating over object keys/values, finding the number of object entries.

How the FUCK do I keep two different versions of Angular on my dev machine holy fuck

Besides a good portfolio to show, what other skills can land me a remote job?

Also Proxy objects
Immutability & pure functions
immutable updates to arrays, objects, etc
purpose of Object.freeze()
Tree shaking, minification, knowing what Babel is for, the abstract syntax tree (AST)
Difference between Map, Set, WeakMap, WeakSet
scoping, anonymous functions, immediately invoked function expressions
the "event loop"
why would one use typescript, what does it solve

Try Crockford's lecture series

>mfw my narcissistic tendencies have resulted in setting the (YOU) element to uppercase and bold in red letters with red glowing text shadow

Attached: 4fHs8mq.jpg (480x456, 54K)

bois, post your ideal CI pipeline for web pls

SO, if websockets are the BEST shit ever, east to implement, great performance with node and go, why isnt It common to make everything websockets based? What are the hidden cons?

Attached: 156312847415.jpg (880x960, 191K)

Mobile browsers don't support them properly.
Firewalls.
Other possible restrictions.

User Socket.io for WebSockets. You'll end up writing your own Socket.io if the project gets big enough.

>run 2 node servers on linux + vs code + chrome
>system crashes
>do the same on windows
>it runs fine

not trying to start a os war, since it's probably my pc because my graphic card driver works better on windows, but fuck that pile of shit, fuck it, I've been through hell for a couple of months now, should've switched earlier

I'm trying to run ```npm run build -prod``` but I'm getting the following error:

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

"babel-loader": "8.0.5"

Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-loader was detected higher up in the tree:

/app/node_modules/babel-loader (version: 8.0.6)


which is weird because I changed the babel-loader dependency in my package.json to version 8.0.5

package.json: pastebin.com/HpuZ3Vdi

Anyone know why it's using this older version?

I feel you, user. Several times I've tried switching over to Linux because I get frustrated by lack a genuine console/command-line. But it never works right and I just spend DAYS trying to make it work. And it just doesn't.

Honestly I wish Apple weren't shit.

Do backend developers just make the frontend designers stuff work or do the backend developers make the site and frontend make it look nice?

Where I worked, you had two different types of frontend developers, like the artsy guy that designed stuff in photoshop etc. And then (what I called) the javascript guy that basically made that vision into realty. They basically make the website work for the user, but all the data inside is just dummy data. Then the backend guy (me) makes sure that the correct data is injected from the database and that only the people who have access to that page can visit it etc etc. Ofcourse this all assumes that the devops/backend guys already set up everything so that this works.

In reality however the artsy guy also does some javascript, most of the backend guys are full stack so they do javascript too and the devops guy definitely do backend stuff too.

That's how it was were I worked, but that was a pretty small local company desu.

I see babel-loader in your deps as "^8.0.5". Remember, "^" in npm means to install the latest minor version, so that'd include 8.0.6.

You either need to:

- Lock the dependency version in package.json (i.e. "8.0.5", not "^8.0.5")

or

- Remove the dependency and re-run "npm install" so that it removes 8.0.6. I can see that react-scripts already includes the dep if you type "npm ls babel-loader"

root@server:~/Documents/test-project$ npm ls babel-loader
[email protected] /home/Documents/test-project
[email protected]
── [email protected]

To what extent did you do design work? I was making a node/angular app, it looks like total shit but is functional and somewhat complex. I'm not sure if it's worth it to dedicate many hours to good design.

>"^" in npm means to install the latest minor version, so that'd include 8.0.6
Damn, I did not know that. Thanks.

Unless you are a one man company, literally no company in the history of webdev will expect a backend guy to do the actual graphical design of a website. That's something either the client or the artsy guy does.

The fact that you can make a functional frontend app is what makes you a full stack guy. If you're not going for a graphic design job then i.m.o. tinkling with divs all day for your demo is a waste of time. As long as it's presentable, I think you'll be fine.

Thoughts on sass?

>Think I found a bug in react that makes using my app impossible
>There's 677 issues and issues that are weeks old with no response other than bot responses
Haha I'm fucked aren't I?

How do I tweak automatizing behavior in vs code? Pic gives me cancer.

Attached: VSCodium_2019-08-01_07-23-43.png (624x312, 25K)

Disable the default HTML formatter in the settings, if that doesn't then it's probably a plugin, such as ESLint or Prettier or Vetur (or some other plugin that formats HTML if you installed one).
Take a look at the settings for these plugins, somewhere in there you'll see an option about the default formatter for HTML, then select another formatter that you like better or simply "none".

Stay away from it if you're not already good at CSS, I've seen people do terrible things with Sass because they don't understand CSS, such as very very deep nesting, which gets compiled to very high specificity rules, etc.

Looks like you already know what you need to learn, so you could just look up the articles for each of these topics individually on MDN.
There's also YDKJS, that book will likely teach you everything you're looking for but in my opinion it overcomplicates a lot of concepts that are rather easy to understand (such as `this` keyword).
For Webpack, Babel, etc. you really have to read the documentation on their respective websites: it will answers of questions of "why should I use this?" and "how does it work?".

It was Prettier. Just disabled it because I don't remember why I installed it in first place anyway. Thanks.

Can someone help me with the third normal form example here. Wouldnt moving exam name make it impossible to figure out which score is which since thered be non unique entries in exam name? or is it saying to make exam name a key like "midsemtech_4" where 4 is the student id?

Attached: dbn.png (2560x1440, 509K)

I think exam_name doesn't involve the students themselves, it is something like cs_midterm_2019 and total_marks is the maximum possible score.

I think the problem is subject_id in scores as it really depends on the exam. Maybe move subject_id to the exam table and make the exam_name the second foreign key in scores. Disclaimer: I'm an idiot and I could be wrong.

Attached: 1278080989090.jpg (1280x1439, 141K)

ah right, its max marks. that makes sense. i dk about the second part though, wouldnt that fuck up exam table because if it was subject id its a give theyre all gonna be out of 100? nothign wrong with having a composite key right?

You're right. It should be something like

exam_id PK
subject_id FK
name
total_marks

On the score table, remove subject id and replace exam_name with exam_id

Additionally, I'd also never keep an exam name as a primary key or part of a composite key unless it's guaranteed to change every semester because you're otherwise guaranteed to find the exam results of students that were part of older semesters.

Starting from 0, how long would it take me to become a web developer?

You never wrote a single line of code? It might take a year to get good enough to land a junior job, assuming you're a NEET and can devote reasonable time every day to learn it. Of course depending on your autism level you can do it in less time.

I have an electrical engineering degree and I do SQL and python at work to pull data for my engineering office job, but that isn't required for my job. I've done a nanodegree from Udacity in data analysis

Well depends on how much you're going to work on it I guess.

Basic HTML/CSS web page authoring: 1-2 months
Basic interacivity using JavaScript: 1-2 months
Basic server side application + database engine: 2 months
Setting up a web server / Linux machine/getting familiar with the terminal: 1-2 months
Intermediate JavaScript, DOM manipulation, interacting with APIs: add another two or so months
Advanced Javascript, ES6, UI frameworks, webpack, Babel: 2 months
Repository management using Git: 2 months

A lot of these you'll be doing in parallel but it's a rough estimate.

In that case 1 month tops

I'm nervous about interviews because from what I hear they can be like an IQ test with code... Also getting people to look at my resume since I don't have any professional experience developing websites

Sorry for the basic question, but can I have a hand making sure I have this schema set up correctly? I'm pretty sure it's in the 3rd NF since everything only depends on one key, but am I correct in making the PK the same for three different tables and linking it like this? The tutorials I learned off seemed to use a different PK on each table.
The part that I'm a bit concerned about is the product features, should it be made so that there's a bunch of tables, each with a product_ID and a single data type, or perhaps even one table with repeating product_ID and a single data type per row?

Where to buy and product tags are going to have multiple tags and shops, one per row.

Attached: db2.png (2261x1369, 184K)

>I'm nervous about interviews because from what I hear they can be like an IQ test with code
You have an electrical engy degree so your "IQ" is definitely fine for web development. Your competition struggles to write FizzBuzz correctly, that's how bad most "coders" are. If you're any decent at programming and logical thinking then interviews will be a breeze, unless you're applying at a FAANG in which case you should probably study algos/data structure a little more in-depth.
>Also getting people to look at my resume since I don't have any professional experience developing websites
That is literally not a problem if you're applying for a junior position, the entire point is for you to get some experience. I've seen some people wanting to get 6 figures without experience and only knowing basic HTML/CSS/JS, if that's what you expect from web development then you're going to have a bad time. Other than that if you're willing to pay your dues for a year or so you'll be fine.

>JavaScript: The Good Parts
This great book is now 11 years old. Is there any book that replaces it as the definite best book on JS nowadays, with ES6 and all the new ecosystem around it?

>working on react project
>console.log response.text() using fetch
>"[object Blob]"
>Install axios
>console.log(error.response.data) (it's a 412 response which fetch doesn't think is an error)
>get expected output
I really didn't want to accept this bloat but guess I have no choice

vue?

Fetch knows it's an error but it doesn't go to the catch block.
tjvantoll.com/2015/09/13/fetch-and-errors/

I'm using requests_toolbelt on python to send zip files as POST
I don't think I've ever messed with requests so I have little to no idea on what I'm doing
Basically, my request is as follows:
e = MultipartEncoder(
fields={
'name': name,
'comment': comment,
'file': (filename, open(filename, 'rb'), 'application/zip')}
)

#...

r = request.post('example.com/post', data=e, headers={'Content-Type': e.content_type})

When I run it I get ValueError: need more than 1 value to unpack
on the zip file line

if i comment out some lines in html/php file is there a way to hide them from inspect element?

Right, if I just console.log(response.text) in a series of .then statements after fetch I still get "[Object blob]"

Using XMLHttpRequest() I've got this as a when I log my response, How do I actually get the sting inside currentTarget.response? (the "No request type given")?

Attached: response.png (1020x265, 32K)

how do i hacker people?

by hackering, the classic is to make them run a trojan .exe, that gives you direct access to their machine, if they're using windows, that is

Think I'm just about ready to add Node.js to my stack.

Any advice you wish you knew before you started?


codepen.io/weebdev/full/LwPBYj

>Any advice you wish you knew before you started?
I wish I didn't waste time learning it

whut to lrn instead?

jsfiddle.net/os7dercv/
Seems to be working.

Did you try calling it as a function? The Response object data is a stream which is why you're probably seeing that blob

response.text().then((text) => { myArticle.innerHTML = text; });

I'm just memeing learn whatever you want bruv
I personally don't like JS so I don't use Node in the backend but if you enjoy it then it's cool, if you know JS then you already know Node desu

What do I need to do to not become a mediocre web dev? I mean, I already know one front and one back framework, I will probably not get unemployed in the next years, but I also wanted to become a little more than "good enough".

I still think that I have a lot to learn about design patterns but I found very hard to practice these without a real, big project.

Freecodecamp or App Academy for web dev?
FC teaches javascript
AA uses ruby on rails

For all the Node.js hype I hardly see any job posting for it. I think it is a good technology to get your feet on the backend if you come from the html/css/js learning path, but it is hard to not use the big frameworks that other languages have. I'm learning Laravel on my first job and it is really something, for all the php hate that you read online I thought I would be suffering everyday but is hard to against reality that Laravel is top notch.

I will be enrolling soon to a master's degree in Bioinformatics while studying web dev on my own, considering myoriginal bachelor's is in Medical Technology, do I have the profile (or minimum requirements) IT companies want for the job as a web developer?

what is status 412 Precondition Failed and how do I fix it?

fuck you aint wrong. just searched, 5x results for react, and higher pay. node jobs were mainly full stack as well

define what soeta dev. if i was hiring you id want to see a portfolio and id ask you questions. backend or frontend?

What stacks are there besides MEAN and LAMP?

Anyone?
This seems oddly specific but happens either on page load or input blur.

Where can I get an idea for the project? I don't really wanna deploy it or anything, just want to put something on github.

I started with JS, and even though I've fiddled with several other languages, desu, I enjoy using JS the most.
And I mean vanilla JS, not a bunch of bullshit libraries. I find it really fun, quirks aside

I will try to be as good as possible in front-end, and then keep learning. Do you have any tips/resources on how to build a decent portfolio, where to start, etc.?

So I think I'm ready for a junior front end position. I know HTML, CSS, Sass, Bootstrap, JS and React, also familiar with Adobe XD and I'm not bad at design.
Most companies are looking for senior devs where I live.
I'm considering starting off on Upwork. Any of you did some freelancing?

Attached: 1521900169500.jpg (1200x1200, 106K)