/wdg/ - Web Development General

Previous Thread:
>Free 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)
developer.mozilla.org/en-US/docs/Web - General documentation for for web-technologies
freecodecamp.com/
codecademy.com/
bento.io/
google.com

>Further resources
stackoverflow.com/ - Developer questions and answers
github.com/kamranahmedse/developer-roadmap - Roadmap
youtu.be/Zftx68K-1D4 - Web Development in 2018

>Tools
jsfiddle.net/ - Use this and post a link, if you need help with your code
caniuse.com/ - Check browser support for front-end web technologies

>Today's special: Little design hints
twitter.com/i/moments/880688233641848832
medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886

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

Other urls found in this thread:

php.net/manual/en/function.include.php
discord.gg/wdg
stackoverflow.com/questions/11604445/php-absolute-path-to-root#11604489
css-tricks.com/almanac/selectors/a/after-and-before/
github.com/Microsoft/vscode/issues/4962#issuecomment-252966270
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
webassembly.org/getting-started/developers-guide/
css-tricks.com/snippets/css/clear-fix/
egghead.io/courses/get-started-using-webassembly-wasm
zerosum0x0.blogspot.pt/2016/09/removing-sublime-text-nag-window.html
stackoverflow.com/questions/24833684/angular-ui-bootstrap-cant-get-modal-to-close?rq=1
webdesignerdepot.com/2008/12/20-excellent-free-rich-text-editors/
twitter.com/NSFWRedditImage

Let's say i have index.php in php and in it the following code

include('poops/poop.php')

and then inside poop.php:

include('peeps/peep.php')

this obviously doesn't work because the working directory is the one where index.php is located so to make it work the second include would have to be include('poops/peeps/peep.php')

Is there any way to make so that working dir for included php files is the actual dir they reside in?

Hello
I know a bit of html after some reading on my offtime and that's about it.

How would I go about creating a website that lists down and can display can display articles wikipedia style? Preferably just a plain website with none of the database mumbo jumbo

Attached: 1520247085126.jpg (2953x3508, 544K)

I don't know PHP, but looks like you simply make sure it's a proper relative path according to the docs
php.net/manual/en/function.include.php
If a path is defined — whether absolute (starting with a drive letter or \ on Windows, or / on Unix/Linux systems) or relative to the current directory (starting with . or ..) — the include_path will be ignored altogether. For example, if a filename begins with ../, the parser will look in the parent directory to find the requested file.


>Preferably just a plain website with none of the database mumbo jumbo
Well add the content in HTML and style it a bit with CSS
Think you need to be more specific in your question, if you want more specific answers.

If you're ok with discord, you can join our webdev server, where you can find lots of free resources and links.

Occasionally you could get advice from some experienced people.

discord.gg/wdg

The server is not owned by anyone and there are no roles.

Attached: 1.png (850x567, 1.84M)

why is there no js -> c++ compiler?

>made the mistake of building a mid-sized website in pure PHP

Attached: 049008489.jpg (1600x900, 366K)

Use absolute root paths instead of relative once.
stackoverflow.com/questions/11604445/php-absolute-path-to-root#11604489

You should always define absolute paths and use those for everything.

$GLOBALS["root"] = "C:/localhost/shit/";
include($GLOBALS["root"] ."folder/");

was for

I went through a quick JavaScript tutorial to do one simple thing: change a CSS property dynamically.

The problem is that the "url()" part gets passed literally. How do I pass the array variable to it?

Can't post the stuff inside code tags, getting the annoying connection error.

Attached: 2018-03-11-12:04:17.png (558x401, 32K)

>not using __DIR__

Never mind, I played around a bit and got it. I'm stupid.

"url(" + backgrounds[day] + ")";

let bg = ["bg1", "bg2", "bg3"];
let day = new Date().getDay();
let url = "images/" + bg[day] + ".jpg";

document.body.style.backgroundImage = url;

too many frameworks, and my brain seems to be impermeable to the syntax, similar reason I use pure PHP over Laravel

Pajeet here. Doesit makings you angry that you know that no mater how low you goes with price on youre web dev work, i always will undercut youre price by huge margins? i am be the future of web delevopings. you are be just the dinosaur for extinction sir.

Attached: f4cea-24[1].jpg (650x971, 69K)

stfu wagonwheel

@65058205
Epic maymay my friend

Attached: 1519075078533.jpg (751x1024, 92K)

pls show bobs and vegan bb

Will impostor syndrome ever go away?

Attached: x16uR0p.jpg (1920x1080, 136K)

I got rid of it by looking at work of other professionals in my field and realized it's just as garbage as my own

My dad was a workaholic and I felt like an imposter in programming but then I figured imposter syndrome is workaholism under a different name and, like those who strive too much to prove themselves through their work, we should take a rest and objectively view what we know and have achieved in the wider context of humanity itself

Using console.log puts you ahead of most human beings. If you keep learning new shit then you will be smarter than before. Race against yourself, not anybody else. No one person knows every single thing about programming and is our God or something. If you make something then it is there and you made it yourself through programming, so there's no need to feel like an imposter who doesn't know shit about programming.

Should I use rem's to size everything (not just fonts)? I'm supposed to have this grid with rectangles of fixed proportions and text in them that should also fit the rectangles the same way regardless of the size of the rectangles.

Dat wisdom.

Attached: b2bcd6954dec82d04e754c7bee51b1021b6036d5.png (500x455, 212K)

A good rule is to size fonts/icons with em and everything else with rem.
Doesn't apply always but a good starting point, if you are unsure about it.

Why didn't I know Docker and docker-compose before ?
Seriously, those tools change my way of developing.
Starting a dev environment and putting it in production feels so easy once you've written your docker-compose.yml files. Everything works out of the box on any machine with Docker installed on it.

To all the web devs, don't hesitate to try it !

Attached: f4f2fa9471dbd329d1c55002dafad4bb04409208.png (236x162, 7K)

Attached: 1503614013252.jpg (3456x2304, 2.15M)

My sides, inspirational user

Attached: 3d7573838d2b81c8bfc61c2047b753b1b82715e7.jpg (480x480, 9K)

>change line endings to LF because linter throws an autism attack highlighting everything if I don't
>push
>merge
>line endings are now CRLF on master
>change back to LF
>save
>push
>change branch
>pull
>line endings of first component are now CRLF again, despite pulling from master which has LF but otherwise everything else is the same

explain this wizardry

Hows the learning curve? How long does it take to learn? Is it compatible with webpack?

As long as you're not "Koding" like "Karlie" or applied to a frontend job then got rejected then proceeded to make a blogpost about how fizzbuzz is irrelevant then there's nothing "impostorial" to worry about

Learning curve is a bit steep but ok, you just need to find a good tutorial.
Basic principles (containers (builts on images) which can mount volumes on your host so you can directly edit files there live ...) are not that difficult to grasp.
Yes, webpack run easily in Docker. There are actually already existing images on Dockerhub. Actually, you can run anything you want in it (at least any CLI tools), it's just a VM, but way faster and easier to manage.

No. shoo pajeet. i won't use your shitty product

Building a program that generates images from user input based on existing images residing on the server. I thought up two designs on how to implement this. Which do you guys prefer? Or maybe you have a completely different approach?
Resources change from time to time (mostly adding more images), but only the big resource archive file is updated. For the first approach a diff can be generated to update the archive file and for the second approach manual uncompression of new resources needs to be done.

Personally I prefer the second approach because it's easier to implement, but I fear slow file reading times since every generated image needs to read in average 8 files.

Attached: ImageCompositor.png (779x1196, 20K)

You don't want User A's file uploading crashing to prevent User B's to not upload as well if the thread crashes. Also, option B looks easier to implement AND optimize.

How important is the Facebook like button, and the Google +1 button for website? Does it affect SE rankings? Does it generate more visitors?

Should I shove these buttons in everyone's face?

Yup, you'll undercut me on the initial bid, then I get to bill twice the number of hours fixing your broken shit, and that company'll never hire another pajeet again.

A bit unfair, there's some wicked talented pajeets, but all you fucks that don't give a shit about code quality or even putting out a functional product gives you all a bad name.

React + MobX > React + Redux. Prove me wrong.

Is there any easier to have a responsive grid, right now I'm simply using a mixin to change the grid-template-columns to 6fr 4fr on tablets or higher and 1fr on less than tablets, so it's just stacking on mobile but 60/40 on tablets

Surely you can do this in one line without a media query, right?

Second one, definitely. And it's still possible to get resource files from a cache like you do in the first option.

Not important at all.

>Should I shove these buttons in everyone's face?

guess you are right
>without a media query
How else are you going to detect the window width in CSS?
I mean that's pretty much exactly what media queries are for.

Attached: 1498298672907.jpg (625x774, 81K)

What are some things Javascript is useful for in regards to front end?

How would I benefit from mastering it? I could just find a small open source project to do whatever I need, like an image gallery or whatever.

I would love to have a good reason to get better at Javascript. It's my weakest skill.

omg, that's a pro if i know one

>No one person knows every single thing about programming and is our God or something.
You mean Jon Skeet?

Anything that involves client-side interactivity.
By that I don't mean fancy animation, but dynamically fetching and rendering new content depending on user-actions or server-messages.

JS frontend frameworks like React, Vue and Angular generally give you a nice package with their possibility for declarative rendering and a component structure.

A super simple example of course would be a live-chat.
You need a way to send & receive and displayed new messages, without reloading the page for every little thing.

Has /wdg/ ever worked on a collab project together? I have no experience in working with others so maybe it would be useful.

I run a small website that just hosts video on basic html pages,

I am looking to for a new VPS provider, currently with scaleway, they are okay, but most of my traffic is from the USA.

I am looking for:
200mbps+
Unlimited bandwidth, see image
Cheap

Any ideas senpai?

Attached: updown.jpg (612x227, 41K)

i would plow this indian slapper

Anyone ever used Git to manage a live website?

Worked with a guy last year (I did UX/UI and he did backend) for a fairly large-scale project. He had a way of pushing to the repo and it would update the live website immediately. He'd test it locally first, of course. I never really asked how he did it.

interesting situation.
Bit weird actually, that there isn't really the option for unlimited traffic on limited bandwidth at most hosts.

What kind of hardware do you need or currently have at Scaleway and what's your budget (for servers or traffic, or both)?
Am no expert in this, but curious nonetheless.

You basically need to run a git server on your server. I've used it in the past on Heroku, since they have it all set up for you. I think you just "git push origin heroku-master" or something like that, once you've done testing on your local machine.

I only run apache, i dont need much cpu horsepower, but when i get hit with 50+ visitors the site slows down because of the network limit.

I can probably do $10/month, but I would also like more storage, currently at 50GB.

Continuous deployment

Basically you can add triggers or hooks to your repo, that will tell other servers to fetch and build your site after a commit.
I do this with a site hosted on Netlify, which does that automatically once you authorise it with your github account, but you can also find various tutorials to set it up manually I am sure.

hahah
what are you struggling with?

Do I really have to install npm/sass/less/webpack/grunt/typescript/left_pad/someothershit?

I just want to port a desktop application to the web using Django, I'm not even bothering with 1PA/REST and other memes.

Attached: 1519265028574.jpg (1625x2045, 810K)

Well even Jon Skeet asks questions in SO from time to time.

>Django

Found the problem.

Oh nice. Thanks. Will look into this.
Should definitely make my personal sites easier to deploy/update

that's a really tight limit.
DO and Vultr both seem to cost 0.01$ per GB after the included 1TB.

DO offers object storage, which gives you a lot of space for 5$, but they are known to have sub-par hardware CPU-wise.
Normal block storage with DO and Vultr will be pricier again.

Don't see how you are going to get 100+ GB of storage and several TB of high bandwidth traffic for 10$/month.

>REST
>meme

If you want to have a build setup for your frontend, then you need to install shit for your frontend build setup.
Do you want to use Typescript? Then you have to install something that processes your Typescript code. If not, then you don't. It's not a mystery.

Do I have to learn Wordpress and PHP to operate in the webdev job markett? Yes I know it is not hard, I would just rather not. Can I get by with nodejs,reactjs,css,sass,pure javascript for now? Was thinking of going .net to branch out my back-end skills.

Attached: 1510613616907.jpg (476x429, 16K)

>Do I have to learn Wordpress and PHP to operate in the webdev job markett?
No, but knowing how to Wordpress can get you quick bucks.
>Can I get by with nodejs,reactjs,css,sass,pure javascript for now
You'll be fine. There's high demand for those memes.

Can somebody explain to a brainlet what the hell is going on here, line by line?

.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
clear: both;
*zoom: 1;
}

>React

Why?

Angular or Vue is superior in every way.

>my company gets hired by some reality agency to renovate their website
>boss assigns it to me
>look over their set up
>they had some retard managing it up until now
>he was renting a dedicated server to run just the website
>the code was amateur hour
>most of it was from one of those wordpress tier premade shit things
>all pictures were stock photos of people in suits shaking hands from google
So they were payout out of their asses for highly inferior product and that wouldn't even pass a copyright check
It always amazes me how people like that get hired

Pseudo elements (:before and :after) basically sets content before or after the .group elements.
In this case it sets a blank space before and after with a table display layout. I don't think you need a line-by-line explanation.

css-tricks.com/almanac/selectors/a/after-and-before/

How do you set it in your vscode settings so that emmet works even inside your js files for a react project?

this gives me hope

github.com/Microsoft/vscode/issues/4962#issuecomment-252966270
apparently

You can also use ES6 template stings.

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Thanks mate

literally 2nd result on Google, did you even search for it?

Attached: emmet.png (819x443, 42K)

>web assembly
>bye bye js

who /hyped/ here

Completely new to web development. Moderately good at C++. Can I start with wasm? How?

I don't even use vs code, but this makes me think

Attached: 1qq.png (697x299, 15K)

Nope :3

>2018
>not using atom

Explain yourselves.

by reading the documentation, of course

webassembly.org/getting-started/developers-guide/

it's a pretty cool editor desu beats Atom and Sublime imho

>using an memory hogging editor made in electron
>not using an editor made in C++

>2018
>not using Sublime Text

Explain yourselves

This is the clearfix hack, or some version of it.

There's a full explanation here:
css-tricks.com/snippets/css/clear-fix/

But the purpose is basically to fix a weird behavior of floated elements that is not exactly intuitive, and not what you want most of the time.

By default, floated elements flow in line with each other, even if you have them in multiple different groups, they'll do some weird things that make them seem like they're sort of inside the group.

To fix this, you need an element that has the property clear: both;, denoting that there should be no elements floated to the left or to the right of this element. So it basically acts as a 'barrier' to keep one set of floats away from another. The simplest way is probably just to put this on a
element, but that's a pain in the ass, and a lot of times you don't want a space.

So most of the time the best way of doing things is to group a set of floated elements together (with that .group class). Then, you create a pseudo element with :after having that clear: both; property, and essentially the content: ""; and display: table; makes it so it's effectively invisible while still being rendered.

The zoom: 1; part is an old IE fix for backwards compatibility. Although I'm not sure exactly what the :before stuff is doing.

Hate to burst your bubble but A: you still need JS to interact with the DOM afaik, and B: wasm is still not going to have full and proper support for a few years. The only wasm I've seen in production is an in-browser crypto miner.

egghead.io/courses/get-started-using-webassembly-wasm

>Sublime
>not free
>will soon die when atom get their shit together
>not open sourced

Actually, ignore that, it seems to be a paid course.

1. you don't need to pay to use it
2. die? Lol
3. so?

if you use MacOS with atom , i could say you're not using a open sourced OS

>"Hello good goy, enjoying Sublime? Please send your precious money to me."

>what's the best photo editing, image creation and graphic design software.
>Photoshop

>Lulz it's paid!!!
>not open sourced!!!!
>implying you "pay" for it nowadays

>"Hello good goy, enjoying Photoshop? Please send your precious money to me."

Finally I fucking get it, thanks.

+1

Pirated Photoshop doesn't prompt you with message every 3 seconds.

That's because the crack already did that for you.

Pirate Photoshop always tries to connect to adobe in order for you to sign in in your account

>not reverse engineering sublime text to remove the pop up

zerosum0x0.blogspot.pt/2016/09/removing-sublime-text-nag-window.html

God, why the fuck I can't close modal in angular programmatically, FUCK.

I'm using ngx-bootstrap btw.

Haven't used Flask or Python for webdev in a while. Thinking of diving back into it. But am also considering Golang, since the idea of using just a router and basic http package is appealing. What say you, what should i spend today doing?

Attached: 1480018859232.jpg (640x427, 26K)

L A R A V E L

I currently already do PHP, but I'm a Symfony + Fastroute + Doctrine guy. Laravel does not interest me outside of learning it just to attract recruiters.

stackoverflow.com/questions/24833684/angular-ui-bootstrap-cant-get-modal-to-close?rq=1

Oh, then maybe Elixir.

I use Angular 5, but thanks.

I'm learning some webdev using a simple fullstack crud tutorial. Does anyone know how to to let the user style their own posts like pic related? Do I save the whole string with HTML tags included in a user blog post?

Attached: 234234324.jpg (637x128, 16K)

Text Editors.

>webdesignerdepot.com/2008/12/20-excellent-free-rich-text-editors/

Personally, I've only used Froala. It seems like it's the most popular.