Forem: Marko Denic

.

Marko Denic — Tue, 25 Nov 2025 14:03:38 +0000

Priya Negi

Nov 18 '25

We built the first native mobile AI agent and open-sourced it🤯

#ai #programming #cloud #python

Comments

1 min read

How to optimize your website for SEO

Marko Denic — Tue, 06 Dec 2022 09:06:51 +0000

Search Engine Optimization (SEO) is an essential part of a successful website. It is the process of optimizing your website to make it easier for search engines to find, index, and rank your website in search engine results pages (SERPs). If you want to increase your website visibility and improve your search engine ranking, you need to focus on improving your SEO. Here are some tips to help you get started:

Improve page load speed: Page load speed is an important factor in SEO. Use tools such as Google PageSpeed Insights to identify areas of improvement and optimize your page load speed.
Optimize your page titles and meta descriptions: Page titles and meta descriptions are one of the most important elements when it comes to SEO. They give search engines an overview of the content on your website and are used to determine the relevance of your website for specific search queries. Make sure to include keywords in your page titles and meta descriptions that are relevant to your site’s content.
Create quality content: Quality content is the foundation of any successful SEO strategy. Search engines prioritize websites with content that is relevant to the search query. Make sure to create content that is well-researched, well-written, and informative.
Add Internal Links: Internal links help search engine crawlers better understand the structure of your website and make it easier for users to navigate your website.
Build Quality Backlinks: Building quality backlinks is another important element of SEO. Quality backlinks help establish your website’s authority and can improve your search engine rankings. You can build backlinks by guest posting on other websites or submitting your website to web directories.
Research keywords: Researching relevant keywords and phrases can help you understand what your target audience is searching for. Use keyword research tools like the Google AdWords Keyword Planner to find terms that are popular and relevant to your site.
Optimize Images: Optimizing your images can also help improve your SEO. Make sure you include relevant keywords in your image filenames and use descriptive alt tags to help search engines understand the images on your website.

By following these tips, you can improve your website’s SEO and increase its visibility on search engine results pages. SEO can be a complicated and time-consuming process, but it’s well worth the effort in the end.

Quick recap:

Improve page load speed.
Optimize your page titles and meta descriptions.
Create quality content. 4 . Add Internal Links. 5 . Build Quality Backlinks.
Research keywords.
Optimize Images.

If you have any questions, you can write me on Twitter.

Read more: HTML, CSS, JavaScript, SEO, WordPress, Career, Marketing, Git

JavaScript Array methods explained

Marko Denic — Wed, 25 May 2022 06:29:58 +0000

Let's start!

1. concat()

Returns a new array that is this array joined with other array(s) and/or value(s).

const fruits = ['🍉', '🍎', '🍒', '🍌'];
const vegetables = ['🧅', '🌽', '🥕', '🥑'];

// 1. concat()
const food = fruits.concat(vegetables); // ["🍉", "🍎", "🍒", "🍌", "🧅", "🌽", "🥕", "🥑"]

2. copyWithin()

Copies a sequence of array elements within the array.

// 2. copyWithin()
const fruits = ['🍉', '🍎', '🍒', '🍌'];

const fruitsCopy = fruits.copyWithin(0, 2); // ["🍒", "🍌", "🍒", "🍌"]

3. every()

Returns true if every element in this array satisfies the testing function.

// 3. every()
const fruits = ['🍉', '🍎', '🍒', '🍌'];

const allBananas = fruits.every(fruit => fruit === '🍌'); // false

4. fill()

Fills all the elements of an array from a start index to an end index with a static value.

// 4. fill()
const fruits = ['🍉', '🍎', '🍒', '🍌'];

const lemons =  fruits.fill('🍋'); // ["🍋", "🍋", "🍋", "🍋"]

5. filter()

Returns a new array containing all elements of the calling array for which the provided filtering function returns true.

// 5. filter()
const fruits = ['🍉', '🍎', '🍒', '🍌'];

const onlyBananas = ['🍉', '🍎', '🍌', '🍌'].filter(fruit => fruit === '🍌'); // ["🍌", "🍌"]

6. find()

Returns the found element in the array, if some element in the array satisfies the testing function, or undefined if not found.

// 6. find()
const fruits = ['🍉', '🍎', '🍒', '🍌'];

const cherry = fruits.find(fruit => fruit === '🍒'); // "🍒"

7. findIndex()

Returns the found index in the array, if an element in the array satisfies the testing function, or -1 if not found.

// 7. findIndex()
const fruits = ['🍉', '🍎', '🍒', '🍌'];

const cherryIndex = fruits.findIndex(fruit => fruit === '🍒'); // 2

8. forEach()

Calls a function for each element in the array.

// 8. forEach()
const vegetables = ['🧅', '🌽', '🥕', '🥑'];

vegetables.forEach(vegetable => console.log(vegetable));
// "🥦"
// "🌽"
//  "🥕"
//  "🥑"

9. includes()

Determines whether the array contains a value, returning true or false as appropriate.

// 9. includes()
const vegetables = ['🧅', '🌽', '🥕', '🥑'];

const includesCorn = vegetables.includes('🌽'); // true
const includesTomato = vegetables.includes('🍅'); // false

10. join()

Joins all elements of an array into a string.

// 10. join()
const vegetables = ['🧅', '🌽', '🥕', '🥑'];

const vegetablesGroup = vegetables.join(''); // "🥦🌽🥕🥑"

11. map()

Returns a new array containing the results of calling a function on every element in this array.

// 11. map()
const vegetables = ['🧅', '🌽', '🥕', '🥑'];

const doubledVegetables = vegetables.map(vegetable => vegetable + vegetable); 
// ["🥦🥦", "🌽🌽", "🥕🥕", "🥑🥑"]

12. push()

Adds one or more elements to the end of an array, and returns the new length of the array.

// 12. push()
const fruits = ['🍉', '🍎', '🍒', '🍌'];

fruits.push('🥝'); // ["🍉", "🍎", "🍒", "🍌", "🥝"]

13. reverse()

Reverses the order of the elements of an array in place.

// 13. reverse()
const fruits = ['🍉', '🍎', '🍒', '🍌'];

const fruits = ['🍉', '🍎', '🍒', '🍌'];

const reversedFruits = fruits.reverse(); // ["🍌", "🍒", "🍎", "🍉"]

14. slice()

Extracts a section of the calling array and returns a new array.

// 14. slice()
const fruits = ['🍉', '🍎', '🍒', '🍌'];

fruits.slice(2); // ["🍒", "🍌"]

15. some()

Returns true if at least one element in this array satisfies the provided testing function.

// 15. some()
const fruits = ['🍉', '🍎', '🍒', '🍌'];

const bananaExists = fruits.some(fruit => fruit === '🍌')); // true

16. sort()

Sorts the elements of an array in place and returns the array.

// 16. sort()
const fruits = ['🍉', '🍎', '🍒', '🍌', '🍉', '🍉', '🍒', '🍎', '🍌'];
fruits.sort(); // ["🍉", "🍉", "🍉", "🍌", "🍌", "🍎", "🍎", "🍒", "🍒"]

17. splice()

Adds and/or removes elements from an array.

// 17. splice()
const fruits = ['🍉', '🍎', '🍒', '🍌'];

fruits.splice(2, 1, '🥝'); // ["🍉", "🍎", "🥝", "🍌"]

If you liked this article, be sure to ❤️ it.

Happy coding! ❤️

If you have any questions, you can contact me on Twitter.

You can find a ton of real-life tips and resources on my blog.

Make your first open-source contribution

Marko Denic — Mon, 23 May 2022 08:31:38 +0000

By doing open-source contributions, you will learn a lot. It allows you to become a part of the open-source community. It can be hard at the beginning, but it’s definitely worth it.

How do you make a pull request? How to ask the maintainers to merge it?

Let’s start!

First of all, you should know the basics of git. You’ll need a GitHub account as well.
If you don’t have one, you can create it here.

Step 1: Find a project you want to contribute to.

If you want to practice a little bit first, you can use this demo repository.
Don’t worry, I created it for this purpose.

Step 2: Fork the repository.

Once you’re there, click the “Fork” button.
This will copy the whole project under your GitHub user.
The link will look like this https://github.com/<YourUsername>/git-demo.

Step 3: Clone the repository.

Open your terminal, and run the following command:

git clone https://github.com/<YourUsername>/git-demo.git

This will create a local copy of the repository.

Step 4: Create a new remote for the upstream repository.

For this we will use the following command:

git remote add upstream https://github.com/markodenic/git-demo

Step 5: Create a new branch.

We can do this by running the command:

git checkout -b my-branch

This will create a new branch, and switch to it.

Step 6: Add some code.

Now, the time has come, we actually add some code. 🙂
After adding the changes, you can check them by running git status.

If everything is as expected, we can add the code to the staging area:

git add .

Step 7: Commit your changes.

This is the last step before pushing the code to the repository.
Run the command:

git commit -m "Adding an awesome feature to my-branch"

Step 8: Push the changes to your repository.

Finally, we’re ready to push the changes.
git push is the command we need in this case. Let’s run it:

git push -u origin my-branch

Step 9: Create a pull request.

Once we pushed the changes to our repository, we are ready to open the pull request.
Go back to your repository and click on the “Compare and Pull Request” button.

If everything went OK, the maintainer of the repository will merge your pull request.

Congratulations, you made your first open-source contribution!

Quick recap:

Find a project you want to contribute to.
Fork the repo.
Clone the repository.
Create a new remote for the upstream repository.
Create a new branch.
Add your changes.
Commit your changes.
Push the changes to your repository.
Create a pull request.

See you on GitHub.
If you have any questions, you can write me on Twitter .

Join the newsletter.

I write monthly emails full of real-world web development tips and resources.
No spam, unsubscribe at any time. Subscribe here .

Use Google like a pro

Marko Denic — Wed, 03 Feb 2021 11:20:50 +0000

Googling is one of the most important skills for every developer.

Let me show you how to get better at Googling.

Let's start!

1 . Use quotes to force an exact-match search:

"what is javascript"

2 . AND operator will return only results related to both terms:

html AND css

3 . You can use the OR operator to get the results related to one of the search terms

(javascript OR python) free course

4 . - operator will exclude results that contain a term or phrase:

javascript -css

5 . You can use the (*) wildcards as placeholders, which will be replaced by any word or phrase.

"how to start * in 6 months"

6 . Search inside a single website:

site:freecodecamp.org

7 . You can also use a very useful feature that helps to find a specific file type.

filetype:pdf learn css

8 . Search for a range of numbers:

ecmascript 2016..2018

If you liked this article, be sure to ❤️ it.

Join the Newsletter

Useful tech tips, directly to your inbox. No spam, unsubscribe at any time: Tech with Marko

Happy coding! ❤️

Resources to crush the technical interview

Marko Denic — Mon, 28 Dec 2020 09:23:33 +0000

Technical interviews are difficult. So I decided to gather resources that will help you crush your next interview.

Let’s start!

1. Coding Interview University

A complete computer science study plan to become a software engineer.

Link: https://github.com/jwasham/coding-interview-university

2. JavaScript Algorithms

Algorithms and data structures implemented in JavaScript with explanations and links to further readings

Link: https://github.com/trekhleb/javascript-algorithms

3. Tech Interview Handbook

Materials to help you rock your next coding interview

Link: https://yangshun.github.io/tech-interview-handbook/

4. OG AWS

Amazon Web Services — a practical guide

Link: https://github.com/open-guides/og-aws

5. JavaScript Questions

A long list of (advanced) JavaScript questions, and their explanations.

Link: https://github.com/lydiahallie/javascript-questions

6. The System Design Primer

Learn how to design large-scale systems. Prep for the system design interview. Includes Anki flashcards.

Link: https://github.com/donnemartin/system-design-primer

7. Interview

Everything you need to prepare for your technical interview.

Link: https://github.com/Olshansk/interview

8. Awesome Interviews

A curated awesome list of lists of interview questions.

Link: https://github.com/MaximAbramchuck/awesome-interview-questions

9. Interviews

Everything you need to know to get the job.

Link: https://github.com/kdn251/interviews

10. React Interview Questions & Answers

List of top 500 ReactJS Interview Questions & Answers.

Link: https://github.com/sudheerj/reactjs-interview-questions

11. Coding Interviews

This repository contains coding interviews that I have encountered in company interviews.

Link: https://github.com/jayshah19949596/CodingInterviews

12. Reverse interview

Questions to ask the company during your interview.

Link: https://github.com/viraptor/reverse-interview

13. Front end Interview Questions

Help the front End community to rock interview.

Link: https://thatjsdude.com/interview/

14. 70 JavaScript Interview Questions

Link: https://dev.to/macmacky/70-javascript-interview-questions-5gfi

15. Back-End Developer Interview Questions

A list of back-end related questions you can be inspired from to interview potential candidates, test yourself or completely ignore.

Link: https://github.com/arialdomartini/Back-End-Developer-Interview-Questions

Initially created on Twitter:
// Detect dark theme var iframe = document.getElementById('tweet-1343487437666971648-774'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1343487437666971648&theme=dark" }

If you liked this article, be sure to ❤️ it.

Happy coding! ❤️

50 free tools and resources you're gonna love (Part 2)

Marko Denic — Mon, 21 Dec 2020 05:48:50 +0000

Free stuff is always exciting. But, what if it is free and awesome? Free tools and resources you're gonna love. Part 2.

Let's start!

1. TailGrids

Ready to use high-quality UI Components and Blocks crafted for Tailwind CSS. Copy-paste components and build your unique web app UI, landing page, website, or site templates.

Link: https://tailgrids.com/

2. Javascript.info

Modern JavaScript Tutorial: simple, but detailed explanations with examples and tasks, including: closures, document and events, object oriented programming and more.

Link: https://javascript.info/

3. HTMLrev

Free HTML templates that save development time and elevate project design for websites and landing pages.

Link: https://htmlrev.com/

4. Free for developers

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

Link: https://free-for.dev/

5. Stormkit

Stormkit is an infrastructure provider for modern javascript applications which is strongly integrated with popular Git providers.

Link: https://www.stormkit.io/

6. PythonAnywhere

Host, run, and code Python in the cloud: PythonAnywhere.

Link: https://www.pythonanywhere.com/

7. Regex101

Online regex tester, debugger with highlighting for PHP, PCRE, Python, Golang and JavaScript.

Link: https://regex101.com/

8. Quant-UX

Design, Test and Learn in one tool! Quant-UX Low Code capabilities allow convert Prototypes into production systems.

Link: https://www.quant-ux.com/

9. UIdeck

Free HTML Landing Page Templates, Bootstrap Themes, React Templates, HTML Templates, Tailwind Templates, and UI Kits.

Link: https://uideck.com/

10. Frontend Mentor

Improve your front-end skills by building real projects. Solve real-world HTML, CSS and JavaScript challenges whilst working to professional designs.

Link: https://www.frontendmentor.io/

11. PlayCSS

Recreate shapes using pure CSS, check out other works and vote your favorite ones.

Link: https://playcss.app/

12. FontPair

Font Pair helps designers pair Google Fonts together. Beautiful Google Font combinations and pairs.

Link: https://fontpair.co/

13. Codewars

Codewars is where developers achieve code mastery through challenge. Train on kata in the dojo and reach your highest potential.

Link: https://www.codewars.com/

14. Websitevice

Find inspiration among website design examples for business, real estate, product, agency, education, ecommerce, personal and artist.

Link: https://websitevice.com/

15. Remote.co

Remote Work: Jobs, Companies & Virtual Teams - Remote.co

Link: https://remote.co/

16. Web.dev

Get the web's modern capabilities on your own sites and apps with useful guidance and analysis from web.dev.

Link: https://web.dev/

17. BundlePhobia

Bundlephobia helps you find the performance impact of adding a npm package to your front-end bundle.

Link: https://bundlephobia.com/

18. Scrimba.com

Scrimba is a fun and fast way of learning to code! Our interactive courses and tutorials will teach you React, Vue, Angular, JavaScript, HTML, CSS, and more.

Link: https://scrimba.com/

19. Dev.to

A constructive and inclusive social network. Open source and radically transparent.

Link: https://dev.to/

20. Heroku

Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.

Link: https://www.heroku.com/

21. Animista.net

Animista is a place where you can play with a collection of ready to use CSS animations, tweak them and download only those you will actually use.

Link: https://animista.net/

22. HTTP Status Codes

HTTP Status Code directory, with definitions, details and helpful code references.

Link: https://httpstatuses.com/

23. The Coding Interview

Everything you need to ace the coding interview all in one place. Crack the coding interview with just 5 minutes of preparation a day.

Link: https://www.thecodinginterview.com/

24. Learn-anything.xyz

Search Interactive Mind Maps to learn anything.

Link: https://learn-anything.xyz/

25. Responsively App

A dev-tool that aids faster and precise responsive web development.

Link: https://responsively.app/

26. Colormind

Generate color combinations in one click. Colormind creates cohesive color schemes using a deep neural net.

Link: http://colormind.io/

27. SEO Test Tool

Free on-page SEO tool.

Link: https://seotest.me/

28. Render

Render is a unified platform to build and run all your apps and websites with free SSL, global CDN, private networks and auto deploys from Git.

Link: https://render.com/

29. Carbon.sh

Carbon is the easiest way to create and share beautiful images of your source code.

Link: https://carbon.now.sh/

30. Regex Pal

Test your Javascript and PCRE regular expressions online.

Link: https://www.regexpal.com/

31. JSONLint

JSONLint is the free online validator and reformatter tool for JSON, a lightweight data-interchange format.

Link: https://jsonlint.com/

32. W3Layouts

Design a great looking website with our free website templates. All our web templates are responsive, built with Bootstrap, HTML, CSS, and JS.

Link: https://w3layouts.com/

33. Freepik

Millions of Free Graphic Resources. ✓ Vectors ✓ Stock Photos ✓ PSD ✓ Icons ✓ All that you need for your Creative Projects.

Link: https://www.freepik.com/

34. Mixkit

Free Stock Video Footage, Stock Music & Premiere Pro Templates for your video project.

Link: https://mixkit.co/

35. Unscreen

Remove the background of any video - 100% automatically, online & free! Goodbye Greenscreen. Hello Unscreen.

Link: https://www.unscreen.com/

36. Avataaars Generator

A free online avatar generator for anyone to make their beautiful personal avatar easily!

Link: https://getavataaars.com/

37. Remix Icon

Remix Icon is a set of open source neutral style system symbols elaborately crafted for designers and developers. All of the icons are free to use for both personal and commercial.

Link: https://remixicon.com/

38. Ikonate

Customise, adjust and download free vector icons. Ikonate is an adaptable set of optimised, accessible SVG icons that use can easily use in both development and design apps such as Sketch and Photoshop. Ready to use as images, inline SVGs or SVG sprites.

Link: https://ikonate.com/

39. Open Doodles

A library of sketchy illustrations of people free for personal and commercial use.

Link: https://www.opendoodles.com/

40. Kite

Code faster with Kite's AI-powered autocomplete plugin for over 16 programming languages and 16 IDEs, featuring Multi-Line Completions. Works 100% locally.

Link: https://www.kite.com/

41. Devhints

A ridiculous collection of web development cheatsheets.

Link: https://devhints.io/

42. Wappalyzer

Find out the technology stack of any website. Create lists of websites and contacts by the technologies they use.

LInk: https://www.wappalyzer.com/

43. Tailwind Components

Tailwind CSS examples from components by the community. Tailwind chart, grids, inputs, forms, templates and much more.

Link: https://tailwindcomponents.com/

44. https://www.grammarly.com/

Communicate With Impact. Ensure Everything You Write Comes Across The Way You Intend. Present Your Best Self Every Time You Type. Make Your Writing Clear and Engaging. Eliminate grammar errors. Easily improve any text.

Link: https://www.grammarly.com

45. Wave

Free invoicing & accounting software with credit card processing & payroll services.

Link: https://www.waveapps.com/

46. Clockify

Time tracking software used by millions. A simple time tracker and timesheet app that lets you track work hours across projects.

Link: https://clockify.me/

47. Untools

Collection of thinking tools and frameworks to help you solve problems, make decisions and understand systems.

Link: https://untools.co/

48. Free Logo Maker

Make a custom logo in minutes using our free online app. Design your own logo for a website or business with Namecheap.

Link: https://www.namecheap.com/logo-maker/

49. TinyPNG

Make your website faster and save bandwidth. TinyPNG optimizes your PNG images by 50-80% while preserving full transparency!

Link: https://tinypng.com/

50. 1loc

Favorite JavaScript single line of code.

Link: https://1loc.dev/

Initially created on Twitter:

// Detect dark theme var iframe = document.getElementById('tweet-1340898638197878785-726'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1340898638197878785&theme=dark" }

If you liked this article, be sure to ❤️ it.

Happy coding! ❤️

All my programming threads and job hunting resources in one list

Marko Denic — Fri, 18 Dec 2020 11:11:16 +0000

Let's start!

Free web development resources.

// Detect dark theme var iframe = document.getElementById('tweet-1277492413032992768-366'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1277492413032992768&theme=dark" }

GitHub repositories to improve your programming skills.

// Detect dark theme var iframe = document.getElementById('tweet-1335833349672361984-26'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1335833349672361984&theme=dark" }

You want to learn HTML & CSS but don't know where to get started?

// Detect dark theme var iframe = document.getElementById('tweet-1307997683651678208-388'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1307997683651678208&theme=dark" }

You want to learn JavaScript but don't know where to get started?

// Detect dark theme var iframe = document.getElementById('tweet-1290533125530017792-757'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1290533125530017792&theme=dark" }

10 JavaScript Array methods to simplify your code.

// Detect dark theme var iframe = document.getElementById('tweet-1333303935600390144-727'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1333303935600390144&theme=dark" }

Use `console.log()` like a pro.

// Detect dark theme var iframe = document.getElementById('tweet-1330752037148127232-2'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1330752037148127232&theme=dark" }

50 free tools and resources you're gonna love!

// Detect dark theme var iframe = document.getElementById('tweet-1338354778385084416-63'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1338354778385084416&theme=dark" }

Free hosting:

// Detect dark theme var iframe = document.getElementById('tweet-1302921883977953280-836'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1302921883977953280&theme=dark" }

Websites to find a remote job:

// Detect dark theme var iframe = document.getElementById('tweet-1304274720246738945-228'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1304274720246738945&theme=dark" }

Technology-specific job sites:

// Detect dark theme var iframe = document.getElementById('tweet-1313729349552664577-286'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1313729349552664577&theme=dark" }

Who's hiring developers?

// Detect dark theme var iframe = document.getElementById('tweet-1335127441501773824-536'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1335127441501773824&theme=dark" }

Happy coding! ❤️

If you liked this article, be sure to ❤️ it.

50 free tools and resources you're gonna love

Marko Denic — Mon, 14 Dec 2020 05:35:26 +0000

Free stuff is always exciting. But, what if it is free and awesome? Free tools and resources you’re gonna love.

Let's start!

1. Web Development Resources

A collaborative list of resources for developers, presented in curated categories.

Link: https://web-dev-resources.com/

2. Remove bg

Remove Image Background: 100% automatically – in 5 seconds – without a single click – for free.

Link: https://www.remove.bg/

3. Tabler Icons

Free and open-source icons designed with attention to detail to make your design stand out.

Link: https://tablericons.com/

4. ClioW

URL shortener.

Link: https://cliow.com

5. Free Code Tools

Collection of free SEO and code tools.

Link: https://freecodetools.org/

6. Coolors

Generate or browse beautiful color combinations for your designs.

Link: https://coolors.co/

7. Nhost

The Open Source Firebase Alternative with GraphQL.

Link: https://nhost.io/

8. DevSamples

DevSamples is a list of code samples for you to copy and paste into your projects as needed. The primary focus is on web development, but there are samples from a variety of languages.

Link: https://www.devsamples.com/

9. Lorem Picsum

Lorem Ipsum... but for photos

Link: https://picsum.photos/

10. Netlify

Deploy modern static websites with Netlify. Get CDN, Continuous deployment, 1-click HTTPS, and all the services you need. Get started for free.

Link: https://www.netlify.com/

11. Pxfuel

Millions of public domain stock photos released under creative common zero lincense, all are free for commercial use.

Link: https://www.pxfuel.com/

12. Font Awesome

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

Link: https://fontawesome.com/

13. GTmetrix

GTmetrix is a free tool that analyzes your page's speed performance. Using PageSpeed and YSlow, GTmetrix generates scores for your pages and offers actionable recommendations on how to fix them.

Link: https://gtmetrix.com/

14. Resume.com

The Best Free Resume Builder No gimmicks. At Resume.com, you can build a professional resume that highlights your best qualities so you can land your dream job without any out of pocket expenses. Applying for jobs shouldn't cost you money.

Link: https://www.resume.com/

15. daily.dev

daily.dev is the easiest way to stay updated on the latest programming news. It's a feed of articles that's ranked by a massive community of developers. Get the best content from the top tech publications on any topic you want. All in one browser extension

Link: https://daily.dev/

16.DevDocs

Fast, offline, and free documentation browser for developers. Search 100+ docs in one web app: HTML, CSS, JavaScript, PHP, Ruby, Python, Go, C, C++…

Link: https://devdocs.io/

17. Feather Icons

Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and readability.

Link: https://feathericons.com/

18. shortcode.dev

A collection of useful snippets and code examples. Elements, attributes and selectors.

Link: https://shortcode.dev/

19. Canva

Create beautiful designs with your team. Use Canva's drag-and-drop feature and layouts to design, share and print business cards, logos, presentations and more.

Link: https://www.canva.com/

20. Mockuper.net

mockuper, the free mockups generator to create custom images to show your awesome works.

Link: https://mockuper.net/

21. CSS Nectar

CSS Nectar is a css website design showcase for web designers and developers. Every day we select the best of the web design and add it to our gallery.

Link: https://cssnectar.com/

22. BGJar

Free svg background generator for your websites, blogs and apps.

Link: https://bgjar.com/

23. Photopea

Photopea Online Photo Editor lets you edit photos, apply effects, filters, add text, crop or resize pictures. Do Online Photo Editing in your browser for free!

Link: https://www.photopea.com/

24. Vercel

Deploy web projects with the best frontend developer experience and highest end-user performance.

Link: https://vercel.com/

25. fun-javascript-projects

Learn Javascript for free in a practical, project based approach.

Link: https://fun-javascript-projects.com/

26. Flaticon

3743500+ Free vector icons in SVG, PSD, PNG, EPS format or as ICON FONT. Thousands of free icons in the largest database of free vector icons!

Link: https://www.flaticon.com/

27. Awesome Python

A curated list of awesome Python frameworks, libraries and software.

Link: https://awesome-python.com/

28. CSS Reference

CSS Reference is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.

Link: https://cssreference.io/

29. Sidebar.io

The five best design links, every weekday.

Link: https://sidebar.io/

30. Grid by Example

Everything you need to learn CSS Grid Layout.

Link: https://gridbyexample.com/

31. Heroicons

Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.

Link: https://heroicons.com/

32. Latency

Free global latency performance testing tool.

Link: https://latency.apex.sh/

33. Work Remote

Unleash Opportunities, From Anywhere!

Link: https://workremote.cc/

34. Unsplash

Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos.

Link: https://unsplash.com/

35. Simple Icons

1400+ Free SVG icons for popular brands.

Link: https://simpleicons.org/

36. CSS Stats

CSS Stats provides analytics and visualizations for your stylesheets.

Link: https://cssstats.com/

37. Squoosh.app

Compress and compare images with different codecs, right in your browser.

Link: https://squoosh.app/

38. JavaScript Quiz

JavaScript Quiz – Check your knowledge by having fun.

Link: https://javascriptquiz.com/

39. UI Garage

Daily UI inspiration & patterns for designers, developers to find inspiration, tools and the best resources for your project.

Link: https://uigarage.net/

40. unDraw

The design project with open-source illustrations for any idea you can imagine and create. Create beautiful websites, products and applications with your color, for free.

Link: https://undraw.co/

41. Figma

Build better products as a team. Design, prototype, and gather feedback all in one place with Figma.

Link: https://www.figma.com/

42. Hashnode

Hashnode is a free content creation platform and community that allows you to publish articles on your own domain and helps you stay connected with a growing developer community.

Link: https://hashnode.com/

43. Free CSS

Free CSS has 3133 free website templates, all templates are free CSS templates, open source templates or creative commons templates.

Link: https://www.free-css.com/

44. DrawKit

Free vector SVG illustrations for you to use on your next project, no attribution required! Vector illustrations, packs, icons and more.

Link: https://www.drawkit.io/

45. Public APIs

A collective list of more than 1000 Free Public and Open REST APIs for developers like movie APIs, Anime APIs, weather APIs, music APIs, games and comics APIs, currency APIs, sports APIs, science APIs, open data APIs, etc.

Link: https://public-apis.io/

46. CSS.gg

Pure CSS icons library, Customizable & Retina-Ready built 100% in pure CSS, SVG, SVG Sprite, styled-components, Figma and Adobe XD. Easy integration: Embed, NPM & API.

Link: https://css.gg/

47. Jr.DevJobs

Jobs for Junior Developers

Link: https://www.jrdevjobs.com/

48. Notion

A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team.

Link: https://www.notion.so/

49. Compresspng.com

PNG compression and optimization tool to compress PNG images into PNG-8 format with transparency support

Link: https://compresspng.com/

50. Compressor.io

Optimize and compress JPEG, PNG, SVG, GIF and WEBP images online. Compress, resize and rename your photos for free.

Link: https://compressor.io/

If you liked this article, be sure to ❤️ it.

Thanks for reading. If you're interested to read more about web development, check out my blog. I'm a web developer for years now and I write about web development real-life tips and resources.

Happy coding! ❤️

GitHub repositories to improve your programming skills

Marko Denic — Mon, 07 Dec 2020 06:30:51 +0000

1. Free Programming Books

Freely available programming books

167k ⭐

Repo: https://github.com/EbookFoundation/free-programming-books

2. Awesome

Awesome lists about all kinds of interesting topics

148k ⭐

Repo: https://github.com/sindresorhus/awesome

3. Coding Interview University

A complete computer science study plan to become a software engineer.

144k ⭐

Repo: https://github.com/jwasham/coding-interview-university

4. Developer Roadmap

Roadmap to becoming a web developer in 2020

138k ⭐

Repo: https://github.com/kamranahmedse/developer-roadmap

5. Public APIs

A collective list of free APIs for use in software and web development.

102k ⭐

Repo: https://github.com/public-apis/public-apis

6. Awesome Python

A curated list of awesome Python frameworks, libraries, software, and resources

89.9k ⭐

Repo: https://github.com/vinta/awesome-python

7. JavaScript Algorithms

Algorithms and data structures implemented in JavaScript with explanations and links to further readings

87.4k ⭐

Repo: https://github.com/trekhleb/javascript-algorithms

8. Node Best Practices

The Node.js best practices list

55.8k ⭐

Repo: https://github.com/goldbergyoni/nodebestpractices

9. Real World

"The mother of all demo apps" — Exemplary fullstack Medium.com clone powered by React, Angular, Node, Django, and many more

50.9k ⭐

Repo: https://github.com/gothinkster/realworld

10. Tech Interview Handbook

Materials to help you rock your next coding interview

47.4k ⭐

Repo: https://github.com/yangshun/tech-interview-handbook

11. Clean Code JavaScript

Clean Code concepts adapted for JavaScript
42.3k ⭐

Repo: https://github.com/ryanmcdermott/clean-code-javascript

12. Free For Dev

A list of SaaS, PaaS and IaaS offerings that have free tiers of interest to devops and infradev

41.4k ⭐

Repo: https://github.com/ripienaar/free-for-dev

13. OG AWS

Amazon Web Services — a practical guide

27.7k ⭐

Repo: https://github.com/open-guides/og-aws

14. Awesome For Beginners

A list of awesome beginners-friendly projects.

26.1k ⭐

Repo: https://github.com/MunGell/awesome-for-beginners

15. Javascript Questions

A long list of (advanced) JavaScript questions, and their explanations.

26k ⭐

Repo: https://github.com/lydiahallie/javascript-questions

Happy coding! ❤️

If you liked this article, be sure to ❤️ it.

Initially created on Twitter:

// Detect dark theme var iframe = document.getElementById('tweet-1335833349672361984-537'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1335833349672361984&theme=dark" }

10 JavaScript Array methods to simplify your code.

Marko Denic — Mon, 30 Nov 2020 07:19:27 +0000

Let’s start!

1. `filter()`

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

2. `forEach()`

The forEach() method executes a provided function once for each array element.

3. `some()`

The some() method tests whether at least one element in the array passes the test implemented by the provided function. It returns a Boolean value.

4. `every()`

The every() method tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value.

5. `includes()`

The includes() method determines whether an array includes a certain value among its entries, returning true or false as appropriate.

6. `map()`

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

7. `reduce()`

The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.

8. `sort()`

The sort() method sorts the elements of an array in place and returns the sorted array. The default sort order is ascending, built upon converting the elements into strings, then comparing their sequences of UTF-16 code unit values.

9. `find()`

The find() method returns the value of the first element in the provided array that satisfies the provided testing function.

10. `findIndex()`

The findIndex() method returns the index of the first element in the array that satisfies the provided testing function. Otherwise, it returns -1, indicating that no element passed the test.

If you liked this article, be sure to ❤️ it.

Let's keep in touch:

Website: markodenic.com
Twitter: @denicmarko

Use console.log() like a pro

Marko Denic — Mon, 23 Nov 2020 06:13:05 +0000

Using console.log() for JavaScript debugging is the most common practice among developers. But, there is more...

The console object provides access to the browser’s debugging console. The specifics of how it works varies from browser to browser, but there is a de facto set of features that are typically provided.

The most common Console methods:

console.log() – For general output of logging information.
console.info() – Informative logging of information.
console.debug() – Outputs a message to the console with the log level debug.
console.warn() – Outputs a warning message.
console.error() – Outputs an error message.

Custom CSS styles for a console.log()

The console.log output can be styled in DevTools using the CSS format specifier.

String substitutions

When passing a string to one of the console object’s methods that accept a string (such as log()), you may use these substitution strings:

%s – string
%i or %d – integer
%o or %0 – object
%f – float

`console.assert()`

Log a message and stack trace to console if the first argument is false.

`console.clear()`

Clear the console.

`console.count()`

Log the number of times this line has been called with the given label.

`console.dir()`

Displays an interactive list of the properties of the specified JavaScript object.

`console.group()` and `console.groupEnd()`

Creates a new inline group, indenting all following output by another level. To move back out a level, call groupEnd().

HTML elements in the console

`console.memory`

The memory property can be used to check out the heap size status

Note: memory is a property and not a method.

`console.table()`

Displays tabular data as a table.

`console.time()` and `console.timeEnd()`

console.time() – Starts a timer with a name specified as an input parameter. Up to 10,000 simultaneous timers can run on a given page.
console.timeEnd() – Stops the specified timer and logs the elapsed time in seconds since it started.

`console.trace()`

Outputs a stack trace.

If you like this article, chances are you'd like what I tweet as well. Consider following me on Twitter.