teleren/devto huggingface dataset:
Live code: Remixing the cyber-punk-text webcomponent
Tags: webcomponents, webdev, cyberpunk, haxtheweb
Published: 2020-12-17 18:10:54

I recently saw @matsuuu_ post about a fun [cyber-punk themed subtitle text webcomponent](https://twitter.com/matsuuu_/status/1337375210996109313) he made. I loved this idea and it seemed like a similar element to [MoAr SaRcAsM](https://dev.to/btopro/moar-sarcasm-plz-a-totaly-necessary-web-components-tutorial-3c51) so I decided to live code remixing it a bit.

I took this as a boilerplate and then implemented it in LitElement, as a SuperClass, and with our SimpleColors color element. Here's the live code session showing what I made (code links below)

{% youtube UWKKsJJ7RiM %}

Video: https://www.youtube.com/watch?v=UWKKsJJ7RiM&feature=youtu.be
Source: https://github.com/elmsln/lrnwebcomponents/tree/master/elements/future-terminal-text
NPM: https://www.npmjs.com/package/@lrnwebcomponents/future-terminal-text
Small Explanation of Recursive methods
Tags: algorithms
Published: 2020-12-17 18:07:56

Recursive methods, unlike iterative methods, are easy to write but in fact more complex to get the right approach and actually write them, indeed you will have to think about two key factors to create recursive functions, these keys are : the last value and the edge cases.

To understand recursive methods we have to compare it to the iterative methods, the iterative methods are based on a logic of step by step in which the first step begins from the start and then using its result go through the second and third using each time the result of the previous one until we get to the very end and get finally the solution.
for example the calculation of X^n :
- we start by X*X 
  - let's say this result is : Y
- second step is Y * X  
  - let's say this result is : Z
- third step is Z * X

- And we continue until N times, you do see that we are using each time the previous result.

With recursive methods we work backward by using the result of the last step and then going up to the very first step, we use the result of the last step because it's the only value we know.
we use a recursive function that calls itself, this function doesn't calculate anything it just specifies how to do the calculations in each call of the function, it is only at the last call of the function that the script knows the value that is needed when it does, everything starts to work backward indeed all the previous function calls that were stacking up start to be called one by one. (it goes deep until it hits the final value and then ascend to the top to finally get the result).

we need to specify the final result otherwise the calls will never end and we will have an infinitely recursive function.

again we need to know two things: the final value of the recursion and how the function is written because a recursive function is very elegant but needs to be well thought out, it is at the same time simple and complex but nonetheless very powerful.

- Example of a simple recursive function with Python

```python
def power(x,N):
    # when we are at the final function call the if is true (N==0)
    if N == 0:
        result = 1.0
    else:
        result = x*power(x, N-1)

    # when we are at the final function call (N==0) this is returned 
    # also when all the function calls are completed this is returned as the final result
    return result

```
Best book to crack coding interview- Cracking the coding Interview 
Tags: computerscience, books
Published: 2020-12-17 18:06:52

If you really want to crack coding interviews so you have to prepare for them. So today we have something special for you. 
Cracking the Coding Interview, 6th Edition is here to assist you thru this process, teaching you what you would like to understand and enabling you to perform at your absolute best . Author have coached and interviewed many software engineers. The result's this book.



Read full blog post here [Here!](https://blog.codewithgauri.tech/blog/cracking-the-coding-interview-pdf/)


#Solutions for Cracking the coding Interview 
Answers in Java are contained directly in this repo and are the same solutions found in the book. Solutions in other programming languages are contributed by the community and each have their own dedicated repos which are referenced from this repo as git submodules. What this means for cloning:

Solutions are here for Cracking the coding interview 6th-Edition : [Github Download!](https://github.com/codewithgauri/CtCI-6th-Edition)
Optional Chaining in JavaScript ES2020 Illustrated
Tags: javascript, webdev, optionalchaining, es2020
Published: 2020-12-17 17:56:13

[Optional Chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) is one of the more popular features in the [ECMAScript 2020 standard](https://en.wikipedia.org/wiki/ECMAScript#11th_Edition_%E2%80%93_ECMAScript_2020).&nbsp;  Here's an illustration on how it works:

NOTE: the full-resolution version is [available here](https://github.com/Richard-Burd/javascript-es2020-sandbox).
![an image of optional chaining](https://i.imgur.com/uovsd8D.jpg)

This image above will be the cornerstone in the next edition of my [cheat sheet series](https://richard-burd.github.io/portfolio/software/#cheat-sheets-for-languages--frameworks), but for now it can be filed away in you personal [zettelkasten](https://en.wikipedia.org/wiki/Zettelkasten) (for quick reference) if it may be of use later on.
Free ready-made helpdesk software template | UI Bakery
Tags: webdev, showdev, ui, startup
Published: 2020-12-17 17:48:27

Hey everyone!  

Glad to share a ready-made IT helpdesk software template with you. Use it to organize your clients’ requests in one place to always keep them satisfied with your product or service.

✔️ Customizable.
✔️ Downloadable.
✔️ Responsive.
✔️ Free.

[Grab it here](https://uibakery.io/templates/helpdesk?utm_campaign=ui_bakery%20-%20template%20-%20helpdesk%20-%20cacq%20-%20xx%20-%20views&utm_source=Dev&utm_medium=webdev&utm_content=helpdesk_announce)
See your flow coverage changes on every PR! 
Tags: javascript, webdev, react, github
Published: 2020-12-17 17:27:28

Recently, I was going through a repo I contribute to in order to convert files to use Flow type checking, when I had the idea to create a [GitHub action] (https://github.com/jackieo5023/flow-coverage-compare) to comment on PRs the difference in flow coverage on the files touched by the PR. I would love if this was useful to someone, and I appreciate any and all feedback!
Why developers must also know some UX and SEO to be great developers
Published: 2020-12-17 17:25:02

While recently working with my team (I am a founder of a [Digital Marketing Agency](https://www.amraandelma.com/)), A&E, based out of NYC), it occurred to me just how distanced developers were from UX and SEO; their work perpetually suffered as they chose to limit themselves to only one discipline. 

No matter how great the product was, users continued to judge us on the basis of our design and their experience. Unless we were to perpetually analyze our performance using UX software, we would always fall behind. Google would use user feedback (i.e. duration of each session) to either rank us higher or lower. Product could have been superb, but if the SEO and UX were poor, our sales would have declined. 

Below, I am including some tips for developers looking to enhance the reception of their products: 

1. Always keep users in mind: keep pealing the layers until the product is as simple as possible. 
2. Learn the basic SEO: your employers will appreciate the integrated approach to your development. They are not looking to make developers into SEO experts, but advising on speed and performance of the website will prove very valuable.
3. Analyze UX site performance using software: you may think your work is great, but software performance is best judged by users. Use software like luckyorange to determine what type of errors users may be experiencing. UX software not only helps deal with bugs but also allows design optimization. 
4. Share your work on social media and get some feedback: we personally covered some [tech influencers](https://www.amraandelma.com/100-top-tech-influencers-in-2020/) on our blog, and it is still surprising how little the development community wants to open up and receive critique on their work or just plain ask for suggestions.
React Error: Can't resolve module (not found) in React.js
Tags: react, javascript
Published: 2020-12-17 17:20:27

Do you have the import line for your React module correct, but getting an error in console?
```javascript
import App from "./components/App";
```

For me, I had the input correct but `npm start` can be buggy. If I move files to different folders, npm start doesn't pick up on these changes. I need to cancel npm start process, make the move, save and then run `npm start` and it will see the files now.

Not a problem! Except for all of my pulled out hair in the process...
AWS Free Tier Explained
Published: 2020-12-17 17:18:29

Amazon is leading the market in real-time accessible cloud computing services. The Amazon Web Services include a diverse range of services and an even wider range of features for those services. From cloud computing, databases to newer technologies like machine learning and so on, AWS has a lot to offer. Anyone from an individual to a large organization can use AWS and the AWS free tier. Students can upload research material while start-ups can manage their websites or blogs with the Free Tier. 
### **What’s included?**
AWS provides new users a free usage tier so they can explore and try out specified services. The free tier only applies to a limited number of services that have a maximum usage limit. There are three types of free tier offers -12 months free trial, short-term free trials and an Always Free offer. There is a limited hour or usage limit on services, and you are charged pay-as-you-go when the limit is exhausted. 
### **But is it really free?**
This is where a lot of new AWS users get confused as they read stories of users receiving shockingly high bills despite signing up for the free tier services. It is true that AWS offers free tier services, but a few terms and conditions apply. 
For example, in the 12-month trial, there is a limit on the hours that can be used. It gives the user 750 hours. These hours are renewed every month, they do not get accumulated or carried forward. Similarly, the short-term trials are limited to particular services, with a particular time limit that starts when you activate it. As soon as your free trial period expires, you start getting charged on the standard pay-as-you-go rates.
### **Is it possible to monitor the costs?**
Yes. You can set up a budget on AWS budgets and control your costs drastically. Make sure that you monitor the dashboard a few times every day, especially if you are a new user. Notifications can also be set up to inform you of the usage and also when you exceed the set limit. It is also possible to customize usage for instances in services like Amazon EC2, Amazon RDS among a few others. You can also use the AWS pricing calculator to check the charges for your planned configuration.
A major setback that users sometimes face is being charged for instances they are no longer using or are not in production. It is essential to shut down instances when not needed, otherwise, you may be charged. 
It can be a full-time job to track your AWS costs. Thus, using a service that can help monitor and cut down the charges on AWS usage can prove helpful. These services can help in identifying where and how to lower the costs. 
Signing up for the AWS Free Tier Services is a great way to scale and grow your business. It helps you explore options of storing and managing data as well as a wide range of databases, security, compute services, etc.
Optional Chaining
Tags: javascript, webdev, codenewbie, beginners
Published: 2020-12-17 17:12:52


```js
const user = {};

console.log(user.address.street); // error

console.log(user && user.address && user.address.street); // undefined
// Can be done using Optional Chaining (Introduced in ES2020)
console.log(user?.address?.street); // undefined
```

---

**Thanks for reading 💙**  
Follow **@codedrops.tech** for daily posts.  
[Instagram](https://www.instagram.com/codedrops.tech/) ● [Twitter](https://twitter.com/codedrops_tech) ● [Facebook](https://www.facebook.com/codedrops.tech/)

Micro-Learning ● Web Development ● Javascript ● MERN stack ● Javascript  
**[codedrops.tech](https://www.codedrops.tech/)**
CLOUDFLARE PAGES: First look at Cloudflare's new JAMstack deployment platform
Tags: jamstack, javascript, webdev, serverless
Published: 2020-12-17 17:11:49

Let's dive into Cloudflare Pages, Cloudflare's new deployment platform for deploying all your JAMstack applications!

{% youtube IeHC4NwkEfc %}

Cloudflare Pages: https://pages.cloudflare.com
Announcement blog post: https://blog.cloudflare.com/cloudflare-pages/
Link to request beta access: https://www.cloudflare.com/pages-jamstack-platform-beta-sign-up/
Documentation (guides, tutorials): https://developers.cloudflare.com/pages/
Build an API for your frontend using Cloudflare Workers: https://developers.cloudflare.com/pages/tutorials/build-an-api-with-workers
MarkdownIt - A Code Editor to render Markdown and host it.
Tags: javascript, webdev, html, watercooler
Published: 2020-12-17 17:09:02

Efficent Code Editor to live render Markdown and Can save the rendered file as **Markdown**,**Html** and **Pdf** . Also Instant Hosting in The Web.



<p align=center>
    <a href="#features">  Features</a>
     • 
     <a href="#MarkdownItHost"> MarkdownItHost</a>
      • 
    <a href="#downloads"> Downloads</a>
     • 
    <a href="https://markdownitweb.herokuapp.com/markdownit-8249">Guide</a>
     
    
    
</p>


{% github fredysomy/MarkdownIt no-readme %}



<h3 id="features" >Features</h3>

* Live preview of the changes you make
* You can save the file and open any md files in the editor.
* You can save convert the markdown you have written into html and pdf.
* Uses Ace editor
* Bootstrap styling is enabled
* You can change the editor themes and text colors for your preference
  * There is a settings.json file to handle all themes and style changes
* Html tags can be used with the markdown.
  * The pdf file generated is also html friendly.
* Clean UI and also have a reference for markdown.
* `Has instant web hosting feature.`
  * [You can create a static single paged website in this editor.](#MarkdownItHost)
  * MarkdownItHost is the service in the editor that allows you to host websites.


<h3 id="MarkdownItHost" >MarkdownItHost</h3>

* A simple way to host websites (included in the code editor)
* One can create a webpage with one click [See here](https://markdownitweb.herokuapp.com/markdownit-dc7f)
* A config file with the path name of your website and unique secret id is to be saved in your PC.
* Only with the config file you can edit and publish your site.
* Deploys a Static website within 2 seconds.(With 2-3 clicks).
* Any bugs or queries can be mailed to [me](mailto:fredysomy@gmail.com)
* All the "HOW to" guide is included [Here]()
* `You can use Bootstrap styling inside the code you Write ( no need to inculde the scripts)`



### How to use(Source code)
<br>


##### Clone this repository
```
 git clone https://github.com/fredysomy/MarkdownIt
```
##### Install dependencies
```
 npm install
```
##### Run the app
```
 npm start
```


<br>

## Changelog
#### `v1.0.0`
* Added code editor
* Added file saving
* Aditional options like save as pdf and save as html.

#### `v1.0.2`

* Added MarkdownItHost to publish static websites
* Online offline alerts.

## Contibute
* Fork the repostory
* install the dependencies
* Make your changes
* And make a pull request from your repo. (I will surely look forward for the PR's)

## Made with

* Electron
* Ace js
* markdown-pdf

***



***
Neumorphism Side Bar Menu using HTML & CSS
Tags: sidebarmenu, htmlcss, sidebardesign, sidebar
Published: 2020-12-17 17:05:50

Hello guys, Today in this blog I'm going to create a sidebar menu in neumorphism style I sure you will love this, in an earlier blog I have to shared <a href="https://www.codinglabweb.com/2021/01/responsive-website-with-html-css-glass.html">How to Create Glasssmorphism Website by using HTML & CSS</a>, and now I'm going to create a neumorphism sidebar using only HTML & CSS.

Generally, we can say a sidebar is a bar that is placed on the right or left top side of the webpage and it works from one button. The sidebar has various hyperlinks that help the user to quickly move within the page as they want. Mostly sidebar is used in small screen devices like tablets, mobile. In this context, the sidebar has become the most essential part of the website. The sidebar can be placed on the right side or left side of the page.

As you can see in the given image of the neumorphism sidebar, on the top left side there is a logo named "CodingLab" and one cancel button right side of this sidebar. At the bottom of this logo there are some hyperlinks with icons for making users convenient and also you can see at the bottom of the sidebar the are some social media icons. Actually, at first, there is only one button placed on the top left side of the corner and when we clicked on that button sidebar appears from the left side to the right side his sliding animation also when you can hover the hyperlinks button looks like the have pressed. 

You Might Like This:
<a href="https://www.codinglabweb.com/2020/12/responsive-neumorphism-navigation-bar.html">Neumorphism Navigation Menu</a>
<a href="https://www.codinglabweb.com/2020/12/responsive-footer-html-css.html">Responsive Footer Section</a>
<a href="https://www.codinglabweb.com/2021/02/how-to-make-calculator-using-html-css.html">Glassmorphism Calculator Design</a>

Neumorphism Sidebar [Source Code]
You can download all source code files from the given link.<a href="https://www.codinglabweb.com/2020/12/neumorphism-side-bar-menu-using-html-css.html"> Click here to download all source code files.</a>
Login Form with Floating Label Animation using HTML & CSS
Tags: css, animatedloginform, loginpage, loginform
Published: 2020-12-17 17:01:54

The login form is the entry form where users need to enter their email address or phone number and password to enter a particular webpage. The login form can be found on any webpages. For example, to enter our Facebook account, we have to enter our Facebook email and password.

As you can see on the given image on the website, I will make this login form in this blog. As have a clear look, at the top side there is a text named by the login form. Bottom of this text there are two input fields, one is for entering an email address and another is for a password. At the bottom three is one button which is used to submit our email and password.

You Can Download All source code file from this link. <a href="https://www.codinglabweb.com/2020/12/login-form-with-floating-label.html">Click here to download source code files</a>
Quick Tip: Use commas in cases of a switch in Go to match multiple conditions
Tags: go, todayilearned
Published: 2020-12-17 16:58:13

For [Advent of Code](https://adventofcode.com/) day 12, the challenge included moving the position of a waypoint in certain directions. While writing the code, I discovered that I could match multiple conditions in a switch statement by using a comma to separate the values:

```go
switch dir {
case 'N', 'S':
  waypoint.y += dist * dirMap[dir]
case 'W', 'E':
  waypoint.x += dist * dirMap[dir]
}
```

In this case, if the direction (`dir`) is 'N' or 'S', it will match and execute the first block, and if it's 'W' or 'E', it will match the second. 

I'm not sure if I'll ever have a need for this again (you could argue for a function or if/else chain here), but it's cool to know it exists!
Login Form with Icons using HTML & CSS
Tags: css, loginform, loginformdesign, loginpage
Published: 2020-12-17 16:58:03

**Q: How do I add an icon to my login page?**
A: After reading and watching the following article and tutorial, you will able to create a login form or page with the icon in the input field.

Hello readers,  today in this blog I'm going to create a login form and add some social media and font awesome icons into the login form by using HTML & CSS. In an earlier blog, I have shared How to Create a Responsive Sign Up Form, and now let's get into the login form.

**What is Login Form or Page?**
In the easiest way, we can say, login form means is an entry form where users need to enter their identification (phone number or email address and password ) to enter in the particular webpage. All users have their unique email address or phone and password. 
As you can see on the given image of our Login Form with the icon. At the top, I have added two social media login buttons, at the bottom of this I have created two input fields with a font awesome icon. You can also add images of icons, it's up to you. By giving position absolute, we can ad

How do you put an icon in Input Field?
Following are the CSS code to put icons inside the input files and remember that the input field should be relative.
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);

##You Might Like This:##
<a href="https://www.codinglabweb.com/2020/12/animated-login-form-using-html-css.html">CSS Animated Login Form</a>
<a href="https://www.codinglabweb.com/2020/11/responsive-login-form-using-only-html.html">Responsive Login Form Form</a>
<a href="https://www.codinglabweb.com/2021/01/responsive-registration-form-in-html-css.html">Responsive Registration Form</a>

##Login Form With Social Media Icons [Source Code]##
You Can Download All source code file from this link. <a href="https://www.codinglabweb.com/2020/12/login-form-with-icons-using-only-html.html">Click here to download source code files</a>
How to split a string by spaces in java?
Tags: java, oop, programming
Published: 2020-12-17 16:55:05

In this article, I am going to explain how to split a string by spaces in java by using string class split method. We can also split a string by using Pattern.compile(regex).splitAsStream(String) method and others.

---
title: How to split a string by spaces in java
tags: java
canonical_url: https://kodlogs.com/blog/2631/how-to-split-a-string-by-spaces-in-java
---

**String class split method**
#Approach
* Suppose if I want to split a string based on space, how do we actually do it?
* Let’s check out the below example. I have created a class called SplitStringDemo and then I have written the main method.
* In the next step, I want to split the string “Coding at Kodlogs”. I have just created the string by using String literal;
* By using the String split method we can split our string and is given below. This split method accepts the regex as well as the limit.
* Just pass space to this split() method which returns the string in array. I have just placed a method, which accepts the string array and prints it.

##Program
```
public static void main(String[ ] args)

{

String str = “coding at kodlogs”;

String str1[] = s.split(“ “ );

printString(str1, “ String split method”);

}

public static void getString(String str1[] , String approach)

{

System.out.println(“Splitting string by using” + approach);

for(String string : str1)

{

System.out.println(string);

}

}

}
```

###Output
`Splitting string by using String split method 

Coding

At

Kodlogs`
Clover - my Emacs configuration
Tags: emacs, clover, lisp
Published: 2020-12-17 16:53:40

It's already been a year since I started developing my configuration for Emacs. I've been looking for an editor that I like for several years now. And so I decided to stop at Emacs, since it is simple and very flexible in customization. I would even say that it is a programmable code editor.

I have already released version 0.2.1 of my config. In it, I implemented support for languages:

* C/C++
* Java
* Lisp
* Node.js
* Python
* PHP
* Rust
* Scala
* Solidity

I also added there:
* Code highlighting and autocompletion
* Disassembler
* Update system
* File tree
* Theme and various decorations

If you use Emacs or you are just interested in my code, then please view the code.

{% github deadblackclover/clover %}