/wdg/ - Web Development General

Previous thread: >Beginner Roadmap and Overview
github.com/kamranahmedse/developer-roadmap
youtube.com/watch?v=UnTQVlqmDQ0

>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 to HTML/CSS/JS and Node.js or Django
freecodecamp.org - curriculum including HTML/CSS/JS, React, Node.js, Express, and MongoDB
javascript.info - curriculum providing a strong basis in JavaScript

>Further learning resources and documentation
developer.mozilla.org/en-US/docs/Web - excellent documentation for HTML, CSS & JS
hackr.io - crowdsourced collection of tutorials from across the web for learning languages and libraries (ignore sponsored stuff, look at upvotes)
learnxinyminutes.com - quick reference sheets for the syntax of many different languages (generally not sufficient on their own for learning something, but very helpful)
pastebin.com/gfBPg24A - Everything PHP

>Asking questions
jsfiddle.net - Use this and post a link, if you need help with your HTML/CSS/JS
3v4l.org/ - Use this and post a link, if you need help with PHP/HackLang

Attached: webdev_with_karlie.jpg (1142x636, 97K)

Other urls found in this thread:

jsfiddle.net/6gmq4kef/9/
developer.mozilla.org/en-US/docs/Web/CSS/grid
developer.mozilla.org/en-US/docs/Web/CSS/@media/aspect-ratio
developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation
youmightnotneedjquery.com/
jsfiddle.net/v6dyrthe/
twitter.com/NSFWRedditGif

are jobs that use both node+express and mysql common?

Anyone work in Austin and need a developer?

I want to move there.

I am looking on angel.co and some website called builtinaustin. Anyone have other resources?

i recognized those cd..s instantly and went looking for crazy_strings lol

when will web assembly kill javascript?

Will they give a fuck if my full stack quora-like website looks like shit? I am awful at design and i just want to create a site/some sites for a junior webdev postion, the site is in a pretty advanced phase, but yeah it looks like shit,Bootstrap helps a bit

use some prebuild theme

so what is the ideal way to structure an php application? without using framework? anyone have a reference git* project?

You don't really need to structure anything. Depends on what the project is and if you are using oop or not.

Guess the first step would be creating a page that handles the db.

is there any example project for reference?
and how to actually split view and logic?
do i include view after logic file?

WASM IS NOT A JS REPLACEMENT

I don't know what you're developing or how you're wanting to develop it. There are dozens of ways to do any project in PHP.

At the most basic level, everything is done on whatever page you are using. You do logic on the same page that you display html. There is no reference example project because there is no correct way to develop.

I can tell you how I develop my personal projects. It's different than I do it at work, and it's different than every job before has done it. I only use PHP to interact with the database. I have a large db handler file that I talk to with ajax. Everything else is javascript. PHP is terrible in any other way.

why not? its retarded for javascript to be the only interface to the DOM

ok thanks for replying user. I was looking into laravel it seems nice and much more organized.
One more question when you are working on a project do you create authentication yourself or you use any package? can you recommend any good composer package for user authentication?

what will be it's role then? If not interacting with the DOM (I'm guessing that will be left to js) then what is it, making caluclations and operations?

Is there any simple way I can make a responsive tooltip hover with CSS only?

The problem I'm running into is I need it to be responsive. On mobile it breaks the page. But I don't want to write a thousand lines of hack-CSS code to account for all devices. Is there anything more smooth/library that I can use?

If not maybe I should consider another alternative... I'm not a fan of a lot of effort to achieve something so stupidly simple.

bootstrap, but you aren't learning anything nigger

an absolutely positioned pseudo ::after element?
>On mobile it breaks the page.
how so?

and mobile usually doesn't have tooltips anyway since you can't even hover

not gonna lie, if this is for a resume then the brain dead recruiters from HR are gonna care way more that its pretty.

>tfw spent the whole day making a fancy as fuck navbar to super subtly fade and change font sizes and it looks slick as fuck
>0 errors or awkward shifts, literally pixel perfect
>works responsively, also it remembers position from page changes and refreshes
>it even animates in during transitions when changing pages (looks like you aren't even changing page on an MVC app)

badass dude

What's the deal with these threads?

Are most people here simply hobbyists, beginners trying to learn, or working professionals in the industry?

A bit of each. There is actually a fair amount of professionals who browse/post.

Question(html, php)

If i submit the form and there is errors usually i receive the submitted value by:
>

Question(html, php)

If i submit the form and there is errors usually i receive the submitted value by:
>

Attached: Post-$data-array.png (713x549, 28K)

I just make it myself. It's very, very easy in PHP. Just password_verify the password_hash in the db against the entered username and if good then set a $_SESSION['variable_name']. That's all.

what's the function of the hash?

>drupal website
>delete the site cache
>now site displays no theme and/or css
What the fuck do I do

So if you're open to sql injection and your database gets dumped it won't expose all of the stored passwords as plaintext.

aha

I mean... but then how do you save the password? I guess, quick rundown on hashing and how it works?

Suppose I have a react/vue frontend (or just dead simple html/CSS/JS site with a single button on the page - it doesn't really matter). How would one best go about coupling the frontend to a program that's written in a "non-standard" language like c or c++?

Attached: 0001.jpg (400x400, 42K)

how do I handle an event like transitionend using react + jsx? I'm new to this pls no bully

what's the easiest way to deploy a php mysql web app?
Ive tried azure and heroku.

Azure shows my app with only the title and background color, while heroku gives an error:
Database Error: SQLSTATE[HY000] [1045] Access denied for user.
Ive been trying for 10 hours straight and almost lost my mind.

Hashing converts the password to a jumbled string using a key you set.
If you try and decode the password without the same key that set the hashed password, it comes back invalid.

I am pretty sure people export React to use in other languages somehow but i dont know how

I need to study this, thanks for the quick rundown.

How do I get the screen ratio in js?
And I do mean the ratio, like 16/9=1.77777777778, not just the vw and vh

keep in mind the browser's tabs and menus take a chunk of vertical height so it's not going to be fully 16/9 but wider

why would you ask that here and wait for a random response an indeterminate amount of time later?
Literally just google "screen width height js" or something and you will see an answer that tells you how to get the clientHeight from the document

>And I do mean the ratio, like 16/9=1.77777777778, not just the vw and vh
>not just the vw and vh
Do you understand what a ratio is?

>I hate react because javascript mixed with html is stupid

Attached: ce8.png (621x702, 56K)

Non-standard languages have http servers as well. Use HTTP to communicate between your frontend and your backend like you would in java or whatever.

New to webdev, can someone give me a quick rundown on what I should know if I want to build a website with django.
I know python, did a few projects with it and AoC, butn nothing web based.
How much HTML, JS and CSS is expected to use with django? And for JS, what's the difference between react and jQuery? Talk to me like I'm retarded, because all frontend stuff is new to me, I just did some tutorials on codeacademy.

I had a website which just ran a perl script and displayed an image of the resulting graph, you can just call any program from most web server and backend solutions. Probably not very secure if you pass any arbitrary arguments to your shell and c++ program though.

hey guys stupid question

both atom and sublime text have both randomly started to add

there should be a decent market in Austin
I'm still learning but a few of my friends have managed to find work, both freelance and full-time

I'm a fucking mong who forgot that there was an opening question mark, everyone please ignore me

>How much HTML, JS and CSS is expected to use with django?
The same as with any other site. The backend doesn't really change how your HTML,CSS,JS is going to look.
>And for JS, what's the difference between react and jQuery?
haven't used jQuery in ages, so I am talking from memory here. Someone can correct me if necessary.
jQuery is a library that provides a bunch of helper functions for selecting elements, handling events, ajax, etc. Basically a bunch of shortcuts.
Nowadays you can do a lot of that stuff just as easily with functions that browsers come with natively and there is no real need any more to write browser-specific code, which jQuery also took care of back in the day.
If I were you I would just ignore it, since it's really not needed anymore and might even be detrimental to learning JS. You just need to observe how often people ask really basic stuff itt, accompanied by some jQuery code snippet.

React (and also Vue and Angular) are also used to build the UI of a website.
If you go down to the absolute basics, I would say that their 2 main features are the easy and organized way to compose your site from separate and reusable components and to write templates for declarative rendering, where you specify how your UI should look, given a specific application state.
Read the beginning of the React or Vue docs and that should give you a good idea.

trying to figure this out, but no luck so far...
jsfiddle.net/6gmq4kef/9/
I would like for an image of any size to grow or shrink to the height of the .container
On FF everything is fine, but on Chrome the image won't take up the available vertical space.

Now I can fix that by not setting "align-items: center" on the .container, but that will result in the image element box taking up the whole width of the .container, which I would like to avoid.

Any ideas?

Attached: jsf.png (1030x802, 31K)

add height: 100%; to image class.

yeah,
fucking hell, how did I not try or see that.
I was so focused on just letting flex do its thing and try to have itself expand to the available height.
Guess I should look up what FF and Chrome do differently in these specific situations.

>direct child selector
use classes instead

I don't know much about Django, but I have created microservices with Flask before (think of a very lightweight version of Django). You typically use these frameworks to serve requests which your front end makes.

A front end of course, is what the user sees. Ultimately it's composed of HTML (the building blocks of all of the visual elements on a web page) and CSS (what's used to style those blocks and make them look the way you want). JavaScript is used to add logic to the page - say for instance when you want something to happen when a user clicks a button.

Front end frameworks like React and Vue basically help glue Javascript logic to those building blocks by allowing you to create clean and reusable "components". Think of this as creating your own special type of HTML element that you can plug into your pages. These components keep an internal "state", which you can define, for example a toggle button's on/off state is a typical use case.

It's not necessary to use a framework to serve up a web page, but they certainly help with breaking down complexity. If you'd like to learn one, I suggest you brush up with at least the basics of the holy trinity before moving onto one. JQuery is a shitty library that provides cookie cutter helper functions that no competent developer uses anymore - anyone that tells you otherwise is stuck in the 2000's. Don't bother with it if you really want to become a decent dev. Anything done in jQuery can easily be done with just regular Javascript.

Happy to answer anything else you might want to know.

Attached: f0ea5df1-9256-4426-a790-dcd6c49e7ae6..png (500x567, 37K)

Is there a way to do a CSS media query like:

@media(viewport-width > viewport-height) {
font-size: 10vh;
}

@media(viewport-width < viewport-height) {
font-size: 10vw;
}

Does the grid shortcut property straight up not work in Edge?
developer.mozilla.org/en-US/docs/Web/CSS/grid
Clicking on the demo examples nothing happens

There is 'vmin', which will always be the smaller of either vh or vw, in case that solves your issue

I might be having trouble because I'm applying for the higher paying jobs. I have the experience but competition for those jobs is intense.

The "view thread" button on the catalog view in Maniwani is gone; now you simply click anywhere on the card to take you to the thread. Also, Futatsu has a favicon now.
Sorry I've been quiet for a week or so, I've been busy with other stuff in life. I'll get back to adding new features and listening to feedback again.

Attached: Screenshot_2019-04-09 Maniwani - home.png (1550x791, 69K)

I don't think Elm is a meme

Attached: toptal-blog-image-1512626988991-bb014d91f4aa05ff6a1b202415e392f2.png (1280x1280, 81K)

What said should work in that specific case.

You can do aspect-ratio media queries though, for more flexible control over aspect ratios:
developer.mozilla.org/en-US/docs/Web/CSS/@media/aspect-ratio

And there's also specifically the orientation media query, which is pretty much just a subset of the aspect-ratio one for a specific semantic purpose:
developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation

Is there still a discord server for /wdg/

>Question for freelancers
I want to start taking freelance jobs but I'm a bit unsure about the whole hosting process and servers etc. How do you guys do this?

Like, I have my own cloud server with DigitalOcean for my own stuff, that I pay monthly. But what do you do for clients? Do you include their own website in your server? Is this something that you consider as a fee?

Or do you talk them the process of hosting and let them know they will need to pay this monthly/yearly fee to run their website on the net? Like I would set up the server/website/admin logins for the person and then give it to them once the project is done.

Sorry if it's a dumb question but I got no clue how this part is done. I'm looking at upwork mostly.

Attached: 1506634343260.jpg (687x750, 94K)

Is web development easier than software development?

Not really. It all comes down to the level of difficulty of the project.

Advanced web projects can be just as hard for someone who has no knowledge of it. Same goes for software. What is truly important is that you learn "programming".

The only difference between software and website is the platform you're developing for.

Web development is a subset of software development. Websites are a kind of software.

Software development can vary based on the complexity of the application being built. The complexity of websites can vary based on the goal of the site.

It's easier to build a simple brochure web page than it is to build a database management system from scratch.

It's easier to built a basic calculator app than it is to build a real-time collaborative document editor.

buddy of mine wants me to write a 'simple' web page for his store. anyone know how i should price it out? i make ~50$/hour at my day job, should i charge him the same? or maybe 25$/hour since he is a bro? my plan was to use webpack and make a simple spa, put it on an aws s3, then forward mask his go daddy page too it. if i'm being realistic, it'd be 4/hrs to set up deploy and project configuration, 8/hrs design, and probably 2 hours to write up and compile all the information he needs.. so maybe 16 hours of total work? if it was anyone else i'd probably say 1200$, but was thinking give him a deal and tell him to put my name out to his customers with a good site.. so maybe 400$?

Holy shit, I've spent the better part of the last two days just trying to get some simple dotnet shit running on Azure, and I finally got their sample code running properly.

I'm so happy that I can stop dealing with configuration bullshit and actually write code.

Hello, I am purely self taught but still very ameteur
I have a great website idea which I want to work on down the line when I am much more skilled and i have a question
I am planning on making a very interactive addictive website somewhat like Duolingo but I dont want to use JavaScript at all, would it be possible to make a website that has animations, score keeping, stores information about your placement, and such with only HTML/CSS and PHP? If not just those three, is there an alternative? Not as important but is there an alternative to php?

Attached: 134c46460b6146f7a6ab68ac525db2e9.jpg (480x597, 32K)

You're describing (symmetric) encryption, not hashing.

Symmetric encryption is used when you want to encrypt a file, say 'banking-info.txt', and then be able to decrypt it later.

Hashing is different because it's a "one way function". You generally don't use a key (in the case of password storage), and you can't decrypt it at all, period. The output of a hash function looks basically like random data; it's not at all related to its input (but it's still the same every time for a given input), and there's no way to derive the input other than brute force. Hence "one way".

But since there's no way to reverse this hash value, how do we check whether a user has entered the correct password? You just hash the password that they've sent you, and check it against the hash. A given string hashes to the same thing every time, so if it really is their password, then the hash you just generated should match the one you stored in the database when the user originally created their account.

Jow Forums really hates this example script I'm trying to share, so here's a screenshot.

[ Disclaimer: there are other things that are necessary for secure password storage. This is a simplified example. You should read up on password salts and other secure password storage basics. ]

Attached: Screen Shot 2019-04-10 at 1.49.52 AM.png (1060x1084, 211K)

Why is jQuerry outdated? Honest question, as the tutorial I'm following seems to imply that it simplifies a lot of JS. Does React have the same capabilities, or is it completely different?
I would love to ask questions, but have no idea what to ask. For django, what do I need to learn apart fron django and python for backend? I know TSQL pretty well. REST?

It's not bad per se but less necessary now as browsers have improved standards compliance
youmightnotneedjquery.com/

Doing project with react and I want an object to react differently to an event based on some variable. What I wanna do is something like
[functionSent is functionA or functionB based on condition]
return(
functionSent()}>
);

my question is, how do I write that first line so it works? pls no bully I'm not a js master or anything

I actually can just use the condition inside the one function, like
functionSent(){
(condition)
[do what A did]
(!condition)
[do what B did]
}

Still, I'm a bit curious as to how the notation that solves my original question would look like

What specifically should I do that will improve my skills with Django? Yeah, build a website, but what kind? What should I include in it?

How do I rotate an object with react?
I tried just using style={transformString} but it says:
>The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.
However, there is no way to do a transform with the property: value + 'unit' notation

>property: value + 'unit' notation
I don't know react, but that looks like it's just doing string concatenation.

So you would just have something like
style = {{ transform: 'translate(' + amount + 'deg)' }}

Anyone?

Whats the best way for submitting form to itself ?
v

pls respond
I have no idea what kind of project to start.

No. If it's gonna use the EN it's probably gonna use the M too. Like MERN or MEAN

hunter2 from v4c?

Right now it's being utilized to defer large tasks (e.g. media encoding, machine learning). wasm is currently invoked by JavaScript through a bridge that serialises inputs & outputs so any DOM manipulation would be pointless.

Whats the best site for some free templates, i am shit at CSS. can be bootstrap templates too

Attached: 131342535.jpg (1106x1012, 70K)

umm.. html5up?

React is a view library that allows you to declare how things are displayed by using HTML like syntax inside JavaScript (JSX). jQuery is a utility library for manipulating DOM. Most DOM manipulation functions that were unique to jQuery are now standard on most browsers (most notably, querySelector & querySelectorAll) which is why you don't really need jQuery anymore if you just want to do DOM manipulation. React (and other view libraries/frameworks) are growing in popularity as they are declarative (i.e. easier to see visually how the will be layed out) and also manage a lot of the hard work for you (specifically, having your JavaScript data in sync with whatever is being displayed on the view).

asdf
kljh
zxcv
qwerty

option1
option2
option3
option4

$(document).ready(function () {
$('.group').hide();
$('#option1').show();
$('#selectMe').change(function () {
$('.group').hide();
$('#'+$(this).val()).show();
})
});


can anyone tell me why the fuck this isn't working

Find a tutorial that isn't so outdated. Maybe the try the exercises on freecodecamp and do the ones that have to do with just Javascript. React and jQuery are different - react is a view library that helps you build complex UI features whereas you can think of jQuery as a collection of helper functions that help you interact with the UI, but like others have said are pretty much obsolete nowadays.

Why are you so set on Django? If you are new to web development, why not stick with Node/Express to isolate yourself with just Javascript? If you are so keen on using Python, take Flask a look first. It is much simpler than Django to learn and is still capable of creating a full fledged server.

There's a link on the first page of this thread that should take you over the basics of backend development, but to simplify things you need to think of your backend as a gate that allows your front end to access and update entities that you store. The most common operations in layman's terms are Create, Read, Update, and Delete (CRUD).

For example, if you were creating an app to manage a book store, an obvious entity would be "book" - which you may store some data about, such as name, author, price, etc. Your CRUD operations, typically defined using REST routes, allow you to manage what your database stores. Therefore you will want to know about database interaction, but while you are learning it is OK to just hold the data in memory.

My best suggestion is to just watch a YouTube tutorial of someone spinning up a Flask server. In fact I'm pretty sure the one I learned with was using books as an example too.

Attached: f6641e47-74ff-4c5e-afcb-20894eba6762..jpg (531x714, 60K)

>I am planning on making a very interactive addictive website somewhat like Duolingo but I dont want to use JavaScript at all, would it be possible to make a website that has
Yes you can, but if you really on server-side-rendering for everything, it won't feel nearly as interactive and 'smooth'.
Why do you want to limit yourself in such a way?
>Does React have the same capabilities
The way you use them is really different. Just follow the first few chapters of the React official React docs guide and you will see fairly quickly.
maybe ternary like this?
const functionSent = condition ? functionA : fucntionB

seems to work?
jsfiddle.net/v6dyrthe/
bit odd to have the value be the element id, instead of the string you want to display though

daily reminder that there is literally nothing wrong with wordpress

If you ignore all security issues, speed, customisation, lock-in, pricing.

We are a variety here.

You can ask questions about basic syntax or how to scale and market your online biz and you will find someone who knows what they are talking about.

Digital ocean is very easy if you follow one of their lamp install guides.

>Electron app using Rust or C++ on the front-end with a GUI made in CSS

Bros we can finally make decent looking applications that are blazingly fast.

Attached: 1984182725121.jpg (333x371, 18K)

WE SOFTWARE DEVELOPERS NOW

I think you underestimate how fast compiler optimized JS is already

>Webcodemonkeys fucking seething while trying to write a hello world application in a low-level language with Web Assembly

Can't wait

Doing a full site that is an anonymous website (you still login/register but cant see who posted)to ask questions, i just want to creae this one to host it on heroku and i have it as a thing in my portfolio, will this look be enouch? I am fucking garbage at CSS

Attached: 32525253.jpg (1899x935, 127K)

>tfw learning java
>tfw getting rekt by classes and objects interacting with other objects

Attached: 1513168029617[1].jpg (248x203, 11K)

Java is shit, C# is the better one