teleren/devto huggingface dataset:
🦊 GitLab Cheatsheet - 10 - Templates and Quick actions
Tags: gitlab, cheatsheet, tutorial, beginners
Published: 2021-11-29 17:56:59

The new GitLab Cheatsheet speaks about templates and quick actions.

<a href="https://jeanphi-baconnais.gitlab.io/img/cheatsheet/GitLabCheatsheet-10-Templates_and_Quick_actions.jpg" alt="10 - Templates and Quick actions" target="blank">
<img src="https://jeanphi-baconnais.gitlab.io/img/cheatsheet/GitLabCheatsheet-10-Templates_and_Quick_actions.jpg" alt="10 - Templates and Quick actions"/>

</a>

I will create others cheatsheet. Tell me if you have comments or suggest about those cheatsheet 😃.
How to create a sleek "baseline" animation in CSS under 15 lines of code
Published: 2021-11-29 17:24:26

Off late, I've been obsessed with this trend in web pages. I saw this animation in Canva. Here's how to make it: 


#### Step 1
Let's create some HTML. We'll need a `span` element. 
```html
<h1>
  <span class="text">Hello, World!</span>
</h1>
```
### Step 2
Let's create some CSS
```css
h1 {
  overflow: hidden;
}
h1 .text {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  display: inline-block;
  animation: baseline 0.5s forwards cubic-bezier(.4,0,.39,1.04);
}
@keyframes baseline {
  0% { transform: translateY(140%); }
  100% { transform: translateY(0); }
}

/* Just for basic styles */
html {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
body {
  color: white;
  background: #37474f
  ; 
}
```
**Explained**
* `font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;` - This is just for fancy stuff
* `display: inline-block;` - We'll need this to animate the transform property
* `@keyframes baseline` - This is the defined animation
* `overflow:hidden` - Hides the overflow of the header

Great! You've successfully made a baseline CSS animation. Hit the :heart: button if you liked this post!
Demo: https://jsfiddle.net/ManuTheCoder/xao1s6kd/68/
TailwindCSS CheatSheet
Tags: tailwindcss, webdev, beginners, tutorial
Published: 2021-11-29 17:15:52

Hey guys👋👋 I just made a tailwindcss cheatsheet in mindmap format, please check it out. Hope it's useful for you. 😀😀😀

[TailwindCSS CheatSheet](https://www.musicoding.com/blog/tailwindcss-cheatsheet-in-mindmap-format)
CSS Maker: Wizards Toolkit utility
Tags: css, javascript, php, webdev
Published: 2021-11-29 17:10:23

Here is a free utility so you can quickly modify existing color themes and easily create brand new color themes using CSS.

Originally built for Wizards Toolkit and MaterializeCSS, this can easily be modified for _**any**_ HTML/CSS library.

With the use of JScolor and some fancy JavaScript you can see your color choices change the page in real-time.  The HTML page is built to show all the major elements we use of MaterializeCSS.

For the video/visual version of this information see:
{% youtube t4o8vOx_j80 %}

The basic concept is your library will have a core CSS file.  For us that’s materialize.css.  Using variables with Cascading Style Sheets is extremely powerful.  We want to override their default colors in a way that affects all the many HTML elements.

So we created a wtkGlobal.css file with the global overrides.  We wanted both a Light theme and a Dark theme option so we also created a wtkLight.css and wtkDark.css.

Next we wanted to overlay different color themes.  So we created wtk{SomeColorName}.css files which are nothing but a set of CSS variables.  By listing them in this order in your HTML it properly sets up everything.

* materialize.min.css (or whatever CSS framework you are using)
* wtk{YourColor}.css
* wtkLight.css or wtkDark.css
* wtkGlobal.css

So this utility allows you to pick any of the CSS files in the folder and see how the page will look.  This requires the CSS file to start with 'wtk' and excludes our wtkLight, wtkDark and wtkGlobal files.  You can then modify each of the main color types and see immediately what the effect is in both Light and Dark mode.  Once you have designed a color theme you like you can save it.

I also created a page on the web where you can build color themes and have the CSS shown in a browser tab for you to "Save As".  The below link provides you access to this page plus all the source code and all our WTK CSS files.

For full usage this utility requires PHP (but to use the online website does not).  With that you’ll be able to easily modify it for other HTML/CSS libraries like Bootstrap or whatever you’re using.  Of course any good coder can easily modify this code to work with other languages and still benefit from the JScolor and JavaScript coding for testing and making new CSS color templates.

Download the free utility at:
https://wizbits.me/CSSmaker

That page will also send you a link where you can generate CSS color themes without needing PHP.

Brought to you by Wizards Toolkit the PHP, SQL and JavaScript low-code development library.

Wizards Toolkit
https://wizardstoolkit.com

MaterializeCSS
https://materializecss.com

JScolor
https://jscolor.com
Note Catch-up
Tags: javascript, beginners, flatiron
Published: 2021-11-29 16:57:40

Over the Thanksgiving holiday I traveled and didn't have access to my desktop computer (I know, I know - who has a desktop anymore?) so I spent a little bit of time going back through some lessons and making notes using VSC. It helped my understanding tremendously to go back and type functions out myself. Running the notes is not possible, because I like to practice and see the progression of functions and sometimes that involves assigning the same variable multiple times. But these notes are not meant to be functional, they are meant to give me a well organized way to return to a concept and review it quickly.

I highly recommend making files of notes as you're learning, it helps quite a bit with the more complicated concepts.
My journey of building games
Tags: unity3d, beginners, gamedev
Published: 2021-11-29 16:54:26

In this blog post, I will be sharing my journey as a game developer.

## How did I come to know about game development ?

Well, my current college semester has the "Game Programming" subject. It consists of :

- Theory
- Maths
- DirectX
- Unity

Unity intrigued me as it visually shows the theoretical concepts (*like world space, local space, camera angles, etc.*) which helps to understand them better.

## How I got started ?

My first Unity project isn't a full-fledged game. It is a simple prototype which runs on PC and Android. There isn't any cool stuff in it but I believe the project gave me a great headstart. I came to know the Unity app's UI, components, prefabs, types of builds available, etc.

{% github https://github.com/divyakelaskar/platformer-3d-game %}
 
The next 2 projects [Space Shooter](https://github.com/divyakelaskar/Space-Shooter-Game) and [2D UFO](https://github.com/divyakelaskar/UFO-Game) are standalone PC games. They made me aware of the extensive resources by Unity. I mostly find myself browsing these 3 websites often :

- [Official docs](https://docs.unity.com) 

- [Official Forum](https://forum.unity.com)

- [Unity Learn : Official Tutorials](https://learn.unity.com)

I had used pre-made models for these 2 games. It got me curious about modelling and game art. So, I tried out 3D modelling for a while :

{% twitter 1449412953992691712 %}

After building Android and PC based games, I thought of trying out WebGL games. These can played in a browser. Thus, I built [Roll a ball](https://github.com/divyakelaskar/Roll-a-ball) as a browser based game and released my first game on `itch.io`. You can try it live here 👇

https://divyakelaskar.itch.io/roll-a-ball

##  Things I learned :

Scripting in Unity is a good way to learn C#. Prior to Unity, I hadn't worked with C#. It introduced to concepts of the C# language like namespaces. I feel that C# has a similar syntax to Java.

The Unity's physics engine is amazing. Unity being visual helps to setup physics of your game. E.g, If a game object is able to pass through walls, we can add the physics components related to it. (*like rigidbody, box collider, etc.*)

Building games is fun. It comprises of making game objects, coding their behaviour, designing the game's UI, VFX, animation, graphics and many such things. Its been awesome to these things. (*bit by bit*)

Currently, I'm building a 3D FPS game for this year's  [GitHub GameOff](https://itch.io/jam/game-off-2021)  game jam and documenting my progress on Twitter.

{% twitter 1462819212787798021 %}


That's it for this blog post. Till then,
### Keep exploring, keep building !
KVision 5.6.0 is released
Tags: kvision, kotlin
Published: 2021-11-29 16:53:03

---
title: KVision 5.6.0 is released
published: true
description: KVision is an open source web framework created for Kotlin/JS.
tags: kvision,kotlin
---

[KVision](https://kvision.io) is an open source web framework created for Kotlin/JS. It allows developers to build modern web applications with the Kotlin language.

I have released KVision 5.6.0. Some major dependencies were upgraded, keeping KVision up to date with both Kotlin and JavaScript ecosystem.

Highlights of this release include:
- Kotlin 1.6 support
- Upgraded dependencies (Coroutines 1.6.0-RC, Serialization 1.3.1, Spring Boot 2.6.0, Ktor 1.6.6, Micronaut 3.2.0, Dokka 1.6.0)
- Upgraded Snabbdom, Tabulator and Chart.js libraries
- Other bugfixes and improvements

For more details about this release see the [changelog](https://github.com/rjaros/kvision/releases/tag/5.6.0).

Both `kvision-tabulator` and `kvision-chart` modules are now based on new major versions of [Tabulator Tables](http://tabulator.info) and [Chart.js](https://www.chartjs.org). Both modules contain breaking changes. Please take a look at the migration guides for Tabulator 5 [http://tabulator.info/docs/5.0/upgrade](http://tabulator.info/docs/5.0/upgrade) and Chart.js 3 [https://www.chartjs.org/docs/latest/getting-started/v3-migration.html](https://www.chartjs.org/docs/latest/getting-started/v3-migration.html). Unfortunately both are quite huge documents. If you still want to use old versions, just change KVision dependencies - the old modules are published with new names: `kvision-tabulator4`, `kvision-tabulator4-remote` and `kvision-chart2`. The old components are deprecated but there are no plans to remove them (at least not before KVision 6).

Don't forget to ⭐️ my [project](https://github.com/rjaros/kvision) if you like it!

As always, any feedback is appreciated!
Binary Search Algorithm | Javascript
Tags: javascript, algorithms, webdev, programming
Published: 2021-11-29 16:40:55

The binary search algorithm works on the principle of divide and conquer. Before searching, the array has to be in the sorted form then the middle element in the array is checked. If the match is found the element index is returned.

If the middle element is less than the searching element then the search happens in the right sub-array otherwise, the search happens in left sub-array

## Let's write some code

Consider an array of numbers, remember array indexing starts form zero '0'.

```javascript
const numbers = [4, 10, 12, 26, 34, 39, 42, 57];
```

Now we have a function with arguments as sorted array and the number which we need to find.

```javascript
function binarySearch(sortedArray, x) {
  let lowIndex = 0;
  let highIndex = sortedArray.length - 1;

  while (lowIndex <= highIndex) {
    let midIndex = lowIndex + Math.floor((highIndex - lowIndex) / 2);
    if (sortedArray[midIndex] === x) {
      return midIndex;
    } else if (sortedArray[midIndex] < x) {
      lowIndex = midIndex + 1;
    } else {
      highIndex = midIndex - 1;
    }
  }
  return -1;
}

binarySearch(numbers, 10); // returns 1
binarySearch(numbers, 34); // returns 4
binarySearch(numbers, 63); // since 63 is not there in numbers, returns -1

// Save the file and run it using Node.JS
// Open terminal and give command: node [filename].js
```

`Math.floor()` function rounds a number downward to its nearest integer. 
for example: `Math.floor(2.5) // returns 2`

## Time Complexity

The time complexity of Binary Search Algorithm is O(log n).

* Best case scenario O(1), if the finding element is at centre.
* Worst case scenario could be when the finding element is present at extremely left or right from centre and if it is not at all present in array.

Well, that's it folks. I hope you learned something share it with your friends. Follow me for more posts just like this and 
if you have any questions let me know in the comment section.

Cheers!
Release 0.4 Planning
Tags: opensource
Published: 2021-11-29 15:21:51

## Intro
For the last release, I have to work on something larger and more impactful than anything I have done in the previous three releases. This blog will be separated into 3 other blogs, Release 0.4 - Planning, Release 0.4 - Progress, and Release 0.4 - Release.
In this part, I will talk about finding a project, finding an issue, and planning how to work on an issue.

## Looking for a project

I wanted to continue my work on heptagram repository, but the owner switched to a new project and plan to archive the project. So I look to telescope and IPC144.

## Looking for an issue
I'm looking for a fullstack issue. It would help me to develop more skills. I found 3 issues:
https://github.com/Seneca-CDOT/telescope/issues/2418
https://github.com/Seneca-CDOT/telescope/issues/2506
https://github.com/Seneca-ICTOER/IPC144/issues/113

## Planning 
For issues [#2418](https://github.com/Seneca-CDOT/telescope/issues/2418), I first check where the code is located. I found that the API is located here https://github.com/Seneca-CDOT/telescope/blob/master/src/api/status/src/services.js, and the dashboard is located here https://github.com/Seneca-CDOT/telescope/blob/master/src/api/status/public/index.html.
I will think about a design to make it prettier and fit to the rest of the dashboard. To display the status I will fetch from the API and base on the response I will show in green for OK and red for not OK

For issues [#2506](https://github.com/Seneca-CDOT/telescope/issues/2506), I first check where the code is located. I found the HTML for the dashboard is located here https://github.com/Seneca-CDOT/telescope/blob/master/src/api/status/public/index.html and to fetch the data the code is located here https://github.com/Seneca-CDOT/telescope/blob/master/src/api/status/public/js/github-stats.js. The format for displaying the commit will be 
```
(avatar) Full Name 2dc6a97
```
where commit sha will be in red and mono font. To display the data I will retrieve commit URL and sha from the fetch data and put it into the HTML.

For issues [#113](https://github.com/Seneca-ICTOER/IPC144/issues/113) is to bring all images from ict.senecacollege.ca into the repo. First of all, I will download all the images then compress them to reduce more the size of the image. After that, I will replace all the links for all markdowns. Then double-check with the original website that everything is correct.
5 Articles every WebDev should read about performance (#1)
Tags: javascript, webdev, tutorial, performance
Published: 2021-11-29 16:16:50


## Web Performance Metrics Cheatsheet
> A summary an explanation of the web performance metrics

https://bitsofco.de/web-performance-metrics-cheatsheet/

---

## CLS at BuzzFeed — Part 1: Raising The Floor
> This article is part of a three-part series documenting how BuzzFeed tackled their issues with Cumulative Layout Shift as part of a broader Web Vitals initiative. 

https://tech.buzzfeed.com/improving-cumulative-layout-shift-at-buzzfeed-part-1-8b7ead2381dd

---

## Optimizing resource loading with Priority Hints
> Priority hints indicate the relative importance of resources to the browser. They can enable optimal loading and improve Core Web Vitals.

https://web.dev/priority-hints/

---

## Towards an animation smoothness metric
> Learn about measuring animations, how to think about animation frames, and overall page smoothness.

https://web.dev/smoothness/

---

## Top Challenges of Automated End-to-End Testing
> See which challenges affect most end-to-end testing efforts and learn how to overcome them to help build and maintain high-quality applications.

https://dev-tester.com/top-challenges-of-automated-end-to-end-testing/

---

Follow me on [Twitter: @martinkr](http://twitter.com/_martinkr).

Photo by [Alex Kulikov](https://unsplash.com/@burntime) on [Unsplash](https://unsplash.com)

---
 
[![Subscribe to the weekly modern frontend development newsletter](https://modernfrontend.dev/banner/banner_583-111.png)](https://modernfrontend.dev/)

---
Javascript Namespace pattern 
Tags: javascript, webdev, codenewbie, beginners
Published: 2021-11-29 15:57:12

## Namespace Pattern 


Namespace can dramatically reduce the number of globals required and at the same time prevents the collisions or excessive name prefixing .
Its important to know that javascript doesn't have namespaces built into the language syntax , but you can achieve this feature quite easy .Instead of adding functions,objects and variables into global scope you can create one global object and add all the functionality 

### Refactor anti-pattern to Namespace example
Consider this example 

```
//anti-pattern example
function Read() {}
function Speak() {}
var topic_to_learn = "Javascript";
//objects
var book1 = {}
book1.data = {title:"Learn javascript",author:"John doe"}
var book2 = {};
```
in this example all the functions,variables and objects are declared and polluting the global scope of your application .  You can refactor this type of code by creating a single global object for your application , called for example *Student* and change all functions and variables to become properties of your global object
```
//Declare the global object
var STUDENT = {}
//constructors
STUDENT.Read = function(){};
STUDENT.SPEAK = function(){};

//a varibale
STUDENT.topic_to_learn = "javascript"

//object container 
STUDENT.books = {}

//nested objects 
STUDENT.books.book1 = {};
STUDENT.books.book1.data = {title:"Learn javascript",author:"John doe"}
//add second book
STUDENT.books.book2 = {};

```
This pattern is good way to namespace your code and avoid naming collisions not only in your own code but collisions between your code and third-party code on the same page .

### Drawbacks of Namespace
* More to type , prefixing every variable and function adds up in the total amount of code that needs to be downloaded
* Only one global instance as a result any part of the code can modify the global instance and the rest of the functionality gets the updated state
* Long nested names = slower property resolution lookups
What is "staff augmentation"?
Tags: career
Published: 2021-11-29 15:22:12

**In a nutshell:** Staff/Team Augmentation is when a specialist is recruited for a particular project while being officially employed at another company 

Wins for devs: 
★ tons of new experience with people and technologies
★ interesting projects
★ (often) higher rates

Wins for companies: 
★ spending less on additional costs
________________________________
Read more on our blog:
https://exceed-team.com/blog/what-is-staff-augmentation
Visual editing !== No code
Tags: cms, react, javascript, nocode
Published: 2021-11-29 15:03:53

**Belief #1**: I believe that a corporate website should be created with code.

**Belief #2**: I believe that a CMS should offer the best experience to its everyday users: content creators. And the best user experience is visual editing.

**Are these beliefs in contrast?** Not at all! Follow me.

## The problem

### If you are a web developer...

...you know it: **every corporate website is unique**.

- You need total control for pixel-perfect corporate image
- You must be sure nobody will break the design
- You may have ad-hoc interactive features which require a JavaScript framework

### If you are a content creator...

... you know it: **creating content filling gray forms is boring**.

- You want to edit visually, like you do in Word or Pages
- You want the freedom to compose your page as you need
- You want to be sure you won't break things

## Solutions

### 1. No-code tools 🙁

Tools like Wix or Webflow have a great user experience, but they have pitfalls that make them unusable for corporate websites. They are either:

- **Not flexible**: the tools that are easier to use, usually force you to choose one of the proposed graphic templates. Great for a freelancer project, no-go for a corporate website.
- **Complex**: more advanced tools, like WebFlow, are very flexible, but they are more complex to use.
- **Too flexible**: what's more, it's not the content creator business to create the design and tweak CSS parameters. For a corporate website, the design system is created by designers and developers: content creators should not have the ability to alter the the design system. We don't want green text on red background, right?

### 2. Headless CMSs 😐

**Headless CMS ⇒ gray forms** ⇒ not great for content creators.

### 3. React Bricks 😍

[React Bricks](https://reactbricks.com) has the **advantages of both** Headless CMSs and a No-code tools, **without the problems** that Content creators have with headless CMSs and that Developers have with No-code tools.

#### For Developers

**Developers create content blocks with code** (they are just React components) using the React Bricks library. **React Bricks adds the visual editing magic.** And it's really fun.
React Bricks provides also the documentation for your design system.

#### For Content creators

Content creators have a best-in-class visual interface:

- **They can edit text and images directly** as you do in Word or Pages
- **They can change properties** like background color etc. using sidebar controls. They can change only the properties that the developers chose to be editable and with the values that are allowed.

**They have all the freedom they want and no more than they need.**

## Conclusion

Code and Visual editing can go hand-in-hand: to create a corporate website that's easy and fun to edit in a visual way, you need code.
And a bit of magic. **React Bricks brings the magic.**

[Learn more on the React Bricks website](https://reactbricks.com)
[Infographics] Securing serverless architectures
Tags: serverless, security, aws, programming
Published: 2021-11-29 14:58:25

Serverless reduces a lot of operational burdens, but a 𝘀𝗲𝗰𝘂𝗿𝗲 𝗮𝗿𝗰𝗵𝗶𝘁𝗲𝗰𝘁𝘂𝗿𝗲 is still your responsibility 🔐

From web threats, over IAM principles to auditing & monitoring.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8t02iq9bg7rmvkvkkoj9.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3bgl1u4zstu14yzcz0ks.png)
In-house teams... or?
Tags: career, discuss
Published: 2021-11-29 14:57:47

What do you think are the best ways to hire/be hired as a software developer?

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5gt5t55nsfijo4n6tagu.png)

➊ Augmentation (employed at a company while working for another)
➋ In-house (employed and working for the same company)
➌ Remote (officially employed and working from home)
➍ Freelance (working without being employed at any company officially)
Getting started - Data Discord Bot
Published: 2021-11-29 14:50:04

A long time ago I started programming with discord.js, unfortunately I never had time to finish a bot! Now I have the time and desire to finally build a bot! I'm trying as best I can to share my journey to the finished bot with you.

## ToDo list:
- Customizable welcome message (with Database)
- ModLog system (with Database)
- Birthday system (with Database)
- Economy System
- whois ✅
- kiss + slap another user ✅
- Rickroll another user ✅
- Avatar ✅
- Purge ✅
- Ban + Kick ✅
- Creator info ✅
- YouTube (Discord Together) ✅
- Ping ✅
- Help ✅
Redux VS React Context
Tags: javascript, androidclub, react, redux
Published: 2021-11-29 14:47:49


So, we all have worked on React or React Native for developing web and mobile applications. There are times we are stuck on which state management library to use. 
The most famous approaches are 
- Redux
- Context API

Hop on to this blog and know all there about the pros and cons of both!!
{%link https://dev.to/riteshshukla04/redux-vs-react-context-5h22 %}