· 6 years ago · Aug 28, 2019, 07:14 PM
1inspirational sites: Stripe, Zero Financial, Crypton Trading, KIKK, Epicurrence. https://yle.fi/uutiset , https://systemspace.link/ , https://rahul.io/
2
3
4web flex grid:
5
6https://www.youtube.com/watch?time_continue=939&v=7kVeCqQCxlk
7
8grid game:
9http://cssgridgarden.com/#es
10
11cssgir.io
12https://cssgrid.io/
13https://courses.wesbos.com/account/access/5b6b48b75ed929156ce47918
14
15/*Grid resources example page*/
16https://gridbyexample.com/
17/*Complex grid example*/
18https://jsfiddle.net/n3d07eoL/1/
19
20flex:
21
22https://css-tricks.com/snippets/css/a-guide-to-flexbox/
23
24
25MERN, pay per view
26
27https://www.udemy.com/mern-stack-front-to-back/
28
29No JS
30http://youmightnotneedjs.com/
31https://jsfiddle.net/d57k1tvq/
32
33/*Security hash passwords*/
34https://security.stackexchange.com/questions/211/how-to-securely-hash-passwords/31846#31846
35 -/*in mongo*/
36 https://stackoverflow.com/questions/5021456/how-does-mongodb-avoid-the-sql-injection-mess
37 /*cybersecurity thread*/
38 http://boards.4channel.org/g/thread/72461158#p72461158
39 -/cyb/ + /sec/ - CYBERPUNK/CYBERSECURITY GENERAL
40Websockets:alternativa a ajax para polls
41 https://www.html5rocks.com/es/tutorials/websockets/basics/
42
43/*Web sockets PHP*/
44Vanilla :
45- https://www.php.net/manual/en/book.sockets.php
46Libraries / Frameworks :
47- https://github.com/reactphp/
48- https://github.com/amphp/
49- https://github.com/ratchetphp
50- https://github.com/kraken-php/
51C Extensions :
52- https://github.com/swoole/swoole-src/
53- https://github.com/concurrent-php/ext-async
54
55/*non PHP websockets*/
56You have to run a persistent server so the traditional php-fpm approach won't work. But you can use a framework like https://reactphp.org/ (not to be confused with the react ui library).
57It will be easier to do this with node.js though. You'll usually need to know js for the clientside anyway.
58
59
60jsfiddle, javascript toggle classs+ transitions
61http://jsbin.com/zalutasixa/edit?css,js,output
62http://jsbin.com/runegigodu/edit?css,js,output
63
64
65php:
66if you are using mysql database or mariaDB, use the Mysqli class.
67but i would recommand using PDO, so you can switch between databases without changing any code.
68
69if you wanna do something more secure, use a Database Abstract Layer such as Doctrine DBAL, Illuminate Database or Zend DB.
70
71
72Mysqli : https:://secure.php.net/manual/en/book.mysqli.php
73PDO ( Php Data Object ) : https://secure.php.net/manual/en/book.pdo.php
74Doctrine DBAL : https://www.doctrine-project.org/projects/dbal.html
75Zend DB : https://zendframework.github.io/zend-db/
76Illuminate Database : https://github.com/illuminate/database
77
78https://secure.php.net/manual/en/mysqli.prepare.php
79- https://www.phptherightway.com/
80- https://phpbestpractices.org/
81- https://www.airpair.com/php/posts/best-practices-for-modern-php-development
82- http://phpcheatsheets.com/
83
84------------------
85
86
87/*hosting - server*/
88https://aws.amazon.com/es/ec2/
89Yeah, look up amazon ec2, you can choose a linux distro (I chose ubuntu because I'm retarded) and you pay almost nothing to keep it up and running. I came from digitalocean, which is a crazy 5 bucks a month, even when the server's idle, AWS costs 15 cents for an idle month, it's great.
90
91/*Updated PHP documentation and links*/
92https://www.reddit.com/r/php/
93
94frontend:
95 frontendmasters.com
96sololearn.com
97marksheet.io to learn html/css
98freecodecamp.com to practice
99javascript.info
100
101
102css-background-blur-backdrop:
103https://codepen.io/anon/pen/GXjLNe
104
105
106css-tricks:
107https://www.youtube.com/watch?time_continue=1374&v=3ikye7Qc7Ak
108
109css-tricks-path animation:
110https://css-tricks.com/svg-line-animation-works/
111
112/*Path svg animation*/
113https://jakearchibald.com/2013/animated-line-drawing-svg/
114
115
116developers-ajax-async-promise
117https://developers.google.com/web/fundamentals/primers/promises
118
119
120js-advice:
121Stop being lazy when writing code. One big problem that I see with new programmers is that once they've taken all the time to actually write their shitty code,
122they are so invested in the fact that it's doing something that they don't want to throw it away. You should always be writing drafts to throw away. Always, always,
123always. This is why I really think that typing speed can actually be a significant obstacle for the careers of some programmers.
124
125/*js advice, before touching angular/react*/
126Promises, closure, classes, callbacks, async/await, all of es6, map/filter/reduce, literally anything API related etc..All of these are mandatory before you even bother using react/vue/angular properly.
127
128Fail fast.
129
130Know your tools. This one is kind of a no-brainer, but whoever wrote the example I worked on fundamentally doesn't understand how promises work or how they're supposed
131to be written idiomatically, and it's obviously reflected in their work. I've learned about promises about to the level of how they fit into category theory, and how they're
132basically monadic something-or-other, and I could certainly stand to learn more theory and novel usage. Read other peoples' code. Look at the code of dependencies you're using
133that you think are well-designed.
134
135Javascript is by far best when written in a declarative, functional style. Make sure that you know what these things mean: declarative style, functional programming, functional
136decomposition, immutability, pure functions. Once you understand why pure functions are amazing and side-effects are the devil, then you'll be a higher-level programmer.
137Especially when you're still a rookie, more functions is usually better.
138
139Learn react and redux, even if you like a different framework more or don't want to use them for projects. Just go read the docs for them, even. It will make you a better programmer.
140Especially redux. If you want to REALLY be better just from reading some docs that you probably won't totally understand, read the docs for re-frame (clojure).
141
142/*JS guide*/
143https://github.com/P1xt/p1xt-guides/blob/master/deprecated/job-ready-javascript-edition-3.0.md
144
145
146/*IE older versions VM*/
147http://xdissent.github.io/ievms/
148
149
150/*React super props*/
151https://overreacted.io/why-do-we-write-super-props/
152
153/*react talk*/
154https://www.youtube.com/watch?v=nLF0n9SACd4
155
156/*reac guides*/
157https://www.youtube.com/watch?v=sBws8MSXN7A
158https://www.youtube.com/watch?v=Ke90Tje7VS0
159https://www.youtube.com/watch?v=DLX62G4lc44
160
161/*react spa*/
162https://www.youtube.com/watch?v=rTjiCnFyA3Q
163
164/*JS ARROW FUNCTIONS + ADVICE*/
165Some concepts can be difficult to grasp, I agree; so if you're ever confused, just go to MDN, they have great examples and explanations. One big thing I can help you with is arrow functions.
166
167// Arrow functions can be used to replace normal function declarations in **most** (read the end of the post) cases Ex:
168const foo = function(bar) {
169 console.log(bar);
170}
171
172const foo = bar => console.log(bar);
173
174// There are some features unique to arrow functions though, such as implicit returns if there are no curly brackets...
175
176const foo = function(number) {
177 return bar * 2;
178}
179bar = foo(123);
180
181const foo = number => number * 2;
182bar = foo(123);
183
184const foo = number => {
185 return number * 2;
186};
187
188// ...and the need to wrap parameters in parentheses only if there's more than one
189
190const foo = bar => console.log(bar);
191const foo = (bar, baz) => console.log(bar, baz);
192
193
194
195I left out the fact that arrow functions aren't complete closures, since the value of , "this," doesn't change when using them, but they do maintain a lexical scope, so you can use them in higher order functions. Good luck, man, make sure you go over destructuring, spread and rest, and promises.
196
197
198
199/*Fixed background on browser*/
200https://codepen.io/Hurdler/pen/eLWMML
201
202
203/*Airbnb JS style guide*/
204https://github.com/airbnb/javascript#types
205
206/*js cheatsheet*/
207https://github.com/mbeaudru/modern-js-cheatsheet
208
209/*scroll snapping, no scroll*/
210https://css-tricks.com/introducing-css-scroll-snap-points/ /*introduces CSS breakpoints to the page scroll*/
211http://jsfiddle.net/5GCsJ/954/ /*hides scrollbar*/
212https://www.youtube.com/watch?v=a_FXil_kC5E
213https://codepen.io/martinwolf/pen/gpvGey
214https://www.youtube.com/watch?v=CtPDQudzjnM /*jQuery solution*/
215
216
217/*SCSS*/
218http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax
219https://www.youtube.com/watch?v=sCbXTrsl7NU
220
221
222/*Angular UI*/
223Angular Material
224
225
226/*clip-path*/
227https://www.youtube.com/watch?v=QY7Rj8aZcZk
228
229/*JS resources*/
230https://javascript.info/
231
232
233/*ES6*/
234https://www.youtube.com/watch?v=IEf1KAcK6A8
235http://es6-features.org/#ObjectAndArrayMatchingDefaultValues
236https://babeljs.io/docs/en/learn/
237
238>arrow functions
239Basically just a shorter way to declare inline functions, plus you don't have to give an explicit return keyword.
240So this
241
242[1, 2, 3].map(function(e, i, a) { return e * i; });
243
244
245is equivalent to
246
247[1, 2, 3].map((e, i, a) => e * i);
248
249
250
251Also it doesn't bind the 'this' keyword but you don't have to care about that most of the time.
252
253>When to use var, when to use const, when to use let, and why...
254Use const when you're going to initialize with a value and never change it. Use let the rest of the time. (Unless you need to only use ES5 and aren't transpiling with Babel, in that case only use var.)
255
256Let has block scoping, whereas var has function scoping. Block scoping means you can only use the variable in the block where you declare it. Blocks are created by functions, loops, ifs, etc.
257
258for (var i = 0; i < 3; i++) {
259 // do a thing
260}
261console.log(i);
262
263
264is valid, but
265
266for (let i = 0; i < 3; i++) {
267 // do a thing
268}
269console.log(i); // this statement causes an error
270
271
272is not. In the first example, 'i' is defined through the whole function, whereas in the second example, the 'i' is defined only within that loop.
273
274Generally, it's more intuitive that 'i' should go away after the loop is done, since we declare it inside the loop. Most other languages use only block level scoping, so it's weird that JS even has function level scoping as an option. It's just that it was the only option for a long time.
275
276
277
278
279
280/*ES6 more*/
281http://es6-features.org/#Constants
282https://babeljs.io/docs/en/learn
283
284/*Icons*/
285https://icomoon.io/app
286https://getuikit.com/docs/icon
287awesome font
288
289/*PHP interview questions*/
290https://www.tutorialspoint.com/php/php_interview_questions.htm
291https://www.sitepoint.com/php-job-interview-task-day-week-calculation/
292https://www.codementor.io/blog/php-interview-questions-sample-answers-du1080ext
293
294/*PHP ajax POST*/
295JS:
296
297fetch('/foobar', {
298 method: 'POST',
299 headers: {'Content-Type': 'application/json'},
300 body: JSON.stringify({
301 foo: 123
302 bar: null,
303 baz: ['a', 'b', 'c']
304 })
305})
306
307
308
309PHP:
310
311$foo = $_POST['foo'];
312$bar = $_POST['bar'];
313$baz = $_POST['baz'];
314-------------------------------------------
315
316
317/*job interview - back end questions*/
318https://github.com/arialdomartini/Back-End-Developer-Interview-Questions
319
320/*Applying advice*/
321https://warosu.org/g/thread/65029370#p65034692
322
323/*/wdg/ post*/
324----------------------
325You have to make a conscious effort to sit there and develop stuff. Set a time you know you will be free and do it for 1 hour every single night. It's like going to the gym.
326 The hardest part is starting.
327
328I don't recommend a basic bitch portfolio. Develop useful stuff that people would want to use. You can make some sort of community page or a SaaS. It also provides that opportunity
329for it to become popular so that you don't need a job.
330
331With that said, my portfolio hasn't mattered. I talk about the projects I have done but no one ever wants to see them.
332
333When it comes to applying you need to put your resume on Dice, ziprecruiter, and angel.co
334
335Work with the recruiters that call you because they will call you. Find places that use web developers and email them directly or go there and ask to speak to someone. When you're
336applying you are a salesman selling yourself....like a prostitute in a way.
337
338In the actual interview get them into a position to talk about their company. Smile and nod while they talk for 30 straight minutes and fire off questions related to what they were
339saying every time they have a pause. Every single time I interview I am told how great my interview went and how easy I am to talk to and I never even say hardly anything.
340--------------------------------------------------
341not him but what landed me my last job was
342>bought a .work domain (they're probably the cheapest domains)
343>get a VPS provider for the domain (something like digitalocean's $5 droplet is adequate)
344>get a email provider for the domain and use it for applying for the job position, (Zoho, atmail, etc) configuring it yourself is just not worth it because security config and avoiding
345>getting marked as spam is a pain.
346>use the VPS to host your web based projects. Demos are pretty cool and you probably want to put each project under its own subdomain so that visitors can actually use the projects that
347>you've created.
348>Keep learning and staying ahead of the curve. Watch tech conference talks on YouTube, apply the new concepts to your projects. Find projects that you want to do and just do them without
349>worrying too much about the tech stack/frameworks.
350
351-------------------
352/*SPA menu active scroll*/
353https://jsfiddle.net/cse_tushar/Dxtyu/141/
354
355/*History ajax calls pushed to URL bar and back browser*/
356https://developer.mozilla.org/en-US/docs/Web/API/History
357http://blog.teamtreehouse.com/getting-started-with-the-history-api
358
359/* higher order functions*/
360https://eloquentjavascript.net/05_higher_order.html
361https://medium.com/angular-chile/programaci%C3%B3n-funcional-con-javascript-higher-order-functions-map-d5a33f7d39e0
362
363
364/*flexbox examples*/
365https://codepen.io/anon/pen/zmKvpa?editors=0100
366
367/*Animated horizontal tabs*/
368https://codepen.io/anon/pen/jeBYQw
369
370/*Tutoriales javascript*/
371https://javascript30.com/
372
373/*js unselectselect boxes like a boss*/
374https://jsfiddle.net/s8w9pn21/
375
376/*"ajax" promises then searchbar autocomplete*/
377https://www.youtube.com/watch?time_continue=362&v=y4gZMJKAeWs
378
379/*Web Dev roadmap*/
380https://github.com/kamranahmedse/developer-roadmap/blob/master/readme.md
381
382/*Lrn2 react*/
383>difference between props and state
384>how to update state
385>how to pass props to other components
386>knowing when renders occur and how to control when renders happen (shouldComponentUpdate)
387>knowing the purpose of the lifecycle methods (constructor, componentDidMount, componentDidUpdate, getDerivedStateFromProps, componentWillUnmount)
388>importing/exporting your component
389>Using JSX
390
391
392/*SCSS without SCSS*/
393:root {
394 --some_color: #FA6607;
395 --a_size: 123px;
396}
397
398.some_class {
399 background: var(--some_color);
400 width: var(--a_size);
401}
402---
403 they can be modified at runtime using JS:
404
405document.body.style.setProperty("--some_color", "blue");
406---
407https://www.w3.org/TR/css-variables-1/
408
409/*CSS access attribute data*/
410https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
411
412/*z-index.info*/
413z-index, but z-index only works if the element has a position relative/fixed/absolute/sticky
414
415/*CSS alignment, float, grid, flex quick review*/
416https://www.youtube.com/watch?v=r54XR8KjA3A
417
418/*Git lense for VScode*/
419https://gitlens.amod.io/
420
421/*Clip Path svg*/
422https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
423
424/*Node express set*/
425
426here's an untested guide but will give you the right direction
427
4281. Install node https://nodejs.org/en/download/
4292. Create a folder and name it anything
4303. Go in the folder and type "npm init"
4314. Download the npm express package
432
433npm install express --save
434
435
4365. Create index.js and index.html in the folder
4376. Open index.js and configure the express server to send the file "index.html" if anyone visits the "/" route on the server
438
439// index.js
440var express = require('express');
441var app = express();
442
443app.get('/', function(req, res) {
444 res.sendFile('index.html');
445});
446
447
448
4497. Configure your index.html file to POST to the server the file contents you desire
450
451<form method="post" action="/updateFileContents">
452 <input type="text" name="fileContents" />
453 <input type="submit" />
454</form>
455
456
457
4588. Configure API routes for reading and updating the file
459
460app.post('/updateFileContents', function(req, res) {
461 // Get "file_contents" key from form.
462 const { fileContents } = req.body;
463 res.writeFileSync('./file.txt', fileContents);
464});
465
466app.get('/getFileContents', function(req, res) {
467 const fileContents = fs.readFileSync("./file.txt", "utf8");
468 res.json({ fileContents });
469});
470
471
472
4739. Consider adding in javascript for fetching the "/getFileContents" route or rendering it inside your index.html with a view templating engine
474
475
476/*node postgres setup*/
477https://blog.logrocket.com/setting-up-a-restful-api-with-node-js-and-postgresql-d96d6fc892d8
478
479--------------------------------------------------------------------------------------------------------
480 /*Save as w3c*/
481https://eligrey.com/demos/FileSaver.js/
482
483---/*Preguntas de entrevista js*/
484/*isPalindrome*/
485https://jsfiddle.net/bs16ofun/2/
486https://jsfiddle.net/zhs63on0/
487/*:not() CSS selector*/
488* :not(span):not(div):not(pre){
489 background-color:red;
490 color:yellow;
491}
492
493/*Graficos de barras etc d3.js*/
494d3.js
495
496
497/*Free udemy courses*/
498https://www.freetutorials.eu/
499https://freecoursesite.com/1-the-web-developer-bootcamp/
500
501/*CSS remove all dependencies all:inital*/
502https://codepen.io/anon/pen/JexJmo
503
504/*Video fast play ffmpg compression*/
505https://trac.ffmpeg.org/wiki/Encode/H.264#faststartforwebvideo
506-------------------------------------------------------------------
507You can just remux it without reencoding the video stream.
508
509ffmpeg -i video.mp4 -c copy -movflags +faststart video-fast.mp4
510-------------------------------------------------------------------
511
512/*Icons technologies/stacks*/
513http://konpa.github.io/devicon/
514
515/*Algorithm challenges for interviews*/
516https://www.hackerrank.com/
517https://www.codewars.com/ // Can you solve the 8kyu and 7kyu challenges? That's pretty much what it takes to get a junior position.
518
519/*JWT JSON Web Token - Alternative to sessions*/
520https://float-middle.com/json-web-tokens-jwt-vs-sessions/
521
522/*FPS HTML CSS*/
523https://codepen.io/elad2412/pen/hBaqo
524
525/*Secure login PHP MySQL*/
526https://www.wikihow.com/Create-a-Secure-Login-Script-in-PHP-and-MySQL
527
528/*REST API and other protocols*/
529https://www.bau.edu.jo/UserPortal/UserProfile/PostsAttach/10617_1870_1.pdf
530
531/*JS PHP Streaming*/
532https://www.w3schools.com/hTml/html5_serversentevents.asp
533https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events
534
535
536/*NoSQL databases - DynamoDB*/
537https://www.youtube.com/watch?time_continue=1095&v=HaEPXoXVf2k
538
539/*JS fetch then asynchronous*/
540https://jsbin.com/fipafoyila/edit?js,output
541
542/*API authenitfication jwt tokens cookies*/
543https://dzone.com/articles/api-security-ways-to-authenticate-and-authorize
544
545/*Mobil, numeros, sms*/
546https://www.receivesms.co/
547
548/*password salt hashing with PHP7.2 argon2*/
549https://framework.zend.com/blog/2017-08-17-php72-argon2-hash-password.html
550https://wiki.php.net/rfc/argon2_password_hash
551
552/*CSS @Supports - test if particular css styles are supported and apply specific styles to them if they don't*/
553https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
554
555/*scroll-less scroll event js mousewheel wheel*/
556https://stackoverflow.com/questions/4326845/how-can-i-determine-the-direction-of-a-jquery-scroll-event/24815216
557
558/*Global variables - bad Closures -good js javascript*/
559https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
560Not really.
561Closures is one of the most important Vanilla JS features.
562
563A closure is just a fancy way for creating scope in JS by the way. If you share a variable between just two functions, you can create a closure around them and they can share variables in their own little scope.
564
565Also, you can, and probably should, have components (the idea, not the React class) even in Vanilla JS.
566
567It's better to have pupose specific components talking to each other instead of god object abominations that do everything at once and therefore need to see everyone's variables.
568---
569
570/*cookie EU law*/
571https://cookieconsent.insites.com/
572
573/*SQL style guide*/
574https://www.sqlstyle.guide/
575
576/*password over https then hashing*/
577You should send it over HTTPS. It's not technically in plaintext, since it's encrypted by the TLS. In any case,
578yeah, the server must receive the plaintext version of the password in order to verify/store it, and HTTPS is
579perfectly secure (as long as the user's device is secure).
580
581Hashing on the client side in place of the server side is actually insecure, because suppose your password
582table leaked: an attacker would be able to simply send a hash out of the table to your server to log in as any
583user. That would defeat the whole point of storing hashed passwords in the first place.
584-------------------------------------------------------------------------------------------------------
585
586/*EMACS tutorial*/
587https://www.youtube.com/playlist?list=PLX2044Ew-UVVv31a0-Qn3dA6Sd_-NyA1n
588
589/*Animation CSS libraries for animation*/
590https://greensock.com/gsap
591https://animejs.com/
592
593
594/*design*/
595https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886
596
597/*desing inspiration web*/
598https://dribbble.com/
599https://www.uplabs.com/
600https://www.behance.net/
601http://www.goodweb.design/
602https://onepagelove.com/
603https://www.awwwards.com/
604https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886
605
606
607/*cheap hosting*/
608https://bluehost.com
609
610/*docker*/
611https://www.youtube.com/watch?time_continue=1&v=wi-MGFhrad0
612
613
614/*Mail PHP SMTP library*/
615PHP's mail() function basically shouldn't exist these days. It "works" by calling the sendmail binary, and more often than not arbitrary programs aren't allowed to send emails, and where an arbitrary hosts allows it, it's going to end up in spam filters.
616
617Look up an SMTP library and send email properly.