DEV Community: E.

LibreLogos.org -- Free logos for open source projects

E. — Thu, 07 Oct 2021 10:37:49 +0000

Hi guys!

I designed 30+ free logos for open source projects and NGOs. If you have an eligible project, feel free to claim a logo. I'll try to add new logos regularly. I hope other designers will contribute to the project eventually.

Website: https://www.librelogos.org/
GitHub: https://github.com/enjeck/libre-logos
Product Hunt: https://www.producthunt.com/posts/librelogos-org (I just launched on Product Hunt. If you can, please show me some love over there)

Some logos

Google Search themed portfolio website

E. — Wed, 06 Oct 2021 12:43:45 +0000

Hi folks!

Lately, I have been seeing a lot of portfolio websites inspired by operating systems. I wanted to build something similar, so here is what I came up with -- a portfolio website that functions like Google Search.

Try it out here: https://gfolio.enjeck.com/
GitHub: https://github.com/enjeck/gfolio

This is actually my first ever React project. It was built from scratch.

Images

I'll appreciate feedback on the overall design and project structure. Thanks!

Set image as cursor upon hover

E. — Sun, 10 Jan 2021 19:25:17 +0000

While looking for inspiration and ideas to use for my personal portfolio, I came across Etienne Pharabot's portfolio. I loved his introduction, especially how emojis are displayed when you hover the mouse cursor over text. I loved this so much, I decided to ~~steal~~ use this concept in my personal portfolio. My implementation may not be as cool as Etienne's but it's pretty close :D

You can find the full code at this JSFiddle. Below, I explain how to code work.

First, we have the HTML:

  <div class="intro">
    <h2> <span class="hello"> Hello! </span> Nice to meet you!</h2>
    <h2>My name is <span class="my-name"> JOHN </span>.</h2>
    <h2>I am a <span class=dev> developer
          </span> living <span class="country"> CANADA </span>.
    </h2>
  </div>

I have enclosed each hover-able piece of text with span tags and given them unique class names. I will later use these class names when setting the image to display upon hover.

Unto our CSS code. Let's include some basic styling:

.intro {
  padding: 10px;
  width:70%;;
  margin-left:10%;
  padding-top:40px;
    position:relative;
  padding-bottom: 50px;
}

.intro h2 {
  margin:0;
  color: #333;
  text-transform:uppercase;
  font-size: 10vw;

}

.intro h2 span {
  text-shadow: 1px 1px 1px rgba(0,255,0,1);
}

The above styling doesn't really affect this feature. It's only there to make this example more visually appealing. I have given the text in the span tags a greenish text-shadow -- my way of showing that they are different, and to call the users' attention so they will hover on it.

Finally, using the cursor property, you can set the cursor to an image for every text by giving it an appropriate image link value.

.hello:hover {
 cursor:url(http://www.picgifs.com/smileys/smileys-and-emoticons/money/smileys-money-671353.gif), auto;
}

.my-name:hover {
 cursor:url(http://www.picgifs.com/smileys/smileys-and-emoticons/money/smileys-money-671353.gif), auto;
}

.country:hover {
 cursor:url(http://www.picgifs.com/smileys/smileys-and-emoticons/money/smileys-money-671353.gif), auto;
}

.dev:hover {
 cursor:url(http://www.picgifs.com/smileys/smileys-and-emoticons/money/smileys-money-671353.gif), auto;
}

By appending auto to the cursor value, we ensure that the cursor returns to its default state if the image can't load. Now, if you hover on the span texts, the cursor changes to an image. Feel free to use whatever images you want. I think the size of the image matters too. If the image is too large, it won't load. I was unable to get it working with a 160x160 image. But when I reduced the image size to 60x60, it worked -- the cursor changes to an image when upon text hover.

If you decide to try this out, let me know how it goes :)

Pure CSS Continuous Horizontal Text Scroll

E. — Sun, 10 Jan 2021 18:38:57 +0000

While building my personal site as part of the DigitalOcean App Platform Hackathon, I had to think of a creative way to show off my skills. I wanted some motion, but nothing overly complicated.

After moments of thinking and tinkering, I finally decided to use a continuous horizontal text scroll, sort of like those shown on TV news channel highlights. You can see the scrolling text in action on my website. I used two lines of text. The first line shows my skills and the second line shows the software, tools, and programming languages I'm familiar with.

The cool part about this is we can create it using only HTML and CSS, particularly using the translate property. No JavaScript code is necessary.

View the full code at this JSFiddle. Or continue to read to understand how the code works.

To begin, write your HTML code. Feel free to write whatever text you prefer between the div tags:

  <div class="skills">
        Front end Web development • 3d design • Graphic design • Community management • Open source • Technical support • Technical Writing • Figma • Pricacy & cybersecurity • Search Engine Optimization • Logo design
      </div>
      <div class="langs">
        HTML5 • CSS3 • JavaScript • Markdown • npm • Inkscape • Gimp • Figma • Git & GitHub & GitLab • SVG • PHP • Python • Wordpress • Mailchimp
  </div>

Next comes the CSS:

.skills, .langs {
  text-transform:uppercase;
  font-size:4vw;
  display: inline-block;
  white-space: nowrap;
  animation: floatText 25s infinite linear;
  padding-left: 100%; /*Initial offset, which places the text off-screen*/
  color:#ada97d;
}

From above, the most important declaration is padding-left: 100%, which places the text out of view.

Now, we need additional code to animate the scrolling motion of the text across the screen. We use the animation: floatText 25s infinite linear declaration. floatText calls the animation keyframes, which we'll soon add. The animation runs for 25s. You can edit this value to affect how fast or slow you want the text to move across the screen. We use infinite to ensure the text moves continuously.

Now, we make use of the translate property while writing the floatText keyframe:

@keyframes floatText {
  to {
    transform: translateX(-100%);
  }
}

Recall that earlier, we had given the text an initial offset with padding-left: 100%. Now, we can scroll the text over to the right using the above code, which translates its position in an opposite direction to the initial offset.

That's it. You're done.

Well, not quite. You can decide to add one more nifty feature -- to make the text pause when the mouse cursor hovers on it. This pause could be helpful to slow readers, giving them time to read the text before it scrolls off the screen. To do this, give the animation-play-state property a value of paused.

.skills:hover, .langs:hover  {
  animation-play-state: paused;
}

There you have it. A continuous horizontal pause-able text scroll, made with pure CSS :)

Building a personal portfolio | progress so far

E. — Sun, 03 Jan 2021 13:41:16 +0000

I have commenced coding my personal portfolio. Finally \o/. This is a project I have been planning on doing for a long time. I'm lucky to be able to do this while participating in the DigitalOcean App Platform Hackathon. Talk about killing two birds with one stone!

Progress so far

Following up on yesterday's update, here is what has happened so far:

I have received 50$ credit on Digital Ocean. Yay!
I have begun coding the website. I'm more of a designer than a developer. I am spending way too much time obsessing about the layout and design, rather than doing the actual coding. Good thing I like working with CSS. I definitely will be showing off some fancy hover effects!
I have read some documentation on how the App Platform works. I'll be ready to deploy my code anytime soon.

Next steps

Finalize the design and fix some bugs with the code: For some reason, some parts of my code suddenly stopped working. I can't seem to figure out why.
Write some tutorials: I will be publishing some articles here that explain how I achieved some of the effects/designs in my portfolio. I hope people will value such content.

Link to my portfolio coming soon! Stay tuned :)

Building a personal portfolio | Getting started

E. — Sat, 02 Jan 2021 09:58:27 +0000

I have just begun creating a personal portfolio website to submit as part of the App Platform Hackathon. I know I'm starting late. Better late than never! With just 8 days left till the deadline, I'll have to work fast to make a submission on time.

For the past year, I have been planning to create my personal portfolio. Because I have full-time school and work, I didn't have time to sit down and code. This short Christmas vacation has given me some free time to dedicate to this project. I have just 3 days until school resumes. Hopefully, I can complete over 70% of the project before then.

What I've done so far

Before I begin coding, here are a few tasks I've already done:

Signed up for Digital Ocean
Filled the form requesting credits
Searched for inspiration. I have been using awwwards.com and cssdesignawards.com to explore beautiful website effects and designs. Some cool effects and designs will be applied when creating my own portfolio. I already have a mental picture of what I want the site to look like. The only thing left now is execution :)

Next update coming soon!

Websites to download free programming books?

E. — Mon, 27 Jan 2020 17:59:05 +0000

I actually find it easier to learn concepts through books than videos. I, therefore, have some websites where I go to for free ebooks on programming.
So far, I've found and used 5 websites:

O'reilly books
Packt
Tutorials point
GoalKicker
AlliteBooks.

What sites do you guys use?

I compiled 200+ design and frontend conferences in 2020. Any more to add?

E. — Thu, 23 Jan 2020 17:37:59 +0000

Hi guys,
I spent this week and last week gathering all the design conferences around the world for 2020. Includes UX conferences, front-end, DesignOps, product design and more. I didn't think I would get to up to 202 of them! I exceeded 11,000 words, my longest article yet.
Of course, the 200+ conferences list is too long to post (and format) here, so I'll leave it on my blog.
The final aim is to make this into a downloadable pdf ebook. Before I do this, I want to make sure I'm not missing anything. Can you please recommend any design/frontend conferences that I should add to this list?
Thanks!

Github Education Pack for Students provides about $200k worth of tools and training for free!

E. — Thu, 16 Jan 2020 19:54:25 +0000

The Github Education Pack for Students offers so many perks such as free domains, prenium icons, programming lessons, interview prep and many other developer resources. Basically, students can get about $200k worth of tools and training for free! 😮😵 Wish I knew about this earlier.

Making money from open source projects

E. — Wed, 20 Nov 2019 08:00:52 +0000

Contributing to open source can be very rewarding. Apart from doing good and improving your skills, you can win amazing prizes. Do you need motivation to get into open source? Here you have it. Here are some programs where you can get paid from contributing to open source.

This list and additional content was originally published here.

1. Google Summer of Code (GSoC)

Firstly, let’s talk about Google Summer of Code. GSoC is a global program for university students. Through GSoC, students earn a stipend for contributing to open source projects. Successful Google Summer of Code applicants get a $3000 to $6600 stipend. The program has a duration of 3 months. During this period, students will write code for open-source organizations.

Apart from the cash prize, the GSoC experience will look great on your CV. Moreover, you will learn a lot, as students work with experienced mentors.

Google Summer of Code eligibility: University students who are 18 years and above.

GSoC stipend: From $3000 to $6600 per student (varies according to your location)

Google Summer of Code date: The 2019 edition is closed. Look out for Google Summer of Code 2020 application in mid-January.

2. Google Code-in contest (GCI)

Google Code-in is an online international contest organized by Google. GCI introduces teenagers to the exciting world open source. Together with several organizations and the help of an array of mentors, teenagers work on bite-sized tasks. Despite its name, Google Code-in is not exclusively for coders. There are also tasks in the fields of documentation, outreach, research, design, and quality assurance.
Google Code-in grand prize winners are offered a fully-funded trip to Google HQ. Even more exciting, the winners will be accompanied by their parents or guardians. If you are above 18 years old, don’t feel left out. You can be a mentor in one of the many organizations. Fortunately, organizations’ mentors also benefit from a sponsored trip to Google HQ.

Google Code-in eligibility: Pre-university students from ages 13 to 17.

Prize: A trip for two to Google HQ in Sans Francisco, USA. Moreover, winners receive swag like T-shirts, hoodies, Google Pixel latest phones, gift cards, earbuds, and trophies. If you can’t attend the trip for any reason, you will be offered $2000 plus other prizes.

Google Code-in date: Google Code-in 2019 competition is currently open! It will run from December 2nd to January 21st.

3. Google Season of Docs (GSoD)

There is the misconception that open-source is meant only for programmers. For that reason, technical documentation does not get enough attention. Google Season of Docs is just like GSoC, but for technical writers. The accepted writers will be paired with a mentor from his/her chosen organization. They will spend three months writing documentation, tutorials, and others. Google Season of Docs interns receive a $3000 to $6600 stipend.

Google Season of Docs eligibility: Technical writers who are 18 years and above.

Stipend: From $3000 to $6600 per student (varies according to your location).

Date: Google Season of Docs 2019 is currently closed. Look out for Google Season of Docs 2020 application in April.

4. Outreachy Internships

How would you like to make $5500 in three months from the comfort of your home? Do you want to contribute to Free and Open Source Software? If yes, then set your sights on Outreachy. Outreachy is a remote global internship. It is open to women, LGBTQ+ and other minorities. In addition, all applicants have to be over 18 years old to apply. There are many organizations and projects to choose from. These projects require one or more of the following skills: programming, documentation, user experience, graphical design, illustration, or data science. Moreover, there is also the prospect of scoring a job once the internship is over.

Outreachy internships are open twice a year. The mid-year internship application opens in February. The end-of-year internship application opens in September.

Outreachy eligibility: 18 years old and above. Most importantly, Women and LQBTQ+ are welcomed to apply. Anyone who faces under-representation, systemic bias or discrimination in the technology industry of their country can apply.

Outreachy prize: Full-tuition scholarship for women in stem.

Application date: Outreachy 2019 is over. Look out for the upcoming Outreachy 2020 application period. The dates are from February to March and September to October.

5. GirlScript Summer of Code (GSSoC)

GirlScript Summer of Code aims to foster diversity and gender equality in technology. GSSoC especially encourages the participation of women in open source. The program is also open to males. In 2019, the program has about 100 mentors and 1500 registered participants. As the name implies, GSSoC runs during summer. it Just like GSoC, GirlScript Summer of Code lasts for 3 months. Throughout the program, participants contribute to different projects under the guidance of experienced mentors. The top participants receive exciting prizes and opportunities.

GirlScript Summer of Code eligibility: Open to everyone, no matter your age, gender, and nationality.

Prizes: The top three performers will get cash prize. The top 25 performers receive letters of recommendation and internship opportunities. The top 50 performers will get T-shirts and other swag. In addition, participants with merged pull requests will get digital certificates.

Application date: GirScript Summer of Code 2019 is closed. GirlScript Summer of Code 2020 will commence in January 2020.

6. Rails Girls Summer of Code (RGSoC)

Rails Girls Summer of Code is a global fellowship program aimed at bringing more diversity into Open Source. it welcomes women and non-binary persons as applicants. In particular, the program focuses on advanced beginners who want to go into programming full-time. From July to September, accepted applicants will be paid a stipend to work on an open-source project. Rails Girls Summer of Code is a team challenge. Working in teams of two, students are supported by a mentor and coaches.

Rails Girls Summer of Code eligibility: Open to all people with non-binary gender identities or who identify as women (transgender or cisgender).

Prize: The stipend amount is variable. It depends on where the applicant lives, how much their expenses are, and any special circumstances.

Application date: Rails Girls Summer of Code 2020 is expected to start receiving applications in February.

Is there any other opportunity that should be on this list? Please, let me know.