/wdg/ - Web Development General

Prev 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

>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
youtube.com/watch?v=Zftx68K-1D4&feature=youtu.be

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

Attached: 1531185648153.png (822x552, 868K)

Other urls found in this thread:

startpage.com/do/search?q=minimalist cms
getgrav.org
gohugo.io
gatsbyjs.org
ghost.org
netlify.com
udemy.com/the-web-developer-bootcamp/?
stackoverflow.com/questions/950087/how-do-i-include-a-javascript-file-in-another-javascript-file
developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content
hastebin.com/akowaqobiv.js
github.com/PaulLeCam/react-leaflet
twitter.com/SFWRedditGifs

Recommend me a CMS that is simple and easy to use /wdg/. I hate using Wordpress as it is so bloated.

Can es6 class method be async?

startpage.com/do/search?q=minimalist cms

I hate when people respond with shit like this. I wasn't asking Google or Startpage or whatever, I was asking /wdg/.

Gomennasai. Please everyone feel free to answer this guy with your knowledge of simpler systems than wordpress.

Ok, yeah, that's what I'm looking for. Why you such a jerk nigga.

I think I'm more lazy than a jerk
Also, Jow Forums is the hive of jerks nowadays. But maybe /wdg/ is different, I don't know.

There's literally hundreds of CMS. Asking for recommendations on one isn't being lazy, it is filtering out the junk

Check theese out
getgrav.org
gohugo.io
gatsbyjs.org
ghost.org
netlify.com

>Can es6 class method be async?
sure, if they return a promise

I'm building a shopping website with account registration for a friend of mine, and i'm wooried about gdpr, i tought about encrypting the database, but what else can i do ?

who cares man, if you don't store credit card info, it's no big deal anyways...

>react app
>need to draw bunch of images on canvas
>added react-konva
>populated array of layers with images
>takes 8s
>tab is 400mb
>manualy drew on canvas
>300ms
>tab is same 80mb as it normaly is
Is that fine to use generic js in react? In a sense, it there some rule that everything should be reactified?

>using CMS
Enjoy being part of the dependent-class and the botnet. Nothing like having a site that looks exactly the same as every other site, with a CMS so complicated that you need to hire a guy who specialises in nothing except that CMS, because nobody else can read the DOM structure.

no idea.. are you changing state while drawing on canvas?

not sure my way is the right one, but when doing non react related stuff with dome elements, I store variables outside of state...

No, after. I'm hiding overlay(by setting overlayIsShown to false) after drawing completed, but it doesn't affect canvas since it's PureComponent and drawing done if it's parent by ref. It's the only change of state that is possible while canvas is shown.

well, don't know the.. not sure about react 16 or newer versions, but I would insert a shouldComponentUpdate in the child to test what happens..

^^jesus fuck reading this, it all sounds so perverse

or maybe add some key property later on, which would indicate to react that nothing changed

No, everythings works just fine. My question is not about how to do that, but is it okay to directly manipulate things with js in react instead of using react components?

sure, I do it all the time via ref property... React would be useless if you couldn't use other JS libraries on the dom elements.

>No, everythings works just fine.
I meant because of the high memory usage.. Put a console.log in shouldComponentUpdate to see if it tries to trigger rerendering...

I hate the word 'deploy'. I hate a lot of things actually. But with web dev a lot of terms seems childish. Many aspects of web dev seem childish, from the extravagant colours to the cute cartoons and the dumb space-rocket terms. I would love it if web developers were more mature in general.

The irony is that you're throwing a childish tantrum over words and demanding the world be 'mature' for your own sake.

Lol yeah I know that. But you can't throw tantrums irl, I may as well be a little silly here but still raise a point about webdev culture I don't like.

>Is that fine to use generic js in react? In a sense, it there some rule that everything should be reactified?
Just make a component that contains the plain js that you're doing and then export it. Then you include that React component.

There are tonnes of React components that are just wrappers around other types of JS.

I'd kind of like to see how you do it though, do you mind posting the component? In a pastebin if it's too big to go here.

Google needs to stop punishing non-.coms

This domain reselling is way out of hand.

I know some HTML and got the basics of JS down. should I start completing freecodecamp or do this udemy course udemy.com/the-web-developer-bootcamp/? I might try to build something on my own as well but I feel I'll be more comfortable following something like these

Build something on your own while also following FCC. The problem with tutorials is you get stuck on them forever, constantly just following steps rather than actually thinking for yourself. By creating your own project you figure shit out yourself and actually use your brain for once.

oh, does freecodecamp get harder as it goes on? I tried the HTML part in it and I felt it was holding my hand on every step

Yeah eventually you get to nice sized projects.

I've been having trouble focusing on tutorials recently. If I see that a tutorial series adds up to being 4+ hours long then I get demotivated and lose focus. Help

Do an hour a night.

I'm on a 25 hour course right now and that's how I handle it.

cool, thanks mate.

I want to start learning and building shit in elixir and phoenix.
But beforehand, do I absolutely have to know about functors, endofunctors, monads, monoids and all that jazz?

Is there a Javascript command to import other files from the same directory so I won't have to embed everything on every site manually?

use gulp

That's not what I meant. I am looking for a Javascript feature that works client-side, not a dev-side build tool.

I already know gulp.

I'm actually doing this course, and it is great.
A bit outdated, but the way Colt explains stuff is just great. It is not my primary source of course, i use a bunch of other resources and books along the way depending on the topic i'm on, but the course was amazing so far.
I really recommend it. You'll get your money's worth

>'d kind of like to see how you do it though, do you mind posting the component? In a pastebin if it's too big to go here.
It's literaly just canvas and promise in componentdidmount that iterates over array of images that was passed in mapstatetoprops.

Learn webpack and bundle that shit up.

I already know webpack. That's not what I'm asking.

Yes
Pretty sure he is referring to the async keyword, which is what that does.

RequireJS at runtime. There is a feature in the works, the "import" specification. It isn't terribly useful because why would the client have meaningful knowledge of the files on the server?

What do you want, then?
Do do that, you'd need some file on your server / some path in your webapp that contains the names of all scripts on your server to import.
then you'd do something like (pseudocode)
const routesResponse = await fetch('/alljsroutes.json');
const routes = await routesResponse.json();
for(let route of routes)
{
const script = document.createElement('script');
script.src = route;
document.head.appendChild(script);
}

I don't know why I wrote "routes", I meant scripts, obviously.

Learn as you go.

>Pretty sure he is referring to the async keyword, which is what that does.

well, async keyword (like almost everything in JS) is just syntactic sugar... I don't know about ES6, but webpack + babel + babel-preset-env supports async in class methods in my setup... too lazy to look it up, but he can get it working 100%, just a question of configuration

Is it clear now?

Attached: classes.png (1098x727, 22K)

Yes, and I'm saying that the async keyword causes a function to return a promise. I was saying that there is not a distinction between the two, but he probably was specifically asking about support for the keyword.

I dont know what you're asking.

stackoverflow.com/questions/950087/how-do-i-include-a-javascript-file-in-another-javascript-file

Look up Portals and how they work, you shouldn't edit markup in the DOM without handling updates since they could be removed/changed at any time.

I'm not editing dom, i'm drawing on canvas.

I want to make a HTML text editor that will allow me do stuff like making words bold, aligning text and so on, like here:

developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content

My question is how can I make this editor also act like a regular textarea, so I can send the content over the HTML form?

Attached: 1461576392080.jpg (848x848, 239K)

>drag and drop not working only in chrome
>see that chrome fires off every drag event when you start dragging, but only if you are manipulating dom in the dragstart event
>it's been a bug since 2013
>marked as >won't fix
>workaround is to wrap everything in a timeout
what the fuck

Attached: shiggy.png (425x524, 298K)

What the fuck did you just fucking say about me, you fucking codelet? I'll have you know I graduated top of my class in Web-Dev Bootcamp, and I've been involved in numerous private Javascript frameworks. I have over 300 top-starred Github repos. I am trained in Functional Programming (JS) and I'm the top code contributor for Vue, React, and Angular. You are nothing to me but just another Webpack knockoff. I will wipe you the fuck out with precision the likes of which has never been seen before on this Earth, mark my fucking words. You think you can get away with saying that shit to me over the Internet? Think again, fucker. As we speak I am building a Rust-enhanced Electron app and your Medium articles are being traced right now so you better prepare for the storm, maggot. The storm that wipes out the pathetic little thing you call your portfolio. You're fucking dead, kid. I can be anywhere, anytime, and I can Babel-transpile you in over seven hundred ways, and that's just with my PACKAGE.JSON. Not only am I extensively trained in CREATE-REACT-APP, but I have access to the entire arsenal of new-wave CLI functions and I will use it to its full extent to wipe your miserable ass off the face of the continent, you little shit. If only you could have known what unholy retribution your little "clever" comment was about to bring down upon you, maybe you would have held your fucking tongue. But you couldn't, you didn't, and now you're paying the price, you goddamn idiot. I will shit Javascript all over you and you will drown in it. You're fucking NPM UNINSTALL'ed, kiddo.

Basically, you'll need to add an input (best type="hidden") to the form, and then, when the change event happens on your editor div, set the input's value to your div's innerHTML.
In the future, we'll be able to react to the formdata event, but that's not implemented anywhere.

I'm trying to encode text in an input field so that users can copy paste it as a url and get the same text they entered back. It seems to work unless I use the character '>'. The text it gets back is messed up. I don't use any backend.

I use atob-lite and btoa-lite to encode and decode the text. I'm not sure what I should be searching to fix it. Here's the code that creates the url.
hastebin.com/akowaqobiv.js

In the screenshot the text in the input field is what the user would type out, the encode is the url you would copy and paste, and the decode is what would appear in the text when you go to the url. Normally it would work, but I guess I can't use certain characters?

Attached: comboerror.png (2184x466, 103K)

does it work for other special characters? atob is just base64, so try uri encoding first?

It works for other special characters. It seems to work under special conditions.

"cr.mk>ex shoryuken" does not work and gives the encode "Y3IubWs+ZXggc2hvcnl1a2Vu"

"cr.mk >ex shoryuken" works because I put a space between mk and >. It gives an encode of "Y3IubWsgPmV4IHNob3J5dWtlbg=="

I guess having a "+" in the encode is not allowed? I'm still learning all this. Could this possibly be tied to my regex? My regex is all messed up.

Attached: combo.png (2200x478, 104K)

>2 years ago
>be a professional in some business completely unrelated to development
>this biz is like 7 people so we're all friends basically
>make a stupid php webapp that barely worked in my free time just because
>show it to my boss on a friday after work after drinking some beers
>he likes it
>'hey user, we could use a new booking system, do you think you could build 1?'
>'haha sure lmao'
>make the shittiest booking system ever
>didn't even use version control, all is in folders
>everything is in a VPN
>set up a mysql backup every day at 4am to make sure i tried I guess
>ta-da.png, there you go boss
>ff 2 years, today
>now be freelance web developer, full time PHP backend dev now
>know as much of my shit as one can reasonably know with 2y experience
>can't even believe how shit my shit was back then
>'but hey, it got me started I guess'
>get a call from boss
>'hey dude, I think something is wrong with our ads campaign or something, we're getting almost no bookings!!'
>look at adwords, everything seems fine, literally no changes in the last 3 months or so
>look at traffic, we're getting lots of traffic, even more than a couple weeks before when 'everything was fine', 'we were getting lots of bookings'
>spend more time looking at adwords, be baffled
>end up thinking it might be seasonal or whatever
>decide to put this old project in source control because why not, it'll take 5 minutes to set up a repo, just in case, who knows
>git init
>'write error: No space left on device'
>df -h
>'/dev/vda1 25G 25G 0 100% /'
>the backup folder is like 20GB
>the booking system could not create bookings because the disk is full
>mfw

and that's how you learn something I guess
be born learned, kids

Attached: 1406034815198.png (475x375, 701K)

7/10

okay this is epic

Am I supposed to duplicate the models in the frontend?

what did he mean by this

I already have models in the backend (python). Am I supposed to make a 1:1 copy of them to the frontend? (angular/react/whatever)

>Angular vs Vue vs React
which one would you pick for a standard webpage, maybe with user logins and posts, and why?

I'm just starting out and Angular is the only one I've got any experience with and it seems rather straightforward, even though I'm not really a fan of the module and routing system

Is Bootstrap worth using? Do you use it in 2018?

depends on your needs.

How much would you lads charge for a school website with online courses as well as payments and the like?

Are you a codemonkey with a boss trying to make you finish a project in 2 weeks?
Sure

Are you a 6 figures earning professional who actually cares about UI/UX and is willing to customize the application's appearance to the client's exact specifications?
No

Angular is very convoluted in that regard, but it can make developing the front end part of a web app a breeze, specially with the CLI. React is more for smaller projects but you can use Redux if you want an actual state management system that doesn't make you want to off yourself. There's really nothing similar in Angular to compare it to, Angular manages the state for you, unlike React, Redux just centralizes it. I don't know shit about Vue but apparently it's a lite version of Angular with less setup and boilerplate, but only chinks use that framework. If you just want user login and simple CRUD actions, I'd go for React and use Redux later if I need it, but Angular can do that job just fine, it's just that it will be a bit overkill, you'll probably have more boilerplate files and folders than your actual coding. You also need to see if you need those at all, React/Angular work best with a REST API backend. If you're using stuff like Django you don't really need either, unless you want a Single Page App feel. Angular pretty much does what Django but in the Front end so it feels redundant.

Yes & Yes.
Personal projects use a variety of custom or bulma more though.
Don't listen to this mong

Unironically Angular.

>seems rather straightforward
That's the point. Everything is provided. There's a standard way to do most things.

>I'm not really a fan of the module and routing system
I don't know about you, but I think the modules are great. Everything is explicit, makes bugs occur less frequently & less painful to fix.
Don't know what's your beef with the routing though. It works the same way with other frameworks.

Do give Vue & React a shot though.

Vue is AngularJS but cleaner & easier to work with. Vue components are literally just single webpages that pull in a template & styles, then you write JS on top of it.

React is more flexible, but can be a pain in the ass especially when you deal with redux.

Attached: reactvsangularlearningcurve.png (1000x430, 61K)

Just use mobx, now everything is simple again.

I don't understand why people prefer redux over mobx, the whole point is to remove the tedious passing of props, but instead you handle it in 3 separate files..Having to write a switch case and everything every single time..?

For anything less than like 15 props deep you might as well just use global state, redux is so time consuming and confusing, it's nonsensical.

lol

how do I get a table with 3 colums in one row and one column in the next row, the column in the next row ends at the point where the first column of the previous row ends,

like fucking always, find answer few minutes after posting, nevermind this

>canvas and promise in componentdidmount
I think there might be better ways to do it but I can't say for sure. Putting heavy work in lifecycle methods is usually considered a bad idea but I can't think what I'd do differently.

I'd still like to see that component if you don't mind sharing, wrapping 'other' js in React components is a common practice so I could learn from you in this.

Here's a React component that is done by 'real' developers and wraps a js library from something else which is also drawing shit (maps that use lots of tiles and layer components).

github.com/PaulLeCam/react-leaflet

What do you guys do when you're burnt out and hate the project you're working on?

I don't even know where to fucking start anymore, I have 50 things that need to be done, 2 features require a fundamental rewrite of the database design which obviously affects the backend code as well and I just now realized that for some fucking reason sentry has been filtering any exception notifications so I have 10 different errors to wade through with minimal fucking information because the piece of shit that sentry is returns all exception messages as [object object].

smoke lots of weed

Hello Jow Forums I need help regarding my firefox interface.
The height of the tabs change based on if the program is in windowed and fullscreen. How do i make it so that the height stays static, and doesnt change based on if its windowed or fullscreen? I want it to always bee like when its fullscreen.

Attached: firefox_2018-07-13_03-13-56.png (752x187, 8K)

Wrong thread.

I watch youtube videos until my boss asks me where the project is at.

git gud and make it great

What do you guys think about working for equity and no salary?

I'm seeing some good shit on angel co.

I've been thinking about it because I have a friend that did it for a mobile app and he ended up having the app sold and made just under a million.

seems risky tbqh

where can I sign up to do shit for free online? I might be able to start out soon, I would literary code for food

Do you want 5% chance of big profits or risk working for free?

I mean if you're in a comfortable financial position to do so, go right ahead.
But it can take years for that to make you any money, and that's if the founders dont fuck you somehow.
Otherwise, hard fucking no bud. Slave shit.

shit

>What do you guys do when you're burnt out and hate the project you're working on?

I'm quitting my job, so there's that option.

Remember, you don't get paid extra for more difficult problems.

I've been searching for 20 minutes for reasons why my nav bar shifts a little when I switch to elements on click. It was because the vertical scroll bar appears and disappears.

I'm not stupid. I swear.

How do i go from taking a python course to making a script that actually does something

download intro to algorithms, try the exercises, go cry in a corner afterwards

automate the boring stuff

Can someone explain this to me? I've been doing this all day and I still have no idea what's going on. I think I'm retarded.

How many years of freelancing did you guys have to do until you landed a job at a company?

Attached: lilmixedhunny.jpg (500x500, 75K)

why did you ask a stupid question

No one goes from freelancing to company work. You're a larping faggot.

What does /wdg/ think of Udemy? Any recommended courses?