DEV Community: ramziosta

Winning the Hackathon: Boost Your Efficiency with These Must-Have Apps for developers and teams 🧑🏼‍💻👩🏽‍💻👨🏿‍💻.

ramziosta — Tue, 28 Feb 2023 15:16:02 +0000

As a participant in a hackathon, my team and I faced the challenge of solving a complex problem under a tight deadline. In order to work more efficiently and stay on top of my tasks, I required tools to assist me with research, documentation, organization, scheduling, and managing time zones across multiple locations. Although I was already using some apps, I discovered some lesser-known ones that made a big difference.

I used the app ReadMe to improve my documentation writing for the GitHub README.md files.
Answer The Public a web app to research current news trends for market research, as well as Perplexity.ai, and Browser.ai as a new way to research and do data scraping.
The app Toggl and When To Meet even helped me manage my schedule across different time zones and locations, which can be tricky when having a total of 6 members in a team.
Additionally, some of these tools are AI-powered and helped me with note-taking during meetings Fireflies.ai, time management, and presentations with Tome. Two specific apps I found especially useful Fig.io and Warp.io for coding and operating the Bash terminal in a new way that.

Exploring new tools and resources is often necessary when trying to tackle a specific problem. It's exciting to think about the possibilities that arise when using innovative solutions to overcome obstacles.

Supercharge Your Design Process: A Guide to the Best Time-Saving Tools for Devs and Designers 🎨

ramziosta — Mon, 06 Feb 2023 20:18:42 +0000

1- https://app.haikei.app/
Haikei is an app that lets you generate visually stunning content for your designs. The only limit is your imagination! I used it to create shapes for backgrounds and applied the blur filter in CSS to create a gradient background. This app is perfect for designing long scroll websites and landing pages.

Here are the originals:

2- https://www.cssfilters.co/
If you're looking for an image filtering tool that doesn't require Photoshop or similar apps, CSS Filters is for you. Simply upload your photo, adjust the settings to achieve the desired effects, copy the CSS code, and you're done! This tool is ideal for photo-heavy sites that need a creative touch on the fly.

3- https://webcode.tools
Webcode tools is a visualizer that I wish was available when I was learning web development. You can experiment with properties and values, test design ideas in the sketching phase, and even set up proper SEO, meta tags, Robot.txt files, and more!

4- https://www.cssportal.com/css-generators.php
For those who want to get surgical with their CSS and HTML, CSS Portal is the tool for you. It's a generator with high detail and specificity. I used it to create an image in the shape of an X. You can try all sorts of shapes and paths for images and backgrounds. Check out the many other features!

5- https://www.notion.so/product
Notion is another great productivity app, although it will soon integrate AI. With its current features, you don't even need the AI. There are many great templates to track your creative process, and I love starting my mood boards with this app.

6- rive.app
If you want to add 3D and interactive elements to your designs but don't want to work in Blender or 3JS and write code, Rive is the tool for you. With easy demos and tutorials, you can start designing a stunning, competitive website in no time.

7- https://fontpairings.bypeople.com/
For those who love to experiment with typeface and font pairings, Font Pairings is the tool for you. It's highly interactive and fun, and you might just get too caught up in it!

If you want to checkout part one here is the link:
Part One

Let me know what you think and If you have any suggestions please put them in the comments!

Stay tuned! Next week we shall get into productivity in VSCode and some Plugins that are a must have to level up your game!

No AI Needed! 7 Proven Time-Saving Apps and tools To Turn Every Front-End Developer & Designer into a Design Ninja 🎨🥷🏽! Part One

ramziosta — Wed, 01 Feb 2023 17:29:03 +0000

Unleash Your Design & UX UI Potential with the No-Search Required Tools Already at Your Fingertips: AI & ChatGPT Take a Backseat

With AI and ChatGPT on the rise, it's important to remember the tried and true tools that are already available to help with our design and UX/UI needs. No searching required and user-friendly interfaces come standard.

Here is Part One of my 7 favorite tools for streamlining the design process:

https://html-css-js.com
This site has it all, from borders to typography and everything in between. It even includes templates and code for HTML and JavaScript. And if you need further explanation on what the generated code means, tutorials are readily available. It's a one-stop-shop for all things design!
https://codepen.io/jipdev/full/ZEJOWjP
This tool is perfect for generating grid layouts. Simply set the number of columns and cards, and it will randomly generate a layout for inspiration.
https://webcode.tools/generators
This site not only generates code for CSS, HTML, and more, but it also helps with SEO for your website.
https://keyframes.app/
Ideal for animation enthusiasts, this app is a great visualizer for trying out concepts and generating ideas.
CSS Viewer (Chrome Extension) https://github.com/miled/cssviewer
Ever wonder what font or color scheme a website is using? This extension allows you to quickly identify these elements without opening dev tools.
Outliner (Chrome Extension)
https://chrome.google.com/webstore/detail/outliner-css/epodomlablfiehjgajhlhbdhidlkokaj
This extension is a must-have for any designer or developer. It allows you to easily see the layout and how each section of a website is divided.
Milanote
https://milanote.com
A mood board and sketchbook all in one, this app is my go-to for organizing and collaborating with teams. The interface is intuitive and easy to navigate.

What tools and apps do you use?

Part Two of my favorite design tools: Part Two