/wdg/ - Web Development General

>Previous thread
>Free resources to get started
Get a good understanding of HTML, CSS and JavaScript.
MDN web docs offer a good introduction (independent of your browser choice)
developer.mozilla.org/en-US/docs/Learn
freecodecamp.com/
codecademy.com/

>Further resources
developer.mozilla.org/en-US/docs/Web - General documentation for HTML, CSS & JavaScript
github.com/kamranahmedse/developer-roadmap - Roadmap
stackoverflow.com/ - Developers asking questions and helping each other

>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

Other urls found in this thread:

jsfiddle.net/yv6w8xw9/
github.com/facebookincubator/create-react-app
liquidnuker.github.io/vcPubApiList1/
jsfiddle.net/qaz3Lr5s/
caniuse.com/#feat=css-grid
css-tricks.com/places-its-tempting-to-use-display-none-but-dont/
bogotobogo.com/python/python_network_programming_tcp_server_client_chat_server_chat_client_select.php
binarytides.com/code-chat-application-server-client-sockets-python/
twitter.com/SFWRedditGifs

Why do all in-browser WYSIWYG HTML editors suck?

>develop electron app for my personal use and a few of my friends
>use synchronous XHR because fuck it, it doesn't impact usability too much
>suddenly some, but not all of my requests start failing, sometimes, unless I change them to by synchronous
what the actual fuck?

It's possible that the ones that are succeeding are because they're cached, so that might have something to do with it. But why did everything just now decide to break?

*change them to be asynchronous

How in the fuck was I supposed to find this thread?

Yeah, I am working with one now. It's an absolute nightmare.

Accidentally fell into a hole the other night reading about the many pitfalls of in-browser WYSIWYG editors. I thought it'd be a comfy project to work on but it sounds like a horrorshow.

Do you mean like just for text formatting, like TinyMCE, or like a full-blown page designer, like Wix or something?

Because they're a fundamentally flawed concept.

>his website doesn't greet the user when he returns

embarrassing

how do I setup a background image so that it gets scrolled down as the user scrolls down (assuming image size > screen size) but stops scrolling when its end is reached (remains static in the background as if fixed, unless the user scrolls up again)?

Anyone knows this effect where at first the image is kinda slightly black & white but when you hover a mouse on an image it fades in in full color? How to achieve this?

jsfiddle.net/yv6w8xw9/

learn to google tho, it's much faster than asking here

That's the problem, i don't know what to write in google, thanks user, but it seems im fucked, because ie9 doesn't support this "filter"

Where can I complain that a specific domain doesn't comply with the special registry rules?

Like for example
Warning: the registration contract for domain names in this extension require that you publish at least one page in Catalan within 6 months.

Someone has been harding this domain for years and I want it.

I want to get into PHP unit testing, because I'm tired of seeing a blank screen of death every time I make a mistake, which I then have to spend half an hour on, trying to find the error by (un)commenting code blocks.
Now I found PhPUnit, and it looks pretty neat, but the instruction manual tells me to
>make it executable, and put it into your $PATH
, but where? I obviously need a Shell for this, and it surely doesn't mean the path variable on the Windows pc I'm working with. Is there a serverside command line? I obviously lack basic knowledge on the serverside, so I don't even know what to google for. Help would be appreciated.

TL;DR
I have a server I can put files on, and want to use PHPUnit. Wat do.

Looking for this?


.to-greyscale {
filter: grayscale(1);
transition-property: filter;
transition-duration: 0.5s;
}

.to-greyscale:hover {
filter: grayscale(0);
transition-property: filter;
transition-duration: 0.5s;
}

then you can create a black&white copy of your image using photoshop, overlay both pictures and animate opacity

also fuck ie9, nobody cares about ie9 compatibility.

Why don't you look at your error logs? They'll tell you the exact line you fucked up

okay, let's phrase it this way:
how to I detect in javascript that the end of the background image has been reached at the bottom of the screen to keep it from scrolling any further?

does
position: sticky
do the trick?
Otherwise get the elements position, height, etc. and check it against the documents scroll

Is there anything like Angular CLI for React? I really don't want to spend a week configuring a build process ever again.

not sure what angular cli is but if it is what i think it is maybe look at this github.com/facebookincubator/create-react-app

Public json apis for everywun from boxxxy:

liquidnuker.github.io/vcPubApiList1/

please someone tell me in details how do I start charging a monthly fee for a service? Guess I need to hookup paypal or whatever is available here.

>make a ~cron that send a payment prompt every month to registered email
>implement a callback from paypal that signals the fee is paid

do I need to be a legal company to be able to issue invoices? Or I just need a paypal account registered for my domain, charge customers and transfer money to my personal account whenever?

Is this bad? should I give up and kill myself?

don't do subscription services, it's a huge pain in the ass

Most important payment gateways can handle recurring payments
Alternatives?

Lacks contrast, lots of contrast.

that looks alright, but that alone is nothing. What projects have you got? That's what really counts.

Using Django, should I always go with SQLAlchemy if I want a real database, or do I do plain SQL queries?

you don't have to be a business, just make sure you fill out a 1099 at the end of the year, if you're american.

Looking for good guides on how to integrate firebase with redux.

any primers?

I'm very new to this, I have two sites I've build for other people. but not sure i'm comfortable posting here as they are businesses.

how to do saas then?

>Most important payment gateways can handle recurring payments

I just need to tell paypal to issue an invoice of $X every month until the customer cancels the service?

I'm not, but thanks for the important reminder. Guess I will get an accountant to deal with taxes.

Cool, all I'm saying is, don't fret so much about your landing page and work on your real projects.

yeah sorry, I'm a lonely autist looking for reassurance I guess. thanks

>I'm a lonely autist looking for reassurance

We all are, buddy, we all are

Some help with this? I want a button, that when clicked, does nothing on the current page, but updates a certain value on my database. So I have a function, like_book, that updates the database, but how do I call that function in the html code? Can it be done without js?

Basically, I want to implement the 'like' function in a django template, but I can't really figure it out...

send a post with fetch or axios like a normal person

yeah it's ugly and all my attention goes toward the strange logo desu

Any good SASS / BEM tutorials?
I was asked to fix some ancient crm and i don't / can't do fucking thing.

Made a JS+HTML program where you can update some table fields like name, age, etc

but when i change one of attributes of a table then it changes in all tables

wtf

what could be the cause for this problem?

something like this may work? though it has JS


you probably need to use a if you don't want JS

Put it in an iframe.

you assigned an event handler for a class and it fires for all tables?

Do any of you have experience with accessibility for screen readers? I'm making a React Pagination Component using buttons and icons (not input type="button") and none of the aria tags work on the HTML5 button tag.

ARIA guidelines state that screen readers pick up the text inside of a button to label it, but we're just using an icon, does anyone know how to override this behaviour?

I slapped together this webpage for remote controlling a media centre program: jsfiddle.net/qaz3Lr5s/
Anyone know how to get the css grid, and the large buttons to work on an ipad running iOS 9.3.5
I already had to do some nasty shit rather than using the fetch API.

don't think you can on that iOS version?
caniuse.com/#feat=css-grid

dang.
I tried a polyfill, but that didn't do the trick either. (I think it's for internet explorer 10)
Is there anything else I could use that gives me the same layout? Also, setting the button sizes only works on desktop.

For those interested, the answer to this is providing a span inside the button with text then hide the span using something other than display: none; detailed here:

css-tricks.com/places-its-tempting-to-use-display-none-but-dont/

well flexbox should work.
But you don't need it to be responsive, right? So really grid and flex doesn't even seem to be a must have.

You should stop using PHP right now.
Just start from scratch with a sane programming language like Elixir.
You will thank me later.

> ctrl + f
> no elm
You poor souls are still suffering from JavaScript!
Free yourselves!

>using a third rate language with no adoption

evan pls go

rate my deploy

docker build -t $app . ;docker stop $app;docker run -ti --name $app --net=host --rm -p 443:443 $app

Why don't i ever see anyone discussing ASP MVC in these threads? Is there somewhere else i should be looking?

vue 2 or react niggas?

>hes a web developer
>literally cant into design

maybe that's why developers usually work in teams. So they don't have to be a one-man army.

How do I have it like in blogs or messageboards where there are comments for specific posts, like how do the comments know which post they belong to

how the fuck do people bypass "maxlength" in text area?

Should I just JS script the length protection instead?

Put an opaque overlay on that background image to reduce the eye piercing contrast.

>he doesn't validate on the server too

Just make a direct request to the server's request handler, with the data that the user should have entered via the text form.

Vue

elm

post example plox

by rewriting the HTML of your js2 and js3 elements, simply with the maxlength attribute removed.

you should validate on the frontend (JS) and backend (whatever your database may be)

>he isn't a one man army
enjoy your disjointed user experience because the design and function will never truly be one

There is no DB. I will investigate a way via PHP now.

Thanks everyone.

I have this tinder-like website, and I want matching users to be able to chat with each other. Would something like this be appropriate or is a server + client not what I'm looking for? I just want a simple chat embedded into my website.

bogotobogo.com/python/python_network_programming_tcp_server_client_chat_server_chat_client_select.php

binarytides.com/code-chat-application-server-client-sockets-python/

Even without a DB, you are doing something with the user input in the backend, right? You need to validate there, before operating on that input.

Yeah I got it, I still only learning not a web dev just a graphic designer and sys admin.

always ask, we're all pretty friendly here in /wdg/. Much more than the rest of Sup Forums I would say.

Yeah it's pretty chill here I like it.

why dont people here learn desktop application development? companies actually prefer their own client programs

I am though. But not for other companies desu I truly don't care about those shitters shoving web shit into a """"native"""" wrapper and calling it a day

why are (You) learning desktop application development then?

And what language / technologies are you going for?

c# / wpf myself

>Vue
why?

retard question alert:

this is for a school project but I'm not looking for answers, just an idea of whats good practice.

We have to make a few asp.net pages that will have gridviews that will end up displaying data from a connected sql database. We also have to update/insert records based on user entries in the pages.

my question, is it good practice to make an object in c# that represents all the tables in the sql database that will be modified by the user entries? Also why?

Hey /wdg/ what's the least shitty front end framework I could learn in a fast amount of time?

I've got a back end API mostly written and I need a nice responsive front end, I know the basics of HTML/CSS/JS from a few years ago but I know everything has changed massively now and I kinda suck/hate webdev.

I cant find any books that teach how to make complex looking webpages with html/css. All the books just explain how each tag works in isolation but I cant find anything that explain the proper way to structure divs, floats, spans, etc to make certain kinds of page layouts. All the books on web design just show how to use photoshop/illustrator to make a UI and dont cover html/css hardly at all.

Vue.js

why books specifically?
For learning the basics how to build and structure a site you can check out the links in the OP.

or wait, I assumed you were talking about JS frameworks.
In case you meant CSS frameworks you can check bulma.io

>Vue.js
Thanks user gonna check it out now. How long would you estimate it taking to get a basic CRUD app working with this from scratch?

No I meant JS, although I'll take a look at this too as I'll probably want to pretty it up later.

I have an issue with localStorage. I have an element on my site which hides or displays another element on click from user and I want its state to be 'saved'.

The code works but it only works once and then the clicking event doesn't activate again. I figure it may be because the if statements are checking localStorage and they can only access it once. How do I achieve a persistent 'connection' which will allow the event to run indefinitely?

// show or hide own user's posts
const showHideText = document.getElementById('show-hide-posts');
const ownPostsBox = document.getElementById('ownposts-block');
if (showHideText) {
if (!localStorage.getItem('show-hide-posts')) {
// default characteristics
showHideText.textContent = 'hide';
ownPostsBox.style.visibility = 'visible';
localStorage.setItem('show-hide-posts', 'visible');
} else if (localStorage['show-hide-posts'] === 'hidden') {
// default characteristics
showHideText.textContent = 'show';
ownPostsBox.style.visibility = 'hidden';
showHideText.addEventListener('click', function() {
showHideText.textContent = 'hide';
ownPostsBox.style.visibility = 'visible';
localStorage.setItem('show-hide-posts', 'visible');
}, false);
} else if (localStorage['show-hide-posts'] === 'visible') {
// default characteristics
showHideText.textContent = 'hide';
ownPostsBox.style.visibility = 'visible';
showHideText.addEventListener('click', function() {
showHideText.textContent = 'show';
ownPostsBox.style.visibility = 'hidden';
localStorage.setItem('show-hide-posts', 'hidden');
}, false);
}
}

¿Chrome Dev Tools or Firefox Dev Tools?

>why books specifically?
Im open to any format, but it is difficult to access video tutorials unless they are on youtube

>For learning the basics how to build and structure a site you can check out the links in the OP.
The links in the OP are shit, Ive already done freecodecamp and codeacademy a LONG time ago, and honestly they have the same problem as html/css books in that they only explain html/css tags in isolation and not how to structure complex pages.

Also the OP resources used to be at least 3 times longer with a bunch of pastebin lists of resources, but that is gone now

This guy is a huge faggot that hasn't heard of the glory of php7.x

Php Unit User here anonpai, I gotchu:

1. You probably didnt read the manual i assume, make sure you read it front to back, just read over once to get the idea and return if you need to, don't take rigorous notes, its not necessary
2. Write a Superclass that phpunit needs to run that all of your unit tests, each unit test will extend said class, you'll see it in manual.
3. Write said unit tests, you will need to create mysqli or PDO objects in the unit test class if youre testing database input/output
4. Write phpunit.xml class like pic related, containing the unit test classes you will be using, it will then tell you which things fail at what lines, and why, etc. It is amazingly comfy, but a little bit of a pain in the ass to first install and start using. In the end it is worth it. Dont listen to no-php cucks here.
5. Notice how I use "phpunit" command in the directory of the .xml file rather than making phpunit.xml an executable.

user from previous general here edging between VueJS and React. I tried doing the same small thing with both of them (basic MEAN application converted to MEVN and MERN with LESS theming and Webpack)

Verdict: Vue = winrar

Why? React becomes very messy very quickly. Vue makes modularizing codebase more intuitive since it doesn't force you to use any special syntax. I can just write basic LESS/CSS+HTML+JS files without wondering at which point of React.DOM generator function accessor things go again. It also has better command line tooling and project kickstarter. Learning the basics is dead simple.

Hard to see any really compelling reason to use React, honestly.

Sorry user, I forgot to link you

>look at the wonders of the powerful PHP, my university teacher in my mud hut university showed me the wonders of unit testing

>why.jpg

Vues docs are generally considered pretty good, so shouldn't take too long if you know how to read those.
The only properties you likely need in the beginning, when familiarizing yourself are 'data' for state and 'methods' for the components functions.
(and maybe the 'mounted' lifecycle hook)
Other things like 'filters' or 'computed' state you can put aside till a bit later.
Then just add your HTML elements with an '@click' directive, calling a defined method, and that's your basic CRUD app right there.

Nice thing is, that if you want to get a feel for it first, you can include it from a CDN without the need to set up some build process first, though .vue single-file-components are really nice to work with imo, but those need webpack or some other bundler.

Nice, thanks user

look into
code splitting/ dynamic import/ extractcss / separate vendor chunks user

>implying I meant Unit Testing was the amazing thing about PHP 7.0
>not switching to strong type
>not soft-null types
>not introduction of calling closures
>not having the option off true or false-y and classic true/false boolean comparisons

user, there's only one nigger in this thread, and its not me, its the one talking shit about a revamped language that you don't know anything about. That's like me talking shit about python because I "heard it sucked" and never using it before. Please get off your pc and leave your shit hut Pajeet, you had your Curry awhile ago and it's time for you to hit the Designated street

Im not the one
>anonymous classes

How do you setup Git to work with web development? I have had my own domain for quite a while but never used it for anything useful, only for e-mail, but lately I thought of learning the magics of internet voodoo and start a project to challenge myself.

Am I retarded for making my website with Angular 1.x?
If I wanted to use MongoDB would that be equally retarded?

Read the online tutorials for this sort of thing. It'll seem weird at first but you should get the hang of things pretty quickly.