Completely lost. modern web dev worfklow = FML

I feel completely lost regarding modern web development practices.

A little background. I grew up in the 90s and made simple websites back when we still used tables for layout, pixel shims for spacing, and images for rounded corners. A lot has obviously changed since then, but I ended up studying mathematics at university so I haven't kept up with best practices. I grew disenchanted with academia and recently dropped out of grad school to teach myself web development.

I convinced my boyfriend, who is a graphic designer, that I would be able to learn it sufficiently fast that he ought to quit his job at an agency to start a design and development company with me, and he did. While I've learned a lot over the last two months (Sass, Webpack, and Browsersync are absolute miracles!), I feel completely unprepared to do work for clients. I was really, really struggling to build his new portfolio website despite it only being a few pages.

I am writing HTML and Sass and using Webpack to compile the Sass into CSS and use Browsersync to preview it on my local system, but as soon as I start to make multiple pages or get things online my workflow just falls apart. When I'm working with files on the live server I can use server side includes to help reduce the redundancy of repeated code, but then I lose the ability to live preview changes. I have to save the file, upload it to the server via FTP, and then hard refresh to see changes. I would go back to editing things on my local system, but now I'm dependent on Nginx for handling the server side includes. I feel completely stuck.

(continued)

Attached: HarmfulGranularJapanesebeetle-size_restricted.gif (334x251, 1.99M)

I've looked into templating engines like EJS or Nunjucks, but despite searching for hours and hours, I can't find any way to actually compile that code back into HTML on either my local system let alone on an actual web server. Also they seem so obscure that I doubt that is how most people handle web development.

I feel like I'm at a standstill, but I'm afraid to tell my boyfriend this because he doesn't know shit about computers. I don't want him panic and regret his decision or try to get his old job back. However I'm growing weary of researching this bullshit. I want to move on and learn JavaScript and maybe Node, but this is holding me back. I can't do anything until I have a sustainable workflow.

I know this post is a jumbled mess, but I am so lost that I don't even know how to articulate the problem let alone have any idea what a solution looks like. Templating like EJS or Mustache? A platform like Keystone? A Node framework like Express? A JavaScript framework like React? A generator like Gatspy? I've been looking into this shit for like 3 weeks now, but I don't see how any of it is actually applicable. Everything looks like a dead end. FML.

This sounds like such a retarded question, but how the fuck do people make websites? I'm not interested in using premade templates or website generators, but I can't find any information on how to hand code websites beyond the same shit I did back in 1998, which was probably wrong even back then. I feel so embarrased.

tl;dr: I am basically stuck in the early 90s doings Notepad + FTP for web development (almost literally). Please help, lol.

wtf is notepad, html and css? modern web dev is done in squarespace

Faggot.

1. You can host a web server on your local machine and see changes without uploading anything.
2. You can automate uploading to remote machine.
3. You are a god damn faggot.

lol enjoy homelessness

>This sounds like such a retarded question, but how the fuck do people make websites?
Just fucking write it in vim and navigate to it in your browser. Run the server on your local like the other user said. No need for all the bullshit like browserify or whatever the fucking fuck, your browser has a refresh button for a reason. And if your final site has like 2MB of Javascript per page just to display some text and images then you have to hang yourself.

>I convinced my boyfriend
Faggot

>vim
YIKES!

you need docker

learn docker

and look at meteor for a decent js framework

atom is your friend

if you want to get fancy you can use vagrant with virtualbox (or hyper-v if you're one of those .net faggots)

Web development is often mocked for being for "n00bs" and much easier than "real programming", but I myself feel completely lost whenever I look at how it's done nowadays.
I currently work as a real-time systems developer, which many would consider "real programming" compared to "webshit", yet it's... straightforward. You have a problem, design a system, implement it accordingly, test it, done.
Now with web development, you have a literal million frameworks that do God-only-knows-what, websites that are now unacceptable without 100Mb of Javascript per page, needing to contact 20 domains for basic functionality, and so on.
It's actually HARD, but for the WRONG REASONS.
Fuck this shit. Not gonna bother with it again.

Or you could fucking run a web server on your fucking local machine, you tremendous faggot.

somebody post that webm of the startup that turns your webcam footage of writing on a whiteboard into a website

can't wait until you frontend faggots are automated

it's a complete free-for-all which is why all our shit is so insecure. As soon as management can browse to a page without getting a certificate error and type things into a box and hit submit then everything is peachy

and then what? Doesn't solve any of OP's problems.

>I lose the ability to live preview changes. I have to save the file, upload it to the server via FTP, and then hard refresh to see changes.
This is solved if you serve files that you are editing.

trips of 9 indicate you like to live on the edge

enjoy your security issues

are you even using any source control?

tell me you know svn or mercurical or something old at least

everybody uses git now, learn that

kys faggot

>putting svn and mercurical into same sentence
hang yourself

No? I've used git before, but don't see how that is relevant to making a small website. Doesn't solve anything.

> Web dev here

Maximilian Schwarzmüller from Udemy is your best friend, trust me. He has amazing modern Javascript (ES6) ,Angular 6 (Javascript framework) and React tutorials + he does not just run over the code like some faggot , no. This guy explains every single piece of code he writes so even a retarded kid could understand him + after every lecture he makes projects with the things you've learned and explains project arhitecture. This is not advertisment for that german teacher but this is just a friendly advice of where to learn all the stuff for moder web dev in 2018 starting from 0 knowledge.

mfw 21 replies.
7 people reminding op he likes cock.
0 people answering his questions.
you can do both people.

Attached: 10987f_6174967.jpg (1140x813, 129K)

GIT won't help you create a small and functional website. Have you considered using Vue.js for that job?

How does a JS framework like React help you make a website for a small business? I thought those were for web apps.

>GIT won't help you create a small and functional website. Have you considered using Vue.js for that job? (I replied to the wrong person)

try reading

Depends on what you need. Personally I don't like React because it forces you to mix html,css and js into one file + they use their own custom made html. On the other hand Angular does not depend on 3rd party libraries that are being managed by community + It get's constant updates and Google makes sure that everything works fine. If you need a huge webapp then go with Angular, if you need small webapp go with Vue, I would not recomand React at all.

Or you can just not use any of that bullshit and go with plain js/html/css.

learn the basics, you should have re-started with classic notepad and html, make a simple html layout, then use css to make it pretty, then use javascript to make it move, if you got a really good understanding of all the features, make your life easier, use some bootstrap for example, some javascript libraries for tedious stuff,

if you don't know the basics, you are pretty much fucked when it comes to frameworks, I'm speaking from experience here

>Or you can just not use any of that bullshit and go with plain js/html/css.
Then how do you handle having multiple pages or repeating components within a single page? Managing everything by hand would get untenable very fast. Find/replace can only do so much.

you could if we were in 1998.
Don't be afraid of progress, all that angular, typescript, webpack, yarn , grunt , git and other yasmine bullshit has been created to cut out boring and repetative stuff from webdev while you can focus on the logic and core of your app.

How does a JS framework solve any problems outlined in OP?

>Then how do you handle having multiple pages
I have a single html file per page, one common js script, and one specific js script per page. No code duplication whatsoever.

You can focus on logic and code without all these.

all of that sounds retarded and useless, but once you stop being a cunt and force your lazy ass to learn new technologies, you will realise how much are these things gonna make your life easier.

>I have a single html file per page, one common js script, and one specific js script per page. No code duplication whatsoever.

How would JS help with repeated HTML?

Good luck finding a job then.

Give me one tech that will grant the biggest quality of life improvement from pure html/css/js (I also use jquery and d3 inside js, and serve data using nginx fastcgi C++ postgres) and I will have a good look at it.

HTML has placeholders and JS fills those with needed functionality.

Long ago.

Angular helps alot when it comes to prevention of code duplication.

I feel like I might be able to relate for a bit, because I was someone who did web development in the early 2000s, then quit for 10-ish years, and then came back to what seemed like a never-ending pile of frameworks and standards that I was completely unfamiliar with.
The thing is, if you want to be a web developer in industry nowadays, you need to learn some of these meme technologies that are in use today. Becuase it's 2018, this basically means JavaScript, JavaScript, and more JavaScript. If you can learn the MEAN stack then not only will you be able to develop pretty much any sort of web-based application for a client, but you'll be able to do full-time work in industry as well.
The good news is that these frameworks and technologies really do make things easier once you get the hang of them. I just know that I never want to go back to using tables for my page layouts, that's for sure.

>I am writing HTML and Sass and using Webpack to compile the Sass into CSS and use Browsersync to preview it on my local system, but as soon as I start to make multiple pages or get things online my workflow just falls apart.
That's because this workflow is kind of tedious anyway. You shouldn't be "getting things online" while you're still working on them. You need to get in the habit of using a local testing environment to develop your code in before "shipping" it to production like that.
[cont.]

> Angular
> Don't need to repeat yourself like a retard
> Amazing organisation and readability of huge code thanks to TypeScript
> have a shitload of premade features both for UI (Materials) and Logic (shitload of them)
> You will never mix JS and HTML
> Transpiles your code to be cross browser compatible
> NativeScript allows you to export it as Android and IOS app
> and so on... and so on...

Can anyone help explain it from square one?

You have a client that wants a custom designed website for their cafe or bar or whatever...

...a designer shows you what they want in adobe XD or sketch or whatever...

...you start a new atom/vscode/vim whatever

???

Attached: IgcWfsA.jpg (592x512, 20K)

I already said this in the general and I will say it again here, Angular has a very steep learning curve. Don't attempt this unless you have (a lot of) time to learn it.

It requires server-side to be served by node, doesn't it?

[cont.]
>I have to save the file, upload it to the server via FTP, and then hard refresh to see changes. I would go back to editing things on my local system, but now I'm dependent on Nginx for handling the server side includes. I feel completely stuck.
If you want to make real progress, you've got to stop doing this shit, man. Set up an Nginx server on your local machine. Set up a git repository for your project. When you're ready to ship it online, you can simply clone the entire project from your local machine to your remote server. Doing your development on what I assume is your production server is foolish for so many reasons.
Another thing I'd like to point out is that Sass and CSS are cool and all, but there are so many pre-built, responsive templates for just about any purpose, that you're better off stealing one of these and simply making minor adjustments to it to fit your needs. Don't get me wrong; you need to know how to use CSS, but don't get TOO caught up in the front-end aspect of web development. Trust me, knowing how to do back-end application programming is way more useful, and will allow you to build more than just portfolios. MEAN is also used to build standalone applications outside of "web", using libraries like Electron. At this point I've just embraced the "full-stack JS" cancer because it really does streamline and homogenize the process of building and deploying stuff

>That's because this workflow is kind of tedious anyway. You shouldn't be "getting things online" while you're still working on them. You need to get in the habit of using a local testing environment to develop your code in before "shipping" it to production like that.
So just raw HTML/CSS/JS but doing it on a local environment before uploading via FTP? Still sounds like 1998.

Nope - this is optional. You can download the Angular scripts and include them in your webpage without ever involving Node at all.

But if you were inclined to do it by hand, what would that process look like?

Yes it uses Node, I reconfigured it to use my PHP which is running from Apache. So it not Node only.

That's not what I said. Please read the next part after that again. He should also have a web server running on his local environment if his application depends on it, as well as a git/svn repository for easily managing and shipping changes. I also recommended that he learn MEAN if he wants to have a shot at succeeding in industry. Nobody is going to hire you if all you know is HTML/CSS/JS. Everybody's known those since 1998, after all.

But if you're just making a website with a few pages, does that really require a backend dev? A graphic designer + frontend dev duo should be sufficient, no? For a small website.

We are talking about Angular (Typescript) not Angular.js

Well if your website is only gonna contain visual stuff like photos, fancy design and whatever, you can do it without backend, if you are using 3rd party API's your still wont need backend. But if you want to save some data then you do need both backend and db.

what the hell are you talking about, angular is shit

Yes, Angular is shit if you are a brainlet than can not comperhend anything more complex than including your script.js and style.css into your index.html while using $(document.anonIsFaggot) and other JQuery faggot shit. Not even to mention how complicated is TypeScript. "Oh no its OOP im to retarded for that, gime muh oldschool JS". You should kill your self.

It depends on which part of the process you're talking about, and what you mean by "do it by hand". If you're talking about the part about stealing templates and modifying them, then doing it by hand would require first visualizing the layout - either with a simple drawing or a wireframe or a mockup or something similar - and then using HTML/CSS to implement it from scratch. It just depends on what your goals are

"Reactive" frameworks like Angular, React, and Vue are cool because they allow you to accomplish certain things while writing a LOT less JavaScript than you otherwise would. And JS is more shit than all of this other shit combined.

So far all the people that hate Angular are crybabies that gave up on learning it because they are not ready to do things the easier way. Yes it is difficult to learn, yes it requires a lots of time and alot's of practice, but is it worth it? fuck yeah it is.

People who are having trouble with Angular(.js) should try using Vue.js instead, because it is simple and can be adopted in small increments. It took me all of 15-30 minutes to learn the basics of Vue.js and to start putting it to actual use. I've never used Angular.js but it seems slightly more complex and far more monolithic. Vue.js is specifically designed for people to be able to take baby steps when it comes to adoption.

never said that I'm for vanilla js and against frameworks, I guess learning angular doesn't teach you how to read a sentence

I agree. Vue.js is far better choice for small and medium sized projects than Angular.js, while Angular 2+ evolved into framework created for companies with big teams that work on huge software.

>angular
>putting OOP garbage into web that's already garbage

Explain why is Angular shit?

JavaScript is already OOP garbage you retard

Try using Typescript, it removes all the 'garbage' feeling you get while doing frontend. It actually gives you the feeling as if you were a 'real' programmer using 'real' programming language.

Use autorefresh in your browser
Use Grunt
Setup a nginx server on your local machine

>this one angular shill in a thread where someone asked about basic html/cs/js project setup

the absolute state of angularfags

Attached: download.jpg (300x168, 8K)

I love you to user.

First of all, this thread wasn't asking about basic html/css/js projects. The OP has clear hopes of getting a job and making money as a web developer.
Secondly, multiple people have mentioned that these alone are not sufficient to "make it" in web development now, unless you carve out a freelance niche where it doesn't matter. All modern professional software development teams are using these meme frameworks. It's fine to be autistic about this stuff if you don't care about making money, but don't for a minute act like this doesn't matter in the professional world.

this is why I gave up on frontend, it's such a fucking mess and clusterfuck of so many technologies
Okay so what's the list of stuff you would use today to create a site that would be:
>modern
>responsive
>a lot of content supplied from database
>hoested from basement or some cheap hosting service
Keep in mind there's 1 or 2 at most people working on this

too steep learning curve, I know you sell it as "muh complexity" and "muh programming" but it's actually a disadvantage, vue will make angular redundant, the only people who will use angular are the ones who fell for that meme and are already stuck in the mud

the guy needs flexbox and wordpress

Why don't you use basic HTML/CSS/JS without meme framework? Just use bootstrap if you want prebuilt template and as always jQuery comes in handy. Why you need meme frameworks for again?

Personaly as an Angular dev I would love to see Vue overthrow Angular from the market because "muh complexity" but sadly that won't happen, because no framework (Vue is a library) is remotley close to overthrow angular when it comes to enterprise webapps.

> modern
....

> responsive
bootstrap. If using Angular Materials no need for that shit

> a lot of content supplied from database
you need a database like MySQL , no sql is db-s are good as well, but I don't like them.

> hoested from basement or some cheap hosting service
I would it's cheaper to find a good host then to host it from your basement. Especialy if the website is small.

> API
and you need an API to grab that data from DB and send it to GUI (frontend). You can use PHP, Node.js , GO, Python ....

by modern what I meant to say is design-wise without having to do demonic rituals in .css

If buy demonic rituals you mean transpiling Sass to CSS using webpack then just write plain CSS. I would not reccomand that because "Muh modern web dev 2018"... sadly.

writing .css by hand and spending a week figuring out why the page breaks on firefox because of their fucking engine is just as bad, that's my main concern

Bootstrap is your friend.

how do you even learn angular, I can't even comprehend the hello world code

Some of what you mentioned involves backend, so I'll focus on that too.
>Okay so what's the list of stuff you would use today to create a site that would be(...)
MEVN (MongoDB, Express.js, Vue.js, Node) or some other stack that accomplishes the same things. If you don't like JavaScript, you can swap out Express and Node for something else like Django or something. If you don't like NoSQL databases, you can use MySQL or something instead. Just pick what works for your needs and what you're comfortable with.

HTML, CSS is always a requirement on top of this, as well. You can create responsive front ends using HTML and CSS only. If you want live updates on your frontend, you can use Vue.js, TypeScript, or even just plain JS.

>Keep in mind there's 1 or 2 at most people working on this
The thing is, once you know these kinds of technologies well, you'll be able to build things faster while writing less of your own code. The entire process of building software systems is so cookie-cutter at this point, especially when it comes to web-based stuff.

> Maximilian Schwarzmüller

Look at my frist reply to this thread.

I would definitivley go with Lumen (PHP) and Vue (JS)

> Lumen (backend / API) is easy to learn
> Vue (frontend / GUI) is also easy to learn
they are both effective and would recommand using these two for your small / medium website

alright thanks. I don't think I'll pursue this kind of career, just needed something for personal projects with a friend and wanted to know what's hip these days
Still have no idea about Typescript, any obvious and important advantages of it over regular javascript?

Because if you decide to modify / extent your JS code you won't have an headache trying to figure out WTF are you looking at. Ofc the only real difference is that JS allows you to create unnoticable problems which may lead to bugs one day because it allows you to do whatever you want, while Typescript is forcing you to write good code and therefore it minimizes the chances of creating bugs. Typescript can be learned i like a week or so if you already know JS

I don't have any personal experience with TypeScript, but from what I know, it's basically JS but with static typing. This makes it slightly more structured and type safe than vanilla JS. I'd personally recommend just sticking with regular JS unless you're constantly running into problems with its dynamic typing system. This hasn't been an issue for me yet but YMMV.

what would user recommend to me going forward; I know HTML, SQL, PHP, CSS, am able to assemble some basic JS I need with the help of google, know how to include various libraries I need (like pdftk for instance), have no issues with using servers, can into security, proxies/load balancers, cerificates etc on the infrastructure side.

I'm used to wordpress both for making basic websites and developing apps on top of it since it's what initially made me take up coding, however I believe that there's a better way to do it, just don't know what to pick among what's available. I'm making everything on my own so there's no collaboration requirements and I'm doing everything manually - no frameworks, just good old notepad++.
wat do?

Consider

> Notepadd++
it was my first IDE as well and it will always have a place in my hearth, but VSC is the best IDE in 2018 for webdev so far. You will love it.

> some basic JS
improve your JS it is the most important language for frontend webdev, watch > Maximilian Schwarzmüller he has good tutorials for modern javascript es6

after you improve your JS knowledge , decide what you want to do?

> wanna create websites?
learn how to do graphic design, learn adobe software, learn css really well, maybe sass and lass...... maybe JQuery and ofc Vue.js

> wanna create serious enterprise webapps
> #1 Angular
> #2 React

an answer to this answers OP. anyone take a jab?

While we're on the subject, is there a better alternative than PHP for the server assuming I hate node.js? Python and Go are both disgusting too.

>First of all, this thread wasn't asking about basic html/css/js projects
...but it kind of was? OP wants to learn web dev to make websites for small businesses with his/her partner, not get hired as a software engineer.

thank you anons, will give it a shot, and I want to do both - websites and enterprise webapps; the former for a quick buck, the latter for real moneymakers

People recommending frameworks like Angular, React, and Vue...

...how is that helpful for building a small website for a cupcake shop?

Surely there is a step between raw HTML/CSS uploaded with FTP vs an enterprise web app...

...right??

Attached: Margaret_Hamilton_-_restoration.jpg (2294x2853, 3.08M)

Someone at least point user in the right direction. Best resources to go from zero I assume?

Maybe you and your boyfriend should start sucking dicks for a living? Or do gay porn together.

You don't need more than vanilla js for a cupcake shop desu. You do need version control though, it's useful for pretty much anything, mandatory for any kind of paid development position nowadays, and takes 30 seconds to use properly if you know what you're doing.

I am a front end dev.
Situation is shitttier every year.
I dunno what I am doing sometimes.
Also I do 95% angular and 5% of SCSS.
ou yeah, they even managed to fuckup old good css styles with oop programing.

>I'm making everything on my own so there's no collaboration requirements and I'm doing everything manually - no frameworks, just good old notepad++.
>wat do?

never write code assuming you'll never share it or be the only one maintaining it