{"id":87629,"date":"2024-08-28T16:13:12","date_gmt":"2024-08-28T16:13:12","guid":{"rendered":"https:\/\/staging.devsdata.com\/?p=87629"},"modified":"2025-02-24T09:48:38","modified_gmt":"2025-02-24T09:48:38","slug":"front-end-developer-job-description-template","status":"publish","type":"post","link":"https:\/\/staging.devsdata.com\/pl\/front-end-developer-job-description-template\/","title":{"rendered":"Frontend Developer \u2013 opis, zadania i rola w firmie"},"content":{"rendered":"<section>\n<h1>Frontend Developer \u2013 opis, zadania i rola w firmie<\/h1>\n<p>\n    <style>`\n        .post-info {\n            display: flex;\n            flex-direction: row;\n            font-family: Montserrat;\n            font-style: normal;\n            font-weight: 500;\n            font-size: 16px;\n            line-height: 150%;\n            letter-spacing: 0.02em;\n            color: #6D7082;\n            \/*padding-top:32px;*\/\n        }\n\n        .info-container .post-info {\n            display: flex;\n            flex-direction: column;\n            justify-content: space-between;\n        }\n\n        .post-info-main {\n            width: 100%;\n            display: flex;\n            row-gap: 5px;\n            grid-template-rows: repeat(3, auto);\n            grid-template-columns: 60px max-content auto;\n            margin-bottom:12px;\n        }\n\n        .with-reviewer {\n            flex-wrap: wrap;\n            row-gap: 5px;\n        }\n\n        .author-name {\n            margin-bottom:4px;\n            grid-row-start: 2;\n            text-decoration: underline;\n            color:black !important;\n        }\n\n        .rank-math-breadcrumb {\n            margin-top:20px;\n            position: relative;\n            z-index: 1;\n        }\n\n        .rank-math-breadcrumb p {\n            margin: 0;\n            white-space: nowrap; \n            overflow: hidden;\n            text-overflow: ellipsis;\n        }\n\n        .rank-math-breadcrumb a {\n            color: #6d7082;\n        }\n\n        .rank-math-breadcrumb a:hover {\n            text-decoration: underline;\n            color: #0332c9;\n        }\n\n        .author-avatar {\n            display: flex;\n            justify-content: center;\n            margin-right: 15px;\n            width: fit-content;\n            grid-row-start: span 2;\n            grid-row-end: 4;\n        }\n\n        .author-avatar picture {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n        }\n\n        .author-avatar.clicked {\n            transform: scale(1.1);\n        }\n\n        .post-info .author-avatar img {\n            min-width:44px;\n            height: 44px;\n            width: auto;\n            object-fit: cover;\n            aspect-ratio: 1\/1;\n            filter: grayscale(1);\n            border-radius: 100%;\n            position: relative;\n            top: 2px;\n        }\n\n        .post-info .author_socials {\n            display: flex;\n            flex-direction: row;\n            align-items: center;\n            grid-row-start: 3;\n            grid-column: span 2;\n            gap: 15px;\n            list-style-type: none;\n            padding: 0;\n            margin: 0;\n        }\n\n        .post-info .author_socials li a {\n            display: flex;\n            align-item: center;\n            text-decoration: none;\n        }\n\n        .author_socials a svg {\n            width: 16px;\n            height: 16px;\n            transition: 0.3s;\n            color: #000;\n        }\n      \n        .author_socials li:hover svg {\n            color: #0332c9;\n        }\n\n        .right-info a {\n            width: fit-content;\n            color: unset;\n        }\n\n        .right-info a:hover {\n            text-decoration: underline;\n        }\n\n        .post-info .clock {\n            position: relative;\n            padding-right: 5px;\n            top: 2px;\n        }\n\n        .post-info .arrow {\n            position: relative;\n            margin-left: 10px;\n            margin-right: 10px;\n            transition: .2s;\n            height: 6px;\n            bottom: 1px;\n        }\n        .post-info .post-info-separator {\n            padding-right: 3px;\n            padding-left: 3px;\n        }\n\n        .reviewer-info {\n            display: flex;\n            flex-direction:column;\n            justify-content: center;\n            align-items: center;\n            grid-row-start: 2;\n            align-self: start;\n            justify-self: end;\n            font-family: \"Oxygen\", arial;\n            color: #000;\n        }\n\n        .reviewer-info.the_first_row {\n            justify-self: start;\n            grid-row-start: 1;\n            grid-column: span 3;\n        }\n\n        .meta-checkmark {\n            width: 20px;\n            height: auto;\n        }\n\n        .reviewer-info a {\n            margin-left: 5px;\n            color: #000;\n            text-decoration: underline;\n        }\n        .reviewer-info a:hover {\n            color: #0332c9;\n        }\n        .reviewer-info a:visited {\n            color: #551a8b;\n        }\n        .reviewer-info a:active {\n            color: #0332c9;\n        }\n        .language-dropdown-container {\n            display: inline-block;\n            width: 200px;\n        }\n\n        .language_switcher {\n            display: inline-flex;\n            align-items: center;\n            flex-direction: row;\n            gap: 5px;\n        }\n        \n        .language_switcher .wpml-ls-legacy-dropdown {\n            width: auto;\n        }\n\n        .wpml-ls-legacy-dropdown a:focus {\n            background-color: #FFFFFF;\n        }\n\n        .language_switcher .wpml-ls-legacy-dropdown a:visited {\n            color: #000000 !important;\n        }\n\n        .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle:after {\n            content: \"\";\n            display: inline-block;\n            transform: scale(.7);\n            height: 20px;\n            width: 20px;\n            background: url(\"\/wp-content\/uploads\/2020\/07\/Vector.png\");\n            margin-left: 5px;\n            background-repeat: no-repeat;\n            background-position: 10px 15px;\n            border: none;\n            position: unset;\n            background-color: #eee;\n            border-radius: 50%;\n            padding: 10px;\n            transition: transform 0.2s ease-in-out;;\n        }\n\n        .language_switcher a {\n            border: none;\n            padding: 10px 15px;\n        }\n\n        .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle {\n            padding: 0 5px 0 15px !important;\n        }\n\n        .wpml-ls-sub-menu a.wpml-ls-link:hover,\n        .language_switcher .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle:hover {\n            background-color: rgba(204, 204, 211);\n            color: #000000 !important;\n            text-decoration: none;\n        }\n\n        .wpml-ls-sub-menu {\n            border: none !important;\n            background-color: transparent;\n        }\n\n        .wpml-ls-sub-menu a {\n            background-color: #FFFFFF;\n        }\n\n        .wpml-ls-current-language .wpml-ls-item-toggle {\n            border-radius: 8px;\n        }\n\n        .wpml-ls-current-language:hover .wpml-ls-sub-menu a {\n            background-color: rgb(238, 238, 238) !important;\n        }\n\n        .wpml-ls-current-language .wpml-ls-sub-menu a:hover,\n        a.wpml-ls-item-toggle:hover:after {\n            background-color: rgba(204, 204, 211) !important;\n        }\n\n        .wpml-ls-current-language:hover a.wpml-ls-item-toggle:after {\n            transform: scale(.7) rotate(180deg);\n        }\n\n        .wpml-ls-current-language:hover .language_switcher .wpml-ls-legacy-dropdown a {\n            background-color: rgba(109, 112, 130, 0.1);\n        }\n\n        .wpml-ls-current-language:hover .wpml-ls-item-toggle{\n            border-radius: 8px 8px 0 0;\n        }\n\n        .wpml-ls-current-language:hover .wpml-ls-item:last-child .wpml-ls-link{\n            border-radius: 0 0 8px 8px;\n        }\n\n        ul.language-list {\n            \/*min-height: 71px;*\/\n            margin: 0;\n            overflow: hidden;\n            position: absolute;\n            display: inline-block;\n            list-style: none;\n            vertical-align: top;\n            background-color: #FFFFFF;\n            padding: 0;\n            z-index: 2;\n        }\n\n        ul.language-list.mobile {\n            border-radius: 10px;\n            border: 1px solid rgba(109, 112, 130, 0.1);\n            margin-left: 10px;\n        }\n\n        .language-list.mobile li:hover {\n            background-color: rgba(109, 112, 130, 0.1)\n        }\n\n        .language-list.mobile li:hover a {\n            color: #000000;\n        }\n\n        .dropdown-arrow {\n            display: inline-block;\n            border-radius: 50%;\n            height: 30px;\n            width: 30px;\n        }\n\n        .dropdown-arrow {\n            background-color: rgba(109, 112, 130, 0.1);\n        }\n\n        .dropdown-arrow:hover {\n            background-color: rgba(109, 112, 130, 0.3);\n        }\n\n        .dropdown-arrow.mobile,\n        .dropdown-arrow.mobile:hover {\n            background-color: unset;\n        }\n\n        .language-list li {\n            padding-left: 10px;\n            cursor: pointer;\n            display: none;\n        }\n\n        .language-list li a {\n            color: #6D7082;\n            text-decoration: none;\n        }\n\n        .language-list li:first-child {\n            display: block;\n        }\n\n        .active li {\n            display: block;\n        }\n\n        .rotated {\n            transform: rotate(180deg);\n            bottom: 2px !important;\n        }\n        .bookmark {\n            align-self: center;\n            cursor:pointer;\n            display:none;\n        }\n        \n        .article h1 + p,\n        .article h1 + p + p {\n            margin: 0;\n            margin-bottom: 0 !important;\n        }\n\n        .info-container{\n            \/*min-height:150px;*\/\n            direction: ltr;\n            display: flex;\n            flex-direction: column;\n            justify-content: space-between;\n            padding-top: 20px;\n        }\n        .tags{\n            font-family: \"Montserrat\", sans-serif;\n            display: flex;\n            flex-direction: row;\n            justify-content: flex-start;\n            flex-wrap: wrap;\n            width: 100%;\n            overflow: hidden;\n            font-size: 14px;\n            border-radius: unset;\n            margin-bottom:20px;\n        }\n        .tags > :first-child {\n            background-color:#E5F0F8;\n        }\n        .tags a {\n            font-style: normal;\n            line-height: 1.75em;\n            border: 0.5px solid #e2e5e9;\n            margin-right: 7px;\n            margin-top: 7px;\n            transition: 0.2s;\n            transition-property: background;\n            border-radius: 5px;\n            padding: 0.2em 0.8em;\n            color: black;\n        }\n        .tags a:hover {\n            background-color: #c1c7d0;\n        }\n\n        .tags a:visited {\n            color: #000;\n        }\n        .tags a:active {\n            color: #000;\n        }\n        .default-a:focus {\n            background-color: unset;\n        }\n\n        .default-a:hover{\n            text-decoration: underline;\n        }\n        .separator {\n        color:black !important;\n        font-weight:600;\n        }\n        .last {\n        color:black !important;\n        font-weight:600;\n        }\n        @media screen and (max-width:1034px) {\n        .author_links {\n        margin-right:60px !important;\n        }\n        }\n        @media screen and (max-width:490px) {\n        .review-lowres {\n        display:flex !important;\n        }\n        .review-highres {\n        display:none !important;\n        }\n        .author_links {\n        margin-right:36px !important;\n        } \n        }\n    <\/style>\n    <div><nav aria-label=\"breadcrumbs\" class=\"rank-math-breadcrumb\"><p><span class=\"last\">Home<\/span><\/p><\/nav><\/div>\n<div class=\"reviewer-info review-lowres\" style=\"display:none;\">   <div style=\"display:flex; justify-content:end; width:100%; align-items:center; margin-top:20px;\">\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" style=\"margin-right:4px;\" fill=\"none\">\n<path d=\"M7.00864 9.91283L5.45114 8.35533C5.34048 8.24466 5.20481 8.18933 5.04414 8.18933C4.88348 8.18933 4.7412 8.25021 4.61731 8.37199C4.50675 8.48521 4.45148 8.62205 4.45148 8.78249C4.45148 8.94283 4.50809 9.07833 4.62131 9.18899L6.60681 11.1912C6.72137 11.3044 6.85498 11.361 7.00764 11.361C7.16031 11.361 7.29459 11.3044 7.41048 11.1912L11.346 7.25166C11.4704 7.12988 11.5326 6.98933 11.5326 6.82999C11.5326 6.67066 11.4704 6.5291 11.346 6.40533C11.2242 6.29466 11.0802 6.2421 10.914 6.24766C10.7478 6.25321 10.6083 6.31133 10.4956 6.42199L7.00864 9.91283ZM8.00048 15.2662C7.07314 15.2662 6.19792 15.089 5.37481 14.7348C4.55181 14.3806 3.83298 13.8962 3.21831 13.2815C2.60364 12.6668 2.1192 11.9482 1.76498 11.1255C1.41075 10.3028 1.23364 9.42777 1.23364 8.50033C1.23364 7.56188 1.41075 6.6811 1.76498 5.85799C2.1192 5.03499 2.60342 4.31888 3.21764 3.70966C3.83186 3.10033 4.55042 2.61799 5.37331 2.26266C6.1962 1.90721 7.07148 1.72949 7.99914 1.72949C8.93781 1.72949 9.81886 1.9071 10.6423 2.26233C11.4656 2.61755 12.1818 3.0996 12.7908 3.70849C13.3999 4.31738 13.8821 5.03338 14.2373 5.85649C14.5926 6.6796 14.7703 7.56071 14.7703 8.49983C14.7703 9.4276 14.5926 10.303 14.2371 11.126C13.8818 11.949 13.3995 12.6677 12.7901 13.282C12.1809 13.8963 11.465 14.3806 10.6423 14.7348C9.81964 15.089 8.93903 15.2662 8.00048 15.2662ZM7.99998 14.1307C9.56709 14.1307 10.8974 13.582 11.9908 12.4848C13.0841 11.3875 13.6308 10.0592 13.6308 8.49983C13.6308 6.93271 13.0841 5.60244 11.9908 4.50899C10.8974 3.41566 9.56642 2.86899 7.99798 2.86899C6.44064 2.86899 5.11314 3.41566 4.01548 4.50899C2.91792 5.60244 2.36914 6.93338 2.36914 8.50183C2.36914 10.0592 2.91775 11.3867 4.01498 12.4843C5.11231 13.5819 6.44064 14.1307 7.99998 14.1307Z\" fill=\"#16C667\"\/>\n<\/svg>\n                                Reviewed by <a href=\"\/author\/\/\"><\/a> <\/div> <\/div>\n    <div class=\"info-container\">\n    <div class=\"post-info with-reviewer\">\n        <div class=\"post-info-main\">\n            <div class=\"author-avatar\">\n                <picture>\n                        <source\n                            srcset=\"https:\/\/staging.devsdata.com\/wp-content\/uploads\/2024\/03\/meri-sargsyan-min.webp\" type=image\/webp> \n                        <source \n                            srcset=\"https:\/\/staging.devsdata.com\/wp-content\/uploads\/2024\/03\/meri-sargsyan-min.jpg\" type=\"image\/jpeg\">\n                        <img decoding=\"async\" \n                            class=\"avatar lazyload\"\n                            width=\"64\" \n                            height=\"64\"\n                            src=\"https:\/\/staging.devsdata.com\/wp-content\/uploads\/2024\/03\/meri-sargsyan-min.jpg\"\n                            alt=\"avatar\"\n                            loading=\"lazy\"\n                            title=\"Meri Sargsyan\"\n                        >\n                <\/picture>\n            <\/div>\n            <div style=\"display:flex; flex-direction:column;margin-right:104px;\" class=\"author_links\">\n            <a href=\"\/author\/meri-sargsyan\/\" class=\"author-name\">Meri Sargsyan<\/a>\n            <ul class=\"author_socials\">\n            <li>\n                <a href=\"https:\/\/www.linkedin.com\/in\/meri-sargsyan-aa65131aa\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\n                    <svg version=\"1.0\" fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 448 512\" aria-hidden=\"true\">\n                            <g id=\"linkedin5_layer\">\n                                <path d=\"M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z\" data-hs-event-238572417=\"1\"><\/path>\n                            <\/g>\n                        <\/svg>\n                <\/a>\n            <\/li>\n            <li>\n                <a href=\"https:\/\/twitter.com\/meriiijaaan?s=21&#038;t=AwFIbg9ghHf56q6Z6iQ9NQ\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\n                    <svg viewBox=\"0 0 512 512\" class=\"scriptlesssocialsharing__icon twitter\" fill=\"currentColor\" height=\"1em\" width=\"1em\" aria-hidden=\"true\" focusable=\"false\" role=\"img\">\n                            <path d=\"M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z\"><\/path>\n                        <\/svg>\n                <\/a>\n            <\/li>\n            <li>\n                <a href=\"https:\/\/www.crunchbase.com\/person\/meri-sargsyan\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"currentColor\" width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" role=\"img\">\n                            <title>Crunchbase icon<\/title>\n                            <path d=\"M21.6 0H2.4A2.41 2.41 0 0 0 0 2.4v19.2A2.41 2.41 0 0 0 2.4 24h19.2a2.41 2.41 0 0 0 2.4-2.4V2.4A2.41 2.41 0 0 0 21.6 0zM7.045 14.465A2.11 2.11 0 0 0 9.84 13.42h1.66a3.69 3.69 0 1 1 0-1.75H9.84a2.11 2.11 0 1 0-2.795 2.795zm11.345.845a3.55 3.55 0 0 1-1.06.63 3.68 3.68 0 0 1-3.39-.38v.38h-1.51V5.37h1.5v4.11a3.74 3.74 0 0 1 1.8-.63H16a3.67 3.67 0 0 1 2.39 6.46zm-.223-2.766a2.104 2.104 0 1 1-4.207 0 2.104 2.104 0 0 1 4.207 0z\"\/>\n                        <\/svg>\n                <\/a>\n            <\/li><\/ul>\n            <\/div>\n            <div class=\"reviewer-info\"> \n                                                                            <span style=\"color:#6D7082;\" class=\"\">\n                Ostatnia aktualizacja \n                28 sierpnia, 2024 \n                <span class=\"post-info-separator\">| <\/span> \n                3 min czytania\n                <span>\n                |\n                <span class=\"language_switcher\">\n                    J\u0119zyk:  \n                    \n<div\n\t class=\"wpml-ls-statics-shortcode_actions wpml-ls wpml-ls-legacy-dropdown js-wpml-ls-legacy-dropdown\">\n\t<ul>\n\n\t\t<li tabindex=\"0\" class=\"wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-pl wpml-ls-current-language wpml-ls-item-legacy-dropdown\">\n\t\t\t<a href=\"#\" class=\"js-wpml-ls-item-toggle wpml-ls-item-toggle\">\n                <span class=\"wpml-ls-native\">Polski<\/span><\/a>\n\n\t\t\t<ul class=\"wpml-ls-sub-menu\">\n\t\t\t\t\n\t\t\t\t\t<li class=\"wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-en wpml-ls-first-item\">\n\t\t\t\t\t\t<a href=\"https:\/\/staging.devsdata.com\/\" class=\"wpml-ls-link\">\n                            <span class=\"wpml-ls-display\">Angielski<\/span><\/a>\n\t\t\t\t\t<\/li>\n\n\t\t\t\t\n\t\t\t\t\t<li class=\"wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-de\">\n\t\t\t\t\t\t<a href=\"https:\/\/staging.devsdata.com\/de\/\" class=\"wpml-ls-link\">\n                            <span class=\"wpml-ls-display\">Niemiecki<\/span><\/a>\n\t\t\t\t\t<\/li>\n\n\t\t\t\t\n\t\t\t\t\t<li class=\"wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-he\">\n\t\t\t\t\t\t<a href=\"https:\/\/staging.devsdata.com\/he\/\" class=\"wpml-ls-link\">\n                            <span class=\"wpml-ls-display\">Hebrajski<\/span><\/a>\n\t\t\t\t\t<\/li>\n\n\t\t\t\t\n\t\t\t\t\t<li class=\"wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-sv wpml-ls-last-item\">\n\t\t\t\t\t\t<a href=\"https:\/\/staging.devsdata.com\/sv\/\" class=\"wpml-ls-link\">\n                            <span class=\"wpml-ls-display\">Szwedzki<\/span><\/a>\n\t\t\t\t\t<\/li>\n\n\t\t\t\t\t\t\t<\/ul>\n\n\t\t<\/li>\n\n\t<\/ul>\n<\/div>\n\n                <\/span>\n            <\/span>\n            <\/span>\n                            <\/div>\n        \n        <\/div>\n    <\/div>\n    <div class=\"bookmark\">\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2020\/08\/bookmark-add-2-1.svg\" alt=\"bookmark\" title=\"\">\n    <\/div>\n    <div class=\"tags\"><a href=\"\/tag\/job-description-template\/\">Job Description Template<\/a><\/div>\n    <\/div>\n    <script type=\"module\" defer>\n      document.addEventListener(\"DOMContentLoaded\", function () {\n    \/\/ Get the current path from the URL\n    const path = window.location.pathname;\n\n    \/\/ Check if it starts with \/case-studies\n        if (path.startsWith(\"\/case-studies\")) {\n        const tagsElement = document.querySelector(\".tags\");\n        if (tagsElement) {\n        tagsElement.style.marginBottom = \"0\";\n        }\n        }\n        });\n        Array.from(document.getElementsByClassName(\"separator\")).forEach(el => {\n        el.textContent = \" > \";\n        document.addEventListener(\"DOMContentLoaded\", async () => {\n});\n            var languageList = document.querySelector(\"#language-list\");\n            var dropdownArrow = document.querySelector(\".dropdown-arrow\");\n\n            if(languageList){\n                languageList.addEventListener(\"click\", () => {\n                    languageList.classList.toggle(\"active\");\n                    document.querySelector(\"#arrow\").classList.toggle(\"rotated\");\n                })\n            }\n                \n            function handleViewportChange() {\n                if(languageList) {\n                    if (window.innerWidth < 1280) {\n                        if(!languageList.classList.contains(\"mobile\")) {\n                            languageList.classList.add(\"mobile\");\n                            dropdownArrow.classList.add(\"mobile\");\n                        }\n                    } else {\n                        if(languageList.classList.contains(\"mobile\")) {\n                            languageList.classList.remove(\"mobile\");\n                            dropdownArrow.classList.remove(\"mobile\");\n                        }\n                    }\n                };\n            };\n\n            \/\/ If there is a small\/no space between reviewer and author name, reviewer moves to the first row\n            function update_post_info_layout() {\n                const author_name_element = document.querySelector(\".author-name\");\n                const reviewer_element = document.querySelector(\".reviewer-info\");\n                const post_info_container = document.querySelector(\".post-info\");\n\n                if(reviewer_element) {\n                    let distance_next_to_author, reviewer_fits_next_to_author; \n                    if(post_info_container && author_name_element) {\n                        distance_next_to_author = post_info_container.getBoundingClientRect().right - author_name_element.getBoundingClientRect().right;\n                        reviewer_fits_next_to_author = distance_next_to_author - reviewer_element.clientWidth >= 15;\n                    }\n\n                    if(!reviewer_fits_next_to_author) {\n                        reviewer_element.classList.add(\"the_first_row\");\n                    } else if (reviewer_fits_next_to_author && reviewer_element.classList.contains(\"the_first_row\")) {\n                        reviewer_element.classList.remove(\"the_first_row\");\n                    }\n                }\n            }\n\n            handleViewportChange();\n            update_post_info_layout();\n             \n            window.addEventListener(\"resize\", () => {\n                handleViewportChange();\n                update_post_info_layout();\n            });\n        });\n    <\/script><span class=\"img-container\">\n    <picture><source media=\"(max-width: 500px)\" srcset=\"\/wp-content\/uploads\/2024\/09\/web_developer_job_description_template_header_small.webp\" type=\"image\/webp\"><source media=\"(max-width: 500px)\" srcset=\"\/wp-content\/uploads\/2024\/09\/web_developer_job_description_template_header_small.jpg\" type=\"image\/jpg\"><source srcset=\"\/wp-content\/uploads\/2024\/09\/web_developer_job_description_template_header.webp\" type=\"image\/webp\"><source srcset=\"\/wp-content\/uploads\/2024\/09\/web_developer_job_description_template_header.jpg\" type=\"image\/jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2024\/09\/web_developer_job_description_template_header.jpg\" width=\"640\" height=\"426\" alt=\"WEB Developer coding\" title=\"\">\n    <\/picture>\n<\/span><\/p>\n<h2>Szukasz osoby na stanowisko Frontend Developera?<\/h2>\n<p>Rozpoczynasz rekrutacj\u0119 na Frontend Developera, ale nie wiesz, jak zacz\u0105\u0107 ten projekt? Ten artyku\u0142 jest dla Ciebie. Przygotowali\u015bmy kr\u00f3tkie wprowadzenie, wst\u0119p og\u0142oszenia, spis wymaga\u0144, jakie powinien spe\u0142ni\u0107 odpowiedni kandydat oraz codzienne zadania Frontend Developera. \u015aci\u0105gawk\u0119 mo\u017cesz wykorzysta\u0107 w ca\u0142o\u015bci lub fragmentach albo zainspirowa\u0107 si\u0119 ni\u0105 do napisania w\u0142asnej oferty pracy.<\/p>\n<h2>Czym zajmuje si\u0119 Frontend Developer?<\/h2>\n<p>Frontend Developer to osoba zajmuj\u0105ca si\u0119 tworzeniem i rozwojem interfejsu u\u017cytkownika (UI) i dbaniem o do\u015bwiadczenie u\u017cytkownika (UX) oraz wszystkie aspekty prezentacyjne strony internetowej lub aplikacji. Fundamentem pracy programisty o tej specjalizacji jest przek\u0142adanie wizualizacji, projekt\u00f3w graficznych i koncepcji interfejsu na dzia\u0142aj\u0105cy kod, z kt\u00f3rym wchodz\u0105 w interakcj\u0119 ko\u0144cowi u\u017cytkownicy.<\/p>\n<h2>Opis stanowiska:<\/h2>\n<p>Do naszego rozwijaj\u0105cego si\u0119 zespo\u0142u poszukujemy specjalisty na stanowisko Frontend Developera. Tw\u00f3rz z nami innowacyjne i funkcjonalne projekty, responsywne aplikacje i przyci\u0105gaj\u0105ce oko strony web. Je\u015bli jeste\u015b pasjonatem u\u017cytkowych rozwi\u0105za\u0144, masz zmys\u0142 designerski i  zale\u017cy Ci na rozwoju \u2013 aplikuj ju\u017c dzi\u015b.<\/p>\n<h2>Nasze oczekiwania:<\/h2>\n<ul style=\"list-style: disc;\">\n<li>dobra znajomo\u015b\u0107 HTML, CSS i JavaScript,<\/li>\n<li>do\u015bwiadczenie w programowaniu frontend,<\/li>\n<li>znajomo\u015b\u0107 zasad tworzenia responsywnych stron internetowych (RWD),<\/li>\n<li>wiedza na temat framework\u00f3w frontend (np. React, Angular, Vue.js),<\/li>\n<li>do\u015bwiadczenie z narz\u0119dziami kontroli wersji (Git),<\/li>\n<li>znajomo\u015b\u0107 technik optymalizacji wydajno\u015bci stron web,<\/li>\n<li>umiej\u0119tno\u015b\u0107 pracy w zespole i dobra komunikacja,<\/li>\n<li>znajomo\u015b\u0107 j\u0119zyka angielskiego na poziomie komunikatywnym, <\/li>\n<li>wykszta\u0142cenie wy\u017csze (preferowane kierunki IT).<\/li>\n<\/ul>\n<p><\/p>\n\n            <div class=\"schedule-consultation middle-scheduler\">\n                <div class=\"block-contact\">\n                    <p>Masz potrzeby zwi\u0105zane z rekrutacj\u0105 IT?<\/p>\n                <\/div>\n                <div class=\"contact-us-show schedule-consultation-button\">\n                    \ud83c\udfa7\n                    <span>Zaplanuj spotkanie<\/span>\n                <\/div>\n            <\/div>\n    \n<h2>Twoje zadania:<\/h2>\n<ul style=\"list-style: disc;\">\n<li> tworzenie i rozwijanie interfejsu u\u017cytkownika (UI) aplikacji i stron internetowych,<\/li>\n<li>implementacja nowych funkcji i rozwi\u0105za\u0144 UI \/ UX,<\/li>\n<li>wsp\u00f3\u0142praca z zespo\u0142em projektowym, deweloperami backend,<\/li>\n<li>optymalizacja kodu pod wzgl\u0119dem wydajno\u015bci i pozycjonowania SEO,<\/li>\n<li>testowanie i debugowanie kodu,<\/li>\n<li>monitorowanie nowych trend\u00f3w technologii frontend, wdra\u017canie ich do projekt\u00f3w,\n<li>tworzenie dokumentacji technicznej,<\/li>\n<\/ul>\n<h2>Co oferujemy?<\/h2>\n<ul style=\"list-style: disc;\">\n<li> wyb\u00f3r formy zatrudnienia: umowa o prac\u0119, kontrakt B2B,<\/li>\n<li>opcja pracy zdalnej lub w modelu hybrydowym,<\/li>\n<li>elastyczne godziny pracy,<\/li>\n<li>dodatkowe premie za osi\u0105gane wyniki,<\/li>\n<li>mo\u017cliwo\u015b\u0107 rozwoju zawodowego oraz udzia\u0142 w szkoleniach,<\/li>\n<li>prywatna opieka medyczna,<\/li>\n<li>pakiet benefit\u00f3w (karta Multisport, platformy edukacyjne),<\/li>\n<li>sprz\u0119t niezb\u0119dny do pracy (laptop, telefon).<\/li>\n<\/ul>\n<p>\n        <section class=\"author_section_container\">\n            \n            <p class=\"contact_on_twitter\">\n                Masz pytania lub komentarze? Napisz do nas na \n                <a href=\"https:\/\/twitter.com\/Meriiijaaan\" target=\"_blank\" rel=\"nofollow noopener\">Twitterze\/X<\/a>.\n            <\/p> \n        \n            <div class=\"schedule-consultation\">\n                <div class=\"block-contact\">\n                    <p>Odkryj, w jaki spos\u00f3b rekrutacja IT mo\u017ce zaspokoi\u0107 Twoje potrzeby \n        w zakresie specjalist\u00f3w. Poznaj popularne regiony, takie jak Polska, Portugalia, Meksyk, Brazylia i inne. <\/p>\n                <\/div>\n                <div class=\"contact-us-show schedule-consultation-button\">\n                    \ud83d\uddd3\ufe0f\n                    <span>Um\u00f3w spotkanie online<\/span>\n                <\/div>\n            <\/div>\n            <div class=\"author_section\">\n                <div class=\"author_photo_container\">\n                    <picture>\n                        <source srcset=\"https:\/\/staging.devsdata.com\/wp-content\/uploads\/2024\/03\/meri-sargsyan-min.webp\" type=\"image\/webp\"> \n                        <source srcset=\"https:\/\/staging.devsdata.com\/wp-content\/uploads\/2024\/03\/meri-sargsyan-min.jpg\" type=\"image\/jpeg\">\n                        <img decoding=\"async\" class=\"avatar lazyload\" width=\"64\" height=\"64\" src=\"https:\/\/staging.devsdata.com\/wp-content\/uploads\/2024\/03\/meri-sargsyan-min.jpg\" alt=\"avatar\" loading=\"lazy\" title=\"Meri Sargsyan\" >\n                    <\/picture>\n                    <a class=\"read_full_bio\" href=\"\/author\/meri-sargsyan\/\" aria-label=\"Read more from Meri Sargsyan\">Przeczytaj pe\u0142n\u0105 biografi\u0119<\/a>\n                <\/div>\n                <div class=\"author_info_container\">\n                    <div class=\"author_info\" data-role=\"Autor\">\n                        <h4 id=\"author_title\">\n                            <a href=\"\/author\/meri-sargsyan\/\" aria-label=\"Read more from Meri Sargsyan\">Meri Sargsyan<\/a>\n                            <span class=\"position\">Copywriter and Marketer<\/span>\n                        <\/h4>\n                    <\/div>\n                <\/div>\n                <div class=\"author_about\">\n                    <span>With three years of experience in the industry, Meri has authored articles on a wide range of topics including crypto, NFTs, machine learning, and artificial intelligence. As an avid learner, Meri continuously seeks out new knowledge, enrolling in various courses regardless of her busy schedule.<\/span>\n                    <div class=\"links\">\n                        <ul class=\"author_socials\">\n            <li>\n                <a href=\"https:\/\/www.linkedin.com\/in\/meri-sargsyan-aa65131aa\/\" aria-label=\"Check out Meri Sargsyan on Linkedin\" target=\"_blank\" rel=\"nofollow noreferrer noopener\">\n                    <svg version=\"1.0\" fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 448 512\" aria-hidden=\"true\">\n                        <g id=\"linkedin5_layer\">\n                            <path d=\"M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z\" data-hs-event-238572417=\"1\"><\/path>\n                        <\/g>\n                    <\/svg>\n                <\/a>\n            <\/li>\n            <li>\n                <a href=\"https:\/\/twitter.com\/meriiijaaan?s=21&#038;t=AwFIbg9ghHf56q6Z6iQ9NQ\" aria-label=\"Check out Meri Sargsyan on Twitter\" target=\"_blank\" rel=\"nofollow noreferrer noopener\">\n                    <svg viewBox=\"0 0 512 512\" class=\"scriptlesssocialsharing__icon twitter\" fill=\"currentColor\" height=\"1em\" width=\"1em\" aria-hidden=\"true\" focusable=\"false\" role=\"img\">\n                        <path d=\"M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z\"><\/path>\n                    <\/svg>\n                <\/a>\n            <\/li>\n            <li>\n                <a href=\"https:\/\/www.crunchbase.com\/person\/meri-sargsyan\" aria-label=\"Check out Meri Sargsyan on Chrunchbase\" target=\"_blank\" rel=\"nofollow noreferrer noopener\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"currentColor\" width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" role=\"img\">\n                        <title>Crunchbase icon<\/title>\n                        <path d=\"M21.6 0H2.4A2.41 2.41 0 0 0 0 2.4v19.2A2.41 2.41 0 0 0 2.4 24h19.2a2.41 2.41 0 0 0 2.4-2.4V2.4A2.41 2.41 0 0 0 21.6 0zM7.045 14.465A2.11 2.11 0 0 0 9.84 13.42h1.66a3.69 3.69 0 1 1 0-1.75H9.84a2.11 2.11 0 1 0-2.795 2.795zm11.345.845a3.55 3.55 0 0 1-1.06.63 3.68 3.68 0 0 1-3.39-.38v.38h-1.51V5.37h1.5v4.11a3.74 3.74 0 0 1 1.8-.63H16a3.67 3.67 0 0 1 2.39 6.46zm-.223-2.766a2.104 2.104 0 1 1-4.207 0 2.104 2.104 0 0 1 4.207 0z\"\/>\n                    <\/svg>\n                <\/a>\n            <\/li>\n            <li>\n                <a href=\"mailto:meri.sargsyan@devsdata.com\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 512 512\"><path fill=\"currentColor\" d=\"M64 112c-8.8 0-16 7.2-16 16v22.1l172.5 141.6c20.7 17 50.4 17 71.1 0L464 150.1V128c0-8.8-7.2-16-16-16zM48 212.2V384c0 8.8 7.2 16 16 16h384c8.8 0 16-7.2 16-16V212.2L322 328.8c-38.4 31.5-93.7 31.5-132 0zM0 128c0-35.3 28.7-64 64-64h384c35.3 0 64 28.7 64 64v256c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64z\"\/><\/svg>\n                <\/a>\n            <\/li><\/ul>\n                        <a class=\"recruitment_link\" href=\"\/recruitment\/\" target=\"_blank\">\n                            Dowiedz sie wiecej o naszych ustugach rekrutacji i outsourcingu IT\n                            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"https:\/\/www.w3.org\/2000\/svg\">\n                                <path d=\"M5 12H19\" stroke=\"#000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\n                                <path d=\"M12 5L19 12L12 19\" stroke=\"#000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\n                            <\/svg>\n                        <\/a>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div class=\"tags-author \">\n                <a href=\"\/tag\/job-description-template\/\">Job Description Template<\/a>\n            <\/div>\n        <\/section>\n    <br \/>\n\n        <script>\n            document.addEventListener(\"DOMContentLoaded\", function() {\n                function debounceMessagePopUp(func, timeout = 300) {\n                    let timer;\n                    return (...args) => {\n                        clearTimeout(timer);\n                        timer = setTimeout(() => {\n                            func.apply(this, args);\n                        }, timeout);\n                    };\n                }\n\n                const toastPopUp = document.getElementById(\"copy-toast-meet-us\");\n                const copyEmailPopButtons = document.querySelectorAll(\".copy-email-button-meet-us\");\n\n                const debouncedMessagePopUp = debounceMessagePopUp(() => toastPopUp.classList.remove(\"toast-active\"), 2000);\n\n                for (let i = 0; i < copyEmailPopButtons.length; i++) {\n                    copyEmailPopButtons[i].addEventListener(\"click\", () => copyEmailFunctionPopUp(copyEmailPopButtons[i]));\n                }\n\n                function copyEmailFunctionPopUp(button) {\n                    navigator.clipboard.writeText(button.previousElementSibling.innerHTML);\n                    toastPopUp.querySelector(\"span\").innerHTML = \"Email copied\";\n                    toastPopUp.classList.add(\"toast-active\");\n                    debouncedMessagePopUp();\n                }\n        })\n<\/script>\n<br \/>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>Frontend Developer \u2013 opis, zadania i rola w firmie Szukasz osoby na stanowisko Frontend Developera? Rozpoczynasz rekrutacj\u0119 na Frontend Developera, ale nie wiesz, jak zacz\u0105\u0107 ten projekt? Ten artyku\u0142 jest dla Ciebie. Przygotowali\u015bmy kr\u00f3tkie wprowadzenie, wst\u0119p og\u0142oszenia, spis wymaga\u0144, jakie powinien spe\u0142ni\u0107 odpowiedni kandydat oraz codzienne zadania Frontend Developera. \u015aci\u0105gawk\u0119 mo\u017cesz wykorzysta\u0107 w ca\u0142o\u015bci lub [&hellip;]<\/p>\n","protected":false},"author":28,"featured_media":87516,"comment_status":"closed","ping_status":"open","sticky":false,"template":"blog_post.php","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[385],"class_list":["post-87629","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software-and-technology","tag-job-description-template"],"acf":[],"_links":{"self":[{"href":"https:\/\/staging.devsdata.com\/pl\/wp-json\/wp\/v2\/posts\/87629","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.devsdata.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/staging.devsdata.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/staging.devsdata.com\/pl\/wp-json\/wp\/v2\/users\/28"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.devsdata.com\/pl\/wp-json\/wp\/v2\/comments?post=87629"}],"version-history":[{"count":5,"href":"https:\/\/staging.devsdata.com\/pl\/wp-json\/wp\/v2\/posts\/87629\/revisions"}],"predecessor-version":[{"id":132375,"href":"https:\/\/staging.devsdata.com\/pl\/wp-json\/wp\/v2\/posts\/87629\/revisions\/132375"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/staging.devsdata.com\/pl\/wp-json\/wp\/v2\/media\/87516"}],"wp:attachment":[{"href":"https:\/\/staging.devsdata.com\/pl\/wp-json\/wp\/v2\/media?parent=87629"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staging.devsdata.com\/pl\/wp-json\/wp\/v2\/categories?post=87629"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staging.devsdata.com\/pl\/wp-json\/wp\/v2\/tags?post=87629"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}