/wdg/ - Web Development General

No retards allowed Edition.
Retards please stay out.

Previous Thread:
>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 (independent of your browser choice)
freecodecamp.com
codecademy.com
hackr.io/ (is this good??)
Try working on and learning from your own personal projects as soon as you can.

>Further resources
developer.mozilla.org/en-US/docs/Web - excellent documentation for HTML, CSS & JS
github.com/kamranahmedse/developer-roadmap - Frontend+Backend learner-path suggestions (just updated)
youtu.be/Zftx68K-1D4 - Web Development in 2018

jsfiddle.net - Use this and post a link, if you need help with your HTML/CSS/JS

Attached: wdg.png (1280x720, 180K)

Other urls found in this thread:

codepen.io/user/pen/ZxvpmY
github.com/emilwallner/Screenshot-to-code-in-Keras
youtube.com/watch?v=hQZ7Xg7q7zw
jsfiddle.net/8z8ueuyd/13/
youtube.com/watch?v=SSCzDykng4g
youtube.com/watch?v=3MvKLOecT1I
github.com/mach-kernel/vertx-polyglot-counter#benchmarks
vanilla-js.com/
flexboxfroggy.com/
cssgridgarden.com/)
developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML
twitter.com/NSFWRedditGif

What's the a way to make a long gradient background that has to multiply blend over multiple images?

Kind of like this, but with multiply and without affecting text:
>codepen.io/user/pen/ZxvpmY

Is it the time to retire yet?
github.com/emilwallner/Screenshot-to-code-in-Keras

Attached: 68747470733a2f2f692e696d6775722e636f6d2f4c446d6f4c4c562e706e67.png (1043x453, 132K)

Please god I hope so I hate front end so much.

It was somewhere in that talk. Start @15:15
> youtube.com/watch?v=hQZ7Xg7q7zw

but thats ugly. it looks like a free template from 2002.

Cool, thanks!

Looks like a pretty cool channel too

literally no one in 2018 is making their living by creating wordpress templates

oh learnt something myself.
Like this, right?

jsfiddle.net/8z8ueuyd/13/

Attached: the_future_you_chose.gif (674x406, 246K)

React version when?

>user, the website is up already?
>Calm down, boss. We have to train it first

Spark or Javalin?

>be me
>using npm on windows
>fetchMetadata: ... checking installable status every time
>npm hangs

such is life

Vanilla js or vue +bulma for personal website ? I am new to front-end webdev and want something easy to work with and customize.

This is great!

which one, guys?

Attached: 1 rjB2d6mpsrsxAI3UcWbeRw.png (1200x628, 46K)

It depends on whether you have a use for it.
And then it's no longer a question between vanilla and Vue, but between React/Vue/Angular/etc.

It should be apparent, whether components and declarative rendering make sense for what you want to do or not.

it doesn't matter

Attached: 1509334947598.jpg (360x348, 73K)

Vanilla js and server rendered/static html

Also dont be a fascist technocrat faggot. License all JS that will run on a users machine under the GPLv3.

My use case is to setup a webpage with a landing page, a page with previews of webgl stuff that I want to code and maybe my CV .
It will also be entirely client side. So no server.

Also, I just want to write shaders in a cozy environment that I could show to the world.

Yarn is faster. If you don't believe me test it. Also npm has given me errors where out-of-sync packages break the install. I'll never go back

>framework for a personal site

Nigga what?

>Also npm has given me errors where out-of-sync packages break the install. I'll never go back
This

It'll have webgl and web audio and other experiments. How else can I go about it if I don't know how to position CSS elements or create anything that looks good?

I look at things like bulma and vue and it seems much easier to do things in those environments.

>GPL
Literal authoritarian cancer license.
MIT if you actually care about freedom.
I mean sure, if you need dynamic components, client side routing or want to change parts of the view depending on user input then go with Vue or any other framework you may like.
Though Vue is really nice.

>bulma and vue are not the same thing

>Vue.js - The Progressive JavaScript Framework.
>Bulma is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.

React/vue will make no difference when it comes to webgl or audio. You can also use bulma without vue or react but it may or may not make you want to pull your hair out without understanding css. Just like trying to use a C framework without knowing C would.

What are dynamic components / client side routing ?
Ive failed to understand CSS for a really long time, but bulma and vue make it look so easy.
"I want fancy buttons"
"I want a navbar"
"I want transitions "
It feels that all these can be easily accomplished.

>Ive failed to understand CSS for a really long time, but bulma and vue make it look so easy.
sis if you can't even into css you should probably start with the basics before moving onto things that just turn it into a magical black box

>failed to understand CSS
there is no hope for such a brainlet

Attached: noose.jpg (700x1051, 99K)

If you just want to use it off the shelf as a UI kit then its great for that. But most people use it as a framework(like its advertised) and end up overriding 90% of it, which makes rendering slow and junky and they end up with this ugly website with redundant & contradictive spaghetti css. Bulma is actually better than bootstrap in this regard but this applies to every css framework I've come across.

Why are you not writing Elm, Scala.js, Clojurescript, or any of the saner languages, /wdg/?

Electron or NWJS? /dpt/ didnt answer
I'm gonna be writing any performance critical code in C++ as node modules, so I'm mainly concerned about the packaging size, memory usage and customizability of the window (e.g. frame & context menu)

all the cool kids use electron

youtube.com/watch?v=SSCzDykng4g

do you use any of them?

I usually avoid whatever the cool kids do

then build native. all the cool kids are using webstack

>do you use any of them?
I do backend, so no. But I was thinking in dabbling in frontend a bit, and Clojurescript seems cool (looking at reagent and stuff like that). Wanted your opinions on why you would not want to use it.

Attached: index.jpg (244x206, 8K)

>I do backend
what do you use on backend?

I think backend it's better than the clusterfuck front end is

>what do you use on backend?
80% Java, but not by choice, it's just the company standard. Some Clojure (which I have mostly been using for personal projects, too, hence the affinity with Clojurescript) and some Ruby here and there.

Attached: 1377096049180.jpg (700x509, 35K)

I heard Java Play is great, don't know if that's what you're using tho

I've only tried clojurescript out of all of those but I didnt feel like how big the compiled js was or the sacrifice performance was worth the trade off. JS isn't that bad if you use it in the way it was intended and you're not a brainlet.

>I usually avoid whatever the cool kids do
Funny, I was just watching this:
youtube.com/watch?v=3MvKLOecT1I

It's the guy who made that "Mongo db is web scale" video and "Erlang the movie II"

I have heard good things about Play, too. But no, we use Spring.
Are you comparing it to vanilla JS or full-on-frameworks-JS? Not sure if am brainlet, but the little JS I did years back was a frustrating experience, and it seems to only have gotten more complicated tooling-wise, and expectations about what the frontend does are higher.

I tend to avoid frameworks personally, but yeah I guess I'd probably choose clojurescript and its tooling over something like react or vue. JS years ago was a real pain in the ass because of browser compatibility but thats really cleared up in the last couple years.

What do you guys think about cloud base machine learning blockchain backed platform web app?

Attached: 1522198738091s.jpg (123x124, 2K)

Is there any demand for C++ devs for webasm?

There will be eventually but its also possible that rust takes over before webasm goes mainstream

github.com/mach-kernel/vertx-polyglot-counter#benchmarks

>the absolute state of nodejs cucks

vert.x

Sounds good, but will it be data-driven and cross-platform?

Yes, that is the idea.

It will be provided as a Service so we can train the neural networks on the fly.

looks good!

do you use Vert.x?

Attached: 1522199037409s.jpg (249x237, 11K)

I am looking into something called skeleton CSS, is this good?

no just learn css you fucking retard. it's not hard

rate this graph

why complicate?

Attached: ss.png (387x409, 8K)

So HTML CSS and js , eh?

My JS framework comes pre-installed with every browser already

vanilla-js.com/

except for the grid I think its alright but I would suggest looking at the source and implementing the parts you want yourself. As far as layout/grid goes, play these (flexboxfroggy.com/ and cssgridgarden.com/) games a couple times and you're set.

Yes, it's awesome. I'm using it for building digital signage software backend + frontend atm

Thank you user!

But will what I write be responsive?

yes

Alright last question, apart from basic layouts using CSS, responsive design, and maybe a little seo (like adding keywords and such I think ) what else do I have to know?

humans aren't even responsive its time the meme dies

the jamstack is the future
bitch

some things will be automatically, but some stuff will require using media queries which is a way to apply/scope css to specific types of devices and screen sizes. MDN or css-tricks is a good resource to learn more about those.

thats pretty much it. add accessibility (sometimes abreviated as a11y) and you will be a better hire than 99% of the front end devs around.

also, accessibility pretty much negates seo. a side effect of following good accessibility standards is good seo. your job is to optimize your website for humans, its the search engine companies job to optimize their search engines. hos before seos.

>a little seo (like adding keywords and such
[nervous laughter]

Explain...

An emacs hacker I respect has written a blog about how the next generation of hackers (think Stallman hacker not hackerman), are developing on the web. What do you guys think?

its at least 15 years late. I mean, has the guy been asleep? like thats litterally whats been happening the last 20 years or so. like 90% of the people who use emacs are using it for web development.

Attached: wat.jpg (400x266, 17K)

ahahaha get fucked front end faggots

You guys are missing the point. This is the first step. Give it some time (probably a few years but that's a wild ass guess) and AI will be replacing front-end developers en masse.

thats good. getting rid of all the front end plebs calling themselves developers

What bout my sepples and native apps

not really no. there's a lot more to 'design' than laying out content or making it look good. trends change, companies brand themselves to stand out. innovation demands human creativity. without it you have monotonous noise.

Oh well, then I'll have an excuse to stop being lazy and learn some hardcore low level stuff to get a more interesting job.

In which cases would redux be needed? Also why is angular so much better and superior to react?

If you honestly think this replaces front end you have no idea what front end is really about.

>decide to upgrade to bootstrap 4
>everything looks worse than boostrap 3
>no big new features
>no backwards compatibility
>downgrade back to bootstrap 3
Why is this allowed?

Attached: bootstrap.png (1024x860, 51K)

Hellow /wdg/ i prefer to learn from reading books preferibly with lots of exercises (think K&R). Is there something like this for HTML/CSS?

Just go play some shuffleboard instead grandpa.

Off the top of my head:

1. you'd like to manage your app's stores in more than one component. For example, you'd like to know the screen dimensions or the user's info.
2. You'd like to manage asynchronous code outside of your react components and have the store update when the code has executed
3. For ease of changing store state from any redux connected component. For example there may be many components that, when interacted with, dispatches an action to add points.
4. For handling app wide changes, for example when a user logs in, the data for multiple stores (e.g. user, auth, dashboard, preferences) can be updated at once without resorting to data persistence or ugly prop passing all over the place
5. For persisting your state the way it is with something like redux persist

And React is vastly superior over angular in terms of building web apps, because it keeps things simple and only focuses on the view.

Oh and another:

You'd like to arrange data from your redux store so it can easily be rendered in to your component with a library like reselect, without having to do the data arrangement on your component and saving it to your state.

imo in 5 years we will be reading grampa articles justifying why the panacea known as wasm did not take off
>but applets, they looked goofy and seo was bad I tell ya. This other VM is frictionless I tell ya

Oh and of course the best one:
You want a history of every action/event your app has went through, how the data changed as a result of the action and the functionality of filtering actions, cancelling actions, going back in history and replaying the actions, and a full view of your app's redux store.

wasm doesn't have enough browser support to be used in production for important features. Also, as I understand it you still need a layer of JS to actually do DOM manipulation.

Anyway, the only wasm I've seen is demos and crypto miners.

People sometimes use C++ and compile with emscripten, which doesn't give you the same performance, but has the benefit of being backwards compatible. That said, it's not terribly useful except mainly for WebGL stuff.

rude

I've never read any books on HTML/CSS, but I can recommend the MDN docs. I'm not sure if it has as many exercises as you want, but it's a good guide. I'd recommend at least checking it out first, and look for something else if it doesn't suit your preference.

developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML

You can also dispatch redux actions outside the app using the redux debugger which I find quite useful.

I'm not him, I know CSS pretty well
But I still believe it's a big turd pile.
It's hacky shit, and is only enjoyed by hack frauds.

It's like being in the sewers full of shit,
and being proud of that you know your way around in the sewers full of shit,
waiting for people who may come down to the sewers were you live,
and educate them about how to navigate in this sewers full of shit.
Showing him what shit is edible and what not. And how to survive around here.

Everyone who is proud of being a front end dev can't be right in his mind.

Front-end-Devs loose braincells and hair everyday.
Learn a real programming language, to escape this fate.
It will help you to grow a mane together with a manly beard.

Oh yeah? Give me reasons faggit

So I have a review coming up.

All of us developers just found out they can afford to pay us way more. They just hired 2 new devs and didn't give us a raise even though business is booming. We are all asking for a 20k raise.

This should be interesting.

mark zuckerberg and steve jobs say it helps you to learn how to think
so it's the opposite of front end dev
because front end dev is hackery hack hack hack
it's not very logical

>What are dynamic components / client side routing ?
client-side routing for single-page-applications. so all the navigation happens client-side without any extra page reloads.
Components to structure a site, which can get passed variables to them, that affect what they ultimately render.

Using a JS library like Vue or a CSS framework like Bulma isn't a magic bullet to suddenly make a crap site great.

Just use the free trial period of teamtreehouse or some site like that, if you just want some HTML/CSS/JS spoonfeeding.
(I did a paid month, when I first started learning, just speeding through the videos at 1.5x, and found it quite helpful as a initial webdev kickstart)

Attached: a9e.png (282x376, 102K)