In dit bestand kan u mijn werken voor het vak Webtech 3 [YP5536] raadplegen. Voor vragen kan u mij DM'en op @LauDeLombaert
- 1. Portfolio Laurens De Lombaert
- 1.1. Table of Contents
- 1.2. Classes
- 1.3. MongoDB University
Team 6 repo: https://github.com/laurensdelombaert/laboTeam6
Codepen: https://codepen.io/laurensdelombaert/pen/vdzBEr Upload test domain: http://laurenk170.170.axc.nl/webtech/grids/watis.html
Team 11 repo: https://github.com/laurensdelombaert/laboteam11
Article about ECS6 for loops: https://hacks.mozilla.org/2015/04/es6-in-depth-iterators-and-the-for-of-loop/ New in ECS6 website: http://es6-features.org/
Codepen: https://codepen.io/laurensdelombaert/pen/LQqJQM
Github Repo: https://github.com/laurensdelombaert/webtech-portfolio
Github Repo (watis branch): https://github.com/laurensdelombaert/laboteam11/tree/watis
Heroku app: https://laurensdelombaert-kweeni.herokuapp.com/kweenie/wat-is-express-js-en-waarvoor-dient-het
Github Repo: https://github.com/laurensdelombaert/webtech-sockets
Heroku app: https://growl-sockets.herokuapp.com/
- Fade in animation on loading pages
- Responsive CSS
- SVG Circles for showing %
- Circles are animated with transitions
- Visual feedback for voting
- If you can vote, options will transition to a green bg.
- There will be an animation for UX if you vote as well.
- If you can't vote, after the first attempt this transition will be red.
- There will be a shake animation as well to show you can't vote.
- If you can vote, options will transition to a green bg.
- After inserting the last answer, a new answer field will appear.
- Thus you can create infinite answers for a poll
- You can vote only once with localhost
- not waterproof without login system
- The form will not write the data over primus if you didn't fill in the question and at least two answers
- Not correctly filling in will add feedback to the invalid fields.
- Placing the question will show a feedback dialog, including animations.
- ... (see code)
After the Sass and BEM classes I've been working on converting my existing projects with these standards. To prove my skills and understanding I shall be writing the css of my app for Product Lab with Sass and BEM.
During this week I've learned a lot about efficient build tools through Gulp. Instead of having to do a lot of tasks manually each time while coding, most processes can be automated.
As a starter, I've learned how to auto compile SASS (Pre-CSS) to CSS and to compress it live while working on the styling. From this point I've begun researching other possibilities of Gulp by extending my CSS watcher task. I've discovered about adding sourcemaps to the pipelines for inspecting with the original source code in my browser.
By working more with the CSS buil dtools, I was daydreaming about previous classes from webtech on my way home. I remembered the talk about Post-CSS in the road map for front-end web developers and I got the idea to mix Pre-CSS and Post-CSS into one build tool.
When I got home I immediately started experimenting with this and doing some research. Eventually, I discovered CSSNano, which was in benchmarks among the best minifyers for CSS. I also got to learn about CSSNext, allowing to write future-proof CSS, with backwards compatibility to even Internet Explorer 10. There seem to be countless of other post-processors as well, like ellipsis helpers and autoprefixers, so this will be very interesting to stay researching about!
In one of our first weeks in this course, we've learned about ES6 to enhance our JavaScript skills to the modern standards. Although this could be sometimes tricky for support old / non green browsers, there was a solution for this: namely Babel.
After investigating about CSS gulp tasks, I became interested to see if there was anything build for implementing Babel into my gulp flow. From here I've added Babel with the same sourcemap pipelines to some of my projects. An interesting extra I've learned from here was concatenating multiple files into one, to save HTTP requests with one minified file.
By going through more and more research about build tools, I discovered BrowserSync by accident. BrowserSync intrigued me to research more about it, as the tool offered automatisation for browser previewing with even PHP systems, across multiple devices!
I've tried this out past midnight and got my WIP for Product Lab on localhost working across my whole home network and my WiFi. I couldn't get the live reload working yet for my files, but I was simply stunned by streaming my localhost across my network.
To keep improving my knowledge about build tools I've been searching a lot of blogs and social media channels to follow writing about CSS, JS and build tools, so I can keep learning new and interesting tools to improve my work flow.
To help both the development and deployment of Node focussed apps, I've learned to use the NPM config package. This package easily allows you to create configurations in either JSON or YAML. Although we've learned a bit about YAML during our first Drupal lessons, I've chosen for the JSON format for this class.
As a result, instead of being required to update your MongoDB connection, Node is now being automated to switch between either the local or remote MongoDB.
Together with Sara Breugelmans and Midas Van Espen I've teamed up in the last months to re-create Kweeni. For this project we've bundled our skills from this semester in NodeJS, ExpressJS, ECS6, MongoDB and more to go the extra mile and beyond for finishing this boss task in the end!
Paragraphs in this section are copied from the official Syllabus from MongoDB University to better display the topics I've learned each week.
Introduction to MongoDB, Compass, and Basic Queries
Query operators: element operators, logical operators, array operators, and the regex operator.
Any topic in this course might be addressed in the final exam.
Introduction to MongoDB and the Node.js driver; Installing MongoDB; Installing Node.js and using NPM; Introduction to the Mongo Shell, JSON, BSON, and the MongoDB query language; Introduction to building web applications using Express
Mongo Shell, Query Operators, Update Operators and a Few Commands
Deeper dive on the Node.js driver; CRUD operations in the driver; Cursors; writing applications in the driver
Patterns, Case Studies & Tradeoffs
Using Indexes, Monitoring And Understanding Performance. Performance In Sharded Environments
The aggregation pipeline; pipeline stages; expressions; accumulators, and best practices
Drivers, Impact Of Replication And Sharding On Design and Development.
In this project we put together everything we've covered through the course to build a complete application backed by MongoDB.
