/wdg/ - Web Delevopment General

it's Sunday edition

Previous:
boards.Jow Forums.org/g/thread/67388808/

>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 (independent of your browser choice)
freecodecamp.com
codecademy.com
hackr.io

>Further resources
developer.mozilla.org/en-US/docs/Web - excellent documentation for HTML, CSS & JS
github.com/kamranahmedse/developer-roadmap - Frontend+Backend learner-path suggestions
[YouTube] Web Development in 2018 - A Practical Guide (embed) {embed} - Web Development in 2018 - A Practical Guide [YouTube]

jsfiddle.net - Use this and post a link, if you need help with your HTML/CSS/JS

>PHP resources
pastebin.com/gfBPg24A

Attached: 1535710644901s.jpg (250x167, 7K)

Other urls found in this thread:

codepen.io/pen/
stackoverflow.com/questions/35711724/upload-progress-indicators-for-fetch
discord.gg/bWZVR5
pastebin.com/gfBPg24A
api-platform.com/
packagist.org/
discord.gg/wdg
codepen.io/user/pen/xaqBqe
d35aaqx5ub95lt.cloudfront.net/images/flag-sprite14.svg
d35aaqx5ub95lt.cloudfront.net/images/progress-sprite12.svg
d35aaqx5ub95lt.cloudfront.net/images/splash-sprite.svg
twitter.com/AnonBabble

How else can I encode a string in JS besides atob()? Like is there some kind of hashing function I can use

How the hell do I nest


SVG Animated Birds













inside of grid-item1 in this



2


5
6

Attached: 1318500615267.png (400x400, 4K)

Like...in HTML, or through JavaScript?

html

You just place all of what's in code block 1 within in code block 2

For what purpose

Cos I want to use localStorage as my game's user save location but I don't want the user to be able to edit the save file so I'd like to store it in localStorage as a kind of encrypted string and then decrypt it when necessary through the code I write

>I don't want the user to be able to edit the save file
You've already lost. The user has all your source code and a browser console.

Other than that lz-string is perfect for your task.
Designed for localStorage webshitgame save files. Extremely fast (good enough for mobage) and good compression when outputting binary.

Almost got it working
codepen.io/pen/

Anyone know why the animation is overlapping?

>You've already lost. The user has all your source code and a browser console.
The user gets a minified script so they can't read a thing unless they really, really, RE-EE-HEALLY want to

Copypaste on notepad++ , format.
Wow , that was hard. Am i a hacker now?

Please. Modern browsers have extremely powerful debugging tools, even if YOU don't know how to use them. Seriously, it is fucking trivial to step through what a website does with an item in localStorage.

The average computer-illiterate user won't be able to edit your saves, but anyone who has minimal webshit knowledge can. And they will spread that knowledge if other users ask for it. You have to accept that.

Or just click the "prettify" button on your browser debugger.

Cookie Clicker uses localStorage

Learn yourself some hacking user
Open thread in firefox
Open inspector
Select debugger
Navigate to core.min.1014.js
Click on the braces at the bottom of the inspector window

Now you're a hacker user

Attached: Screenshot from 2018-09-02 21-43-16.png (2557x1265, 202K)

You're worrying about

My script is still actually very tricky to follow. It's laid out nicely but the variable names are all letters and there are random method calls everywhere. God bless Babel & Webpack

Now I'm interested, post the code

...

Nice try, hackerman

I am in a good mood today however, so yes, I will grant thee an insight into my top secret code and how it looks when re-formatted via the browser debugger

Attached: window_into_my_world.png (435x284, 11K)

>My script is still actually very tricky to follow
That's why we have debuggers.
You can obfuscate all you want, you still actually need to read and write to storage, that can be hooked and read. Lots of people know how to read the source files for browser games, we've been doing it for years.

this. nobody is going to fuck with your site unless youare some huge corp like facebook or there is financial incentive.
using webpack in production mode bliterally makes your code unreadable unless you debug every function and physically note whats going on step by step.

You're joking right, all modern js looks like that because it's all been through a webpack or similar

>go into literally any discord
>like 15 people actually code
> the rest are just bloggers, writers, people who fuck around in codepen or some shit
>maybe like 50 of them use autismo shit like wordpress and never code but just install pugins
>literally everyone just talks about code, goes to school to learn to code (but never actually fucking write it) or read books about code

wtf are u doing, make something

So you're saying people like feeling good about themselves, appearing intelligent in a group, but don't like hard work. Yeah I've noticed this too user, that's why I hang out in this shithole, at least people are themselves sometimes

It doesn't even matter if your source is structured like shit, you double pajeet. Anyone who cares can just set their browser debugger to step through the code right before doing a save/load to quickly and easily identify what they need.

But in all likelihood, nobody will care enough to bother editing your precious saves. You also should stop caring. Just compress the saves if they're big.

I have a buddy on wechat who once or twice a month tells me everything he's learned in some online course and asks if we can form a machine-learning startup together to make millions. He doesn't really know what we'd be doing but surely there's gold in them thar hills!
The other day, I blew his mind by explaining what web servers were.

Anyone know if it's planned fetch getting a progress event?
I just read that you can finally abort requests, but progress would be neat too.

people making something have very little time to really participate in discords and all this
which is why a static forum is better, they can pop in whenever, provide input, and get back to doing whatever
if you try to do that in discord you miss a LOT of context and dont know wtf is going on

>Delevopment
Was that intentional? Sure fits the thread.

bazinga

Pardon me to post without doing my homework first but I'm asking for a recommendation. I'm looking for a library to plot graphs on a webpage.
Nothing fancy, just time series and histograms.
What's library that would do the job and likely still be maintained, say, 5 years from now?
(Interactive(e.g. display the value behind the curser location) and riceable appreciated but not required)

D3.js
Chart.js
Highcharts
Chartist.js
Pixi.js
CanvasJS Charts
AnyChart
ZingChart
Webix
Livegap charts

stackoverflow.com/questions/35711724/upload-progress-indicators-for-fetch

Are all of these safe to use in a 5 year period?
JavaScript frameworks change faster than I can cop

sure

Nothing is 5 years proof grandpa.
Learn to maintain your code.

Why does the wheel has to be constantly reinvented?

Attached: 1515647600051.jpg (599x563, 50K)

A rapidly changing environment is a good thing. It keeps the codemonkeys out. Why do you think web development is so white?

>JS
>keeps code monkeys out
ok

>JS is being swapped out
>it still has fierce competition with higher paying fields
containment languages are superior to everyone using java sweetie, wake the fuck up

redpill me on kubernetes

would JSX even be a thing if they put template strings in javascript

>codepen.io/pen/
You need to hit the save button, then I think that should give you a shareable link.

Javascript has template strings.

Discord /wdg/ server if you need help

discord.gg/bWZVR5

>>PHP resources
>pastebin.com/gfBPg24A

working on project so i may not be here as usual, but if you have any questions about php i'm here to answer them

don't close php tag when the file contains only php code.

Attached: 1430220587Screenshot-2015-04-28-13.29.15.png (1680x842, 212K)

Anybody here used Sails.js before? What's it like compared to Express?

why are you so passionate about php?

i love the language, i love writing clean good and teaching people how to do php .

i admire your enthusiasm, will take a look at your resources later

is PHP a sane choice if you want to develop some CRUD API bullshit app?

good
yes, i'm currently working on a project using zend expressive and doctrine, and i'm loving it.

there's other frameworks that are good for APIs, for example : Slim, Laravel, Silex, Lumen ... etc

if you are familiar with the modern JavaScript check : The API Platform ( api-platform.com/ )

but you can also go solo, there's no need to use a framework, you can just use some dependencies here and there.

check packagist : packagist.org/ and pastebin.com/gfBPg24A

so you work solo or for a company?

solo \_O-O_/

nice. but you have a lot of programming experience (programming since 12y) to be able to go on the freelance route.

not yet. there's always more to stuff to learn. and i'm not really good working with others.

>solo

so how do you make money?

>so how do you make money?
i sell drugs

Attached: 1530587612533.jpg (453x410, 88K)

you smuggle them through the Mediterranean sea?
since you live near there

yea

So i got this script that will automatically lock the background to the same position regardless of browser position/size, but can't figure out how to add a 1920 horizontal pixel offset and 100 vertical pixel offset to the background-position. Anyone got any ideas?

$(function() {
var
sx, sy, xp, yp, pn = [
["mozInnerScreenX", "mozInnerScreenY"],
["screenX", "screenY"]
];

for (var i = 0; i < pn.length; ++i)
if (pn[i][0] in window) {
xp = pn[i][0];
yp = pn[i][1];
break;
}

setInterval(function() {
if (window[xp] !== sx || window[yp] !== sy) {
document.body.style.backgroundPosition =
-(sx = window[xp]) + 'px ' + -(sy = window[yp]) + 'px';
$('#box').text(sx + " " + sy);
}
}, 5);
});

I know that this is a pretty open ended question but at what point did you feel ready to apply for your first codemonkey webdev job?

I know enough JS to throw together full stack web applications but often times, I find myself goongling shit that I'd consider to be pretty elementary because I simply haven't done something for a long time. I feel like while I can get the job done while I have documentation for reference, I'm not sure if I can bullshit my way through an interview or anything and I should just wait and keep going at it until it's second nature.

>jQuery in 2018

I'm trying to build a site on the youtube-dl npm package. But I can't require('youtube-dl') on the client-side .js file since require() is a server-side Node function. How do I use a Node package on client-side?

Just concentrate on making a shit-ton of stuff. Nothing complex, quantity over quality. And then apply.

i'm not sure but i guess using browserify or webpack ?

>make a really cool web app for senior project
>fell in love with web dev
>moved to new apartment without desktop
>only have a shitty t-60 that can barely run visual studio
>everytime I visit a well designed site I just want to code
>can't code without my desktop

idk lads im just rambling

>visual studio
almost had me

C# is the language of aristocrats

It was after finishing a book on ASP.NET MVC and doing the exercises. I barely knew a little about jQuery, and how to stitch together something with Bootstrap (of course, referencing it from the CDN, no build tools of any kind). This was years ago, as you can imagine.

>I find myself goongling shit that I'd consider to be pretty elementary because I simply haven't done something for a long time
>because I simply haven't done something for a long time
Well, of course you're going to forget shit you don't use. What are you expecting?
When you learn new things, take notes. If it's something complicated to understand, then make the effort of playing with it and maybe save some snippets with comments. Take pictures, make diagrams (even if it's on paper and then you take a photo), and make sure you document that thing nicely. Leave links to the official documentation in your notes too.
When you need to apply what you learnt again, go to your notes and use them. If you missed something and you had to check the documentation, write that down too.

Maybe there's some people in the world who can remember absolutely everything, I don't, and I haven't met anyone who does. Those who can must be really smart people, in the IQ sense.
But getting things done doesn't [always] require genius, but rather discipline, and sometimes humility. You can focus on learning by heart that 20% of your language/standard lib/framework that you use the 80% of the time, and fall back to your notes and/or your IDE (or text editor setup) in those other cases. If you feel overwhelmed, please remember that, and focus on that 20% and writing good notes.

C# would be perfect if they had come with the nullable types idea from the beginning and made it the default. It's still [way] better than most languages out there, though.

I seriously hope this is my last time working with WP, there's still a part of the site that I don't know where is coming from, not from the pages not from the database, it's a fucking mistery.

>there's still a part of the site that I don't know where is coming from, not from the pages not from the database, it's a fucking mistery.
jej

WP in it self is a mystery, everyday i wonder how it "works"

What exactly is the advantage of dynamic typing? I'm new to Javascript. You lose type safety and the variable declarations are alot less expressive. If you write out the expected type for your variable or function parameter, you lose the all conciseness you supposedly get from dynamic typing.

Because he's a pajeet.

Use TypeScript if you prefer having type safety. As for the why, really don't ask. JS was basically slapped together back in the day and it's only recently that it actually became enjoyable to write.

That's not how you do it, bro.

Here. If you want to join a BIG web-dev discord server (1345 members, 350+ online everyday, tens of active users everyday), go to

discord.gg/wdg

Yeah, we even got our own wdg-branded URL. :DD

See you on TCP, frens.

Attached: 1525917710129.png (1000x666, 331K)

real shit script you've got there my man

codepen.io/user/pen/xaqBqe

it's really unclear what you're even asking, is this what you want?

by the way, never write code like this. it seems like you're concerned with the number of characters you're using or something, but doing a really bad job of it, or maybe you're just retarded. you've managed to obfuscate your code to the point where it's unreadable, and therefore completely unmaintainable. never write anything like this in a professional environment.

kys

What should I look into if I want to run a Node script once every 24 hours /wdg/?

Cron jobs and node-cron

Attached: _.png (200x180, 13K)

If I'm building an App to run both on browsers and React Native, what's the general consensus: build it React Native first and then change whatever's necessary for the browser version or the opposite?

>never write anything like this in a professional environment.

But user, if no one else can read his code, then they can't fire him! It's FOOLPROOF

There is literally no advantage

Isn't designing for mobile first one of the principles of responsive design?

From someone that's worked on React Native projects for about a year:

1. Build using react-native-web first.
2. Wonder why animations aren't working on web.
3. Spend hours trying to fix UI inconsistencies across all platforms, reducing your app in to a generic boring UI that works across all platforms.
4. Realise that there's no actual cross platform navigation solution that translates to the web without creating your own solution.
5. Realise that in order to use native features on the browser and vice versa you need to create the library bindings yourself and have one common javascript API which no one has made yet, such as audio recording, bluetooth, GPS, accelerometer, etc.
6. Cry yourself to sleep realising that you now have spaghetti code everywhere just so that you could have cross platform support, with a bunch of Platform queries everywhere.

At least react-native-dom is being developed which actually implements Yoga (UI layout) and renders on a different thread but the drawbacks being huge bundle size and it's very early in development.

Fuck mobile.

I intentionally make my bundle.js 15 MB so those phoneposting faggots waste all their battery trying to parse my code.

Anyone ever tried using a sprite map with CSS? As in, you put all your images in one big images and then use CSS to show only the part you want. The only tutorial on CSS sprite mapping is a shitty W3Schools tutorial.

yes and it was a fucking nightmare that barely worked properly, just don't.

You're overoptimizing big time doing this, just use a CDN and minify images propertly instead

It's pretty good for optimising time till interactive performance though. Especially if you're going to display a lot of them on one page. For example here's Duolingo's country flags, all loaded as sprites

d35aaqx5ub95lt.cloudfront.net/images/flag-sprite14.svg

Here's also their other sprites

d35aaqx5ub95lt.cloudfront.net/images/progress-sprite12.svg
d35aaqx5ub95lt.cloudfront.net/images/splash-sprite.svg

>i was naive enough to put my product on an auction site before google had indexed my website page with google
>now google thinks i copied the product description so my website is completely hidden from many searches
>auction site doesn't remove pages until 4 months have passed, and even then google might remember the auction site as being the original source, and i'll have newer listings that will be around in 4 months from now
>have to rewrite the product description and instructions which i had almost perfected and condensed in the first place
how fucked am i
can i use the new description on the auction site after my website page has been indexed with the new description, or do i need separate product descriptions?

Attached: 1445133759360.jpg (708x664, 144K)

>selling finished websites
is that a thing? like..you just give all the code and the domain & server?

I think user is making their own website which lists some product but previously used the product description (copy) on ebay or something.

correct

Yeah it's an old piece of code that someone else wrote which is why I can't figure it out.

Thanks for the code, looks a lot cleaner. Works the same as the old one does though, so is it possible to horizontally offset the background-position with 2560 px to the right?

The problem I'm having can be seen in the image, basically the current script calculates the window position with monitor 1 as the starting point then applies the background with the position starting to the left. Which is why I was planning on simply offsetting it horizontally (and a bit vertically if needed).

Attached: background problem.jpg (1420x960, 622K)

just tweak this line until it does what you want
-(sx = window[xp] + 2560) + 'px ' + -(sy = window[yp - 100]) + 'px';

Thanks a lot user, works great!