teleren/devto huggingface dataset:
Treehouse release 0.2.0 with CSS design system
Tags: showdev, css, webdev, productivity
Published: 2023-03-28 18:19:09

---
title: Treehouse release 0.2.0 with CSS design system
published: true
description: Release notes and demo video for 0.2.0 release
tags: showdev, css, webdev, productivity
# cover_image: https://direct_url_to_image.jpg
---

{% embed https://www.youtube.com/watch?v=wj4uai9yUJ0 %}

## New design system, GitHub session locking, and documentation

[This release](https://github.com/treehousedev/treehouse/releases/tag/0.2.0) is a refinement of our initial release, fixing a number of bugs and adding interaction improvements. The look and feel of the UI was also updated with the start of a new CSS design system based on custom properties. Session locking was added for the live demo and GitHub backend so multiple devices/browsers/tabs don't clobber changes of each other. Documentation also got an upgrade with the start of a [full guide](https://treehouse.sh/docs/quickstart/) on the website. 

## Bugfixes
* Autosave error when switching between devices [#32](https://github.com/treehousedev/treehouse/issues/32)
* Deleting a node doesn't delete child nodes [#25](https://github.com/treehousedev/treehouse/issues/25)
* Hitting return should produce a new node directly below the above node [#29](https://github.com/treehousedev/treehouse/issues/29)
* TypeError exception when switching back from new panel [#65](https://github.com/treehousedev/treehouse/issues/65)
* Support emojis [#52](https://github.com/treehousedev/treehouse/issues/52)

## Enhancements and Chores
* Typography and layout improvements to application [#37](https://github.com/treehousedev/treehouse/issues/37)
* Add keyboard shortcut to move nodes up or down [#28](https://github.com/treehousedev/treehouse/issues/28)
* Prevent backspace to delete if there are child nodes [#15](https://github.com/treehousedev/treehouse/issues/15)
* Allow renaming the workspace [#23](https://github.com/treehousedev/treehouse/issues/23)
* Clicking outside of the search bar/command palette should close it [#48](https://github.com/treehousedev/treehouse/issues/48)
* Workspace/workbench separation [#39](https://github.com/treehousedev/treehouse/issues/39)
* Add API docs [#34](https://github.com/treehousedev/treehouse/issues/34)
* Set up versioned library bundle [#41](https://github.com/treehousedev/treehouse/issues/41)
* Allow backspace to delete an empty child node [#53](https://github.com/treehousedev/treehouse/issues/53)
* Save last location on reloads [#54](https://github.com/treehousedev/treehouse/issues/54)
* Hide buttons to move a panel up/down [#49](https://github.com/treehousedev/treehouse/issues/49)
recursion in c
Published: 2023-03-28 13:36:22

**first what is recursion?
it is a programming technique that you use to make the function call itself, you split a big problem to small ones.

it solve the problem that you can not solve with loops specially in array and binary tree statements and others.

it widely use in algorithms and data structures.

**how can i write it?**

easier to get a simple example

void welcome()
{
         printf("hello programmser");

         welcome(); // notice its the name of your function but we have a problem here we need a base case i will explain down
}

**now when we call welcome function , it will print hello programmer then call itself again and print hello programmer and again and so on.**

**so we hava a problem here which is ,it can not stop , so we must put something to stop it or we will be in infinite loop and cause code crash **

here is it called base case which it is a statement when it is right the function will stop

**so in recursion we have **
1- base case: a statement makes code stop
1- general case: which is the code which will repeat

examples:-

example (1):- 

i want to find the factorial of 5 (5!)

first we should find the base case 

5! = 5 * 4!
and 4! = 4 * 3!
and 3! = 3 * 2! 
and 2!  = 2 * 1!
and 1! = 1 // here is the base case 
so the code will be



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


and when we run the code 

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



example (2) :- 
about fobonacci series

if you do not know it, every number is the sum of the last two number before it 
like this 

the number 0 1 1 2 3 5 8 13 .........
its index  0 1 2 3 4 5 6 7 .......


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

if you looked at this image you will find index number 6 equal index number 5 plus index number 4 and so on

at the end you will find n == 1 or n == 0 you can use any of them as a base case

so lets try to code this series


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


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


example (3):-

make a function like puts (print string followed by a new line)


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




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


example (4):- 

print string in reverse.

remember the last index in any array is always '\0' , so it is our base case

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

this   _print_rev_recursion(a + 1);  use to not print '\0'

and putchar(*a); use to print for left because when i call this function i am at the end of it 

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

hope it helps.
good luck and keep going.
15 berufliches Vorwärtskommen: So rechnest du richtig ab.
Tags: deutsch, career, austausch, 1min
Published: 2023-03-28 18:16:00

Moin Moin,

richtig rechnen ✔
richtig abrechnen:

- Sei [nachsichtig→](https://dev.to/amustafa16421/10-berufliches-vorwartskommen-die-wohl-wichtigste-charakter-eigenschaft-4n4i) mit dir selbst beim Abrechnen.
- Denke regelmäßig an [das Ende deiner Karriere→](https://dev.to/amustafa16421/14-berufliches-vorwartskommen-weshalb-du-dich-auf-den-tag-der-abrechnung-vorbereiten-solltest-31cc) und plane, um dein Karriere-Ende bestmöglich zu gestalten.

Bereitest du dich auf das Ende deiner Karriere vor ? 
Wenn ja, wie ? Was für Ziele hast du ?

Beste Grüße,
Mustafa
What is Unix or Linux ?
Published: 2023-03-28 17:07:58

---
title: What is Unix or Linux ? 
published: true
description: The Unix operating system is a set of programs that act as a link between the computer and the user
 


tags: 
# cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ibft6ic1ui1nouztfas3.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-03-28 16:56 +0000
---

What is Unix ?
The Unix operating system is a set of programs that act as a link between the computer and the user.

The computer programs that allocate the system resources and coordinate all the details of the computer's internals is called the operating system or the kernel.

Users communicate with the kernel through a program known as the shell. The shell is a command line interpreter; it translates commands entered by the user and converts them into a language that is understood by the kernel.

* Unix was originally developed in 1969 by a group of AT&T employees Ken Thompson, Dennis Ritchie, Douglas McIlroy, and Joe Ossanna at Bell Labs.
* There are various Unix variants available in the market. Solaris Unix, AIX, HP Unix and BSD are a few examples. Linux is also a flavor of Unix which is freely available.
* Several people can use a Unix computer at the same time; hence Unix is called a multiuser system.
* A user can also run multiple programs at the same time; hence Unix is a multitasking environment.

## Unix Architecture
Here is a basic block diagram of a Unix system −

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

The main concept that unites all the versions of Unix is the following four basics −

* **Kernel** − The kernel is the heart of the operating system. It interacts with the hardware and most of the tasks like memory management, task scheduling and file management..

* **Shell** − The shell is the utility that processes your requests. When you type in a command at your terminal, the shell interprets the command and calls the program that you want. The shell uses standard syntax for all commands. C Shell, Bourne Shell and Korn Shell are the most famous shells which are available with most of the Unix variants.

* **Commands and Utilities** − There are various commands and utilities which you can make use of in your day to day activities. **cp**, **mv**, **cat** and **grep**, etc. are few examples of commands and utilities. There are over 250 standard commands plus numerous others provided through 3rd party software. All the commands come along with various options.

* **Files and Directories** − All the data of Unix is organized into files. All files are then organized into directories. These directories are further organized into a tree-like structure called the **filesystem**.
Pro Tips To Build A Killer Personal Brand
Tags: webdev, beginners, career, productivity
Published: 2023-03-28 18:09:08

Building a killer personal brand requires a combination of self-awareness, strategic thinking, and execution. Here are some steps that can help you build a strong personal brand:

1. Define your niche and target audience: Identify your unique strengths, passions, and values, and determine the audience you want to appeal to.

2. Develop your brand identity: Create a memorable and consistent brand identity that includes your name, logo, tagline, and messaging.

3. Build your digital presence: Establish a strong digital footprint through a personal website, social media profiles, and online content that aligns with your brand personality and values.

4. Create valuable content: Share valuable insights, ideas, and experiences through blog posts, videos, podcasts, or other content formats that showcase your expertise and perspective.

5. Engage with your audience: Interact with your audience by responding to comments, sharing feedback, and building relationships with other thought leaders and influencers in your industry.

6. Invest in learning and growth: Keep learning and growing by attending industry events, reading relevant books and blogs, and honing your skills through courses and training.

Remember that building a personal brand is a long-term process that requires dedication, consistency, and authenticity. Be patient and persistent, and keep refining your brand as you continue to grow and evolve.
How to create a beautiful multicolored input
Tags: css, html, tutorial, webdev
Published: 2023-03-28 18:02:21

## **A step-by-step guide on how to create a beautiful multicolored input.**


![multicolored input](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/csjsxfm6yv3t8dfz5zej.png)




## <u>HTML</u>


For HTML the only thing we need is an input and a label.

```html
<div>
    <input type="input" class="colored_input" name="name" id="name" />
    <label for="name" class="colored_label">Name</label>
</div>
```
      


## <u>CSS</u>


For CSS, first we'll style our input element.

We'll set font family to inherit, background to transparent and with to 400 pixels.

We'll remove the border and outline by setting it to 0, and add border bottom of 3 pixels solid grey.

Lastly, we'll set font size to 20 px, color to white and bottom padding to 5 pixels.

```css
.colored_input {
    font-family: inherit;
    background: transparent;
    width: 400px;
    outline: 0;
    border: 0;
    border-bottom: 3px solid #9b9b9b;
    font-size: 20px;
    color: #fff;
    padding-bottom: 5px;
}
```
      
Now we'll style the label.

We'll set position to absolute and display to block.

By setting transform to translate Y to -60 pixels, we'll position this element on top of the input.

And we'll set it's color to the same grey we used before on input.

```css
.colored_label {
    position: absolute;
    display: block;
    transform: translateY(-60px);
    color: #9b9b9b;
}
```
      
Now we'll style the input when it's in focus.

Here we'll just change border color and set it to linear gradient image from light blue to light pink.

```css
.colored_input:focus {
    border-image: linear-gradient(to right, #42aec5, #ee82e8);
    border-image-slice: 1;
}
```
      
Lastly, we'll change label's color when the input is in focus.

We'll set it to the same light blue color we used for linear gradient on input's border.

```css
.colored_input:focus + .colored_label {
    color: #42aec5;
}
```
     

And that's it. Simple but beautiful, isn't it?

Thanks for reading! ❤️

You can watch a video tutorial [here](https://www.youtube.com/shorts/EhKKNfKTbWU).
I am not an imposter
Tags: wecoded
Published: 2023-03-08 22:58:31

As someone who has grown up with coding being something only the nerdy boys did at school, it has taken me over a decade to start to feel like I can be a coder too.

I missed the opportunity to learn coding at school (apart from once programming a turtle robot to go left/right/up/down around the floor) and didn't give computer science a second thought as a university degree choice.

So the imposter syndrome is very real. Several years ago I was learning Python through programming a Raspberry Pi, and a developer colleague at work saw something I posted online about it. He started up a conversation about Raspberry Pi and I got all embarrassed and tried to make out like it wasn't a big deal. I still haven't had many real life conversations about programming as I'm too shy to admit that I'm really interested in learning more.

Communities like Dev are so valuable for people like me who feel like outsiders in the coding community. It's less intimidating when everyone is learning (even though I've realised that even experts are still learning too!)
Leer archivos ICS en Javascript con iCalendar.js
Tags: icalendar, javascript
Published: 2023-03-28 17:36:34

---
title: Leer archivos ICS en Javascript con iCalendar.js
published: true
description: iCalendar.js es una biblioteca de Javascript que permite leer y escribir archivos ICS de forma sencilla.
tags: icalendar, javascript
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-03-28 17:23 +0000
---

Si eres un desarrollador web, probablemente hayas trabajado con archivos ICS antes. Los archivos ICS son un formato estándar para intercambiar información de calendario entre diferentes aplicaciones. Puede ser bastante difícil trabajar con archivos ICS directamente, pero no te preocupes, ¡iCalendar.js está aquí para ayudarte!

iCalendar.js es una biblioteca de Javascript que facilita la lectura y escritura de archivos ICS. Con iCalendar.js, puedes analizar y manipular archivos ICS en tu proyecto de Javascript con facilidad. Y lo mejor de todo es que se puede descargar desde [npm.im/icalendar.js](https://npm.im/icalendar.js) con un simple comando `npm add icalendar.js`.

Aquí hay un ejemplo de cómo usar iCalendar.js para leer un archivo ICS:

```ts
import { ICalendar } from "icalendar.js";

const location = new URL("sample.ics", import.meta.url);
const payload = await readFile(location);
const icalendar = ICalendar.from(payload);
```

En este ejemplo, estamos importando la clase `ICalendar` de iCalendar.js. Luego, estamos leyendo un archivo ICS con el nombre "sample.ics" y almacenando su contenido en la variable payload. Finalmente, usamos el método `from` de `ICalendar` para analizar el contenido del archivo y crear un objeto `ICalendar`.

¡Y eso es todo! Ahora, puedes manipular los datos del calendario en el objeto `ICalendar` como lo desees.

En resumen, iCalendar.js es una herramienta invaluable para trabajar con archivos ICS en Javascript. Si estás trabajando en un proyecto que involucra archivos de calendario, no dudes en darle una oportunidad a iCalendar.js. Descárgalo hoy mismo y comienza a trabajar con archivos ICS de manera más fácil y eficiente.
Offering PHP Tutorials
Tags: php, webdev, tutorial, beginners
Published: 2023-03-28 17:33:36

Hi all,

For anyone interested in learning to build Full Stack web apps in PHP. I am offering my services as a qualified & experienced Full Stack dev, who has worked with WordPress, Drupel, Magento 1 & 2, Symfony & several bespoke CMS applications. 

I will take you from your current understanding/experience level with PHP, through to the point where you will be able to code in PHP with confidence and skill.
Tipps and more about Jobify-theme, the most used theme for WP-Job-Manager
Published: 2023-03-28 17:14:27

here we write **some articles** about the awesome theme - called jobify - developed by the fine folks from Astondify.com


**Tipps and more about Jobify-theme**, the most used theme for WP-Job-Manager



**today**: the usage of **The Testimonials in the theme:**



i am passionate about the usage of WP - i love it very very much. 

That said:  - i run the jobifiy-theme and i eagerly want to use the following features there: 
https://kb.astoundify.com/article/842-home-companies-weve-helped/

This widget requires the “**Testimonials by WooThemes**” plugin:  https://wordpress.org/plugins/testimonials-by-woothemes/
Once you have added your testimonials via “Testimonials > Add New” use this widget to display company logos. Drag the ” Testimonials” widget to the Homepage widget area.

In order for the Testimonials to show the logo only, the settings need to be very specific:

Settings
Title — The title of the widget. This can be anything.
Limit — The number of testimonials to rotate through. This should be 4-6.
Testimonials Per Row: This must be 0
Image Size — This must be 70
Display Author — This must be checked
Display Avatar — This must be checked
Display URL — This must be unchecked
Category — The category you have assigned individuals to
cf https://kb.astoundify.com/article/842-home-companies-weve-helped/

**question**: why on earth the Testimonials by WooThemes” plugin was not updated for more than 5 years.  


What can we do now!?  Anybody who has issues and struggles with the usage of this awesome feature - plz respond.

thanks
Simple query for remove duplicates from table
Tags: sql, mysql, postgres, tutorial
Published: 2023-03-28 17:13:09

In this small post I want to share the simple way to remove duplicates from table. The query works in MySQL, MariaDB and PostgreSQL databases. If you interested in such query for other RDBMS, please write me in comments.
Let's start. Assume we have simple table with two columns: id - is primary key and v simple integer value:
```
create table t (
    id int primary key,
    v int
);

insert into t(id, v) values 
(1, 1),(2, 1),(3, 2),(4, 2),(5, 1),(6, 1),(7, 2),(8, 3),(9, 2),(10, 4),(11, 3);
```
The code above create the table and insert couple of values. As you can see id have unique values, v have several duplicates:

```
+====+===+
| id | v |
+====+===+
| 1  | 1 |
| 2  | 1 |
| 3  | 2 |
| 4  | 2 |
| 5  | 1 |
| 6  | 1 |
| 7  | 2 |
| 8  | 3 |
| 9  | 2 |
| 10 | 4 |
| 11 | 3 |
+----+---+
```
Our mission is remove rows this duplicates in column v and rest unique values with minimal id value.
How we can find the duplicates? We can use simple `LEFT JOIN` on field `v` with additional condition for prevent joins rows itself:

```
select * 
from t
left join t t1 on t.v = t1.v and t.id > t1.id;
```
The query give us next result:

```
+====+===+========+========+
| id | v | id     | v      |
+====+===+========+========+
| 1  | 1 | (null) | (null) |
| 2  | 1 | 1      | 1      |
| 3  | 2 | (null) | (null) |
| 4  | 2 | 3      | 2      |
| 5  | 1 | 1      | 1      |
| 5  | 1 | 2      | 1      |
| 6  | 1 | 1      | 1      |
| 6  | 1 | 2      | 1      |
| 6  | 1 | 5      | 1      |
| 7  | 2 | 3      | 2      |
| 7  | 2 | 4      | 2      |
| 8  | 3 | (null) | (null) |
| 9  | 2 | 3      | 2      |
| 9  | 2 | 4      | 2      |
| 9  | 2 | 7      | 2      |
| 10 | 4 | (null) | (null) |
| 11 | 3 | 8      | 3      |
+----+---+--------+--------+
```
We can see the unique rows with minimal id have (null) values in last columns. So we need to remove rest. We can done this in next simple query:

```
delete t.*
from t
left join t t1 on t.v = t1.v and t.id > t1.id
where t1.id is not null;
```
Just run in on [SQLize.online](https://sqlize.online/sql/mysql80/d1e9b10003717a22797d9dcadff996c6/) and see the result

P.S. After this publication my colleague [@Akina](https://stackoverflow.com/users/10138734/akina) suggested a shorter version:

```
delete t.*
from t
join t t1 on t.v = t1.v and t.id > t1.id;
```
Jimmy Baccarat
Tags: baccarat, jimmy, jimmybaccart
Published: 2023-03-28 17:11:30

Chia sẻ những kiến thức baccarat và phương pháp để mọi người có một cách chơi baccarat hiệu quả

[https://jimmybaccarat.mystrikingly.com/](https://jimmybaccarat.mystrikingly.com/)
[https://jimmybaccarat.webflow.io/](https://jimmybaccarat.webflow.io/)
[https://entityjimmy.wixsite.com/jimmy-baccarat](https://entityjimmy.wixsite.com/jimmy-baccarat)
Here is the developer portfolio template that will get you hired
Tags: webdev, javascript, react, beginners
Published: 2023-03-28 16:52:13

I developed a simple but beautiful developer portfolio template using React and Next.js.


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

I am a 25 yo developer, i have been trying portfolio templates lately but i couldn't find one that fits my needs. Therefore i have created my own template that you can use as well!

Nearly all the components are dynamic and easy to use! Feel free to use it as-is or personalize it as much as you want. Please give me a feedback and if you find a bug tell me. A star on github is pretty appreciated.

If you'd like to contribute and make this much better for other users, please do.

Project Covers:
✔️ Homepage
✔️ Expertise
✔️ Experience
✔️ Work and Projects
✔️ Contact

To view a live example, [click here](https://www.yesildal.me/)
[Github link](https://github.com/umutyesildal/yesildal.me-personal-portfolio)

## Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

The versions i have used in the project.

```
node@v16.16.0
yarn@1.22.17
git@2.37.3
```

## How To Use 

From your command line and clone.

```bash
# Clone this repository
git clone https://github.com/umutyesildal/yesildal.me-personal-portfolio.git

# Go into the repository
cd yesildal.me-personal-portfolio

# Install dependencies
yarn

# Start a local dev server
yarn dev
```

## Deployment 

For deployment I have used [vercel](https://vercel.app/) and I am pretty happy with it.
```bash
# Build & Development Settings
Framework Preset: Nextjs
Build command: next build
Output directory: default
Install command: yarn
Development command: next
```




## Technologies Used 

- [React](https://reactjs.org/)
- [Next](https://nextjs.org/)
- [gsap](https://greensock.com/gsap/)
update local cache after mutation(update/delete/insert)
Published: 2023-03-28 16:51:11

`update(cache, {data}) {
    cache.modify({
        id: cache.identify({
          id: data.response.comment.answerId,
          __typename: 'Answer',
        }),
        fields: {
          commentCount(oldCount) {
            return oldCount + 1
          },
        },
    })
}`
Need interviewees for software CVE project!
Tags: security, containers, devops, opensource
Published: 2023-03-28 16:31:22

👋 We're conducting interviews with software professionals at organizations that build and/or deploy containers + regularly engage in CVE triage as part of their job!

All participants will be compensated $200 for a 90-minute interview. You can choose to donate the funds directly to an open-source project, maintainer, or foundation of your choice.

Sign up here:https://docs.google.com/forms/d/e/1FAIpQLSeYnom4-mXRSpg7Zhrde6fU8vKUc8lQNOfCon1FiAT-PpQ4Kg/viewform