teleren/devto huggingface dataset:
Claymorphism on 2022🎁 (CSS only)
Tags: html, css, webdev, todayilearned
Published: 2022-01-02 13:54:37

Hey There, Hope this new year✨ give you a fabulous moments. There are some trends for every year like <b>Skeuomorphism</b> ➡️ <b>Neumorphism</b> ➡️<b>Glassmorphism</b> ➡️Now, The brand new trend is <b>Claymorphism</b>🎉. 

><em>Due to accessibility issues, Some trends can't be hero of the year in real-time😥. Uh, Don't worry guys Claymorphism didn't make any accessibility issues</em>. 

<h2>Why Claymorphism🤔</h2>

Really getting bored with flat designs and world excited for changing UI to 3D. From 2022, we introduce that 3D feel in web world. Sounds amazing right✨ and we can introduce this Claymorphism from pages to atom components. I care to save developer time and  let's get this show on the road🎉.

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

<h2>Claymorphism made by 4 styles</h2>

1. Light, pastel, and vivid colors
2. Big rounded corners
3. Double inner shadow
4. Outer shadow

<h2>In-depth on box-shadow</h2>

<b><code>box-shadow</code></b> is the main guy for that magical shadow effect. So, we need aware of that.

Specify a single <code>box-shadow</code> using:

- <b>Two, three, or four <length> values</b>.
 If only two values are given, they are interpreted as <b>offset-x</b> and <b>offset-y</b> values.
 If a third value is given, it is interpreted as a <b>blur-radius</b>.
 If a fourth value is given, it is interpreted as a <b>spread-
radius</b>.

><em>To specify multiple shadows, provide a <b>comma-separated list of shadows</b></em>.

- Optionally, the <code>inset</code> keyword.
- Optionally, a <b>color</b> value.

><em>Note: <b>Claymorphism</b> is made up of <b>inner shadow</b> and <b>outer shadow</b>

<h2>How do we create inner shadows</h2>
It’s actually effortless😍. We need to add special value <code>inset</code> before our shadow. This will inform our browser that this particular shadow is an inner shadow. By default, we create outer shadows. Below code snippet, illustrate the claymorphism made by <b>one outer shadow and at least two inner shadows</b>.

```css
box-shadow: 24px 24px 48px rgba(174, 210, 236, 0.4),
    inset 12px 12px 24px #e7f2f9, inset -24px -24px 48px #b8d8ee;
```
Now I thought, you are be like😉
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/opx5q4xya3lh5r4t0wao.gif) 
Hey still with me. You really curious about trends like trend lovers💖. So, it's my pleasure to give you the live experience and you will playing with that magical shadows🪄.

{% codepen https://codepen.io/preethi-dev/pen/rNGdvMz %}

Or you just fork <a href="https://github.com/Preethi-Dev/Claymorphism" target="_blank">my repository</a>🎁 and practice in your own pace.

If you loved this blog, Then give an endearing heart💝and drop your thought about this blog😍 which really a lot to me. I love the discussion with you, If you feel not comfortable at styling concepts or have any doubts.

Thanks for Reading!!
<b>Preethi</b>
<em>- Make your CSS life easier</em>
Getting started with machine learning on your Android device in 2022.
Published: 2022-01-02 13:45:35

Machine learning has been a tech buzz word for the past few years. Its simplest definition is that it basically leverages on the use of tons of data to make predictions.

Well , in this article , I'm going to be showing you on how to get started using just your mobile phone(Android preferably).

Firstly ,  install an app called termux from the Android PlayStore
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m7lfekw6gh6fi7iiznen.png)

Then open the app and run the following commands :

```
$ apt update && apt upgrade
$ apt install python
$ pip install jupyter
```

Definitely , the above commands will take several minutes to run and complete. When you are done with that, run

```
$ jupyter notebook
```

It then pops up a browser window.

Click on the new button to create a new notebook and select python3.


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

Congrats ,  you have Jupyter notebook up and running on your mobile.

Wishing you a happy new year🥳 and also a productive 2022.
I'll definitely be creating contents around machine learning and AI this year.
Hacker-ramp
Tags: devops, react, github
Published: 2022-01-02 13:04:47

✨I have created a website with my team Developers for the event Hackerramp by Myntra. The theme for this project is Socialise.
This is an ecommerce website that helps people to socialize and also gives them a feel of freelancing.✨

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wl89tqo5lms2xr8e3f9p.jpeg)
235. Lowest Common Ancestor of a Binary Search Tree
Tags: 100daysofcode, programming, algorithms, java
Published: 2022-01-02 13:04:01

# [Description](https://leetcode.com/problems/lowest-common-ancestor-of-a-binary-search-tree/description/)

Given a binary search tree (BST), find the lowest common ancestor (LCA) of two given nodes in the BST.

According to the [definition of LCA on Wikipedia](https://en.wikipedia.org/wiki/Lowest_common_ancestor): “The lowest common ancestor is defined between two nodes `p` and `q` as the lowest node in `T` that has both `p` and `q` as descendants (where we allow **a node to be a descendant of itself**).”

## Example 1:

![Untitled](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/9428d495-b74d-41f0-a5d1-d71f46f306d4/Untitled.png)

```
Input: root = [6,2,8,0,4,7,9,null,null,3,5], p = 2, q = 8
Output: 6
Explanation: The LCA of nodes 2 and 8 is 6.
```

## Example 2:

![Untitled](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/8244cdd2-58e9-407f-bc96-95c747139be9/Untitled.png)

```
Input: root = [6,2,8,0,4,7,9,null,null,3,5], p = 2, q = 4
Output: 2
Explanation: The LCA of nodes 2 and 4 is 2, since a node can be a descendant of itself according to the LCA definition.
```

## Example 3:

```
Input: root = [2,1], p = 2, q = 1
Output: 2
```

## Constraints:

- The number of nodes in the tree is in the range `[2, 105]`.
- `109 <= Node.val <= 109`
- All `Node.val` are **unique**.
- `p != q`
- `p` and `q` will exist in the BST.

---

# Solutions

## Solution 1

### Intuition

it is a binary search tree, you only need find a node with mid value 

### Code

```java
public TreeNode lowestCommonAncestor(TreeNode root, TreeNode p, TreeNode q) {
    int m = p.val;
    int n = q.val;
    while (true) {
        if (root.val > m && root.val > n) {
            root = root.left;
        } else if (root.val < m && root.val < n) {
            root = root.right;
        } else {
            break;
        }
    }
    return root;

}
```

### Complexity

- Time: O(logn)
- Space: O(h)

---

## Solution 2

### Intuition

### Code

```java

```

### Complexity

- Time:
- Space:

---

# Similar Questions
How to make a pulse effect
Tags: css, html, codepen, tutorial
Published: 2022-01-02 12:57:06

In this article, I'll teach you how to make a pulse effect on an image.

## HTML Code

- First, we add our image inside `<img>` tag.
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pulse Effect</title>
</head>
<body>

    <img class="moonPulse" src="https://i.pinimg.com/564x/a1/01/e2/a101e22fc458c1110d418ee309f240c8.jpg"
alt="moon pic"/>

</body>
</html>
```

## CSS Code

- Styling the body
```javascript
  body{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5em;
    background: #000;
}
```

- Styling the image

```javascript
.moonPulse{
    animation: pulse 1s infinite;
    border-radius: 50%;
    width: 20em;
}
```

## Finally, adding pulse effect animation

```javascript
 @keyframes pulse{
      from{
        box-shadow: 0 0 0 0 rgba(198, 182, 179, 0.85);
      }

      to{
        box-shadow: 0 0 0 30px rgba(201, 48, 48, 0);
      }
  }
```

## Final Result
{% codepen https://codepen.io/Yisemiramis/pen/wvrmxZL %}
---
I hope you find this tutorial useful. See you on the next article.
Here's the [Source Code](https://github.com/yigitsr/Pulse-Effect) on GitHub
Here's the [YouTube Video](https://www.youtube.com/watch?v=c-R7LLd7nnE) where I code it from scratch.
Check it out on [CodePen] (https://codepen.io/Yisemiramis/pen/bGovmqo)

---
**Follow me on**

- [GitHub](https://github.com/yigitsr)

- [CodePen](https://codepen.io/yigitsr)

- [Twitter](https://twitter.com/ziggywoxx)

- [Twitch](https://www.twitch.tv/lemmy_ace)

- [Instagram](https://www.instagram.com/ziggywoxx/)
Add Two Numbers Linked List Python – LeetCode Solutions
Published: 2022-01-02 12:51:20

LeetCode has a coding Problem in Its’ Algorithm Section which is Add Two Numbers Linked List Python. Today We are going to solve this problem.

Question

You are given two non-empty linked lists representing two non-negative integers. The digits are stored in reverse order, and each of their nodes contains a single digit. Add the two numbers and return the sum as a linked list.

You may assume the two numbers do not contain any leading zero, except the number 0 itself.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l3lyh269vsg2x2nmdhuy.jpg)
To get The Solution to The Problem Visit https://hecodesit.com/add-two-numbers-linked-list-python-leetcode-solutions/
2021 was the best year so far!
Published: 2022-01-02 12:48:46

2021 and Dilan Jayasekara.



The greatest learners don’t just consume, they contribute and Dilan achieved this in several ways in 2021.



👉 1️⃣ Firstly, there’s us, the Jayasekara.Blog where he covers topics ranging from Data Science to Programming to Poetry – vital to growing well-rounded Data Scientists who appreciate the magic that comes from combining science and art

❇️ Web: https://lnkd.in/gFkTvbt8



👉 2️⃣ Secondly, there is his contribution to the AWS Community where he has now been accepted for their Community Builders

Program for Data and Analytics. The program offers technical resources, mentorship, and networking opportunities to AWS enthusiasts and emerging thought leaders who are passionate about sharing knowledge and connecting with the technical community. 





👉 3️⃣ Dilan has been invited to speak to Japan’s AWS User Group's 'JAWS Pankration 2021' virtual conference in November.

❇️ Post: https://lnkd.in/gRXiJhxc.

❇️ More Info: https://lnkd.in/gwqbH4dM



👉 4️⃣ Then comes the most interesting project - Since childhood, Dilan has always wanted to do something that combined the logic and reasoning of science with the passion and creativity of art. Finally, after many years of education, experimentation, and exhaustion, he figured out how to combine

the two with a special project – Cestine Music Analytics.

❇️ Web: https://www.cestine.com/

❇️ LinkedIn page: https://lnkd.in/gnjE-GmM

❇️ Listen for free: https://lnkd.in/gjj47Q5q





👉 5️⃣  He did his first podcast episode with an AWS consultant where he speaks about how DevOps can help data science and what's lacking in the data science market.

❇️ Post: https://lnkd.in/gzx5VTTB

❇️ Listen for free: https://lnkd.in/gwTpk_mm





👉 6️⃣ Learning is not just building leadership skills or technical skills, It's a combination of all the possible skills you can absorb. Dilan was able to expand his Business Rio Engineers to the Asia Pacific region in 2021.

❇️ Rio Engineers: https://lnkd.in/g5wqWRsW



👉 7️⃣ Last but not least, Dilan created an opportunity for himself during extreme uncertainty, in an entirely new country with English as his second language. He embodies the mindset and spirit of what Australia’s next generation of ICT Professionals need to be, which is

synonymous with the intrinsic goals of ACS. As a result of that, Dilan was recognized as a finalist nominee for the 'Emerging ICT Professional of the Year' award as part of ACS's annual Digital Disruptor Awards.

❇️ Post: https://lnkd.in/gde5ESgC

❇️ Finalists announced: https://lnkd.in/ggdfTN-7



#2021wrapped


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wkc381k9s98msrrvnmnp.png)
Best way (one liner) to sort an array by string alphabetically
Tags: javascript, webdev, programming
Published: 2022-01-02 12:44:19

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

Source:
[Twitter Post](https://twitter.com/shivamjjha/status/1477506011061575680)
Rewriting My Personal Website in Next.js and TypeScript
Tags: nextjs, typescript, beginners, showdev
Published: 2022-01-02 12:41:44

New Year's Day is as good a time as any to roll out a new blog, I suppose.

As one of my New Year's Resolutions this year, I'm going to revamp my website, and I'm going to do it in public.

I've spent the last few weeks working with Next.js for the first time (and brushing up on my TypeScript) in order to start hosting my technical blog on my own website. (In addition to mirroring the posts [on Dev.to](https://dev.to/awwsmm), where I've been writing for a few years now.)

In addition to the ol' blog, I've also created **/project** pages for a few ongoing things I've got in the works (including this very website). The project pages synthesize groups of commits from GitHub with manual "update" log posts to give an idea as to the current status of each of my ongoing projects. I think this is a bit more dynamic than a static "portfolio" page, and it reflects a tenet of my own personal philosophy that [_un ouvrage n’est jamais achevé... mais abandonné_](https://quoteinvestigator.com/2019/03/01/abandon/).

Follow along here, [on Dev.to](https://dev.to/awwsmm), or [on Twitter](https://twitter.com/awwsmm_dot_com) for continuing updates.

Thanks for reading!
Jupyter Notebook v/s Google Colab 			
Tags: machinelearning, jupyter
Published: 2022-01-02 12:01:17

I have worked on both Google Colab and Jupyter notebook so I think I would be able to explain more clearly the difference between the two and which one you should use.
> Jupyter is the open source project on which Colab is based. Colab allows you to use and share Jupyter notebooks with others without having to download, install, or run anything.

## Google Colab:

* Google Colab comes with collaboration backed in the product. As Colab is a Web App hosted by Google, you need Internet connection to access it and run code.

* It runs in cloud and runs your program on the server side so you don’t need to worry about downloading packages locally . 

* They give you a free virtual machine that has about 12 Gb of RAM which is pretty descent, but they also give access to a GPU card which is much more performing and much faster. You can access free GPUs for max 12 hours. 

* The notebooks are saved to your Google Drive account.

## Jupyter Notebook:

* Jupyter notebook run on a local host so it works offline.

* You have direct access to your file system and with your scripts you use all the storage of your disk.

* The hardware is your PC's RAM, Disk, CPU and GPU.

* You have to install everything by yourself via pip or other package managers.

> *Jupyter notebook = Running code, taking notes , show 
 multimedia interactivity    +     Read-eval-print  loop Terminal, Kernal with the frontend interfaces.*

> *Google colab = Jupyter notebook   +   Collaboration, additional hardware cloud based*

## Which one is better?

Google colab allows you to share your work with other developers. So, not only you can push your work directly to GitHub, but you can share the notebook itself to developers and they can run the cell and get the same result as you are getting because the environment it is running on is consistent as it is a remote machine which would not be the case if you were doing a local development on jupyter notebook.
If you’re just playing around or working on personal projects, Jupyter will work fine. If you want to build commercial-grade models and deploy them to production, Codelab provides the full-lifecycle approach that you’d need.
If you are in a non-programming job, and you don't want to install everything on your work computer to get it set up for Jupyter, you can just start working with Google Colab without having to do any installation and share your scripts with non-technical co-workers who wouldn't be able to install anything themselves.
Journaling
Tags: improvement, discuss, growth, dailythoughts
Published: 2022-01-02 11:38:03

---
title: Journaling
published: true
description: Journaling
tags: improvement, discuss, growth, dailythoughts
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6bci1u2ps3owr2cy7uts.jpg
---

_Originally published on [my blog](https://www.nikola-breznjak.com/blog/daily-thoughts/journaling/)._

> Journaling is unexpectedly useful. No special form is needed. A good idea is to start with a sentence about what you're grateful for.

---

⚠️ In this new “Daily Thoughts” series, I’m just scratching my own itch. For too long now I’ve been reading and consuming. Not that there’s something inherently wrong with that, but if one doesn’t offset that with his own producing, one often falls into the trap of staying a consumer.

If you think you know something, or want to learn something about yourself, try to explain it ‘on paper’. Personally, I think best ‘on paper’, and it’s been a while since a wrote a post. So, I’ll start small (and build up a habit of daily writing again) by sharing a thought daily. I’ll use this as a retrospective a year from now.

Dear readers, feel free to chime in with your thoughts on my thoughts (so Meta; which is popular in its own right these days).
Engineering Resolution 2022
Tags: programming, goals, career, webdev
Published: 2022-01-02 11:32:40



![Lightbulb and idea bubbles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oqoo7n7u0mihf4oibzev.jpeg)


Below is a list of technologies, projects and goals on my radar for the new year, 2022.

**Portfolio site with Nextjs**
My current portfolio site, atigran.com, was built over two years ago when I was fresh out of bootcamp. It is dated and needs a total makeover. Having recently used nextjs, I'm looking to completely redesign my site and as a stretch, add a Blog component.

**Standard Coin**
I built a mobile app using React-Native that combines three products into one. The portfolio tracker, markets and wallet have been complete and deployed to TestFlight. In 2022, I hope to go even further by adding the following:

1. I hope to see the app approved into the App Store
2. Create a landing page using Nextjs and TailwindCSS
3. Improve the UI/UX of the application to look and feel top notch
3. Make optimizations like adding a markets micro service
4. Recruit 2-3 contributors who are excited about building/learning

**Courses on Udemy**
The list cannot be complete without including continuing education. Among the many courses in my queue, the two I'm most excited about are the Docker/Kubernetes and Blockchain courses. Of course, just passively watching the content is not enough to retain knowledge. I'd like to exercise the skills in existing or new projects.

**AWS Certifications**
Dev Ops is an increasingly important and interesting skill set to have. I'd like to gain the Solutions Architect and Developer Operations certificates.

**Triplebyte Assessments**
Triplebyte is currently my favorite recruitment platform and I'd like to improve my ranking by completing as many relevant assessments as I can with a score of 3 or above.
-Backend
-Frontend
-SQL
-Python
-General Coding
-Full Stack Architecture

**Other**
Some minor objectives on my list is to learn a new language and applying to a project. Potential languages include C, C++ or Rust. However, Java, Kotlin and Swift are also strong contenders.
In addition, I would like to increase my Stackoverflow reputation to over 1000.
Time Management for Junior Developers
Tags: webdev, podcast, beginners, career
Published: 2022-01-02 11:24:21

{% spotify spotify:episode:5AVQEXseTPZxZmYLLXzMgS %}

## What is HTML All The Things

HTML All The Things is a [web development podcast](https://podcast.htmlallthethings.com/) and [discord community](https://discord.com/invite/jweMCx9) which was started by Matt and Mike, developers based in Ontario, Canada. 

The podcast speaks to web development topics as well as running a small business, self-employment and time management. You can join them for both their successes and their struggles as they try to manage expanding their Web Development business without stretching themselves too thin.

## Announcements

The **Svelte for Beginners** Udemy course is now live! Mike took his experience in teaching and learning Svelte and created a course. 

This course will teach you the fundamentals of JavaScript frameworks. 

**Get it now on Udemy!** 👇

[Svelte For Beginners](https://www.udemy.com/course/svelte-for-beginners/?couponCode=HATTSALE)

## What's This One About?

Time management is a challenging part of any developers' day. Between the coding work that needs to be done alongside planning, and support requests - getting ahead may seem impossible. For junior developers, the added challenge is that they're actively learning, while balancing all the things that come with job searching, working, and even traditional school. In this episode, Matt and Mike cover some time management tips and tricks for developers - with some specific ones in there for junior developers and their crazy schedules. 


## Show Notes


### Balancing | Learning, Applying for Jobs, and more 
- Determine your task priority
- Make an 'if I skip' list/consideration
- Don't always shoot for the most productive tasks 
- Take breaks and days off 
- Don't force a perfect plan 
    
### Managing Your Learning Time
- Tutorial hell
- Don't get stuck and not move on
- Don't learn it all at once

### Managing your Job Application Time
- Prioritize jobs based on your preferences
- Don't over apply
- Don't take anything personally (in the application process)
- Don't get discouraged 
- Invest extra time wisely
- Acknowledge it's a grind
- Try multiple methods

    
 

## Thank you!

If you're enjoying the podcast consider giving us a review on [Apple Podcasts](https://podcasts.apple.com/us/podcast/html-all-things-web-development-web-design-small-business/id1412209136) or checking out our Patreon to get a shoutout on the podcast. 

**[Support us on Patreon](https://www.patreon.com/htmlallthethings)**


You can find us on all the podcast platforms out there as well as

[Instagram (@htmlallthethings)](https://www.instagram.com/htmlallthethings/)
[Twitter (@htmleverything)](https://twitter.com/htmleverything)
[TikTok (Html All The Things)](https://www.tiktok.com/@htmlallthethings)
Self Sabotage
Tags: improvement, growth, discuss, dailythoughts
Published: 2022-01-02 11:22:52

---
title: Self Sabotage
published: true
description: Self Sabotage
tags: improvement, growth, discuss, dailythoughts
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i0zwjh5ogvaxg08bzff0.jpg
---

_Originally published on [my blog](https://www.nikola-breznjak.com/blog/daily-thoughts/self-sabotage/)._

> Self-sabotage is a real thing. What if we stopped it? What if we embrace what we can become, if only we wouldn't be afraid of failure?

---

⚠️ In this new “Daily Thoughts” series, I’m just scratching my own itch. For too long now I’ve been reading and consuming. Not that there’s something inherently wrong with that, but if one doesn’t offset that with his own producing, one often falls into the trap of staying a consumer.

If you think you know something, or want to learn something about yourself, try to explain it ‘on paper’. Personally, I think best ‘on paper’, and it’s been a while since a wrote a post. So, I’ll start small (and build up a habit of daily writing again) by sharing a thought daily. I’ll use this as a retrospective a year from now.

Dear readers, feel free to chime in with your thoughts on my thoughts (so Meta; which is popular in its own right these days).