Useful GitHub Repos for developers

Useful Resources for Front-End Developers


Lots and lots of freely available programming books, screencasts, podcasts, and even online video tutorials of all sorts. If you are looking for learning materials


As the name suggests, this repo has a list of WTF examples of JavaScript that should be known by every web developer.

By knowing what they are, you can understand why they occur in the first place and thereby understand JavaScript better.


The most popular repo that curates all topics from software development to hardware to business.

List of (Advanced) JavaScript Questions

This repository by Lydia Hallie provides you with a list of JavaScript questions updated regularly by Lydia herself. This repo will definitely help you prepare for your technical JS interview. Also, this repo supports 16 languages.

JavaScript Algorithms and Data Structures

We have the trend in the tech world to talk a lot about algorithms and that we have to know them! So, here is this fantastic repo where you can find most of them.

The really cool thing is that every algorithm is written in JavaScript and has been tested. So it is even easier for you to understand!

Clean Code JavaScript

We all know that bad code can work because we all have written bad code. It is normal to write bad code. Having a guide to show you what is bad code can help you to write good code.

Developers and open-source authors now have a massive amount of services offering free tiers, but it can be hard to find them all in order to make informed decisions.

This is list of software (SaaS, PaaS, IaaS, etc.) and other offerings that have free tiers for developers.

List of Free Learning Resources

It offers lots and lots of freely available programming books, screencasts, podcasts, and even online courses of all sorts. If you are looking for learning materials — look no further!

Awesome First PR Opportunities

This repository is a must-visit for web devs, especially newbie devs who have no experience in open-source projects. Contributing to open source allows you to mingle with the lovely community, share knowledge, be a better developer and maybe eventually get a good job.

A common hurdle is that things can get a bit overwhelming in the beginning. This repository lists open-source projects that are known for or currently have beginner-friendly issues that you can tackle.


As the name suggests, this GitHub repo gives you an interview question every day. Ultimately allowing you to gain some keen insights on the tech questions thrown at you during interviews.

Although this website is in Chinese, Google translate will help you.

Useful Resources for Front-End Developers

Awesome Learning Resource

this is pretty much a one-stop destination for your learning needs as a developer. This repo contains freely available programming books, podcasts, and even online video tutorials for a variety of software engineering topics and programming languages.

If you are looking to learn a new language or concept in programming, this is a must-visit repo.


As the name suggests, this repo contains a list of free programming books for almost any language or concept in programming. The list is quite huge and has 143,000 stars and 34,900 forks. It’s available in many languages and is comprised of mainly programming books.


When learning programming, you must be in touch with certain websites in order to learn the technologies better and to learn new things. This repo contains a list of nonexhaustive websites that you should pretty much be in touch with. This contains podcasts, news websites, resources on competitive programming, things to do when you are bored, and much, much more.

Project Guidelines

It contains a set of best practices for JS projects. These guidelines help you write and maintain projects with ease and reduce the level of issues that occur in the whole process. This includes some best practices on Git, documentation, environment, dependencies, testing, and more.

If you want to share a best practice or think one of these guidelines should be removed, you can make a PR.

App Ideas Collection

Have you ever wanted to build something but you had no idea what to do? Just as authors sometimes have writer’s block, it’s also true for developers. This Repo contains a list of app ideas categorized according to three tiers of programming experience.

These applications help you improve your coding skills as well as allow you to try out new technologies.

Web Developer Road Map

It contains a set visual illustration on career pathways you could take as a web developer. The purpose of these roadmaps is to give you an idea about the landscape and to guide you if you’re confused about what to learn next.

A simpler, more beginner-friendly version of the illustration is under development. This chart gets updated yearly to reflect any new changes, so you never have to be worried about being outdated.

ES6 JavaScript Code Snippets

Taken from 30secondsofcode

1.How to hide all elements specified?

const hide = (elementList) => [...el].forEach(e => ( = 'none'));

// Example
hide(document.querySelectorAll('img')); // Hides all <img> elements on the page

// or
const hide = (...el) => [...el].forEach(e => ( = 'none'));

2.How to check if the element has the specified class?

const hasClass = (el, className) => el.classList.contains(className);

// Example
hasClass(document.querySelector('p.special'), 'special'); // true

3.How to toggle a class for an element?

const toggleClass = (el, className) => el.classList.toggle(className);

// Example
toggleClass(document.querySelector('p.special'), 'special');
// The paragraph will not have the 'special' class anymore

4.How to get the scroll position of the current page?

const getScrollPosition = (el = window) => ({
x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop

// Example
getScrollPosition(); // {x: 0, y: 200}

5.How to smooth-scroll to the top of the page?

const scrollToTop = () => {
const c = document.documentElement.scrollTop || document.body.scrollTop;
if (c > 0) {
window.scrollTo(0, c - c / 8);

// Example

6.How to check if the parent element contains the child element?

const elementContains = (parent, child) => parent !== child && parent.contains(child);

// Examples
elementContains(document.querySelector('head'), document.querySelector('title'));
// true
elementContains(document.querySelector('body'), document.querySelector('body')); // false

7.How to check if the element specified is visible in the viewport?

const elementIsVisibleInViewport = (el, partiallyVisible = false) => {
const { top, left, bottom, right } = el.getBoundingClientRect();
const { innerHeight, innerWidth } = window;
return partiallyVisible
? ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) &&
((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))
: top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;

// Examples
elementIsVisibleInViewport(el); // (not fully visible)
elementIsVisibleInViewport(el, true); // (partially visible)

8.How to fetch all images within an element?

const getImages = (el, includeDuplicates = false) => {
const images = [...el.getElementsByTagName('img')].map(img => img.getAttribute('src'));
return includeDuplicates ? images : [ Set(images)];

// Examples
getImages(document, true); // ['image1.jpg', 'image2.png', 'image1.png', '...']
getImages(document, false); // ['image1.jpg', 'image2.png', '...']

9.How to figure out if the device is a mobile device or a desktop/laptop?

const detectDeviceType = () =>
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
? 'Mobile'
: 'Desktop';

// Example
detectDeviceType(); // "Mobile" or "Desktop"

10.How to get the current URL?

const currentURL = () => window.location.href;

// Example
currentURL(); // ''

11.How to create an object containing the parameters of the current URL?

const getURLParameters = url =>
(url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
(a, v) => ((a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a),

// Examples
getURLParameters(''); // {n: 'Adam', s: 'Smith'}
getURLParameters(''); // {}

12.How to encode a set of form elements as an object?

const formToObject = form =>
Array.from(new FormData(form)).reduce(
(acc, [key, value]) => ({
[key]: value

// Example
formToObject(document.querySelector('#form')); // { email: '', name: 'Test Name' }

13.How to retrieve a set of properties indicated by the given selectors from an object?

const get = (from, ...selectors) =>
[...selectors].map(s =>
.replace(/\[([^\[\]]*)\]/g, '.$1.')
.filter(t => t !== '')
.reduce((prev, cur) => prev && prev[cur], from)
const obj = { selector: { to: { val: 'val to select' } }, target: [1, 2, { a: 'test' }] };

// Example
get(obj, '', 'target[0]', 'target[2].a'); // ['val to select', 1, 'test']

14.How to invoke the provided function after wait (in milliseconds)?

const delay = (fn, wait, ...args) => setTimeout(fn, wait, ...args);
function(text) {

// Logs 'later' after one second.

15.How to trigger a specific event on a given element, optionally passing custom data?

const triggerEvent = (el, eventType, detail) =>
el.dispatchEvent(new CustomEvent(eventType, { detail }));

// Examples
triggerEvent(document.getElementById('myId'), 'click');
triggerEvent(document.getElementById('myId'), 'click', { username: 'bob' });

16.How to remove an event listener from an element?

const off = (el, evt, fn, opts = false) => el.removeEventListener(evt, fn, opts);

const fn = () => console.log('!');
document.body.addEventListener('click', fn);
off(document.body, 'click', fn); // no longer logs '!' upon clicking on the page

17.How to get readable format of the given number of milliseconds?

const formatDuration = ms => {
if (ms < 0) ms = -ms;
const time = {
day: Math.floor(ms / 86400000),
hour: Math.floor(ms / 3600000) % 24,
minute: Math.floor(ms / 60000) % 60,
second: Math.floor(ms / 1000) % 60,
millisecond: Math.floor(ms) % 1000
return Object.entries(time)
.filter(val => val[1] !== 0)
.map(([key, val]) => `${val} ${key}${val !== 1 ? 's' : ''}`)
.join(', ');

// Examples
formatDuration(1001); // '1 second, 1 millisecond'
formatDuration(34325055574); // '397 days, 6 hours, 44 minutes, 15 seconds, 574 milliseconds'

18.How to get the difference (in days) between two dates?

const getDaysDiffBetweenDates = (dateInitial, dateFinal) =>
(dateFinal - dateInitial) / (1000 * 3600 * 24);

// Example
getDaysDiffBetweenDates(new Date('2017-12-13'), new Date('2017-12-22')); // 9

19.How to make a GET request to the passed URL?

const httpGet = (url, callback, err = console.error) => {
const request = new XMLHttpRequest();'GET', url, true);
request.onload = () => callback(request.responseText);
request.onerror = () => err(request);


// Logs: {"userId": 1, "id": 1, "title": "sample title", "body": "my text"}

20.How to make a POST request to the passed URL?

const httpPost = (url, data, callback, err = console.error) => {
const request = new XMLHttpRequest();'POST', url, true);
request.setRequestHeader('Content-type', 'application/json; charset=utf-8');
request.onload = () => callback(request.responseText);
request.onerror = () => err(request);

const newPost = {
userId: 1,
id: 1337,
title: 'Foo',
body: 'bar bar bar'
const data = JSON.stringify(newPost);

// Logs: {"userId": 1, "id": 1337, "title": "Foo", "body": "bar bar bar"}

21.How to create a counter with the specified range, step and duration for the specified selector?

const counter = (selector, start, end, step = 1, duration = 2000) => {
let current = start,
_step = (end - start) * step < 0 ? -step : step,
timer = setInterval(() => {
current += _step;
document.querySelector(selector).innerHTML = current;
if (current >= end) document.querySelector(selector).innerHTML = end;
if (current >= end) clearInterval(timer);
}, Math.abs(Math.floor(duration / (end - start))));
return timer;

// Example
counter('#my-id', 1, 1000, 5, 2000); // Creates a 2-second timer for the element with id="my-id"

22.How to copy a string to the clipboard?

const copyToClipboard = str => {
const el = document.createElement('textarea');
el.value = str;
el.setAttribute('readonly', ''); = 'absolute'; = '-9999px';
const selected =
document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false;;
if (selected) {

// Example
copyToClipboard('Lorem ipsum'); // 'Lorem ipsum' copied to clipboard.

23.How to find out if the browser tab of the page is focused?

const isBrowserTabFocused = () => !document.hidden;

// Example
isBrowserTabFocused(); // true

24.How to create a directory, if it does not exist?

const fs = require('fs');
const createDirIfNotExists = dir => (!fs.existsSync(dir) ? fs.mkdirSync(dir) : undefined);

// Example
createDirIfNotExists('test'); // creates the directory 'test', if it doesn't exist

Containerize a .NET Core app

Essential commands

Docker has many different commands that create, manage, and interact with containers and images. These Docker commands are essential to managing your containers:

Here an example:

(from Visual Studio 2019 it is possible to add Docker support):

Opzione di menu Aggiungi Supporto Docker in Visual Studio

Useful regex


\/ matches the character “/” literally (case sensitive)
\* matches the character “*” literally (case sensitive)
.* matches any character (except for line terminators)
* Quantifier — Matches between zero and unlimited times, as many times as possible, giving back as needed (greedy)
\* matches the character “*” literally (case sensitive)
\/ matches the character “/” literally (case sensitive)

/* 501 */
/* 1 */

Reset a single file to a specific commit

Assuming the hash of the commit you want is c5f567:

git checkout c5f567 -- file1/to/restore file2/to/restore

The git checkout man page gives more information.

If you want to revert to the commit before c5f567, append ~1 (where 1 is the number of commits you want to go back, it can be anything):

git checkout c5f567~1 -- file1/to/restore file2/to/restore

As a side note, I’ve always been uncomfortable with this command because it’s used for both ordinary things (changing between branches) and unusual, destructive things (discarding changes in the working directory).

Search and rename Foreign Key Name

List foreign keys:

select schema_name(fk_tab.schema_id) + '.' + as foreign_table, '>-' as rel, schema_name(pk_tab.schema_id) + '.' + as primary_table, substring(column_names, 1, len(column_names)-1) as [fk_columns], as fk_constraint_name from sys.foreign_keys fk inner join sys.tables fk_tab on fk_tab.object_id = fk.parent_object_id inner join sys.tables pk_tab on pk_tab.object_id = fk.referenced_object_id cross apply (select col.[name] + ', ' from sys.foreign_key_columns fk_c inner join sys.columns col on fk_c.parent_object_id = col.object_id and fk_c.parent_column_id = col.column_id where fk_c.parent_object_id = fk_tab.object_id and fk_c.constraint_object_id = fk.object_id order by col.column_id for xml path ('') ) D (column_names) order by schema_name(fk_tab.schema_id) + '.' +, schema_name(pk_tab.schema_id) + '.' +

Search Primary keys:


Then rename the foreign key:

sp_rename @objname = N'PK_Notes_ADF019271172DFE', @newname = N'PK_Notes'

Update if parameter is not null or empty

Using just IsNull your query would look something like…

UPDATE [Users]
SET FirstName = IsNull(@FirstName, FirstName),
City = IsNull(@City, City)

DECLARE @value AS INT = Null
SELECT CASE WHEN ISNULL(@value, 2)=0 THEN Null Else ISNULL(@value, 2) END

will Update the row with the param value if they are NOT null, otherwise update it to itself aka change nothing.

Software craftsmenship manifesto

From Creaftsmenship Manifesto

Background materials

Food for thought

Kata and exercises

Conferences and community

Get all documents from mongodb collection

Get all documents from a MongoDB collection:

Using the current version of the driver (v2.0) you can do that by passing a filter that matches everything:

var documents = await SpeCollection.Find(_ => true).ToListAsync();

They have also added an empty filter (FilterDefinition.Empty) which will arrive in the next version of the driver (v2.1):

var documents = await SpeCollection.Find(Builders.Filter.Empty).ToListAsync();

With and without Lambda Expression

var id = 1;
var query =
from user in database.Users
join invoice in database.Invoices on user.Id equals invoice.UserId
where user.Id == id
select new { User = user, Invoice = invoice };

Here’s the same query, using Lambda Expression LINQ extension methods:

var id = 1;
var query = database.Users // your starting point - table in the "from" statement
.Join(database.Invoices, // the source table of the inner join
user => user.Id, // Select the primary key (the first part of the "on" clause in an sql "join" statement)
invoice => invoice.UserId, // Select the foreign key (the second part of the "on" clause)
(user, invoice) => new { User = user, Invoice = invoice }) // selection
.Where(userAndInvoice => userAndInvoice.User.Id == id); // where statement