/wdg/ - Web Development General

you can use the variable to set an inline style, but even better would be to use CSS variables and adjust those

Use element.style.width = element2.value + "%";
Correct me if I'm wrong tho

Sorry man I'm really new at this. What do you mean by use variable to set inline style? Also the test is supposed to be like heavy on JS, not so much on CSS so I'd rather not delve into CSS variables yet.

Is it unprofessional/bad practice to use a set px size for font size in body and width size for a parent row and then use percentages for every other size?
I just hate using REM.

I've seen YouTube do it.

[spoiler]Playlist div that shows the column number is 12px.[/spoiler]

read some of this
developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style

Basically you set the inline style attribute of the element via JS to what you want.
Just like posted

If you want to know how to read the value of an input element, you will find that on MDN too.

Anyone else use Firefox Developer edition? The built in grid/flexbox overlay actually helps a lot

Why do you hate REM? just set it up like:
html {
font-size: 62.5%; /* magic number */
}
body {
font-size: 1.8rem; /* equiv to 18px*/
}
.some.thing {
font-size: 2rem; /* 20px */
}

Etc. Then use em's for margins and paddings as they will be relative to the current texts size.

>as they will be relative to the current texts size
And how is this helpful?

Because margins and padding usally have a direct relationship to text size (not always). If I specifcy 14px body text and 10px margins, but change the body text to 18px I want the margins to update to be relative to the new size, which em's will do and px won't. If the margin doesn't have a relationship to the text size then use whatever you want.

I size margin, button's padding, etc, all in em's.

alright, so I've been trying react, did the tic-tac-toe tutorial, and played around doing random stuff. how is this shit supposed to simplify front-end development? the "state management" done by passing props all the way down from parents to nested child seems quite retarded at first glance. Could any of you guys enlighten me? should I try vue now?

Attached: CYy2iHKUoAAqPRd.jpg (351x329, 18K)

Passing props down is for small web-apps. People mostly use Redux or something similar (mobX, Effector, whatever) to manage global state and pass it directly to any node in the tree.

When should I use grid layout instead of flexbox?

I tried to use firefox but his "firebug" is horrible when compared to chrome's one

Flexbox is for laying out items in a single direction, either horizontal or vertical. It only really concerns itself with single lines of items and how to space them, how they fill the space etc. Grid is for more complex layouts usually involved x and y axis at once. They can both be used together.

They can often both solve the same problem in different ways, there are lots of layouts that grid can do that flexbox would be impossible to achieve though.

>simplify front-end development?
Declarative rendering and components alone make a huge difference.

it is good just slow

The free web host I'm using allows to upload your own key and cert but even though I set it up correctly yesterday, after a few hours it switched to the host's default SSL cert, I fixed it reuploading my key and my cert but then when I visited the site today it switched to their default SSL cert AGAIN.

I scanned the subdomain with SSL Labs and it says inf acts that there're 2 self-signed certs (A rank but still), how is that even possible for a site to have 2 certs at the same time and why does it keep switching back to the default one? both theirs and mine are self-signed so what's the point?

Sounds fishy, at some point yesterday the htaccess file got "automatically" wiped (I had set a forced SSL rule in it), luckily I had a backup locally. Should I just drop this host and try somewhere else? I'm just trying to learn how to set up a proper website from scratch.

Attached: 1484728847274.png (318x427, 156K)

How often is code reused for websites?
Because whenever I look at the source code of a site, I get pretty intimidated by the fact that it's several hundreds or thousands of lines per page sometimes.

> The free web host
Answer is in the first few words of your first sentence

maybe because it's generated code, not something some poor sonabitch had to cook up in the business' basement while chained to a chair

What's wrong with free web hosts? I'm using it just for testing, I don't have a website nor a domain name yet. Before spending money on something that I might get bored of withing a couple months, I want to at least learn how it works.
Is the SSL cert being changed because the host is running some fraudulent scheme or did I set something wrong that forces the host machine to discard my SSL cert even though it was ranked A on SSL Labs? this is the point.

What do you mean? I'm only starting to learn web development but by generated, you mean just getting a program to generate the code with parameters you put in?

anyone used both Django and Laravel ?
What can you tell me about Django compared to Laravel?

Never used Laravel. But, Django is super easy to get into and has a ton of stuff built-in right out of the box

why isn't my asp core handler not called? It keeps calling the default empty one. I added [HttpPost] and all but it stays being retarded
no mvc here

>mfw I spent the past 6 months developing a framework/ compiler
>seen people mention svelte but stupidly thought it was like Gatsby
>look it up, it's pretty much a more well developed version of what I'm working on
>even has plans to work well with webgl which I thought would definitely be unique to mine
I guess I could be the Vue to Sveltes react

Attached: the_world_was_always_awful.jpg (400x567, 156K)

thanks but i need someone to tell me stuff compared to Laravel

basically how is development done
i mean for php based frameworks i use LAMP stack
i dont know how it goes for python based frameworks
how are routing done, or templating engine for html , etc. you know

its what most frameworks do today; do all the heavy lifting, generated serverside by a few lines of code

if you look at the youtube video search results for example, if the search result shows 50 videos, that's usually one function repeating the process 50 times, the function gets written only once for elements that have a identical html structure

I just visited my site on the free host with NoScript and this came up: pastebin.com/4F8eBU2j (can't post here because muh spam).

It can't be that NoScript broke the SSL encryption? and what kind of sorcery is the aes.js file mentioned in that code: pastebin.com/vrgBEku7
I never heard of js-based SSL (is that even possible in the first place? doesn't make sense).

By the way, the expiration date written there is the one of the host's cert, not of mine. What exactly is going on?

Attached: 1506803178534.gif (296x289, 29K)

>made part of my project in socket.io
>find out websockets are viable so why not try them out to learn how the thing works under the hood
>have to do a bunch of JSON.parse/JSON.stringify and slightly alter the structure of my project without losing any code

oh wow

Attached: animals_hero_guenon_0.jpg (1920x1080, 244K)

I have a personal website on page 3 that I want to increase the search ranking on. My name is reasonably rare.
Any SEO guides to get my website in the top 3 when searching my name?

Attached: search-engine-optimization-chalkboard-ss-1920-800x450.jpg (800x450, 94K)

At how many request/user would i realistically need some sort of caching mechanism on a CRUD site. I have a site I want to deploy, but I don't want to write caching BS, aren't simple insert/update stuff fast and simple enough ?

What should i consider when choosing a font and pairing them with others? How many fonts should be used on a page?

>struggle 4 hours in front of the PC trying to figure why something is not working, think about kms
>fuck it and go to sleep
>10 minutes in the bed thinks about a solution
>it fucking works

>Try learning react
>Literally just want a button component in another folder
>Unable to resolve module
What could be causing this am I just not loading it correctly

I dont know shit about html and Im trying to make a basic ass webpage. How do I make multiple html files link to each other that keep the same setup? I'm using html and php (yes, shoot me i dont give a shit) and the webpages use php scripts for a login system. I assume an tag with href="index.php" and a simple for each page being linked to the index is enough right?

pls help

react native staert --reset-cache and importing componet fixed it, I've wasted like 2 days on this so far, Kind of want to die
worry about it after the site starts crashing due to too many users
As long as your under 10 req/a second dont even spend a single second worrying about it

>wants help
>doesn’t post his current code
>doesn’t receive help
What could be causing this

If you're not a designer just use a system font stack. It's more performant too anyway.

Im working on a very basic webpage that utilizes html and php scripts. Say, there is a link in the home page to a button "Secret Page" that links to a php and html page that only logged in viewers can see. What code can I include to prevent people who aren't logged in from viewing that page? I have the login system php scripts (almost) working with a mysql database thru xampp so assume I only have to worry about the code to prevent unwanted visitors other than logged in users.

fetch vs axios for sending files?

I just use axios by default really

New here..I can't flex an item through a block level element..what am i missing?

>codepen.io/MatthewC/pen/QeyKKo

basically i would like to have .quote to the right of .introduction

to the right and center of*

>codepen.io/MatthewC/pen/QeyKKo
Wrap .introduction and .quote around a new div.wrapper, style it as .wrapper { display: flex; }, is this what you're looking for?

How do I make the lines align?
jsfiddle.net/9bphzjaq/

Attached: 1537413454821.png (183x75, 3K)

Diffused mode of thinking comes in handy

>jsfiddle.net/9bphzjaq/
There are multiple ways you can do that, for example by changing the angle of the linear gradient, not really sure what you're trying to achieve though.

fetch. Every dependency you don't need is bloat.

im trying to achieve it looking like one thing instead of 2 misaligned things

I literally told you how you can do that? Now go finish your homework assignment.

changing the angle does nothing retard, try zooming in on the thing

Anyone do Web Dev on Linux? Which distro and what software do you use?

>changing the angle does nothing retard, try zooming in on the thing
werks on my machine :^)

Attached: Screenshot from 2019-07-29 08-48-09.png (247x125, 6K)

which browser

Fedora 30, Vim + tmux

Works on Chrome and Firefox, seriously how much of a brainlet can you be user

this is how it looks on zoom 200%

Attached: 1554603672540.png (329x106, 8K)

Thanks a lot

I accidentally ran both yarn and npm installs in a react project. How would I delete all the yarn BS

rm yarn.lock
npm install

>as long as the end result is professional
*as long as it solves a problem, people use it and are ready to pay for it.
also check out stackblitz

LIterally google has a guide

Does it figuratively have one as well?

I've been learning react for the last week and I am having a blast. Actually something I can follow and build shit with, very awesome. The anons who recommended it; thanks.

I own a Marketing company and the journey with my clients sometimes start with building a website for them. I did this in wordpress when I started(i know), evolved some of my skills, got into programming and have some basic/medium knowledge of html/css/js/+ real basic react. and am now looking into Gatsby. The websites I create are usually simple one/two/three pages or webshops. How do people here think about Gatsby? Would it be good for me to dive into? Seems fun anyway.

recommend a book on python for absolute beginners. I need it for my college course. Must be a book and not one of those online guides.

Yes

Introduction to Computation and Programming Using Python: With Application to Understanding Data

thanks

Gatsby is a static site generator. Know your use-case. If you don't need a server that's when you use an SSG. Three page websites is the perfect use-case for Gatsby, a webshop not so much since you'll probably need a backend.

Awesome, thanks!

As a tribute to The JavaScript Programming Language, I wrote a short haiku using only JS reserved keywords. It's about the inevitability of death.
>do try catch this void
>native for else default while
>final false private
please rate sir

I'm about to finish my first web app and I want to put it into my github so I have something to show when trying to get a job. Thing is, While it is functional and working as intended, it looks ugly as sin because I have 0 design knowledge, will it affect me negatively when looking for jobs as webdev?

Also, an advice for noobs like me: the best way to learn is to code something about your hobby. I'm kinda addicted to fighting games and I'm coding something related, so while I'm learning, I'm having tons of fun, I'm making something that will make my hobby better AND working on my portfolio. 4 in 1 package

>Thing is, While it is functional and working as intended, it looks ugly as sin because I have 0 design knowledge, will it affect me negatively when looking for jobs as webdev?
Not at all, maybe a few points if you're applying for a front-end position but even then they don't give a shit since you won't be in charge of the designs anyway. In my experience employers care about the functionality and, most often, how well the code is written / organized / etc.
Although even you are a complete design retard, you don't have to make ugly apps: you can't go wrong with minimalism and few colors, unsaturated, etc. and checking this out: medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886

Anyone here work with npm with both Windows and Linux?
I'm trying to setup bash scripts in my package.json on a windows PC.

Ty man, really appreciate your help, I will check this out. Is there a cheating sheet to organize your code? I'm coding my page on react and all my code is in a single file, divided by 3 classes (Menu, Main and Appbox). It is kinda messy right now, but since it is a small scale app, it will be easy to fix it.

Not the user, you are talking to and relatively new to React myself, but if there's anything I've learned from my current project
>make anything you possibly can into a functional component
>if you know your project is going to be big, maybe look into using a Redux store and integrate it NOW before it gets too complex, if it's going to be a small project, don't even bother using Redux
>refactor often, just little things like changing names, extracting functions. IRL readability trumps over little overhead speedups every single time. (The only exceptions are obvious things like database stuff and some big data algorithms, but that's most certainly not what you're working on anyway)

just add some margin :^)

You gotta make the texture in photoshop so that it is seamless, it'll take you a while, but you should be able to pull it off, and if you're doing it with gradients, well, then just tweak the angles till it fits or something, it should be doable

>be nodejs
>handle request
>transform array with single element into a string
>every fucking time
Why don't they treat all arrays equal, fucking nigger cock sucking niggets. Aaaaaaah...
>inb4 using node
Kys faggs

Attached: C__Data_Users_DefApps_AppData_INTERNETEXPLORER_Temp_Saved Images_1558813908247.jpg (960x540, 40K)

>transform array with single element into a string
Example?

What exactly is a component? I mean, in my case one component would be the menu and the other the main page? And I'm not touching redux, there is no point here

any website project ideao to fill my portfolio ?

fetch(URL, {
...
body: { a: 'hello', b: ['nigger'] }
...
}

nigger will be a string on res.body.b

An input, a card literally anything

I forgot the stringfy and json stuff but you know wat I mean

I'm trying to get through the freecodecamp site and got as far as like the fourth question before I'm stuck. What am I doing wrong here?

Attached: 2019-07-29 12_17_47-Basic HTML and HTML5_ Comment out HTML _ Learn freeCodeCamp.png (555x314, 10K)