/wdg/ - Web Development General

>Getting started
Get a good understanding of HTML, CSS and JavaScript.
The Mozilla Developer Network offers a good intro (no matter your browser choice)
developer.mozilla.org/en-US/docs/Learn

>Free online courses
codecademy.com/
freecodecamp.com/
bento.io/

>What next
youtube.com/watch?v=sBzRwzY7G-k
github.com/kamranahmedse/developer-roadmap

>Useful resources
developer.mozilla.org/en-US/docs/Web - General documentation for HTML, CSS & JavaScript
stackoverflow.com/ - Developers asking questions and helping each other
caniuse.com/ - Check browser support for front-end web technologies

>Useful Youtube channels
youtube.com/derekbanas
youtube.com/learncodeacademy - codecademy
youtube.com/channel/UCO1cgjhGzsSYb1rsB4bFe4Q - funfunfunction
youtube.com/user/TechGuyWeb - Traversy Media
youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ - freeCodeCamp

>an in-depth comparison of VPS hosts
webstack.de/blog/e/cloud-hosting-provider-comparison-2017/

Other urls found in this thread:

chrome.google.com/webstore/detail/extensions-reloader/fimgfedafeadlieiabdeeaodndnlbhid
docs.angularjs.org/misc/started
news.ycombinator.com/item?id=14846359.
fonts.google.com/specimen/Work Sans
broccolijs.com/?
youtube.com/watch?v=rLGCpRPwtj0
github.com/facebook/react/issues/10294
twitter.com/SFWRedditVideos

I'm quite out of the loop, but what software does people use to create banners? Flash is dead, i dont want to use it, .GIF, VP8, whatever? What does mainstream webdevs use?

what's a banner

ads banner

I may be stupid but is there a reason that the w3schools series of instructions aren't here?

Im new to actually making whole sites and have been assidiously avoiding anything with JS

Is that dumb?

My projects atm are a page for an app and a personal blog

Also is it ok to make another github account to get access to another github pages. Unsure if thats against their terms or anything.

>assidiously avoiding anything with JS
Dumb? Yes
Necessary? No

You can use webm in an html5 video

Why do all FE jobs want someone with JS Framework experience? What if I don't have any?

Anyone here from soCal? I'm trying to find out what the job climate is like in the L.A. area because I might potentially move there in the future.

I'll just be starting out so I mean as a junior dev.

... Because all FE jobs actually entail working with JS Frameworks?

>Get a good understanding of HTML, CSS and JavaScript.
Learning only these is stupid
what about Ruby? Python?
I mean, you didn't even mention PHP, what web dev are you intending to do, static blogs?

dood being a nodebab is all the rage atm
js is becoming langua franca, every language worth its stackoverlow usage stats transpiles to it or can interpret it

JS is indeed a must, but as I mentioned, learning ONLY these 3 will not make you a web dev, but rather a CS enthousiast that's 15 yo.
Most of CS passionate learn these as teens anyway.
HTML and CSS both take few hours to be tuned and JS is franckly not hard to understand if you have basic programming knowledge (ofc you'll need more time to get your hand on some libraries).
Additionally, SQL and PHP are more important than js, for that "standard, easy, teen" deving.
You can fully handle a forum without requiring JS (which I did, back when I was a teen).

That's to say: being a web dev today isn't about html, css or even js. If you wanna make decent shit (and get a job), you'll need to dive into more. Ruby on Rails, Python (Django or Flask)...

I have a hammer, I bet I can make a pretty cake.

To test a Chrome extension I'm making, I have to go into the extensions page and hit the reload button every time. Is there a more efficient way of doing this?

I got this with "chrome extension reloader", perhaps there's something better somewhere.
chrome.google.com/webstore/detail/extensions-reloader/fimgfedafeadlieiabdeeaodndnlbhid

but js is an application server language now, you don't need to learn php
since using node means you use js for front end and back end & node skills seem to be in demand for whatever reason, op is right to state that it's good to learn js to get started

you're right that learning sql is important tho, so is learning how http works, how mvc works etc

dont judge me but where can i fasttrack learn angular 1.x?

Is the Elixir/Phoenix hype justifiable or is it just another web dev meme?

>What if I want a job as a car mechanic, but have never actually worked with a car before?

Then you're not a damned FE guy. If you mean 'how do I get experience so I can GET a job?', then just work on personal projects. MAKE stuff.

w3schools is garbage.

good sources to learn angular 1.x?

Something wrong with the official tutorial ?
docs.angularjs.org/misc/started

Enjoy your rent.

>Ruby? Python?
Either is good. Python is used more broadly, but Ruby has a distinct advantage in the Rails Tutorial. It's free and covers everything, from the basics of the language to webdev best practices.

It is. Read news.ycombinator.com/item?id=14846359. They discuss that very question.

I know, it's gonna fuck me. My friend is moving and going to grad school at UCLA and is trying to convince me to come too. I'm just exploring the option.

I've used it so many times that I lost count. Why is it garbage?

It's under "Getting started" you dunce.
Of course people should learn more.

It's also dumb to push JS/Node aside and pretend, that python and dying ruby would be more important.
PHP I can't argue with. It's so widely established in all kind of things.

To be fair, the official tutorial's pretty bad. Even the AngularJS people (i.e., Google, inc) said it was. If you're still here, or if anyone else is, try Scotch.io. I've personally learned it elsewhere - a place that's now switched to React, I believe - but I've heard they're good.

I've been an FE Dev for 2 years. I don't have any experience in JS frameworks because they aren't used at my Magento job.

I might be getting a job offer from the one FE job which doesn't require JS Framework experience, and would have to teach myself to use when my new company would get round to implement it, since I'd be the most senior FE.

Wonder if the backene ASP.NET wizards could be of help in learning them.

Someone give me ideas of what website to make. I can't think of anything remotely useful.

Automatic twitch stream recommendations based on existing follows/subscriptions

For a number of reasons. I won't go into huge detail here, but here's a few (specifically from the JS tutorial):
1. Their tutorials are completely abitrary in order. For example, I'd find it pretty tough to argue that variables are NOT an integral part of learning early JS. However, they don't introduce it until the 8th page, after already introducing a bunch of methods/functions like 'document.getElementById("demo").innerHTML = "Hello Dolly.";'.
2. Their waifus probably suck.
3. The fail to mention a bunch of key JS concepts, like prototypal inheritance, in anything but passing detail.
4. They don't mention ANYTHING about modern JS (ES5/6/7). No let/const, no thicc arrow functions... the list goes on.
5. They fail to mention function expressions.
(cont'd)

(cont'd)
6. Their style guide(s) is (are) completely arbitrary and frankly wrong in many aspects:
a.) They say never to modify standard JS prototypes. Extending prototypes is a huge part of JS, and there's plenty of instances where you'd want to, for example, extend the String prototype with a firstLetterCaps() method.
b.) They say always use four spaces, and never tabs. I'm not gonna argue spaces vs tabs here but that's just asinine making a blanket statement like that, especially since many code editors will automatically convert between the two. If yours doesn't... get a new code editor.
c.) random line length < 80 requirement. This has no real basis in the real world.

In short they DO explain a lot of key concepts, but they leave out just enough to make it dangerous. They also give you tiny snippets of code, but never tell you where to go from here. So if you're trying to become a dev, you're left with the ability to produce exactly what they have in their examples, but not to extend it into any real-world concepts
w3schools is okay as a reference for stuff like "what's the difference between slice() and splice()", but not as a general learning source.

I'm going to judge you, user.

So, CodeAcademy is somewhat better at it than W3schools?
I've started web dev a month ago, and I'm still trying to get into Javascript and PHP and I'm scared of learning the wrong way.

that doesnt sound very useful

Hi, /wdg/

seethering.com

I made my very first website and launched it all on my own using aws. This is probably nothing to you but, for a beginner to me, it feels like a significant step towards my goal of becoming a software developer. I know that front end technologies aren't really considered software development and that becoming comfortable with backend languages such as python and ruby is were it begins. However, going from knowing nothing to understanding the basics of a website, hosting, dns, was an eye opener and made me want to learn even more.

Would you mind critiquing my website? Sure, it's a basic, static website, but does it look good? Is it lacking in some way? I'm very much new to all of this, so there's probably something I'm not even aware of that you would immediately notice.

I created this website to talk about when and where you can see the solar eclipse coming up in August. I also talk about the importance of solar glasses to protect your eyes from sun damage. I use this as an opportunity to make some money through amazon advertisement and amazon affiliate links so people can buy solar glasses through my website. If I can even make $1,000 that would go a long way towards putting me through college.

So what do you think? Is my website bad and I should feel bad? Is it alright? I'd love to hear your honest/brutal opinion and, hey, I'd also like to know what your first website was. If you have a website that's live, feel free to link it, I'd like to see what you're doing.

Either way, thanks for your help and advice in the past, you've been a big help.

I think so, yeh. Actually freecodecamp is my recommendation, since they actually have you do projects (albeit stupid ones, but that's fine!) from day 1. The important thing you need to do - that sites like w3schools DONT do, is start making your own stuff as soon as you learn your first "hello world". Remember that, despite what some people think, programming is an artistic, CREATIVE discipline. If you aren't creating, you aren't learning.

>programming is an artistic, CREATIVE discipline. If you aren't creating, you aren't learning.
I'm going to steal that and look cool in front of my friends.

Thanks man, I'll start once I finish a website for a client.

good for you user
Make sure that you maintain the correct aspect-ratio of the images you are using.
Crop them if you have to, instead of stretching/squishing them.
The text on top of some images is hard to read. Would be better to have the text-shadow equally all around it.

looks gud
i don't have any links to solar glasses tho
also you might want to try using a dark shade of gray for main text instead of black
pls report back if this scheme makes you money

>i don't have any links to solar glasses tho
i'm retarded, that was my adblocker

M D N
D
N

pictures are stretching.
the entire "see the ring" section is out of place. you can easily put it in smaller text inside of the eclipse image.
If you want to go with the meme scrolling layout with large pictures, pictures should take up much more space, if not the whole viewport. since there's a fixed banner at the top, there could be some kind of change in order to more clearly show what section you are looking at. maybe the color changes to match the image color?
the large white spaces between each section is jarring and doesn't need to be there.
single words floating in the center of each picture doesn't look good. you should have some kind of subtitles to explain each sections purpose a bit more in order to make people actually want to follow the links.
i personally think you should add button links for the different pages on top of the images for a more intuitive interface. kind of more like pic related.
Your font is horrible.

>that Tic-Tac-Toe project from freeCodeCamp

What's the best sans serif font for a control panel/dashboard application? I can't use the system default because some default fonts/browser combos don't have support for lighter or bolder font weights, and my hacky vertical centering is also different between different default fonts as well. What do you guys like?

Work Sans

fonts.google.com/specimen/Work Sans

Eli5: WebAssembly? I tried reading a few articles but I'm stupid.

bump

I have an interview tomorrow and they're going to ask what I know about 'one of the ExtJS 6 frameworks'.

I don't know anything about it, someone please tell me what to say about ExtJS to get the job.

How many of you here have jobs in webdev and how many of you are currently not employed in webdev?

I don't know if you can do anything about it but the ads are disgustingly big.

It's a huge monster of a framework. You're fucked.

Anyone here know anything about LTI or OneRoster?

Employed at my second dev job.

This ramped up in difficulty 10 fold. Easily.

second semester senior. i was retard and went for double major, so i still have another semester before becoming a full time dev

Has anyone here used the Essential Grid plugin? Is there a way to achieve something like pic related with the skin editor?

What does /wdg/ think of Grunt?
I just found it and its pretty neat.

Never tried it. I've only ever used gulp and make files

its great, just set it up and you have an auto-compile on any save.

Anyone here tried broccolijs.com/? It's not very popular on its own, but Phoenix uses it for JavaScript/assets, and Phoenix devs seem to love it.

youtube.com/watch?v=rLGCpRPwtj0

Per the video, do you think web-dev as a career is a bubble that is about to burst because it is dependent on low Fed interest rates?

If you already know Rails or other major framework you will find that working with Elixir/Phoenix is almost exactly the same. Elixir looks and feels like any other scripting language and goes a long way to hide functional/immutable nature of the language with lots of convenience methods to iterate and map over lists and tuples, pattern matching and even variable re-assignment (syntactic sugar over immutable variables) so you almost never have to resort to using recursion.

Phoenix is not really going to give you anything over a regular framework as all the multithreading is handled under the hood by the framework. You really cant take advantage of the large scale multithreading unless you are designing servers or databases.

tl:dr Its very easy to work with and very familiar, but there are no big payoffs over regular frameworks

What's a good way to build a portfolio that's attractive to employers?

Complexity.

Use a lot of APIs.

Elixir doesn't hide the data immutability. It simulates multiple-assignment variables for you, but it does not, for instance, simulate mutable objects. I'd say that for this reason Elixir actually feels different from your normal scripting languages and is, in fact, safer.

>Make sure that you maintain the correct aspect-ratio of the images you are using.

I checked and did find some images that looked better when referenced as a css background image, using the cover attribute. It's that stupid map of the U.S. that's being difficult. I want people to see the whole map, no matter what device they are using. If I use the contain value for background-image, it fits horizontally but gets squished vertically. But using cover means the whole map isn't shown, which doesn't make the image immediately stand out as a map of America.

>Would be better to have the text-shadow equally all around it.

I also made this change as well, thanks for pointing it out to me.

>might want to try using a dark shade of gray for main text instead of black

I made this change, p color attribute from black to #666666

>pls report back if this scheme makes you money

I've made two sales so far, earning me a grand total of $0.91

>pictures are stretching.
someone else pointed that out earlier and I made appropriate changes. If you still notice something, I'd appreciate you telling me.

The image of each separate state for the [ insert state name ] webpage was hard to pull off. I need people to see the whole image no matter what device they are using. If the image "covers" the background, then it's not immediately obvious that they are looking at a state map. If the image is "contained" in the background, then the ratio is off on one screen size or another. Any suggestions?

>pictures should take up much more space, if not the whole viewport
what, you mean take up all the space above the fold?

>the large white spaces between each section is jarring and doesn't need to be there.
Now that you mention it, it does seem jarring. I took that part out.

>i personally think you should add button links for the different pages on top of the images for a more intuitive interface. kind of more like pic related.

You know what, you're right. I made that change and I think it looks good.

>Your font is horrible.

Any suggestions?

How easy is it to make a REST API from Node and MySQL?

Hello pajeets of Sup Forums
github.com/facebook/react/issues/10294

>React

Get that shit out of here, Angular 4 is the only front end framework I will ever need.

>Angular 4
Honorary pajeet

Install Vue.js

>Pajeet
>Using angular at all

The learning curve is like 4 times harder than React, I doubt any Pajeet works on Angular.

use Vue

No one gives a shit about Vue you chink

Install

npm install vue --save

npm install vue --save-dev

npm install -g vue-cli

yarn ignore vue

Don't ignore me!

I'd maybe install it if there was a mobile community like React Native has, otherwise I'll stick to react

You're right, those ads were too big. I changed it out with one row ads, hopefully that looks better and a lot less annoying.

Getting the hang of d3 and making funky visualizations instead of visualizing relevant real-world data

...

not as weird as those people painting with CSS

>what about Ruby? Python?
Learning only these is stupid
what about C++ ? MIPS assembly ?
I mean, you didn't even mention COBOL

Where's a good place to learn how to intermingle sql, php, html, Javascript, and css

Example: remembering a specific person posted to a specific thread

>everyone fighting over what js library to use
lol just use js

I honestly learned most of that from looking at other applications and asking Stack Overflow when I got confused. And of course shitposting on Sup Forums for 10 years

>I doubt any Pajeet works on Angular
This means angular is patrician framework then ?
I haven't used a front end framework since angular1 and have been looking to pick one up?

Angular 1 is dogshit
Angular 2/4 is great as a framework (with typescript) but not great at speed
React is great if all you want to do is components (and styled components is awesome)
Vue is great if you don't mind working with a combination of react and angular principles.

I haven't had any speed issues since implementing aot and tree shaking. Having that bundled into the cli, along with generating components and tests, make it so worth it

>Angular 2/4 is great as a framework (with typescript)
it looks like you don't have to use typescript but that most angular tutorials use it
should i rather not bother and learn react if i don't want to touch typescript ?
is it even worth it to use typescript ? it seems like you trade additional build steps and some bloat for in editor autocompletion

It also makes your code way more strongly typed. Since it gets precompiled into javascript, any browser only has to serve it up, not compile it at runtime making it very fast

Been programming for 4-6 months. Bit of Python, bit of C, lots of Java. Life is tough and I need another source of income.to pay bills and put food on the table. How quickly could I get good enough at web dev to make profit? I know you probably get this question a lot, sorry if this is annoying.