/wdg/ - Web Development General

I think everything lower than ie11 is like 0.35% or something.
Check it just in case on caniuse.com/#search=css grid

Are AWS Certs a meme?

Attached: yumm.jpg (1280x956, 213K)

>You should start your CSS from the mobile view!

Do people really do this

Yeah, it's easier that way around if you need a truly mobile friendly page.

I did it on my page and with media queries it's really easy to make something by hand that looks really nice.

whatever comes after setTimeout will run immediately and the callback will execute at the specified time
meh, i always do desktop first and then reduce/rearrange for mobile

Hey /wdg/ someone offered me some cash to make a simple small company website. Is it reasonable to host it on Github pages? Create a github account for them? Does jekyll suck?

Cool stuff man, I like it, but lemme hit you with some critique if you don't mind:

> Make the header image a bit smaller so that you can fit the "Otherworld Television a bit higher so it fits closer to the center of the screen
> Use a grid layout to categorize the LPs, since there's an insane amount of unnecessary scrolling needed to navigate
> The image at the bottom is pretty sweet, but imo just way too large and take way too much space. Maybe have some content over it?
> Make the text on the about section 50% smaller and increase its line-height, right now readability is pretty bad.
> No need for the "Support" and "Contact" pages
> The content in the privacy policy isn't padded

Other than that, rock on and keep it up. Good stuff for your first project.

I was almost finishing typing, but

>otherworldtelevision.com
what are you using for recording letsplays?

>Cool stuff man, I like it, but lemme hit you with some critique if you don't mind:
>
>> Make the header image a bit smaller so that you can fit the "Otherworld Television a bit higher so it fits closer to the center of the screen
One idea I had was to overlay the text partially over the image, however when resizing between the mobile and desktop views it got a little messed up so I'm still working on that.

>> Use a grid layout to categorize the LPs, since there's an insane amount of unnecessary scrolling needed to navigate
Yeah I might change that, I had it on a 4 wide grid at first but it messed up a lot in some places so I might need to rework that completely making one part for the title and one for the images.

>> The image at the bottom is pretty sweet, but imo just way too large and take way too much space. Maybe have some content over it?
Yeah I'll make it 50% of what it is right now, it's a bit too tall.
>> Make the text on the about section 50% smaller and increase its line-height, right now readability is pretty bad.
I think I forgot to add a css thing for that section so I need to add that as well

> No need for the "Support" and "Contact" pages
Yeah I'll just add that to the about page since it's such a minor amount of text.

> The content in the privacy policy isn't padded
Yep missed a CSS rule on that, small thing to fix.

>Other than that, rock on and keep it up. Good stuff for your first project.
Thanks, it only took an hour or two to get set up, most of the time was messing around with settings to see what kind of worked the way I wanted

>what are you using for recording letsplays?
OBS right now, I was using Bandicam before but it corrupted video and audio all the time. OBS doesn't seem to have that issue at all and even allows saving to multiple tracks and mixing to correct commentating values when recording, so that saves a bunch of work. The biggest issue with OBS is learning how to set it up (especially multiple audio tracks)

A company website? Fuck no. Get something professional.

I noticed that people who write frontends in Angular tend to have this weird hard-on for oversized graphic elements
I was checking out Taiga.io and noticed every fucking thing (menus, sidebars, tiles, modals that take up the whole screen, etc.) was way too big for its own good, and sure enough it's built with Angular

Is there something both professional and free, though? He's spending like 50 USD on the whole thing. It may sound like very cheap but I'm in a third world shithole. I actually already built it with jekyll, looking fine desu, I just don't want him to get screwed over this being on Github but it's not looking like he will.

He wouldn't agrre to it if there were maintenance cost except the domain. I promised to make something awesome and maintenance free. Fuck I'm not a webdev of any sort I'm just starving.

for that price, if it's just a static site, then put it on Github pages or Netlify and call it a day

It absolutely is. Does have a blog but I've already instructed him to create a markdown file for posts and looking fine. Also using formspree for contact forms.

Can someone help me, how do i achieve the spacing like in this pic using Flexbox? Basically i want uneven spacing where item 1 has much more distance from itself to item 2 than item 2 has to item 3

Attached: 23525352.jpg (1015x527, 19K)

get some cheap php shared hosting and host it there. and upload via ftp.

Why? It's static.

you need to add a spacer element or give the left one a much larger right margin.

Put an empty div between the first and the third box, control how big it gets with flex-grow

I am using styled-components in React and i am creating a Wrapper for my Navabar(and other components), i think i am retarded and i have OCD or some shit tho and every name for this wrapper sounds off, Wrapper sounds generic and shit, NavWrapper like shit, NavStyle ok i guess..is there a naming convention for such things?

i like your style, you take this seriously.
>HAML/Pug SCSS
[Hating on languages you've never used intensifies]
But seriously why do they do this to us, preprocessors on everything? Is it really necessary? A preprocessor for HTML what the fuck man?

Attached: 1528574788604.jpg (750x710, 64K)

I don't bother with HAML or Pug/Jade either. Writing JSX is already like curb stomping a kitten to me, I can't say I enjoy it.

That said, I cannot write regular CSS anymore, SCSS is basically obligatory as part of my workflow now.

CSS is the best part of web quite honestly.

Short page that should answer your question, especially by the end.

reactjs.org/docs/faq-structure.html

align items start align items end or something like that, like you put flex on the container then you tell the elements one by one to align start or end. Horizontally.

I see, I guess I'll have to look into SCSS myself.

Any recommended resources for splitting up a monolith in multiple microservices, or just planning a full stack web application using the microservice architecture?

sass is alright
most of the really good things have been added to css already, and the rest is taken care of prettier/parcel/webpack anyways
but most teams still use it so definitely invaluable

I need 10,000 songs from freemusicarchive.org, anyone here know a quick way? I know the directory where zipped albums are stored and tried

wget -r -np -nH --cut-dirs=3 -R index.html -e robots=off -A zip freemusicarchive.org/file/zips/

but it just comes back with a 404

Can someone tell me why the FUCK wont this work?

It should put news and sidebar side by side and featured on the top but all of them are on one row for some fuckjng reason??

Attached: 421242114.jpg (1329x631, 195K)

Your template areas need to be separated by spaces. "fff" is a single word, so you would need to use grid-area: fff;

Nope, still doesn't work

codepen.io/user/pen/XQBEyL

What does your generated markup look like, does the class get applied?

How do i check that,react tools are fucking trash, also i copied your code and it still doesnt work

It's your code, just so you see it works. I don't know what your react thing does.
Inspect the elements like on any other website using your browsers development tools.

The background color changes but the grid layout doesnt work lmao

nigga jsfiddle it

dude if the other user is trying to help you at least post some actual information and not just
>lul doesn't work

Open your dev tools and check which classes and styles get applied. See if display is 'grid' or something else.
If it's something else, see where the style is coming from.

Shit i can't now, will try later when i comeback home

flexbox then margin the left item only, auto does the rest

>consistently get 98-100 performance score on Lighthouse with dev builds
Either my frontend is weirdly good or Lighthouse is way too lenient with scores
Somehow I suspect it's the latter

Done with working on it for today, changed a bunch of stuff but probably forgot some things as well.
otherworldtelevision.com
Feeling pretty good about it so far, it's probably utter garbage but even on my phone it's easy to read even if some links are a little messed up for some reason (something to work on tomorrow).

Meant for you.

haven't really used Svelte before, but just saw the 3.0 announcement and that presentation from that guy made a lot of sense.
svelte.dev/blog/svelte-3-rethinking-reactivity
Especially the part about React. It's kind of crazy how it's ok to redeclare all the parts of the component each update.

>inb4 meme framework of the month

Its all Azure now

For a library that worries so much about performance, v2 doesn't look anything to write home about
Not sure about v3 though
Vue already does reactivity, and allegedly Vue 3 is gonna have huge performance improvements due to the adoption of ES6 proxies

Attached: 1_e_eCp8EQQqONdtBFuN7csQ.png (654x661, 134K)

interesting, when is that from?
I was looking at it just new and the svelte version is much newer, while all the other ones are tested with older versions?
I wonder how applicable that is to real world cases and especially how the user experience ends up being.
Like that example in the video with the text input element and the sync/debounced/async updates. I am sure if you test the raw performance, then the sync update is still 'fast' and gets as lot of shit done in a few ms, but the UX was obviously really affected in that case as everything was blocked and briefly unresponsive.

Here is another test with even stranger results.
medium.freecodecamp.org/a-realworld-comparison-of-front-end-frameworks-with-benchmarks-2019-update-4be0d3c78075
Svelte and React behind Angular even, which I find hard to believe.

Attached: fsdaf.png (866x782, 97K)

So I'm trying to make a lambda function in AWS that calls back a specific part from an Item from a DynamoDB table, but I only managed to callback a whole row from my Table. How do I callback a specific item, and better yet turn that Item into a variable?

September 2018
Angular in general is usually decently fast if you know how to optimize the code

Good question here.

I'm also interested to know.

Javascript front-end testing is a PITA to be honest.
The only acceptable way seems to do end-to-end testing with something like Selenium, it works extremely well but it's pretty slow.

Attached: 25a7b5d1d8eed899e879a096d7d73e8d47feba96.jpg (541x541, 51K)

Only Indians still use IE8, or pretty poor people

Attached: 4fd9f5b9fcd61ce6f984d1245bb07785.jpg (312x223, 21K)

Yeah, sounds awesome indeed.
I'll wait a little bit before hopping on the hype train, just to make sure that Svelte is here to stay.

Attached: e52f55c896695c0ba1f4ea7ba6755c67.jpg (460x575, 97K)

I'm trying to generate a random number between 1 and 3 but sometimes this code gives me number >3 (3.1, 3.5, 3.9...) why is that ? What's a better way to achieve what I'm trying to do ?
var number = ((Math.random() * (3 - 1 + 1)) + 1).toFixed(1);

Cause (3 - 1 + 1)) + 1 = 4 user.

Attached: de282940bcf5b0bcffae10e311c14c4f74efd1d9.jpg (601x508, 48K)

>Math.random()
This user. Math.random() will return a floating number between 0 and 1.
So if you multiply it by 4 or more, you could get a number equals to 4 or more.

Attached: 572820d7a280513e3da9f8cc00b895da.jpg (612x575, 136K)

hey frens can someone here help me to use ajax to call a php function on the click of a button?
im just trying to use a button to run an insert query or drop query depending on the innerHTML of the button

It works in jsfiddle but not in React, what gives

>react
out of my reach ;_;

Do your own homework.

Here's some help, research these on MDN.
Add a click event to your buttons, check its innerHTML, then use fetch to send data back to your php file.

Knowing how to look stuff like this up is a crucial skill, learn it.

nvm fixed it, for some reason i cant style "react components" themselves.

I should precise if anyone has this issue, you cant style them by adding classe to them.

Am I weird for hating JSX but loving Vue's single file components?

JSX is literally HTML but with className instead of class.

Try
( Math.random() * 10 % 2 + 1 ).toFixed()

Whatever you like, there will be others trying to tell you, that you are absolutely wrong and your stack is horrible and if you don't want to be an absolute shitter you should clearly use XYZ instead.
Imagine that level of insecurity.

i dont get the point of hating something like jsx
but if you like something else who cares

do modern web devs use css grids or html tables to make grid-like layouts?

Test

grid & flexbox

Hello, sorry for the stupid question I've literally never designed a webpage before, I'm using html5 and I can't for the life of me figure out how to make the canvas stick to the right side of the with the buttons sticking to the left half. The text boxes always appear either over or underneath the canvas.

Attached: nword.png (1583x745, 10K)

jsfiddle it, meanwhile, try with the flex properties

put your buttons in a container, then put that container and your canvas into another container and flexbox it.

developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

Great improvements man, job well done.

Install Svelte 3
svelte.dev/blog/svelte-3-rethinking-reactivity

I've been preaching the good word about svelte on here for months, finally you faggots are catching on.

jokes on you im not even a webdev. i just saw the news on HN and checked the video out.
lmao

the jokes on you, as soon as you entered this thread you became a webdev

oh no i'm retarded

congratulations, enjoy your newfound life of using node_modules folder to pleasure yourself

The problem with Svelte is that it has no ecosystem to speak of right now, it's fine if you want to use it in pet projects, but for anything serious, heh
I took a quick look at the tutorial for v3 (incidentally, it's strikingly similar to Vue + vue-loader) and it uses some weird ass syntax for some stuff (labels to define reactivity, exports to define a component's input, etc.). I suppose it's a necessary evil if you don't want to force any kind of structure on the s the users write

How far can I go by using just pure js without any frameworks?

As far as you want
You'll probably have to open a wheel reinventing factory on the way there, but if you enjoy the journey more than the destination, more power to you

anyone have a torrent of colt steel's udemy course? cant seem to find it in my normal places...

What is a good place to get free icon images?
Most free services require credit to the source.

I have a SQL question:

For this example, let's say my database has two tables: reports, and items. Each report has some items associated with it (and each item belongs to a single report). In the reports table, each one has an id, as well as some other fields. In the items table, each one has a foreign key to its report, an id unique within that report, and some other fields.

What I need to do is be able to update a report with new data and new/updated items. So I need to modify one row within the report table, potentially modify multiple rows within the items table, and potentially add new rows to the items table (depending on which ones already exist).

Is there any way of doing this in a single query? Or how would I do this as efficiently as possible.

Attached: twemoji_edit_cat_thinking.png (240x240, 12K)

jr fullstack dev here. Got my internship with only knowing shitty html and very shitty CSS but was very dedicated at learning and a very successful agency that makes really custom wordpress sites and the occasional app took the chance on me.

I go through phases of being so motivated to learn and coding 10-12 hours a day and wanting to get better to phases where I fucking hate work, I hate the commute and I hate code but the quality of life that it offers me is so good.

Going through a motivation phase but I just got out of a slump of hating this stuff.

Does everyone else who's not a jr go through this as well? This career you're always learning and have to learn to keep your skills sharp but is it just because I'm a jr and learning so much at one time? Learning 2 stacks at once is very time consuming but I wouldn't want to just be a frontend or backend dev. I wanna do fullstack or nothing.

Attached: 600px-054Psyduck.png (600x600, 168K)

Literally just 9 bucks right now