ilonacodes
Blog
YouTube
Contact
Ilona who codes
Frontend Engineer in Berlin
M.Sc in Media CS

"I like to work hard for things that are worth it."
The latest articles:
Styling Form With Different States And Storybook
Harnessing the power of Bootstrap in React with Reactstrap
What are GraphQL and its schemas

13
May
2018
#IT
#UX
#webdevelopment
#webdesign
#tech
#careers

How to Hack Your Front-End Career With UX

13 May, 2018
blog post cover

source: https://www.pexels.com/photo/pink-revolver-gun-1056555/

You must be thinking that as a front-end developer, you are developing websites / online products using HTML, CSS-styling, JavaScript and other different Frameworks to make them good looking by implementing user interfaces from the mockups.

Read My Full Post
Tags | #IT #UX #webdevelopment #webdesign #tech #careers
23
Apr
2018
#react
#css3
#javascript
#frontend
#opacity
#coding
#womenwhocode

Front-end Shorts: CSS3 Opacity - Background Only

23 Apr, 2018
blog post cover
Hi everyone! It’s time for a new post. What we do (I mean front-end web developers) isn’t all that unique. Often we face the problem that seems easy to solve. However, sometimes we spend hours on finding the solution. In this case, I wanted to change the opacity of the app teaser background color and don’t change the opacity of links. I have tried some silly approaches that seemed logical to me, and they all have failed.
Read My Full Post
Tags | #react #css3 #javascript #frontend #opacity #coding #womenwhocode
21
Apr
2018
#react
#redux
#javascript
#storytelling
#frontend
#ui
#coding
#ux
#womenwhocode

Front-end Shorts: Good Storytelling Elements

21 Apr, 2018
Happy Friday, my readers! As a front-end web developer, I am also interested in UI/UX design, and that is why I’ve decided me to do a UI/UX research using Aristotle’s Seven Elements of Storytelling framework. It is notably practical, and many designers, web developers, will benefit from applying this method for creating user-friendly interfaces. In my opinion, it’s important to understand the users and to make it easier for them to use apps.
Read My Full Post
Tags | #react #redux #javascript #storytelling #frontend #ui #coding #ux #womenwhocode
18
Apr
2018
#react
#redux
#javascript
#storybook
#frontend
#learntocode
#coding
#letsgetcoding
#womenwhocode

Front-end Shorts: Storybook With React

18 Apr, 2018
Hey there, that’s me again and a new post from me! Lately, I worked on the project that generates live documentation of the front-end components for apps built with create-react-app, and this UI development environment is called Storybook. What is the significant purpose for using this tool? First of all, it helps to avoid code duplications and to make it easy to know which components there are already, what they are doing and how they are being used.
Read My Full Post
Tags | #react #redux #javascript #storybook #frontend #learntocode #coding #letsgetcoding #womenwhocode
31
Mar
2018
#react
#redux
#javascript
#file
#input
#frontend
#learntocode
#coding
#letsgetcoding
#womenwhocode

Front-end Shorts: How to Read Content From The File Input in React

31 Mar, 2018
Hi, everyone! How is your weekend going? As you know, I prefer learning to code by doing things. So, the last feature I have implemented for the app is the reading of the content from the uploaded (local) .csv file from the user. To do so without a server or any back-end—is a challenge. To make things work properly in React+Redux, I have created the following component: const ImportFromFileBodyComponent = () => { let fileReader; const handleFileRead = (e) => { const content = fileReader.
Read My Full Post
Tags | #react #redux #javascript #file #input #frontend #learntocode #coding #letsgetcoding #womenwhocode
22
Mar
2018
#react
#redux
#javascript
#frontend
#learntocode
#coding
#letsgetcoding
#womenwhocode

Front-end Shorts: How to Delete Item From The List With React+Redux

22 Mar, 2018
There are many possibilities how to remove multiple items from the array with JavaScript. So in this tutorial, I am going to share my approach to delete function with React+Redux. It’s front-end shorts, and I am trying to highlight the most important information. Thus, just let’s have a look at the significant code snippets with explanations: I have created the action: // expenseActions.js export const t = { ... DELETE_EXPENSE: 'DELETE_EXPENSE', .
Read My Full Post
Tags | #react #redux #javascript #frontend #learntocode #coding #letsgetcoding #womenwhocode
17
Mar
2018
#react
#redux
#fetch
#javascript
#frontend
#learntocode
#coding
#letsgetcoding
#womenwhocode

Front-end Shorts: Fetch List of Resources From REST-API

17 Mar, 2018
Today I am going to tell you how to get JSON data from the Rest-API to UI using React+Redux frameworks. In my case, the task looks like: I have a URL, for example: https://api.com/v1/expenses/ which will give the following JSON data, and I want to get this data in my UI. To solve this task, I decided to use JavaScript’s fetch method. So in this way, I shouldn’t rely on any external libraries (given my target browsers are remotely up-to-date).
Read My Full Post
Tags | #react #redux #fetch #javascript #frontend #learntocode #coding #letsgetcoding #womenwhocode
14
Mar
2018
#react
#redux
#react-router-redux
#javascript
#frontend
#learntocode
#coding
#letsgetcoding
#womenwhocode

Front-end Shorts: Setting up React-Router-Redux

14 Mar, 2018
Hi, everyone! How is your week going? Yesterday I worked with the web application written on React + Redux and had had some problem with the react-router-redux library. In short, the push method (using for navigation outside of components) didn’t work. Firstly, I have tried to set the Route component in the “traditional” way such as with react-router library. That might get the history props. Unfortunately, that also didn’t work. Because of Redux framework.
Read My Full Post
Tags | #react #redux #react-router-redux #javascript #frontend #learntocode #coding #letsgetcoding #womenwhocode
10
Mar
2018
#scrolling
#parallax
#javascript
#frontend
#learntocode
#animate
#coding
#letsgetcoding
#womenwhocode

Front-end Shorts: How to Create Parallax Effect With Vanilla JS

10 Mar, 2018
Hi, there! I hope you enjoy your weekend, and ready for a new post. Recently there are a lot of sites, which have featured with parallax scrolling effect, that represents them in more interactive “professionally-made” way. This fact made me recreate the effect using Vanilla JavaScript, an example of which you can see below. Let’s a look at the implementation of parallax effect in Vanilla JavaScript. I have used a ‘scroll’ event on browser ‘window,’ and retrieved the number of pixels the document is currently scrolled along the vertical axis from ‘window.
Read My Full Post
Tags | #scrolling #parallax #javascript #frontend #learntocode #animate #coding #letsgetcoding #womenwhocode
8
Mar
2018
#scrolling
#jquery
#javascript
#frontend
#learntocode
#animate
#coding
#letsgetcoding
#womenwhocode

Front-end Shorts: How to Scroll to Element in jQuery With Animation

8 Mar, 2018
Here I am back and decided to continue blogging with front-end shorts. Unfortunately, I don’t have enough time to write big posts, but I would be happy to share some frontend tips and tricks that I have already applied for some of my projects. The last days I had to work with Javascript and jQuery a lot apart from React and spent much time on creating templates. As you know, nowadays modern web pages include animated scrolling, which makes any site look professional and more elegant (instead of simple link element reference in HTML5).
Read My Full Post
Tags | #scrolling #jquery #javascript #frontend #learntocode #animate #coding #letsgetcoding #womenwhocode
Ilona who codes
Frontend Engineer in Berlin
M.Sc in Media CS

"I like to work hard for things that are worth it."
The latest articles:
Styling Form With Different States And Storybook
Harnessing the power of Bootstrap in React with Reactstrap
What are GraphQL and its schemas

  • ««
  • «
  • 1
  • 2
  • 3
  • 4
  • 5
  • »
  • »»
Blog
YouTube
Contact
© 2019 ilonacodes
© 2019 ilonacodes
Blog
YouTube
Contact