https://vinceumo.github.io/devNotes/ Recent content in Home on devNotes Hugo -- gohugo.io en-gb Wed, 07 Nov 2018 13:21:02 +0000 https://vinceumo.github.io/devNotes/CSS/slide-stacking-effect-using-position-sticky/ Tue, 10 Sep 2019 23:00:00 +0000 https://vinceumo.github.io/devNotes/CSS/slide-stacking-effect-using-position-sticky/ Recently I was looking to create a slide (card) stacking effect on scroll. The closest resource I could find about this effect was Card Stack: Scroll Effect by Sanjeev Yadav. I wanted to look if I could recreate a similar effect only with CSS. Basic effect with position sticky Position sticky enables to position an element like position fixed relative to its parent until it reaches the boundary of the parent. https://vinceumo.github.io/devNotes/Javascript/yarn-upgrade-all-packages/ Fri, 23 Aug 2019 23:00:00 +0000 https://vinceumo.github.io/devNotes/Javascript/yarn-upgrade-all-packages/ yarn upgrade-interactive --latest https://vinceumo.github.io/devNotes/Javascript/map-filter-and-reduce/ Tue, 18 Jun 2019 23:00:00 +0000 https://vinceumo.github.io/devNotes/Javascript/map-filter-and-reduce/ Map The map() method creates a new array with the results of calling a provided function on every element in the calling array. MDN const numbers = [2, 3, 4, 5]; const numbersTimeTwo = numbers.map(x => x / 2); console.log(numbersTimeTwo); // [ 1, 1.5, 2, 2.5 ] Reduce The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value. https://vinceumo.github.io/devNotes/Dotnet/c-practice-katas/ Wed, 15 May 2019 23:00:00 +0000 https://vinceumo.github.io/devNotes/Dotnet/c-practice-katas/ Decode the Morse code Codewars /!\ No actual C# kata In this kata you have to write a Morse code decoder for wired electrical telegraph. Electric telegraph is operated on a 2-wire line with a key that, when pressed, connects the wires together, which can be detected on a remote station. The Morse code encodes every character being transmitted as a sequence of “dots” (short presses on the key) and “dashes” (long presses on the key). https://vinceumo.github.io/devNotes/Dotnet/c-101-cheat-sheet/ Tue, 14 May 2019 23:00:00 +0000 https://vinceumo.github.io/devNotes/Dotnet/c-101-cheat-sheet/ Introduction C# is an objected oriented language that runs on Microsoft’s .NET Framework, C# can as well be run on other frameworks (E.g. Unity) .NET is an open source platform to develop application Set up dotnet core Install In this article, I will use .NET core 2.2 but you can use the latest version if available. .NET core can be run on Windows, Linux and macOS. You can install the dotnet core SDK from Microsoft https://vinceumo.github.io/devNotes/Dotnet/c-practice/ Sat, 11 May 2019 23:00:00 +0000 https://vinceumo.github.io/devNotes/Dotnet/c-practice/ C# Sharp Basic Declarations and Expressions : Exercises, Practice, Solution Exercices link Exercise 1 Write a C# Sharp program to print Hello and your name in a separate line. Expected Output : Hello Alexandra Abramov class Program { static void Main(string[] args) { Console.WriteLine("Hello"); Console.WriteLine("Vince"); } } Edit in repl Exercise 2 Write a C# Sharp program to print the sum of two numbers class Program { static void Main(string[] args) { int a = 39; int b = 73; Console. https://vinceumo.github.io/devNotes/Javascript/webpack-4-bundle-scss-and-javascript-for-ssr-applications/ Sun, 05 May 2019 23:00:00 +0000 https://vinceumo.github.io/devNotes/Javascript/webpack-4-bundle-scss-and-javascript-for-ssr-applications/ Project structure Proj: | \---Content | +---js | | +---index.js | +---scss | | +---screen.scss | \---Dist | +---css | | +---screen.css | +---js | | +---index.js package.json { "version": "1.0.0", "name": "my-app", "private": true, "devDependencies": { "@babel/core": "^7.4.4", "@fullhuman/postcss-purgecss": "^1.2.0", "@babel/preset-env": "^7.4.3", "babel-loader": "^8.0.5", "cssnano": "^4.1.10", "css-loader": "^1.0.1", "cross-env": "^5.2.0", "file-loader": "^3.0.1", "mini-css-extract-plugin": "^0.6.0", "node-sass": "^4.12.0", "postcss-loader": "^3.0.0", "postcss-preset-env": "^6.6.0", "sass-loader": "^7.1.0", "webpack": "^4.30.0", "webpack-cli": "^3.3.2" }, "scripts": { "serve": "webpack --watch", "build": "cross-env NODE_ENV=production webpack" } } webpack. https://vinceumo.github.io/devNotes/Javascript/class-es6-template-use-at-dam/ Sat, 04 May 2019 23:00:00 +0000 https://vinceumo.github.io/devNotes/Javascript/class-es6-template-use-at-dam/ Javascript (Class based) project structure use at Dam Digital for SSR (server-side rendering) applications. You can use webpack or parcel to bundle your js project. This project structure helps, developers, to write more modular/reusable code. Project structure js: | \---modules | +---MyModule.js | +---vendors | +---index.js | +---global.js index.js import MyModule from ".modules/MyModule" const modules = { MyModule: new MyModule(), // Use default settings MyModule2: new MyModule({ // Or use optional settings to overwrite default settings }) }; document. https://vinceumo.github.io/devNotes/CSS/css-3d-scrolling-on-the-z-axis/ Thu, 21 Mar 2019 00:00:00 +0000 https://vinceumo.github.io/devNotes/CSS/css-3d-scrolling-on-the-z-axis/ In this article, we are going to create a small 3D scene, where the user can scroll on the z-axis. You can find the final code of this tutorial on github, and the demo if you follow this link. This article assumes that you already have some knowledge about CSS and JS. We are going to use CSS custom properties, if you are not familiar with this you can read CSS custom properties - Cheatsheet. https://vinceumo.github.io/devNotes/CSS/css-customs-properties/ Wed, 20 Feb 2019 00:00:00 +0000 https://vinceumo.github.io/devNotes/CSS/css-customs-properties/ CSS custom properties, also known as CSS variables. represent custom properties that can be declared and be called in your CSS. Declare a custom property in CSS To declare a Custom property in your CSS, you need to use the -- syntax: :root { --colorPrimary: hsla(360, 100%, 74%, 0.6); } Notice the :root pseudo-class selector, we can declare our variables globally using it. We can as well declare them using other selectors, they will be then be scoped in these ones. https://vinceumo.github.io/devNotes/Javascript/get-address-postode-city-with-google-map-geocoding-api-and-html5-geolocation/ Mon, 14 Jan 2019 00:00:00 +0000 https://vinceumo.github.io/devNotes/Javascript/get-address-postode-city-with-google-map-geocoding-api-and-html5-geolocation/ Exemple on how to get the user current postcode using Google map Geocoding API and HTML5 Geolocation (Navigator.geolocation). <script src="https://maps.googleapis.com/maps/api/js?key=[Your Key]" async defer ></script> (function() { document.addEventListener("DOMContentLoaded", event => { if (navigator.geolocation) { getCurrentLocation.location(); } }); const getCurrentLocation = { success: function(position) { const _this = this; const geocoder = new google.maps.Geocoder(); const latlng = { lat: position.coords.latitude, lng: position.coords.longitude }; let result = { error: false, value: "" }; geocoder. https://vinceumo.github.io/devNotes/Tools/regex-101/ Mon, 14 Jan 2019 00:00:00 +0000 https://vinceumo.github.io/devNotes/Tools/regex-101/ A regular expression, regex or regexp(sometimes called a rational expression) is a sequence of characters that define a search pattern. Usually this pattern is used by string searching algorithms for “find” or “find and replace” operations on strings, or for input validation _Regular expression - Wikipedia_ Cheat sheet Description abc… Letters 123… Digits \d Any Digit \D Any Non-digit character . https://vinceumo.github.io/devNotes/Sass/responsive-container-classes-with-scss/ Thu, 22 Nov 2018 10:51:05 +0000 https://vinceumo.github.io/devNotes/Sass/responsive-container-classes-with-scss/ SCSS input: @mixinmin($bp, $max: "null", $device: "screen") { @if $max == "null" { @media only #{$device} and (min-width: #{$bp}) { @content; } } @else { @media only #{$device} and (min-width: #{$bp}) and (max-width: #{$max}) { @content; } } } @function bp($bp) { @return map-get($breakpoints, $bp); } $breakpoints: ( na: 0px, // For BS grid xs: 320px, // Smartphone sm: 600px, // Tablets md: 900px, // Tablets Landscape and small desktops lg: 1200px, // Desktops xl: 1800px, // Large Desktop ); @function container($container-size, $true-val: false) { @return map-get($container-sizes, $container-size); } $container-sizes: ( sm: map-get($breakpoints, sm) - 30px, md: map-get($breakpoints, md) - 40px, lg: map-get($breakpoints, lg) - 50px, xl: map-get($breakpoints, xl) - 400px ); . https://vinceumo.github.io/devNotes/Sass/z-index-management-with-scss/ Mon, 19 Nov 2018 10:51:05 +0000 https://vinceumo.github.io/devNotes/Sass/z-index-management-with-scss/ // Set our z-indexes map $z-indexes: ( "up-btn", //60 "cookies-info", //50 "left-nav", //40 "footer", //30 "top-nav", //20 "content", //10 ); // Z function return the z-index value @function z($name) { @if index($z-indexes, $name) { @return ((length($z-indexes) - index($z-indexes, $name)) + 1) * 10; } @else { @warn 'There is no item "#{$name}" in this list; choose one of: #{$z-indexes}'; @return null; } } //------ .content { z-index: z("content"); } . https://vinceumo.github.io/devNotes/Dotnet/signalR/ Mon, 29 Oct 2018 16:50:00 +0000 https://vinceumo.github.io/devNotes/Dotnet/signalR/ SignalR is an ASP.NET library for real-time applications. It uses the WebSockets API: The WebSocket API is an advanced technology that makes it possible to open a two-way interactive communication session between the user’s browser and a server. With this API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply. The WebSocket API (WebSockets) - MDN SignalR comes pre instal with ASP. https://vinceumo.github.io/devNotes/Javascript/webextensionapi/ Tue, 23 Oct 2018 08:25:00 +0000 https://vinceumo.github.io/devNotes/Javascript/webextensionapi/ Browser extensions add features and functionalities to a browser. It uses web technologies such as HTML, CSS, and JS. Manifest.json The only file that a browser extension need is the manifest.json file. Using manifest.json, you specify basic metadata about your extension such as the name and version, and can also specify aspects of your extension’s functionality, such as background scripts, content scripts, and browser actions. MDN The manifest. https://vinceumo.github.io/devNotes/Javascript/vue-props-events/ Fri, 24 Aug 2018 10:07:00 +0000 https://vinceumo.github.io/devNotes/Javascript/vue-props-events/ The following examples show how to pass data between components in vue js, using props and custom events. Example 1: Props ParentComponent ==> ChildComponent See the Pen Vue js - Props example by Vincent Humeau (@vinceumo) on CodePen. Example 2: Events ParentComponent <== ChildComponent See the Pen Vue js - Events example by Vincent Humeau (@vinceumo) on CodePen. Example 3: Props and events ParentComponent <==> ChildComponent See the Pen Vue js - Props and Event example by Vincent Humeau (@vinceumo) on CodePen. https://vinceumo.github.io/devNotes/A11Y/avoid-keyboard-trap/ Tue, 21 Aug 2018 14:49:19 +0000 https://vinceumo.github.io/devNotes/A11Y/avoid-keyboard-trap/ The inert attribute is still into draft and no browser currently support it. The current draft currently states: A node (in particular elements and text nodes) can be marked as inert. When a node is inert, then the user agent must act as if the node was absent for the purposes of targeting user interaction events, may ignore the node for the purposes of text search user interfaces (commonly known as “find in page”), and may prevent the user from selecting text in that node. https://vinceumo.github.io/devNotes/CSS/hsl/ Fri, 17 Aug 2018 08:42:00 +0000 https://vinceumo.github.io/devNotes/CSS/hsl/ hsl() defines color using the HSL(A) model. It stands for hue, saturation and lightness. H: Hue, this is a degree on the color wheel from 0 to 360. Red is a 0, yellow at 60, green at 120, cyan at 180, blue at 240 and magenta at 300. S: Saturation, It is set from 0% to 100%, where 0% is a shade of grey and 100% is the full color vivid color. https://vinceumo.github.io/devNotes/A11Y/screen-reader-talkback/ Mon, 13 Aug 2018 13:25:19 +0000 https://vinceumo.github.io/devNotes/A11Y/screen-reader-talkback/ TalkBack is the Google screen reader included on Android devices. TalkBack gives you spoken feedback so that you can use your device without looking at the screen. Android Accessibility Help Start TalkBack To start TalkBack: Go in your device settings Open Advanced Open Accessibility Turn on TalkBack I would recommend setting TalkBack as your Accessibility shortcut. Turn on Accessibility shortcut and select TalkBack as the shortcut service. https://vinceumo.github.io/devNotes/Javascript/vue-scss-setup/ Mon, 13 Aug 2018 08:50:00 +0000 https://vinceumo.github.io/devNotes/Javascript/vue-scss-setup/ Setup Vue CLI 3 When creating a new project with vue create my-vue-project, pick Manually select features and check CSS Pre-processors. If you already have created your project without the previous steps, manually install sass-loader: npm install -D sass-loader node-sass You will probably want, to import your SCSS functions, mixins and variables into your components as well. Add style-resources-loader to your project. npm i style-resources-loader -D SCSS project structure In most of my projects, I use the atomic design methodology from Brad Frost. https://vinceumo.github.io/devNotes/CSS/css-grid-layout/ Thu, 09 Aug 2018 13:37:19 +0000 https://vinceumo.github.io/devNotes/CSS/css-grid-layout/ CSS grid is a two dimensional CSS layout system where is flexbox a one dimensional one. Examples See the Pen CSS Grid Layout Experiment 1, Responsive Layout by Vincent Humeau (@vinceumo) on CodePen. - [Open in codepen](https://codepen.io/vinceumo/pen/RxOygp) See the Pen CSS Grid Layout Experiment 2 by Vincent Humeau (@vinceumo) on CodePen. - [Open in codepen](https://codepen.io/vinceumo/pen/gdxpwK) ## Atomic Bulldog Grid 💥 🐶 CSS (SCSS) grid, based on CSS grid layout with @supports fallback to flexbox (partial support). https://vinceumo.github.io/devNotes/CSS/bug-ie-flexbox-min-height/ Thu, 09 Aug 2018 10:53:19 +0000 https://vinceumo.github.io/devNotes/CSS/bug-ie-flexbox-min-height/ On Internet Explorer 11, align-items: center; do not center vertically, if our flex container have a min-height.  A small hack to fix this issue, is to use an after on our flex-container and give it an inherit min-height: .flex-container { min-height: 500px; display: flex; align-items: center; // See Hack - CSS target only IE11 and IE10 (media query) @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { &:after { content: ""; display: block; min-height: inherit; font-size: 0; } } } Fix from IE11: align-items: center with min-height workaround - Github/flexbugs https://vinceumo.github.io/devNotes/CSS/ie-media-query/ Wed, 08 Aug 2018 10:57:19 +0000 https://vinceumo.github.io/devNotes/CSS/ie-media-query/ Small hack, to apply CSS to only Internet Explorer 10 and 11, using media query: @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /* Your styles */ } Resources How to Target Internet Explorer 10 and 11 in CSS Detecting IE11 using CSS Capability/Feature Detection - Stackoverflow https://vinceumo.github.io/devNotes/Javascript/es6-arrow-functions/ Tue, 07 Aug 2018 18:08:00 +0000 https://vinceumo.github.io/devNotes/Javascript/es6-arrow-functions/ An arrow function expression has a shorter syntax than a function expression and does not have its own this, arguments, super, or new.target. These function expressions are best suited for non-method functions, and they cannot be used as constructors. _MDN_ Syntax Arrow functions basic syntax: (param1, param2, …, paramN) => { statements } (param1, param2, …, paramN) => expression // Same as: => { return expression; } If we only have one parameter, we do not need to use parentheses around the parameter. https://vinceumo.github.io/devNotes/Javascript/es6-const-let-var/ Mon, 06 Aug 2018 22:13:00 +0000 https://vinceumo.github.io/devNotes/Javascript/es6-const-let-var/ ES6 introduced two new kinds of variables in Javascript, const and let. They are block scoped variables, meaning they are scope inside {}, where var is hoisted to the global or functional scope. const vs let vs var Let’s compare some small code snippets and their outputs: Snippet 1 - for loop // var // console.log(i); // undefined for (var i = 0; i < 3; i++) { console.log(i); // 0; 1; 2 } console. https://vinceumo.github.io/devNotes/A11Y/screen-reader-nvda/ Sat, 04 Aug 2018 19:51:00 +0000 https://vinceumo.github.io/devNotes/A11Y/screen-reader-nvda/ NVDA allows blind and vision impaired people to access and interact with the Windows operating system and many third party applications. NVDA is a free and open source screen reader, it can be download on the NV access website Once installed if you have created a shortcut on your desktop, you can use ctrl + alt + n to launch NVDA. The Welcome dialogue will appear, I use the CapsLock key as the NVDA modifier key as I’m on a laptop, by default the insert key is set as the NVDA modifier key. https://vinceumo.github.io/devNotes/A11Y/wcag/ Fri, 03 Aug 2018 11:50:00 +0000 https://vinceumo.github.io/devNotes/A11Y/wcag/ Web Content Accessibility Guidelines (WCAG) 2.0 covers a wide range of recommendations for making Web content more accessible. Following these guidelines will make content accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these. Following these guidelines will also often make your Web content more usable to users in general. https://vinceumo.github.io/devNotes/Tools/git-cheat-sheet/ Wed, 01 Aug 2018 08:00:00 +0000 https://vinceumo.github.io/devNotes/Tools/git-cheat-sheet/ Create a repository git init [project-name] - Creates a new, empty local [project-name] repository git clone [url] - Downloads a project and its entire version history Stage files git status - Gives a list of all the uncommitted changes git diff - Shows file differences not yet staged git add [file] - Stages only [file] git add -A - Stages all files git reset [file] - Unstages a file https://vinceumo.github.io/devNotes/Javascript/hoisting/ Tue, 31 Jul 2018 00:00:00 +0000 https://vinceumo.github.io/devNotes/Javascript/hoisting/ In Javascript, hoisting refers to all functions and variable declarations treated as if they were declared at the top of a functional scope, or global scope, without taking into account when and where in the code these ones have been declared. Example: If we call our function before declaring this one, we do not get an error. myFavoriteColor(green); // Output: My favorite color is green function myFavoriteColor(color) { console. https://vinceumo.github.io/devNotes/Sass/css-var-with-scss/ Wed, 25 Jul 2018 09:00:00 +0000 https://vinceumo.github.io/devNotes/Sass/css-var-with-scss/ While working on my personal SCSS boilerplate, Atomic Bulldog. I wanted to implement a strict set of variables using maps. The goal is to create a consistent design system and to be able to use CSS variables for easy theming. The base structure of my variable folder: _aspect-ratios.scss _box-shadow.scss _breakpoints.scss _colors.scss _container-sizes.scss _font-families.scss _font-sizes.scss _grid.scss _root-classes.scss _spacers.scss _z-index.scss When looking on how to implement CSS variables in SASS, I found this great article, CSS4 Variables and Sass, from Jake Albaugh. https://vinceumo.github.io/devNotes/Tools/youtube-thumbnails/ Wed, 25 Jul 2018 09:00:00 +0000 https://vinceumo.github.io/devNotes/Tools/youtube-thumbnails/ Youtube thumbnails in different resolution, just replace e7AzBqt4_p0 by your youtube video code. https://youtu.be/e7AzBqt4_p0 Default Thumb MaxRes Thumb HQ Thumb MQ Thumb SD Thumb https://vinceumo.github.io/devNotes/Tools/photoshop-101-introduction-for-web-developers/ Sun, 22 Jul 2018 23:00:00 +0000 https://vinceumo.github.io/devNotes/Tools/photoshop-101-introduction-for-web-developers/ Introduction Often, when working as web developer, we need to integrate templates. They can be from Photoshop or other software. In this article, we will have a look at the basics of Photoshop for a web developer. This content was initially written for a workshop for DAMDigital London. Adobe Photoshop is a raster graphics editor software, meaning it is a program that allows users to create and edit images. https://vinceumo.github.io/devNotes/Javascript/cosoleLogArgInObject/ Sat, 21 Jul 2018 19:32:19 +0000 https://vinceumo.github.io/devNotes/Javascript/cosoleLogArgInObject/ Wrap your console.log arguments in an object literal to print the variable name along with its value. console.log(isLoggedIn) console.log({ isLoggedIn }) Still one of my favorite tips from @wesbos. So simple but effective 💪 pic.twitter.com/wMrDt4JDJ4 — Daniel Stefanovic (@DaniStefanovic) June 27, 2018 https://vinceumo.github.io/devNotes/Javascript/IIFEE-template-dam/ Sat, 21 Jul 2018 19:32:19 +0000 https://vinceumo.github.io/devNotes/Javascript/IIFEE-template-dam/ An IIFE (Immediately Invoked Function Expression) is a JavaScript function that runs as soon as it is defined. All the functions and variables are scoped inside the IIFE, meaning they can’t be access outside this one. (function() { document.addEventListener("DOMContentLoaded", function(event) { var ctas = document.querySelectorAll("button.cta"); Array.prototype.forEach.call(ctas, function(el, i) { var currentCta = ctas[i]; //Event handler 1 for exemple click currentCta.addEventListener("click", function() { functionEventHandlerBehavior1(ctas, currentCta); }); //Event handler 2 for exemple touchstart currentCta. https://vinceumo.github.io/devNotes/Tools/ngrok/ Sat, 21 Jul 2018 19:32:19 +0000 https://vinceumo.github.io/devNotes/Tools/ngrok/ Download and run ngrok ngrok http -host-header=localhost:{num} {num} Replace {num} with the actual port number and get rid of the {} 😁 https://vinceumo.github.io/devNotes/Javascript/vue-js-101-todo-pwa-tutorial/ Fri, 20 Jul 2018 23:00:00 +0000 https://vinceumo.github.io/devNotes/Javascript/vue-js-101-todo-pwa-tutorial/ The goal of this tutorial is to give an introduction to vue.js ❤. This content was initially written for a workshop for DAM Digital London. Vue.js is a progressive framework for building user interfaces (UI). This tutorial assumes that you already have some intermediate knowledge about HTML, CSS and Javascript. If you don’t have any knowledge of these fields, check out freeCodeCamp, they have great resources to learn these topics 😉. https://vinceumo.github.io/devNotes/404/ Mon, 01 Jan 0001 00:00:00 +0000 https://vinceumo.github.io/devNotes/404/